Responsive Design

Responsive design

questions

• 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: http://thenextweb.com/
• 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

• http://lesscss.org/
• http://sass-lang.com/
• http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
• lets you write css in markup form
• compiled with js
• you can write media queries INSIDE declarations! (might be slower because it'll spit out media queries for each element delcaration)

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 http://drupalmotion.com/article/drupal-twig-templates

most mobile phones are webkit & iOS

reponsive testing

• http://quirktools.com/screenfly/
• firefox web developer tools has a repsonsive tester

working with designers

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

sliders on mobile/responsive

• swipe vs click next arrow
• fluid cycle! http://dev.bluebit.co.uk/mark/cycle/

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

[modernizr]

• feature-detection
• polyfill