Course: HTML5 for Mobile Devices

HTML5 for Mobile Devices

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this Course

We're living in a world of multiple screens. On a typical day you might view the screen on your mobile device, your tablet, your television and desktop computer at work. Designing content that works on all size screens and optimizing for mobile previously meant writing multiple versions of your application.

However, those days are over.

Today, with a good understanding of HTML you can write your code so that it works on every size screen while taking advantage of the unique environment afforded by mobile. This course will show you how.

It's no longer enough to write HTML5 that doesn't go everywhere customers do. Increasingly, your customers are more and more mobile and your HTML5 has to have the flexibility to be displayed on any screen and the features to take advantage of the mobile ecosystem.

This course is for you if you know a bit of HTML and are looking to expand your skills in to the mobile realm. If you're a web designer or developer trying to expand your work beyond the desktop you're going to truly benefit from this excellent course.

Who is the target audience?

  • Developers and Designers moving to mobile
  • Teachers and students
  • HTML authors who want to have great looking content on any size screen
  • Graphic designers
Basic knowledge
  • Successful students should know some fundamental HTML
What you will learn
  • Understand the dynamics of screen size
  • How to emulate screens with Google Chrome
  • How to use the viewport meta tag
  • How to hide and display content on mobile to optimize space
  • To make content adjustments for mobile screens
  • To make adjustments in multiple column layouts for small screens
  • How to use dynamic units to make font size adjustments
  • How to determine device location
  • How to display a map
  • How to get information about the local area from Google Places
  • How to use the jQuery Mobile page metaphor
  • How to create mobile buttons with jQuery Mobile
  • Using mobile icons with jQuery Mobile
  • Working with jQuery Mobile popups
  • Using toolbars in jQuery mobile
  • Applying navbars in jQuery Mobile
  • Installing the HammarJS library for gestures
  • Detecting tap and press gestures
  • Detecting swipe and pan gestures
  • Storing data on mobile devices
  • Storing session data on mobile
  • Using HTML5's localStorage object
  • Storing a Javascript object with state using serialization
  • Understanding the cache manifest
  • Adding the cache manifest to HTML
  • Managing the manifest for offline apps
Number of Lectures: 36
Total Duration: 02:18:11
Welcome to the Course
  • Welcome to the Course  

    Welcome to HTML5 for Mobile Devices. I'll tell you what's to come in this video.

  • About Your Instructor  

    Learn a little bit about me in this short video!

Welcome to Mobile
  • Chapter Preview  

    Welcome to this discussion of the mobile screen.

  • The Mobile Screen  

    You'll learn the different ways size can be measured on the mobile screen

  • Emulating the Mobile Screen with Google Chrome  

    Using Google Chrome, in this section you'll learn how to emulate mobile screens to review content on different sized devices.

  • Creating Your First Mobile HTML5 Site  

    In this section you'll create your first mobile HTML5 site. This is designed to be a quick start exercise-- during the reset of the course all of the techniques used will be explained.

HTML5 and CSS Coding For Mobile
  • HTML5 and CSS Coding For Mobile: Chapter Preview  

    I'm going to preview what's to come in this chapter which details HTML5 and CSS coding in the mobile, multi-screen environment.

  • The Viewport Meta Tag  

    You'll learn how to apply the viewport meta tag in the HTML5 document head which will adjust the virtual window through which your mobile content is displayed

  • Displaying and Hiding Content on Mobile  

    You'll learn how to create mobile only or desktop only content that will automatically display or hide according to device size.

  • Adjusting Content for Mobile Screens  

    Mark will demonstrate other types of common adjustments that are made in responsive design.

  • Adjusting Multiple Column Layout for Mobile  

    Multiple Column Layouts don't work well on mobile devices. You'll learn how to adjust content so it is streamlined for mobile presentation.

  • Using Dynamic Units  

    You'll learn how to use dynamic units in your CSS which are more mobile friendly.

  • Geolocation: Chapter Preview  
  • Determining Location with Javascript  

    You'll learn how to determine a Mobile Device's location using Javascript

  • Displaying a Map  

    Mark will show you how to use the Google Mapping API to display a map within your mobile application

  • Obtaining Local Information  

    You'll use the geolocation information from the Google Places API within a Mobile HTML5 page

jQuery Mobile Basics
  • jQuery Mobile Basics: Chapter Preview  

    jQuery Mobile is a library that can be very, very helpful to anyone using HTML5 in a mobile environment. in this section of the course we're going to learn how to use the library.

  • jQuery Mobile Page Metaphor  

    You'll learn how to apply the jQuery mobile page metaphor to create pages that look and act like mobile applications.

  • jQuery Mobile Buttons  

    Create mobile friendly buttons using jQuery

  • jQuery Mobile Icons  

    Mobile iconography helps communicate with users in a standard way. You'll learn about jQuery Mobile icons in this section

  • jQuery Mobile Popups  

    jQuery Mobile allows you to standardize popups so they look more like true mobile application popups

  • jQuery Mobile Toolbars  

    Enhance your headers and footers by embedding content directly in to them.

  • jQuery Mobile Navbars  

    Mobile navigation can be tricky. Using jQuery Mobile's navigation bars can make mobile navigation more usable

Working with Gestures
  • Working with Gestures: Chapter Preview  

    Gestures allow the user to interact with a mobile device through taps, swipes, slides and pans. You'll learn how to code these in this section.

  • The Hammer.js library  

    You'll be introduced to the Hammer.js library.

  • Taps and Presses  

    Learn how to work with tap and press gestures in Hammer.js with HTML5

  • Swipes and Pans  

    Learn how to work with swipes and pans gestures in Hammer.js with HTML5

  • Storage: Chapter Preview  
  • Storing Session Data  

    Sometimes in development you'll want to store data only for the length of the session. You'll learn how in this video.

  • Storing Local Storage Data  

    Local storage lets you (more or less) permanently store data on the user's device that is retrievable only by your app/domain.

  • Storing Object and State  

    By serializing objects you can store them in local storage and later retrieve them to reset application state.

Offline Apps
  • Offline Apps: Chapter Preview  
  • The Cache Manifest  

    You'll learn how to create a cache manifest to determine which files are available offline

  • Adding the Manifest to your HTML  

    You'll learn how to make the browser aware of the manifest in your HTML5 code

  • Managing the Manifest with Javascript  

    Javascript can be used to manage the maifest. You'll learn how in this video

  • Goodbye From Mark!  

    Goodbye and Thanks for taking the course. Don't forget to leave a review!

Reviews (0)