Responsive Design - Future Insights Live

Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.

Transcript

1. RESPONSIVE DESIGN
2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Range sara-cannon.com @saracannon
3. THE FUTURE OF MOBILE
4. THE FUTURE OF MOBILE THE WEB
5. 2015 IN THE YEAR 2015
6. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711 The total number of people using the web on mobile devices is set to surpass desktops by 2015.
7. DESKTOP MOBILE 2007 2015 2009 2013 2011
8. DESKTOP MOBILE 2007 2015 2009 2013 2011
9. THE MOBILE WEB
10. THE WEB
11. WHAT IS THE MOBILE WEB?
12. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
13. MOBILE SHOULD NEVER BE AN AFTERTHOUGHT
15. CONTENT
16. WHAT ABOUT SEPARATE MOBILE SITES?
17. m.facebook.com
18. WHAT ABOUT MOBILE APPS?
20. WHAT ABOUT MOBILE THEMES?
22. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. “ - ETHAN MARCOTTE alistapart.com/articles/responsive-web-design
23. RESPONSIVE WEB DESIGN
24. HicksDesign.co.uk
25. hicksdesign.co.uk
26. hicksdesign.co.uk
27. hicksdesign.co.uk
28. hicksdesign.co.uk
29. bostonglobe.com
30. bostonglobe.com
31. bostonglobe.com
32. bostonglobe.com
33. pelicanfly.co.uk
34. pelicanfly.co.uk
35. pelicanfly.co.uk
36. pelicanfly.co.uk
37. morehazards.com
38. morehazards.com
39. morehazards.com
40. morehazards.com
41. foodsense.is
42. foodsense.is
43. foodsense.is
44. foodsense.is
45. HOW DO WE BECOME RESPONSIVE?
46. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA 2. MEDIA QUERIES 3. TESTING / CRYING TWEAKING 4. ????? 5. PROFIT!
47. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA
48. FLEXIBLE GRIDS alistapart.com/articlesfluidgrids by Ethan Marcotte
49. GRID FRAMEWORKS lessframework.com columnal.com
50. GRID FRAMEWORKS cssgrid.net getskeleton.com
52. %
55. TARGET ÷ CONTEXT = RESULT 940 720 220
56. TARGET ÷ CONTEXT = RESULT 940 720 220 76.5957447% 23.40425535% 100%
59. FLEXIBLE MEDIA
61. - LANCE WILLETT, WORDPRESS.COM The toughest challenge in implementing the responsive bits was fluid media. “
62. MEDIA SOLUTIONS fitvidjs.com netmagazine.com/tutorials/ create-fluid-width-videos by Chris Coyier
63. MEDIA SOLUTIONS fittext.js flex.madebymufffin.com
64. FLEXIBLE IMAGES
65. MAX WIDTH: 100%
67. ADAPTIVE IMAGES
68. filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
69. adaptive-images.com
70. viewportindustries.com/blog/automatic-responsive-images-in-wordpress
71. 2G IS THE NEW DIAL-UP
72. DESKTOP MOBILE 2007 2015 2009 2013 2011
73. THE MOBILE WEB
74. CONNECTION SPEED IMAGE SIZE
75. CONNECTION SPEED IMAGE SIZE
76. image by Geoff Teehan
77. EVERYTHING IS A TRADEOFF
78. retina.js
79. NETWORK LINK CONDITIONER
80. 2. MEDIA QUERIES
82. CSS3-MEDIAQUERIES.JS code.google.com/p/css3-mediaqueries-js css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
83. MOBILE FIRST
84. 3. TESTING / CRYING / TWEAKING
90. LIMIT YOUR RESOURCES
91. EVERYTHING IS A TRADEOFF
92. RESOURCES
93. alistapart.com/articles/fluidgrids
94. alistapart.com/articles/responsive-web-design
95. alistapart.com/articles/responsive-web-design
96. unstoppablerobotninja.com/entry/fluid-images/
97. mediaqueri.es
98. smashingmagazine.com/2011/07/22/responsive-web-design- techniques-tools-and-design-strategies
99. zomigi.com/blog/essential-considerations-for-crafting- quality-media-queries/
100. palantir.net/blog/scalable-navigation-patterns- responsive-web-design
101. designshack.net/articles/css/sass-and-media-queries- what-you-can-and-cant-do
102. responsive.is
103. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
104. Our work is never over. “ - DAFT PUNK