Lessons Learned from Responsive Design

1,486 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,486
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lessons Learned from Responsive Design

  1. 1. Half Baked Cookies Lessons from Responsive Design http://www.flickr.com/photos/rhinoneal/5633001128
  2. 2. srcset and <picture> http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
  3. 3. ReSRC.it http://app.resrc.it/s=w1160,pd1/o=80/http://www.resrc.it/img/demo/preview.jpg
  4. 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. 5. 1. Preparing the Kitchen Everything starts with sales http://www.flickr.com/photos/opacity/4036543460/
  6. 6. Mostly Used at Home (84%)
  7. 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. 8. Top 20 by Operating System
  9. 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. 10. How Much Does it Cost? $500??? (about.com) http://www.flickr.com/photos/68751915@N05/6848823919
  11. 11. Included for Free Wordpress Templates
  12. 12. Client Expectations Car Mechanic http://www.flickr.com/photos/47557199@N03/4478980639
  13. 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. 14. Adoption
  15. 15. 100% http://www.flickr.com/photos/newhousedesign/3363986966 All Content Pixel Perfect All Browsers and Devices
  16. 16. Your Own Worst Enemy No Problem, Easy http://blog.schipul.com/wp-content/uploads/2010/08/Eloy-and-Matt-Mullenweg.jpg
  17. 17. Number of Responsive Sites? https://meanpath.com/f/QBYvnw (1,109,052 results via meanpath)
  18. 18. Sick of Boxy Design
  19. 19. Not Ready for the Responsibility http://www.flickr.com/photos/donnieray/8658314801/
  20. 20. 3. Missing a Few Steps http://www.flickr.com/photos/coda/417602912
  21. 21. Design Failure
  22. 22. http://www.1stwebdesigner.com/css/psd-to-html-artthatworks-skeleton-boilerplate/
  23. 23. Mobile First and New Processes Mostly Fluid Column Drop http://www.lukew.com/ff/entry.asp?1514 (Luke Wroblewski)
  24. 24. Frameworks http://designinstruct.com/roundups/html5-frameworks/
  25. 25. Screen Resolutions / Breakpoints Apple Screen Sizes Android Screen Sizes http://opensignal.com/reports/fragmentation.php the most common aspect ratio 5:3
  26. 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. 27. Relative Fonts and Units
  28. 28. Server Side Images
  29. 29. Landing Pages
  30. 30. Mobile Navigations
  31. 31. jQuery Mobile
  32. 32. Tables
  33. 33. Links and Buttons
  34. 34. 4. What About Some Damn Advice?
  35. 35. Pixel Perfect is Dead http://www.flickr.com/photos/53867930@N08/5115514047
  36. 36. Process Changes Happen All The Time
  37. 37. Scientifically Study Evolution http://www.flickr.com/photos/rizzato/3273263985
  38. 38. Make Decisions Reasonably
  39. 39. Common Sense Tells Me… http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
  40. 40. Schipul / Tendenci / @longstation Aaron Long Aaron Long along@schipul.com 281-497-6567 x515 www.schipul.com www.tendenci.com

×