Responsive Design for your Website

From DevSummit
Jump to navigation Jump to search

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.