HTML5 for Mobile Devices
- Life Time Access
- Certificate on Completion
- Access on Android and iOS App
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
- Successful students should know some fundamental HTML
- 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
- Understanding the cache manifest
- Adding the cache manifest to HTML
- Managing the manifest for offline apps
Welcome to this discussion of the mobile screen.
You'll learn the different ways size can be measured on the mobile screen
Using Google Chrome, in this section you'll learn how to emulate mobile screens to review content on different sized devices.
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.
I'm going to preview what's to come in this chapter which details HTML5 and CSS coding in the mobile, multi-screen environment.
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
You'll learn how to create mobile only or desktop only content that will automatically display or hide according to device size.
Mark will demonstrate other types of common adjustments that are made in responsive design.
Multiple Column Layouts don't work well on mobile devices. You'll learn how to adjust content so it is streamlined for mobile presentation.
You'll learn how to use dynamic units in your CSS which are more mobile friendly.
Geolocation: Chapter Preview
Mark will show you how to use the Google Mapping API to display a map within your mobile application
You'll use the geolocation information from the Google Places API within a Mobile HTML5 page
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.
You'll learn how to apply the jQuery mobile page metaphor to create pages that look and act like mobile applications.
Create mobile friendly buttons using jQuery
Mobile iconography helps communicate with users in a standard way. You'll learn about jQuery Mobile icons in this section
jQuery Mobile allows you to standardize popups so they look more like true mobile application popups
Enhance your headers and footers by embedding content directly in to them.
Mobile navigation can be tricky. Using jQuery Mobile's navigation bars can make mobile navigation more usable
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.
You'll be introduced to the Hammer.js library.
Learn how to work with tap and press gestures in Hammer.js with HTML5
Learn how to work with swipes and pans gestures in Hammer.js with HTML5
Storage: Chapter Preview
Sometimes in development you'll want to store data only for the length of the session. You'll learn how in this video.
Local storage lets you (more or less) permanently store data on the user's device that is retrievable only by your app/domain.
By serializing objects you can store them in local storage and later retrieve them to reset application state.
Offline Apps: Chapter Preview
You'll learn how to create a cache manifest to determine which files are available offline
You'll learn how to make the browser aware of the manifest in your HTML5 code
Goodbye and Thanks for taking the course. Don't forget to leave a review!