The document discusses mobile first responsive design, which involves designing interfaces for mobile devices first and then adapting the design for larger screens. It notes that while mobile first responsive design combines two effective approaches, few websites actually use this technique. The document references several studies that found most sites are not optimized for mobile or do not reduce content for smaller screens. It then states that the seminar will cover five key techniques for implementing a mobile first responsive design approach.

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/