Responsive Design for your Website

facilitated by John Emerson and Rabble Evan Henshaw-Plath

What

• Moving/scaling elements based on device width for to accomodate mobile devices.

Why

• An explosion in mobile device use, and not just iPads. Even with the desktop, there isn't just one screen resolution any more.

How

• Frameworks:
  • Bootstrap
  • Foundation
  • PureCSS
  • Golden Grid
  • Many popular content management systems have responsive themes/templates that can be modified

• Other tools:
  • Rafael and Snap for SVG
  • D3 for data vis/mapping
  • Flex Boxes? A CSS3 feature that allows you to define the page into grids
  • Noun Project for SVG icons
  • Mozilla developer demo for HTML5
  • Sass for CSS (use FireSass instead of Firebug)

Best Practices

• Mobile first
  • What is the most important part of the page? What's the core functionality/content?
  • Then add elements to that.
  • Design for phone width, then minimum and maximum widths (e.g. breaking at 360px wide) with media queries in the css.
  • Ems/Rems (Root ems) for fonts.

• Responsive images
  • No consensus yet, but...
  • One option: Use an image that's 2.5x resolution but low quality
  • Source set
  • So many different javascript libraries
  • Lazy loading images
  • Use SVG vector images as icon fonts (Fontella, Font Awesome)

• Potential issues
  • Load time/heaviness of frameworks
  • Support of older browsers

• Testing
  • Just drag the browser, use browser developer tools
  • Screenfly
  • Adobe Browser lab
  • For Macs: Xcode has a simulator

Worst practices

• Trying to do it yourself from scratch rather than using a framework.