1. Mobile First Responsive Design
UIE Seminar
Preview
Jason Grigsby • @grigs
http://www.flickr.com/photos/stuart-dootson/4024407198

2. So you already know
Responsive
Web Design

3. And you’ve probably heard of…
Mobile
First

4. So what’s the big deal?
Mobile First Responsive Web Design
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

5. Two great
tastes that
taste great
together.
http://www.flickr.com/photos/reway2007/6762976351/

6. But few
people are
doing it.
http://www.flickr.com/photos/kalexanderson/5421517469/

7. Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
9%
4% 25%
21%
4%
38%
Mobile is Larger Same Size
Less than 10% Savings 11 to 50% Savings
51% to 100% Savings Greater than 100% Savings
http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

8. Guy Podjarny repeated the experiment a year later.
347 sites from mediaqueri.es tested
3%
11%
86%
Same size A bit smaller Much smaller
A bit smaller = 50%-90% the size
Much smaller = <50% the size
http://www.slideshare.net/guypod/performance-implications-of-mobile-design

9. http://www.flickr.com/photos/beautyredefined/2643858323/

10. http://www.flickr.com/photos/puuikibeach/3654517679

11. http://www.flickr.com/photos/drachmann/327122302/

12. http://www.flickr.com/photos/68502717@N08/7155138495/

13. In this seminar you’ll learn
5
key techniques
for mobile first
responsive design

17. http://www.flickr.com/photos/eole/3215868087/

18. Thank You!
Special thanks to all of the Flickr users
sharing under creative commons.
Jason Grigsby • @grigs
http://www.flickr.com/photos/sualk61/4083223760/