Responsive Web Design Recap

Responsive Web Design has been around for a while. How about a recap?

Transcript

2. RESPONSIVE WEB DESIGN RECAP
3. WHAT
7. Design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
8. WHY
9. There are more devices connected than people in the world today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
10. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets More people have access to mobile than to running water and toothbrushes.
11. Get your content ready to go anywhere because it’s going to go everywhere. - http://bradfrost.com/blog/web/for-a-future-friendly-web/
12. IT’S ABOUT CONTENT-FIRST
13. http://commons.wikimedia.org/wiki/File:Content_is_like_water.png
14. IT’S ABOUT BEING FUTURE FRIENDLY
15. https://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422
16. IT’S ABOUT CONSISTENCY
17. http://opensignal.com/reports/fragmentation.php (2012)
19. SO WHAT CAN WE DO?
20. DO NOTHING OPTION 1
25. BUILD AN APP OPTION 2
26. http://xkcd.com/1174/
27. http://appvswebsite.com/
28. DO BOTH (IF YOU CAN)
29. BUILD A SEPARATE MOBILE SITE OPTION 3
33. GO RESPONSIVE OPTION 4
34. HOW
35. 4 GIFS TO WARM UP http://blog.froont.com/9-basic-principles-of-responsive-web-design/
40. 3 STEPS RECIPE
41. 1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
42. ADAPTIVE VS FLUID EXAMPLE
43. MAKING IT FLUID TARGET / CONTEXT = RESULT
45. 300px
46. 300px 940px
47. 300px 940px 300/940 = 0.319148936
48. 300px 940px 300/940 = 0.319148936 31.9148936%
49. 1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
50. LET MEDIA TAKE MORE AVAILABLE SPACE
51. 1. FLUID WIDTH 2. FLEXIBLE MEDIA 3. MEDIA QUERIES
52. Print Monochrome Width Height Aspect Ratio Orientation And more…
53. Print Monochrome Width Height Aspect Ratio Orientation And more… @media (min-width: 600px) { <something awesome here> }
54. LOAD ME NOT YET NOT YET
55. LOAD ME NOT YET NOT YET
56. LOAD ME NOT YET NOT YET
57. LOAD ME LOAD ME LOAD ME
58. Know your Breakpoints
59. Breakpoints. Break. Points. Points at which things break in your design. http://www.markboulton.co.uk/journal/theinbetween “
60. Start small.
61. Increase the width.
62. Identify problems.
63. Add a breakpoint and fix it.
64. Keep going!
65. The importance of MOBILE FIRST
69. IGNORING MOBILE FIRST WILL PROBABLY BITE YOU LATER
70. ITS OK TO DESIGN IT IN THE BROWSER
71. UX Design Code
72. The web’s greatest strength, is often seen as a limitation, as a defect. http://alistapart.com/article/dao
73. It is the nature of the web to be flexible. http://alistapart.com/article/dao
74. It should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. http://alistapart.com/article/dao
75. The journey begins by letting go of control, and becoming flexible. http://alistapart.com/article/dao