Device landscape

• variety of screens
• context of use

Mobile First

• start with mobile version as a default
• focus on smaller screens and the most important features

Responsive Web Design

Responsive Layouts

• percentage based
• screen width breakpoints with media queries
• flexible within resolution ranges
• linearised default

Problems

• IE<9

Responsive Images

images adapting to container width

img { max-width: 100%; }

small images as default, replaced with JS

<img src="mobile-image.jpg"
     data-full-src="desktop-image.jpg">

Problems:

• client side JS dependency
• server side detection
• big images sent to small screen devices - wasted bandwith and CPU

Solutions discussed

<picture alt="angry pirate">
   <source src=hires.png media="min-width:800px">
   <source src=midres.png media="network-speed:3g">
   <source src=lores.png>
   <!-- fallback for browsers without support -->
   <img src=midres.png alt="angry pirate">
</picture>

• new and capable devices
• less capable devices, prepare for mobile

Tools

• http://www.responsinator.com
• http://www.benjaminkeen.com/misc/bricss/
• 320andup

Takeaways

• think in flexible units % and em's
• default to lightweight mobile version and small images
• start small and enhance for wider screens
• keep layout fluid within the ranges