Breaking Dev: Responsible & Responsive

by Luke Wroblewski September 15, 2011

In his Responsible & Responsive presentation at Breaking Development in Nashville TN, Scott Jehl provided a lot of detailed information about what it takes to deploy a responsive Web design at scale by walking through what he learned on the Boston Globe redesign project. Here’s my notes from his talk:

  • The Boston Globe redesign applied a complete responsive design at scale. It works across a wide range of device capabilities and enabled people to save articles for offline reading.
  • Responsive Design is a natural subset of progressive enhancement. Progressive Enhancement aims to make Web sites work everywhere but especially well in modern browsers. The philosophy of progressive enhancement can be illustrated by an escalator can never break –it can only becomes stairs.
  • Areas of responsibility to work through in a responsive design: accessibility, usability, sustainability, and performance.
  • We often find experiences online that are either delightful or inclusive. A happy medium is hard to achieve. A layered approach can be rich without being exclusive.

Should you use Responsive Design?

  • When the content needs to be the same across all experiences –more shared than different.
  • The team’s skill set matters as many problems are still not figured out.
  • Time-up front may be longer for a responsive Web design but hopefully it is a more forward compatible.
  • You need to have interest in solving a problem in this manner –it’s a challenge.

Responsive Baseline

  • Use a mobile/content first approach to decide what really needs to be on each page.
  • Develop this baseline with mobile first images (performance optimized images) and a mobile friendly (older, more basic devices) layout.
  • The baseline experience us likely to need a basic CSS file, a basic Javascript file, and a qualified enhanced CSS file
  • The baseline CSS file uses safe defaults: tweaks to browser typography, horizontal rules, text-alignment, display: block/inline, and no floats. Mostly allow the browsers default to do the work by using very light styles.
  • A basic.js file was loaded early to set things up. It consisted of ResponsiveImages.js, Resond.js, Modernizr / extensions / HTML5 Shim, and the Boston Globe JS Framework
  • Responsive Images sets a cookie based on screen size not browser window size. It uses to the potential of the devices to load what is necessary by bringing in the right sized images for the screen size of a device. The default is mobile sized images.
  • Respond.js brings CSS3 media support to browsers that don’t have it. Polyfills older browsers like Internet Explorer and versions of FireFox.
  • Modernizer, HTML5 Shim, etc do the same for other standards without wide support.
  • matchMedia.js is how media queries are detected before they are added using Respond.js
  • The assets you get are based on screen size, features of the site, and the capabilities of the device. jQuery, Javascript files, and CSS are dynamically loaded.
  • Found that Blackberry5 though it has a good browser, was to slow to run Javascript so it is excluded from loading the enhanced Javascript files.

Enhanced Experience

  • We want to enhance things but also not screw it up for everyone else.
  • The qualifier for CSS and Javascript enhancements was media query support and/or Internet Explorer (6-8). Use “media=only all” to target the devices that understand media queries.
  • In the head of HTML link to basic stylesheet, then use Internet Explorer conditional code to give IE and media query supported browsers the enhanced stylesheets.
  • Screen width was used for asset loading and window width was used for design decisions.
  • Each device will need a different combination of CSS and Javascript files. A server-side solution can concatenate these files and minify/gzip them to send to the device (assuming they are not in cache).
  • Each style sheet has code that applies to everything followed by media query blocks to make adjustments to layout at specific resolution breakpoints.
  • Inheritance prevention: if you have a breakpoint that doesn’t apply you can use max-width to constrain things.
  • display: table was really helpful in developing flexible navigation.
  • Now that scaling with pixels is better supported across all browsers, the use of ems for fonts is fading but there are advantages to using ems for fonts. For example: support for IE6 font resizing, easy font size changing, and reuse of the same code in modules.
  • Decided that devices under 500px don’t get enhanced typefaces –not worth the performance impact. The effect needed could be achieved through native typefaces.
  • Responsive design is usually associated with visual design but interaction elements can behave responsively as well. Different devices can have touch events, mouse events, or both. You need to bind to both and see what arrives first.
  • The Saved articles section uses app cache to store articles offline. But you need to refresh the page in order to apply progressive enhancement to the content saved for offline reading.
  • You can use Ajax to load additional content. Modular pages could be enhanced with combined requests.
  • Advertising is a huge problem in responsive layouts: they block content loading, potentially overtake a page, they have contracts based on pixel dimensions, they are filled with document.write, etc
  • To solve the ad problem, dynamically layer in ads using iframes. This allows the page to load progressively.
  • We have the tools to build sites that are rich without being exclusive.