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.
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.
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
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.
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!
LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.
With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.
With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.
The company is based outside of Hartford, Connecticut.