Speakers: Lyza Danger Gardner @lyzadanger, Jason Grigsby @grigs

Um. I guess that I was supposed to bring a laptop…

Signs of the apocalypse are everywhere.

More mobile phones then people on planet.

Winners of the previous technology cycle will not be the winners in the next round.

– need to think about the number of http requests. Concat JS and CSS files. Use CSS sprites.

Responsive web design

result = target/context
Context means the parent element.

Flexible images – need to remove height & width. Bit of a trade off.

CSS media queries. And media features.

@media type and (test)

Look at flexbox for menu navigation… Only supported a bit.

If it wasn’t important enough to put into the limited mobile – does it really need to on the desktop.

Use em everywhere (px/16) so that padding sizes scale as well.

Problem: in practice, nobody is doing mobile first design…

Display none != mobile optimized.

Better to add maps via js after testing resolution.

IE 8 and below will get mobile, unless you use conditional tags. Or, use JavaScript polyfill: respond.js

To keep background images from loading:
– use display none on parent of div with image
– media queries that don’t overlap (can’t apply at the same time)
– img tag?
— Can put images in no script. Will not be downloaded by any browser
— Use a build service like sencha.
— Update image tag! Picture tag with media capability and source set. Now in draft of HTML5.

BlazeIO to test on real devices.

Adobe shadow – desktop pushes to devices for testing.

The web routes around problems – including design.