Responsivedesign slides2-120507173812-phpapp01

9,917 views
9,853 views

Published on

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?

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

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

No notes for slide

Responsivedesign slides2-120507173812-phpapp01

  1. 1. RESPONSIVE DESIGN
  2. 2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Rangesara-cannon.com @saracannon
  3. 3. THE FUTURE OF MOBILE
  4. 4. THE FUTURE OF MOBILE THE WEB
  5. 5. IN THE YEAR 2015 2015
  6. 6. The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711
  7. 7. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  8. 8. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  9. 9. THE MOBILE WEB
  10. 10. THE WEB
  11. 11. WHAT IS THE MOBILE WEB?
  12. 12. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  13. 13. MOBILE SHOULD NEVER BE ANAFTERTHOUGHT
  14. 14. CONTENT
  15. 15. WHAT ABOUT SEPARATE MOBILE SITES?
  16. 16. m.facebook.com
  17. 17. WHAT ABOUT MOBILE APPS?
  18. 18. WHAT ABOUT MOBILE THEMES?
  19. 19. “ 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
  20. 20. RESPONSIVE WEB DESIGN
  21. 21. HicksDesign.co.uk
  22. 22. hicksdesign.co.uk
  23. 23. hicksdesign.co.uk
  24. 24. hicksdesign.co.uk
  25. 25. hicksdesign.co.uk
  26. 26. bostonglobe.com
  27. 27. bostonglobe.com
  28. 28. bostonglobe.com
  29. 29. bostonglobe.com
  30. 30. pelicanfly.co.uk
  31. 31. pelicanfly.co.uk
  32. 32. pelicanfly.co.uk
  33. 33. pelicanfly.co.uk
  34. 34. morehazards.com
  35. 35. morehazards.com
  36. 36. morehazards.com
  37. 37. morehazards.com
  38. 38. foodsense.is
  39. 39. foodsense.is
  40. 40. foodsense.is
  41. 41. foodsense.is
  42. 42. HOW DO WE BECOME RESPONSIVE?
  43. 43. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA 2. MEDIA QUERIES 3. TESTING / CRYING TWEAKING 4. ????? 5. PROFIT!
  44. 44. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA
  45. 45. FLEXIBLE GRIDSalistapart.com/articlesfluidgrids by Ethan Marcotte
  46. 46. GRID FRAMEWORKSlessframework.com columnal.com
  47. 47. GRID FRAMEWORKScssgrid.net getskeleton.com
  48. 48. %
  49. 49. TARGET ÷ CONTEXT = RESULT 940 720 220
  50. 50. TARGET ÷ CONTEXT = RESULT 940 100% 720 220 76.5957447% 23.40425535%
  51. 51. FLEXIBLE MEDIA
  52. 52. “ The toughest challenge in implementing the responsive bits was fluid media. - LANCE WILLETT, WORDPRESS.COM
  53. 53. MEDIA SOLUTIONSnetmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
  54. 54. MEDIA SOLUTIONSflex.madebymufffin.com fittext.js
  55. 55. FLEXIBLE IMAGES
  56. 56. MAX WIDTH: 100%
  57. 57. ADAPTIVE IMAGES
  58. 58. filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
  59. 59. adaptive-images.com
  60. 60. viewportindustries.com/blog/automatic-responsive-images-in-wordpress
  61. 61. 2G IS THE NEW DIAL-UP
  62. 62. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  63. 63. THE MOBILE WEB
  64. 64. CONNECTION SPEEDIMAGE SIZE
  65. 65. CONNECTION SPEEDIMAGE SIZE
  66. 66. image by Geoff Teehan
  67. 67. EVERYTHING IS A TRADEOFF
  68. 68. retina.js
  69. 69. NETWORK LINK CONDITIONER
  70. 70. 2. MEDIA QUERIES
  71. 71. CSS3-MEDIAQUERIES.JScode.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
  72. 72. MOBILE FIRST
  73. 73. 3. TESTING / CRYING / TWEAKING
  74. 74. LIMIT YOUR RESOURCES
  75. 75. EVERYTHING IS A TRADEOFF
  76. 76. RESOURCES
  77. 77. alistapart.com/articles/fluidgrids
  78. 78. alistapart.com/articles/responsive-web-design
  79. 79. alistapart.com/articles/responsive-web-design
  80. 80. unstoppablerobotninja.com/entry/fluid-images/
  81. 81. mediaqueri.es
  82. 82. smashingmagazine.com/2011/07/22/responsive-web-design- techniques-tools-and-design-strategies
  83. 83. zomigi.com/blog/essential-considerations-for-crafting- quality-media-queries/
  84. 84. palantir.net/blog/scalable-navigation-patterns- responsive-web-design
  85. 85. designshack.net/articles/css/sass-and-media-queries- what-you-can-and-cant-do
  86. 86. responsive.is
  87. 87. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  88. 88. “ Our work is never over. - DAFT PUNK

×