Responsive Design

From DevSummit
Jump to: navigation, search

Responsive design

  • retrofitting
  • apps vs mobile
  • css for phones
  • what needs to work? what can we scrap in the design?
  • how soon?
  • wireframing for responsive?
  • tools!

starting from scratch

  • start from mobile and more up
  • the less you do, the more prepared you are for fanciness
  • example of pieces hiding as you scale down:
  • what is the most important thing for someone visiting this site to see?
  • try not to totally hide things on mobile, but hide it behind a button
  • you don't have hover states

what is a media query?

@media {media} and ({condition:{value}){

.thing{ width:100%; }


less and sass preprocessors

use javascipt to detect screen sizes, and only load css files that pertain to that size (and listen for viewport resize and update as well)

start with mobile! work up from there!

  • text default: 16px
  • navigation menu:
    • make all links 100%
    • add menu at the top of the nav list (hide on non-mobile)
    • display:none; the containing div for nav elements, show on click of span
  • jquery mobile menu: takes nav and sticks it in a select menu

start with small squished screen, drag width out until it breaks or you can build more out, fix the code, keep dragging out and repeat

drupal themes have

most mobile phones are webkit & iOS

reponsive testing

working with designers

  • hand off breakpoints to design around
  • do as much with css as possible

sliders on mobile/responsive

lowsrc! img attribute "if i remember my microsoft frontpage correctly..."

css3 box sizing:box-sizing: border-box; - makes block-level elements behave nicely!!!!

adaptive_images drupal module - resizing images dynamically


  • feature-detection
  • polyfill