x

Confirm Download

Simultaneous file downloading works best in FireFox, Chrome, and Safari browsers. Please keep this window open until all downloads are complete. Some customers prefer using file download managers for Chrome or Firefox to better manage large and multiple file downloads.

Cancel Download

Responsive Mobile Architecture

      • A Tale of 3 Cities  (Free)

        There are three paths you can choose for mobile app development: Mobile HTML5, Native development, and Hybrid development.
      • 00:09:06

      • Native or HTML5?

        Browser plugins (Flash, Silverlight, Java Applets) are all but extinct. One company after the next is embracing HTML5-based, cross-platform, cross-browser solutions instead.
      • 00:20:47

      • The Pros and Cons of Native Mobile Development

        Are the gold rush days of native mobile app development over? They appear to be globally... except for the US. But there are still the occasional compelling reasons to pursue native mobile development.
      • 00:18:48

      • Hybrid Solutions

        Many of the "native" mobile apps you use regularly are, in fact, web apps in native clothing.
      • 00:06:31

      • Screen != Window != Viewport

        As a desktop web developer, you're intimately familiar with screen and window dimensions. But mobile developers spend much of their time managing the viewport.
      • 00:06:15

      • Screen Size != Screen Resolution

        It's easy to get overwhelmed with the wide variety of physical screen sizes (measured in inches or cm) on mobile devices out in the wild. Thankfully, focusing on screen resolutions brings the panic level back down to a manageable level.
      • 00:08:46

      • Viewport Meta Options

        The path to a mobile-friendly web site begins with one critical line of HTML -- the viewport meta element.
      • 00:05:09

      • Media Queries and Orientation

        CSS3 brings declarative media queries to the party for mobile-specific styling, including support for Portrait and Landscape orientation styling rules.
      • 00:07:33

      • What is RWD?

        The days of www.* and m.* websites are over. The mantra of modern, 21st century web development needs to be, "One Web, Many Screens". Not "One Size Fits All", but rather "One Website for All Devices".
      • 00:03:05

      • Examples in the Wild

        There are plenty of good examples of RWD-based web sites out there in production. Sadly, there are plenty of "nice try" mobile web sites as well.
      • 00:05:52

      • Fixed vs. Relative

        Fixed is broken. RWD requires you to think of dimensions in relative terms like percentages and ems.
      • 00:16:49

      • Twitter Bootstrap

        Twitter Bootstrap makes it easy to put up mobile-friendly web sites with minimal effort. Oh, and it makes your desktop web sites look clean and professional as well.
      • 00:05:42

      • HTML5 Input Types and Virtual Keyboards

        The new HTML5 semantic form element types (email, tel, url) are helpful for desktop web sites, but crucial for a good user experience on mobile devices. If you've ever wondered what you need to do to pop up the virtual keyboard with the magic "dot-com" button, look no further.
      • 00:16:38

      • Input Element Modifiers

        Input helpers do things like turn off pesky autocomplete and autocapitalize in input fields.
      • 00:04:48

      • Stupid Link Tricks

        Stupid link tricks give you the ability to tap to dial a phone number, tap to send a text message, tap to send an email message -- all from a web page.
      • 00:06:07

      • iOS Mobile Web Apps

        Simple steps to make your mobile HTML5 app look like a native app on iOS, including Home Screen icons and launching without the browser chrome.
      • 00:12:31

      • Android Mobile Web Apps

        Simple steps to make your mobile HTML5 app look like a native app on Android, including Home Screen icons and launching without the browser chrome.
      • 00:04:31

      • Going Offline

        Browsers are now fully aware if they are online or offline. This allows your application to react and behave appropriately given the state of network connectivity.
      • 00:07:58

      • Local and Session Storage

        The Web Storage API gives you a couple of durable hashmaps with different life-cycles - SessionStorage is garbage collected when you close down the browser, while LocalStorage hangs around until you or the user cleans up.
      • 00:12:11

      • Web SQL

        Many browsers (but, importantly, not all of them) offer you a traditional relational database for long-term persistence in the browser.
      • 00:05:19

      • IndexedDB

        IndexedDB is the newest browser-based persistence solution. If you are used to working with NoSQL solutions like MongoDB or CouchDB, you'll feel right at home in IndexedDB.
      • 00:11:43

      • Far-Future Expires Headers

        Pre-HTML5, the best way to ensure that your visitors had a speedy "primed cache" experience was to put Far-Future Expires Headers in the HTTP response.
      • 00:17:55

      • AppCache

        HTML5 Application Cache gives you -- the developer -- a far more fined-grained declarative approach to cache management. We are now in the early days of an Offline First shift in mentality.
      • 00:13:19

      • Service Workers, Course Closing

        Service Workers are showing early promise, but there's plenty of work left to do before this technology is a viable mainstream solution.
      • 00:05:54

Responsive Mobile Architecture

  • Publisher: O'Reilly Media
  • Released: November 2015
  • Run time: 4 hours 8 minutes

One website for all devices is the mantra of modern 21st century web development. In this video, web design guru Scott Davis offers a concise and practical look at the tools and design approach you need to ensure that your mobile website will look great on any device.

  • Review three basic approaches to mobile app development: HTML 5, Native, and Hybrid
  • Learn why responsive mobile sites display correctly on any device
  • Discover proven techniques that solve the mobile-website-multiple-viewport problem
  • Learn how declarative media queries in CSS3 simplify mobile orientation styling
  • Discover Twitter Bootstrap, an easy method for creating mobile-friendly websites
  • Learn HTML5 tricks for popping up a virtual keyboard, tapping a link to dial a phone, and more
  • Make your mobile HTML5 app look like a native iOS or Android app in airplane mode
  • Learn local storage techniques that make your mobile app run best when it goes offline
  • Explore best practices for application caching in mobile apps

Scott Davis is the founder of ThirstyHead.com, a training and consulting company that that specializes in HTML5, mobile development, SmartTV development, NoSQL, Groovy, and Grails.