More Related Content Similar to Responsive Design & Mobile First (20) More from Luke Brooker (8) Responsive Design & Mobile First7. “Today, anything that’s fixed and unresponsive isn’t
web design, it’s something else. If you don’t embrace
the inherent fluidity of the web, you’re not a web
designer, you’re something else.
Web design is responsive design, Responsive Web
Design is web design, done right.”
Andy Clarke
8. We need to move from
prescribed design to
responsive design.
10. The growth of the
mobile web has out
paced the desktop web
8x
14. In the next 4 years
mobile Internet usage
will increase
by a factor of 26
18. Add to this - 170,000
iPhones bought a day
and 300,000
android devices
activated a day
23. OR...
A flexible grid (with flexible images)
that incorporates media queries to create
a responsive, adaptive layout.
Ethan Marcotte
37. 2. Flexible Images
Issue #2: Windows Image Resizing
Ethan Marcottes Fix
http://unstoppablerobotninja.com/entry/fluid-images
41. 3. Media Queries
Issue #1: Browser Compatability
No IE 8,7,6
No Safari 2
No Firefox 1,2
So..
http://code.google.com/p/css3-mediaqueries-js
42. 3. Media Queries
Issue #2: Mobile Resizing
<meta name=”viewport”
content”width=device-width:
initial-scale=1.0”>
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n