Presented by Clarissa Peterson.

Frameworks

Foundation

  • Foundation: made by Zurb
  • Responsive grids are based on flexible columns. Foundation is based on a 12-column grid.
  • ZURB Soapbox: example site based on Foundation
  • Inculdes class names that can be used to show or hide content for particular media queries (e.g. show-for-xlarge, show-for-portrait).

Prototyping

  • Designer/Developer virtuous cycle/feedback loop is key to the responsive design workflow. Prototyping in the browser serves as a moving wireframe. Frameworks make prototyping really easy.
  • Make sure all clients/stakeholders understand what’s happening in a responsive design.

Other Frameworks

Questions

  • Should the UX Designer learn the framework to build their own prototypes? Sure! For most frameworks, a basic understanding of HTML is all that’s necessary.
  • Is hiding elements in a responsive design a good idea for a production site? Frameworks are great for prototyping, but include too much for production sites.

Navigation Patterns

Toggle Navigation

  • Example: Starbucks: Ye olde Hamburger Icon
  • Toggle max-height between 0 and some value to show/hide navigation by swapping class names.

Left Nav Flyout

Questions

  • Media Queries using ems vs. pxs? We’ve started using ems instead of pxs because a pixel isn’t really a pixel anymore. ems can be more consistent across devices as pixel density changes.
  • Using different navigation patterns for different devices? Make two different navigations in the markup and show/hide based on media query/screen size. This isn’t advisable since it’s duplicative markup. The ideal is to have one piece of HTML and use CSS to make the navigation look and behave differently.

Preprocessors

Responsive Images

  • The biggest problem facing responsive design is bandwidth-wasting images.
  • max-width: 100% on img, object, and video
  • The <picture> element proposal is akin to audio and video in structure.
  • Otter Surfboards uses different crops of the same picture for mobile vs. large screen. Uses media queries to do art direction (slightly controversial).
  • Picturefill uses <divs> and data-* attributes and conditional comments to supply images to various browsers.
  • Adaptive Images is a server-side technique using Apache and PHP. Stores screen size in a cookie and passes that back and forth between the browser and the server.

Questions

  • Adaptive Images is limited in that it fixes you with a particular browser size. Not much of an issue though since web developers are the only people who resize browsers.
  • Responsive background images or sprites? It can be done! No good solution for background images, though.

Responsive Data Tables

Polyfills

  • Code that is added to replicate behavior that doesn’t work in all browsers.
  • Modernizr detects HTML5 and CSS3 features and adds classes to the html element.
  • Customized Modernizr builds are the way to go. Add only the tests you need!
  • HTML5 Cross-Browser Polyfills
  • Respond.js

Questions

  • If you were a browser maker, what would you do to make responsive technology better? Support for older browsers is a real problem. Browser makers, Microsoft in particular, could do a better job of encouraging users to upgrade. Consistent support across browsers would be super helpful, too!