Responsibly Responsive

Responsive design is one of the hottest web trends happening, but are we doing it right? We should consider a few problems before we instantly grace this exciting new development technique. Things like performance, readability, and the ability to discern data can all be hindered without a validated and responsible view of responsive designing.

Transcript

1. Responsibly Responsive Tony Coconate
2. @tonycoco
3. http://www.tonycoconate.com
5. I did not plan this.
6. Background
7. • Scientist • Who let the Dawgs out? • Corporate America • Startuplandia
9. * Disclaimer * Disclaimer may be disclaimed too.
10. I tinker.
11. Who cares, Tony. What have you done?
12. Like, this large.
13. What is responsive design?
17. How does it work?
18. • Media Queries • Graceful Degradation • Progressive Enhancement
19. Cascading Style Sheets
20. CSS
21. .button { // fallback flat color background-color: #ED9C47; // mega-hottnezz gradient background-image: gradient(linear, top left, bottom right, from(#EFB67B), to(#DB7306)); }
22. Media Queries
23. @media all and (min-width:500px) { … } @media screen and (max-width:500px) { … }
24. 320px 480px 600px 768px 900px 1200px http://cssmediaqueries.com/target
25. 320px 480px 600px 768px 900px 1200px iPhone (Portrait) iPhone (Landscape) iPad Desktop http://cssmediaqueries.com/target
26. Graceful Degradation
28. Progressive Enhancement
30. Time.
32. Ummm. Yeah. What have you been doing all day, Tony?
33. I have the mobile side ready to rock, just makin’ it look good on Chrome now.
34. That dude definitely uses Chrome. (Someone told him it is super fast, so, yeah.)
35. Where does it work?
36. • http://caniuse.com/css-mediaqueries
38. • https://github.com/scottjehl/Respond • https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
39. Performance
40. • Page weight • JavaScript up the kazoo • Making “old” browsers feel older • HTTP calls
42. Images
43. img { max-width: 100%; }
44. <img src="mobile.jpg" data-fullsrc="desktop.jpg">
45. So, back to performance...
46. 0 225 450 675 900 320px 480px 768px 1200px Page Size Load Time
47. That graph was made up, but it’s close.
48. • Big site, big waterfall. • Small site, big waterfall.
49. People think the phone one should load faster.
50. ...just because the device is smaller.
51. DOM nodes are the same?
52. Did you even use them?
54. Let’s talk about money.
56. * Conversion Rates Apply
57. • When smartphone customers are forced to wait an extra second, conversion rates drop by an additional 3.5%. • By the three second mark, 57% of users will have left your site. http://venturebeat.com/2013/04/01/make-the-mobile-web-better-by-not-making-these-4-responsive-design-mistakes
58. Readability
59. • Content choreography • Keeping designers happy • Keeping content writers happy
60. Keep everyone happy.
61. Keep yourself happy too.
62. Dance.
64. http://theoatmeal.com/comics/design_hell
65. Content aka “The King”
67. Implementation
68. Bootstrappin’ it?
69. Demo
70. That looked easy, Tony.
71. Forms + Navigation = $#@%
72. This means war.
73. var cssFile = ‘small.css’; if (window.innerWidth > 640) cssFile = ‘large.css’; if (window.innerWidth >= 320) cssFile = ‘medium.css’; document.write(‘<link type=”stylesheet” rel=”stylesheet” href=”’ + cssFile + ’”/>’);
74. Who is using it?
75. • http://www.bostonglobe.com • http://www.microsoft.com • http://www.chicagotribune.com • Twitter Bootstrap • ZURB’s Foundation • Hopefully, you.
76. ...much more.
77. • http://www.starbucks.com • http://www.about.com • http://www.latimes.com • http://www.worldwildlife.org • http://www.time.com • http://www.sony.com • http://stumbleupon.com • http://smashingmagazine.com • http://www.tonycoconate.com • http://www.greygoose.com • http://www.iwantedrock.com • http://www.bbc.co.uk • http://www.disney.com • http://thenextweb.com • http://harvard.edu • http://www.nd.edu
78. http://mediaqueri.es
79. Alternatives?
80. • More markup • More CSS • Another SITE?!?
81. Thanks!
83. @tonycoco http://www.tonycoconate.com