Workshop: Mobile HTML5 for Smartphones and Tablets

Workshop: Mobile HTML5 for Smartphones and Tablets

In 2014, over half a billion people accessed Facebook solely through their mobile phone. Google estimates that over a billion people worldwide use mobile devices as their exclusive gateway to the Internet. So, remind me again what your company's mobile web strategy is?

If you "learned the web" in 1996 and haven't updated your chops, a lot has changed since then. Join Scott Davis (author/presenter of the O'Reilly video "Exploring the Architecture of the MEAN Stack") for a pragmatic, commonsense approach to making sure that your website looks good on ALL of the devices your clients use (and they almost certainly use more than one).

Modern web developers eschew the "m.yourcompany.com" / "www.yourcompany.com" false dichotomy. Instead, they take a Responsive Web Design approach that allows their website to flow like water through all of the devices in their clients' hands -- from smartphone to tablet to laptop to desktop to smartTV and beyond. HTML5 doesn't care if it's running on a device with 101 keys and a mouse or a glass touchscreen, and neither should you.

There are certainly web frameworks out there that abstract away all of the "mobiley" stuff so that you don't have to worry about it, and we'll certainly address them. But this course peels back the layers of abstraction so that you can see the core HTML5, CSS3, and JavaScript capabilities in action. And wouldn't you prefer to have solid foundational knowledge of the Mobile Web rather than a superficial API experience?

Course outline:

A Tale of 3 Cities
In this section, you'll learn a bit about the market share of iOS and Android devices. You'll also explore the history of these platforms, going back to 2007 and the time before native apps and app stores. Back then (just like today), smartphones were first class citizens of the web with first class web support.

But most importantly, you'll learn about web apps, native apps, and hybrid apps. Each approach is valid in most circumstances, but you'll learn the specific use cases that play to the strengths of one approach over the others.

Viewports and Orientation
In desktop web development, you often focus on screen size, window size, and tabs. In mobile development, it is all about the viewport. This section shows you how to actively manage the viewport (and what happens when you don't), as well as demonstrating how to design for both portrait and landscape orientation.

You'll use the element to provide hints to the browser for viewport behavior, as well as desktop icons, splash screens, and status bar translucency. You'll also learn about CSS3 Media Queries to manage Responsive Web Design and device orientation.

Forms and Links
HTML5 provides several new form inputs and attributes. While these inputs are interesting on the desktop, they are especially interesting on mobile devices.

In this section, we'll discuss how to best leverage the different virtual keyboards that are displayed per input type. We'll also discuss the new CSS3 pseudo-classes that come into play during client-side form validation. Finally, you'll learn a number of "stupid link tricks" that exploit capabilities unique to mobile devices -- phone numbers, SMS messages, mapping, and more.

Touch and Gesture Events
Mouse events are mainstays of desktop web development. On devices where we use our fingers instead of mice, there are two related APIs that we need to become familiar with: the Touch and Gesture APIs.

In this section, we learn how to implement drag and drop on a mobile device, as well as explore the nuances of pinching, twisting, and stretching.

Geolocation
Whether through GPS chips, location-enhanced wifi support, or cell tower triangulation, HTML5 and mobile devices offer geolocation support.

In this section, we'll cover the basics of geolocation and how to add "where" to your mobile web app. You'll use the navigator.geolocation object to get your current position, including longitude, latitude, altitude, and accuracy. You can also continuously poll using navigator.geolocation.watchPosition and clearWatch.

Application Cache
Before HTML5, we could only pass server-side caching hints to the browser. With the advent of the HTML5 application cache, we can now explicitly itemize web resources (HTML, CSS, JS, images, etc.) to be cached. Furthermore, we can specify resources that require network access, and fallback resources for use when the network is unavailable.

In this section, you'll create a manifest file for HTML5 caching. This is the first step towards enabling airplane-mode mobile web applications, and we'll explore the possibilities.

Local and Session Storage
Cookies used to be our best (only?) technology solution for providing state to a fundamentally stateless protocol like HTTP. With HTML5, we now have two more choices -- local and session storage.

In this section, we'll explore two of the NoSQL solutions (schema-less key/value storage) baked right into the mobile browser.

WebSQL and IndexedDB
Local and Session storage are great solutions for small, simple datasets. But as the volume of data increases, so does the need for features like queries and transactions. WebSQL has had historically strong support on mobile devices, but with the release of iOS 8, you now have a full-fledged NoSQL alternative with IndexedDB.

In this section, we'll explore the traditional WebSQL approach to storing relatively large volumes of data directly in the browser. We'll also explore the more modern NoSQL approach to storing and indexing JSON documents in IndexedDB.