This presentation was given at the Houston Interactive Marketing Association's IS conference. It covers the challenges faced with Responsive Web Design and some advice for your current Mobile Web Design work.

1. Half Baked Cookies
Lessons from Responsive Design
http://www.flickr.com/photos/rhinoneal/5633001128

2. srcset and <picture>
http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

3. ReSRC.it
http://app.resrc.it/s=w1160,pd1/o=80/http://www.resrc.it/img/demo/preview.jpg

4. Cooking up Responsive
1. Preparing the Kitchen
2. Mix in the Clients
3. The Bakers are Missing a Few Steps
4. Advice
http://www.flickr.com/photos/79638854@N07/9556425950

5. 1. Preparing the Kitchen
Everything starts with sales
http://www.flickr.com/photos/opacity/4036543460/

6. Mostly Used at Home (84%)

7. Mobile Traffic
In a study of ~70 clients:
27% average NPO Mobile traffic Q1 2013
20% average All Mobile Traffic Q1 2013
67% increase Q1 2012 to Q1 2013
Some clients at 50% mobile traffic

8. Top 20 by Operating System

9. Google Says So
1. Google recommends webmasters follow the industry
best practice of using responsive web design, namely
serving the same HTML for all devices and using only CSS
media queries to decide the rendering on each device.
2. If responsive design is not the best option to serve your
users, Google supports having your content being served
using different HTML. The different HTML can be on the
same URL or on different URLs, and Googlebot can
handle both setups appropriately if you follow our
recommendations.

10. How Much Does it Cost?
$500??? (about.com)
http://www.flickr.com/photos/68751915@N05/6848823919

11. Included for Free
Wordpress Templates

12. Client Expectations
Car Mechanic
http://www.flickr.com/photos/47557199@N03/4478980639

13. 2. Mix In The Clients
"Look, good
against remotes
is one thing.
Good against the
living? That's
something else.”
―Han Solo
http://www.flickr.com/photos/26346563@
N04/7941041666

14. Adoption

15. 100%
http://www.flickr.com/photos/newhousedesign/3363986966
All Content
Pixel Perfect
All Browsers
and Devices

16. Your Own Worst Enemy
No Problem, Easy
http://blog.schipul.com/wp-content/uploads/2010/08/Eloy-and-Matt-Mullenweg.jpg

17. Number of Responsive Sites?
https://meanpath.com/f/QBYvnw (1,109,052 results via meanpath)

18. Sick of Boxy Design

19. Not Ready for the Responsibility
http://www.flickr.com/photos/donnieray/8658314801/

20. 3. Missing a Few Steps
http://www.flickr.com/photos/coda/417602912

21. Design Failure

22. http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/

23. Mobile First and New Processes
Mostly Fluid
Column Drop
http://www.lukew.com/ff/entry.asp?1514
(Luke Wroblewski)

24. Frameworks
http://designinstruct.com/roundups/html5-frameworks/

25. Screen Resolutions / Breakpoints
Apple Screen Sizes
Android Screen Sizes
http://opensignal.com/reports/fragmentation.php
the most common aspect ratio 5:3

26. Flexbox
The main idea behind the flex layout is to give the container the
ability to alter its items' width/height (and order) to best fill the
available space. http://css-tricks.com/snippets/css/a-guide-to-
flexbox/

27. Relative Fonts and Units

28. Server Side Images

29. Landing Pages

30. Mobile Navigations

31. jQuery Mobile

32. Tables

33. Links and Buttons

34. 4. What About Some Damn Advice?

35. Pixel Perfect is Dead
http://www.flickr.com/photos/53867930@N08/5115514047

36. Process Changes Happen All The Time

37. Scientifically Study Evolution
http://www.flickr.com/photos/rizzato/3273263985

38. Make Decisions Reasonably

39. Common Sense Tells Me…
http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/

40. Schipul / Tendenci / @longstation
Aaron Long
Aaron Long
along@schipul.com
281-497-6567 x515
www.schipul.com
www.tendenci.com