Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSIVE DESIGN
SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL ...
THE FUTURE OF MOBILE
THE FUTURE OF MOBILE THE WEB
IN THE YEAR 2015 2015
The total number ofpeople using the web onmobile devices is set tosurpass desktops by 2015. INTERNATIO...
2007 2009 2011 2013 2015 DESKTOP MOBILE
2007 2009 2011 2013 2015 DESKTOP MOBILE
THE MOBILE WEB
THE WEB
WHAT IS THE MOBILE WEB?
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
MOBILE SHOULD NEVER BE ANAFTERTHOUGHT
CONTENT
WHAT ABOUT SEPARATE MOBILE SITES?
m.facebook.com
WHAT ABOUT MOBILE APPS?
WHAT ABOUT MOBILE THEMES?
“ Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat ...
RESPONSIVE WEB DESIGN
HicksDesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
bostonglobe.com
bostonglobe.com
bostonglobe.com
bostonglobe.com
pelicanfly.co.uk
pelicanfly.co.uk
pelicanfly.co.uk
pelicanfly.co.uk
morehazards.com
morehazards.com
morehazards.com
morehazards.com
foodsense.is
foodsense.is
foodsense.is
foodsense.is
HOW DO WE BECOME RESPONSIVE?
1. ADAPTIVE GRIDS, IMAGES, & MEDIA 2. MEDIA QUERIES 3. TESTING / CRYING TWEAKING 4. ????? ...
1. ADAPTIVE GRIDS, IMAGES, & MEDIA
FLEXIBLE GRIDSalistapart.com/articlesfluidgrids by Ethan Marcotte
GRID FRAMEWORKSlessframework.com columnal.com
GRID FRAMEWORKScssgrid.net getskeleton.com
%
TARGET ÷ CONTEXT = RESULT 940 720 220
TARGET ÷ CONTEXT = RESULT 940 100% 720 220 76.5957447% 23.40425535%
FLEXIBLE MEDIA
“ The toughest challenge in implementing the responsive bits was fluid media. - LANCE WILLETT, WORDP...
MEDIA SOLUTIONSnetmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
MEDIA SOLUTIONSflex.madebymufffin.com fittext.js
FLEXIBLE IMAGES
MAX WIDTH: 100%
ADAPTIVE IMAGES
filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
adaptive-images.com
viewportindustries.com/blog/automatic-responsive-images-in-wordpress
2G IS THE NEW DIAL-UP
2007 2009 2011 2013 2015 DESKTOP MOBILE
THE MOBILE WEB
CONNECTION SPEEDIMAGE SIZE
CONNECTION SPEEDIMAGE SIZE
image by Geoff Teehan
EVERYTHING IS A TRADEOFF
retina.js
NETWORK LINK CONDITIONER
2. MEDIA QUERIES
CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-js css3-mediaqueries.js is a JavaScript library to make IE 5+, Fir...
MOBILE FIRST
3. TESTING / CRYING / TWEAKING
LIMIT YOUR RESOURCES
EVERYTHING IS A TRADEOFF
RESOURCES
alistapart.com/articles/fluidgrids
alistapart.com/articles/responsive-web-design
alistapart.com/articles/responsive-web-design
unstoppablerobotninja.com/entry/fluid-images/
mediaqueri.es
smashingmagazine.com/2011/07/22/responsive-web-design- techniques-tools-and-design-strategies
zomigi.com/blog/essential-considerations-for-crafting- quality-media-queries/
palantir.net/blog/scalable-navigation-patterns- responsive-web-design
designshack.net/articles/css/sass-and-media-queries- what-you-can-and-cant-do
responsive.is
ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
“ Our work is never over. - DAFT PUNK
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in …5
×

Responsive Design

145,800 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? 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.

Published in: Technology, Design
no profile picture user
Show More
Show More

Responsive Design

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

×