Download as PDF, PPTX
Uploaded bySara Cannon
Responsive Design
The document discusses the importance of responsive web design in adapting to the increasing use of mobile devices, projected to surpass desktops by 2015. It highlights the challenges and techniques involved in creating responsive layouts, including adaptive grids, media queries, and flexible media. The overall emphasis is on treating all web devices as facets of the same user experience rather than as separate entities.
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=640&height=640&fit=bounds)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Responsive Design
- 1.
- 2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Range sara-cannon.com @saracannon
- 3. THE FUTURE OFMOBILE
- 4. THE FUTURE OFMOBILE THE WEB
- 5. IN THE YEAR 2015 2015
- 6. The total numberof people using the web on mobile devices is set to surpass desktops by 2015. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711
- 7. 2007 2009 2011 2013 2015 DESKTOP MOBILE
- 8. 2007 2009 2011 2013 2015 DESKTOP MOBILE
- 9.
- 10.
- 11. WHAT IS THEMOBILE WEB?
- 12. ILLUSTRATION INSPIRED BYBRAD FROST http://sar.ac/IJF7Rf
- 13. MOBILE SHOULD NEVERBE AN AFTERTHOUGHT
- 15.
- 16. WHAT ABOUT SEPARATEMOBILE SITES?
- 17.
- 18. WHAT ABOUT MOBILEAPPS?
- 20. WHAT ABOUT MOBILETHEMES?
- 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.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. HOW DO WEBECOME 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 100% 720 220 76.5957447% 23.40425535%
- 59.
- 61. “ The toughest challenge in implementing the responsive bits was fluid media. - LANCE WILLETT, WORDPRESS.COM
- 62. MEDIA SOLUTIONS netmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
- 63. MEDIA SOLUTIONS flex.madebymufffin.com fittext.js
- 64.
- 65.
- 67.
- 68. filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
- 69.
- 70.
- 71. 2G IS THENEW DIAL-UP
- 72. 2007 2009 2011 2013 2015 DESKTOP MOBILE
- 73.
- 74.
- 75.
- 76. image by GeoffTeehan
- 77. EVERYTHING IS A TRADEOFF
- 78.
- 79.
- 80.
- 82. CSS3-MEDIAQUERIES.JS code.google.com/p/css3-mediaqueries-js css3-mediaqueries.js isa JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
- 83.
- 84. 3. TESTING /CRYING / TWEAKING
- 90.
- 91. EVERYTHING IS A TRADEOFF
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 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.
- 103. ILLUSTRATION INSPIRED BYBRAD FROST http://sar.ac/IJF7Rf
- 104. “ Our workis never over. - DAFT PUNK