UI17: Building Adaptive Designs Now

by Luke Wroblewski November 6, 2012

In his Building Adaptive Designs Now talk at User Interface 17 in Boston, MA Aaron Gustafson outlined the importance of progressive enhancement in Web development. Here's my notes from his talk:

  • It used to be easier to manage browsers when there were just a few of them on the desktop. Today we not only have to deal with a wide range of desktop browsers but mobile devices, tablets, and more. Even for the average site things have changed a lot over four years: browser share, operating systems, screen resolutions, and more.
  • Mobile is a new opportunity. We need consider it a first order screen for getting things done.
  • While it may seem like we have consistency in mobile devices because the biggest operating systems use Webkit based browsers, there’s actually a lot of variance in these WebKit implementations. We also need to consider embedded views inside native applications and different zoom levels in browsers.
  • So how do we cope with all this device diversity?

Progressive Enhancement

  • Progressive enhancement is building Web sites without technical restrictions. It allows Web sites to work even when things fail.
  • Site used to be built with graceful degradation, which is a superset of progressive enhancement. Progressive enhancement solutions gracefully degrade. But not all graceful degradation solutions progressively enhance.
  • Graceful degradation: focus on the modern browsers and then fix any issues with older browsers when you get to the end of the testing cycle. This assumed older browsers were a bad experience and backfilled them.
  • Progressive enhancement is an escalator that becomes stairs when it fails. Graceful degradation is building a lift then having to add stairs.
  • A dynamic Web page can never break. It can only become a Web page. This is progressive enhancement at work.
  • Focus on semantically marked up content and build outward from there. Enhance with presentation and interaction. This serves accessibility really well.
  • Special needs can be contextual. We all have different needs at different times.
  • Progressive enhancement isn’t about browsers. It’s about a philosophy of starting with core content or actions and building up based on device capabilities. Browsers come and go, specs change, and technologies rise and fall. We need a more sustainable way of building Web sites.

Enhancing Web Sites

  • Mobile first & Responsive Web design fit squarely with progressive enhancement. The lowest common denominator devices we need to account for today are simple mobile devices. We can start there and enhance upward using techniques like responsive Web design.
  • Start with content, add semantics, design, interactivity, and layer in accessibility enhancements. That corresponds to text/http, HTML, CSS, Javascript, and ARIA. You can apply progressive enhancement to each of these technical components.
  • Browsers are told to ignore what they don’t understand. CSS and HTML elements not understood by a browser don’t block the rest of a page from loading.
  • Mobile first media queries allow you to start with the simplest screens first and focus on the most important content, then enhance as screen size increases.
  • You can not only adjust layout but also load in additional content as well. So smaller devices don’t have to download additional bytes that can eat precious bandwidth.
  • Lazy loading is a way to deliver the essential content first, then layer in nice to have or supplementary content after an initial page load.
  • Javascript can also be used to adapt markup into different user interface elements when it’s there or simply link to pages when it is not.