SlideShare a Scribd company logo

Responsive design presentation

•
•
Mario Noble
Mario Noble

This document discusses the concepts and implementation of responsive design. It defines responsive design as a technique that uses fluid grids, media queries and flexible images to automatically adapt a website to different screen sizes. It notes that responsive design is a strategy, not a cure for all problems, and provides examples of how to implement responsive design through fluid layouts, modular approaches and responsive images. The document also covers some pros and cons of responsive design such as increased accessibility across devices but also additional time required for implementation.

Related slideshows

Scoopcamp 2012 - News from the dpa-newslab
Scoopcamp 2012 - News from the dpa-newslabScoopcamp 2012 - News from the dpa-newslab
Scoopcamp 2012 - News from the dpa-newslab
 
There's More than 1 Way to Skin a WordPress Theme - Lachlan MacPherson - Word...
There's More than 1 Way to Skin a WordPress Theme - Lachlan MacPherson - Word...There's More than 1 Way to Skin a WordPress Theme - Lachlan MacPherson - Word...
There's More than 1 Way to Skin a WordPress Theme - Lachlan MacPherson - Word...
 
Strategy for a successful WordPress project
Strategy for a successful WordPress projectStrategy for a successful WordPress project
Strategy for a successful WordPress project
 
1 of 58
RESPONSIVE DESIGN Basic concepts and implementation Tuesday, July 24, 12
WHO ARE YOU? Mario Noble Tuesday, July 24, 12
WHAT IS RESPONSIVE DESIGN? • Responsive design is a technique that uses fluid grids, media queries and flexible images. •A strategy/tool. • Not a cure for all ills. • http://www.abookapart.com/ products/responsive-web- design Tuesday, July 24, 12
I WANT TO SEE SOME EXAMPLES. Tuesday, July 24, 12
WHY SHOULD I DO IT? Tuesday, July 24, 12
FOR THE MONEY, OF COURSE! Tuesday, July 24, 12
CHANGING EXPECTATIONS. Tuesday, July 24, 12
FRUSTRATION Tuesday, July 24, 12
VARIOUS CONTEXTS Tuesday, July 24, 12
NOT JUST MOBILE Tuesday, July 24, 12
THE GOLDEN MEAN Tuesday, July 24, 12
PROGRESSIVE ENHANCEMENT Tuesday, July 24, 12
BACK TO THE FUTURE Tuesday, July 24, 12
PURE FLUID VS. RESPONSIVE Tuesday, July 24, 12
• Fluid stretches but doesn’t deliberately arrange. • Adaptive is break point based • Responsive is range based. • There is overlap. Semantics overlap. • Both are an extension of Universal Design. Tuesday, July 24, 12
HOW DO YOU DO IT? Tuesday, July 24, 12
DESIGN Tuesday, July 24, 12
FOCUS, FOCUS, FOCUS Tuesday, July 24, 12
MODULAR APPROACH Tuesday, July 24, 12
STYLE TILES Tuesday, July 24, 12
CODING aka the Boring Part, depending on who you are... Tuesday, July 24, 12
TARGET ÷ CONTEXT = RESULT NOOOOO!!!!!! MATHHHHHH!!!!!! Tuesday, July 24, 12
900 ÷ 960 = 0.9375 becomes 93.75% Tuesday, July 24, 12
#MAIN {   MARGIN: 0 AUTO;   WIDTH: 93.75%; /* 900 / 960 */ } Tuesday, July 24, 12
650 ÷ 900 = 0.72222222 72.222222% Tuesday, July 24, 12
215 ÷ 900 = 0.238888 or 23.8888% Tuesday, July 24, 12
#main-content {   float: left;   width: 72.222222%; /* 650 / 900 */ } #sidebar {   float: right;   width: 23.8888%; /* 215 / 900 */ } Tuesday, July 24, 12
Ouch! Do I need to Calculate all this all the time? Tuesday, July 24, 12
<link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Tuesday, July 24, 12
This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.org Tuesday, July 24, 12
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> @media screen and (max-device-width: 480px) { .column { float: none; } } Tuesday, July 24, 12
media only screen and (min-width:321px) and (max-width:481px) { .two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin- left: 0; margin-right: 0;} .region-sidebar-first, .region-sidebar-second, .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;} .region-sidebar-second {width: 100%;} .content-inner,.region-sidebar-first,.region-sidebar-second {float: none;} .region-sidebar-first, .region-sidebar-second {clear: both;} .container {width: 100%;} } /* Tablet portrait one-col-vert */ @media only screen and (min-width:481px) and (max-width:800px) { .two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin- left: 0; margin-right: 0;} .region-sidebar-first {width: 100%;} .region-sidebar-second {width: 0%;} .one-sidebar .sidebar {width: 100%;} .region-sidebar-first, .region-sidebar-second {overflow: hidden; margin-top: 20px;} .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;} .container {width: 90%;} } Tuesday, July 24, 12
Scalable Images using max-width: 100%; and various other solutions like filament Tuesday, July 24, 12
Beware IE and explicit dimensions Embrace Modernizr/Respond.js Tuesday, July 24, 12
USEFUL TOOLS Tuesday, July 24, 12
Cateorizr http://www.brettjankord.com/2012/01/16/categorizr-a- modern-device-detection-script/ Slider Fixes http://www.woothemes.com/flexslider/ Video Fixes http://www.tjkdesign.com/articles/how-to-resize-videos-on- the-fly.asp Table Approach to tables https://github.com/thepeg/MediaTable Tuesday, July 24, 12
USEFUL RESPONSIVE FRAMEWORKS Tuesday, July 24, 12
HTML5 Boilerplate / Modernizr / Twitter Bootstrap http://twitter.github.com/bootstrap/ Foundation http://foundation.zurb.com/ 320andup http://stuffandnonsense.co.uk/projects/320andup/ Responsive - Wordpress http://wordpress.org/extend/themes/responsive Tuesday, July 24, 12
HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS? Tuesday, July 24, 12
PROS Tuesday, July 24, 12
MONEY + TIME Tuesday, July 24, 12
MORE PEOPLE + PLACES Tuesday, July 24, 12
• More adaptable. • Design once, deploy everywhere • Maintains aspect ratios • Saves time in long run • More future proof • Less time and money over the long haul Tuesday, July 24, 12
CONS Tuesday, July 24, 12
TIME + MONEY Tuesday, July 24, 12
ADAPTING EXISTING SITES Tuesday, July 24, 12
• Can be difficult to port over to existing complex sites • Need to breakout of the one-off mindset • Not necessarily supported cross browser • Serving up media can be challenging. • Potential bandwidth issues. • May be more time up front (particularly at first) • Addressing non-responsive plug-ins • Navigation • Tables and forms • Sidebars • Selling stakeholders on the process • Advertising Tuesday, July 24, 12
RUBBER PEG Tuesday, July 24, 12
ALTERNATIVES Tuesday, July 24, 12
• Fat Finger Design • User Agent Sniffing • Javascript sniffing • Design for lowest common denominator • Fluid design Tuesday, July 24, 12
TO RESPOND OR NOT? Tuesday, July 24, 12
HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE TO MAKE A SITE RESPONSIVE? Tuesday, July 24, 12
IS IT WORTH IT? • It all depends on your time, money and energy. • Is your orientation primarily desktop or mobile? • Most of all your clients/organization and customers/visitors. • It all depends on the complexity of your site. • Advertisers • Third party plug ins Tuesday, July 24, 12
MARIO’S TRICKS AND OPINIONS Tuesday, July 24, 12
TAKE IT WITH A GRAIN OF... Tuesday, July 24, 12
TRICKS • Start with mobile first if doing from scratch • Small usable Fat Finger changes for pre existing complex sites • Fix worst offending problems anyway that you can in different contexts. • Display tables inline or reformat as spans or divs Tuesday, July 24, 12
OPINIONS • Don’t leave things out. • Give the visitor more actual control. • Allow to choose the context or task • Load media on demand (images, slideshows, galleries, videos) Tuesday, July 24, 12
TOWARDS A NEW MINDSET • Pay now or pay later. • Responsive design may not work for you. But you will need to find something that does. • Responsive design is less a technique than a mindset. • Instead of pixel perfect, priority perfect. • Eyes on the prize - Usability and Engagement. Tuesday, July 24, 12

More Related Content

Responsive design presentation

  • 1. RESPONSIVE DESIGN Basic concepts and implementation Tuesday, July 24, 12
  • 2. WHO ARE YOU? Mario Noble Tuesday, July 24, 12
  • 3. WHAT IS RESPONSIVE DESIGN? • Responsive design is a technique that uses fluid grids, media queries and flexible images. •A strategy/tool. • Not a cure for all ills. • http://www.abookapart.com/ products/responsive-web- design Tuesday, July 24, 12
  • 4. I WANT TO SEE SOME EXAMPLES. Tuesday, July 24, 12
  • 5. WHY SHOULD I DO IT? Tuesday, July 24, 12
  • 6. FOR THE MONEY, OF COURSE! Tuesday, July 24, 12
  • 13. BACK TO THE FUTURE Tuesday, July 24, 12
  • 14. PURE FLUID VS. RESPONSIVE Tuesday, July 24, 12
  • 15. • Fluid stretches but doesn’t deliberately arrange. • Adaptive is break point based • Responsive is range based. • There is overlap. Semantics overlap. • Both are an extension of Universal Design. Tuesday, July 24, 12
  • 16. HOW DO YOU DO IT? Tuesday, July 24, 12
  • 21. CODING aka the Boring Part, depending on who you are... Tuesday, July 24, 12
  • 22. TARGET ÷ CONTEXT = RESULT NOOOOO!!!!!! MATHHHHHH!!!!!! Tuesday, July 24, 12
  • 23. 900 ÷ 960 = 0.9375 becomes 93.75% Tuesday, July 24, 12
  • 24. #MAIN {   MARGIN: 0 AUTO;   WIDTH: 93.75%; /* 900 / 960 */ } Tuesday, July 24, 12
  • 25. 650 ÷ 900 = 0.72222222 72.222222% Tuesday, July 24, 12
  • 26. 215 ÷ 900 = 0.238888 or 23.8888% Tuesday, July 24, 12
  • 27. #main-content {   float: left;   width: 72.222222%; /* 650 / 900 */ } #sidebar {   float: right;   width: 23.8888%; /* 215 / 900 */ } Tuesday, July 24, 12
  • 28. Ouch! Do I need to Calculate all this all the time? Tuesday, July 24, 12
  • 29. <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Tuesday, July 24, 12
  • 30. This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.org Tuesday, July 24, 12
  • 31. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> @media screen and (max-device-width: 480px) { .column { float: none; } } Tuesday, July 24, 12
  • 32. media only screen and (min-width:321px) and (max-width:481px) { .two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin- left: 0; margin-right: 0;} .region-sidebar-first, .region-sidebar-second, .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;} .region-sidebar-second {width: 100%;} .content-inner,.region-sidebar-first,.region-sidebar-second {float: none;} .region-sidebar-first, .region-sidebar-second {clear: both;} .container {width: 100%;} } /* Tablet portrait one-col-vert */ @media only screen and (min-width:481px) and (max-width:800px) { .two-sidebars .content-inner,.one-sidebar .content-inner,.region-sidebar-first,.region-sidebar-second {margin- left: 0; margin-right: 0;} .region-sidebar-first {width: 100%;} .region-sidebar-second {width: 0%;} .one-sidebar .sidebar {width: 100%;} .region-sidebar-first, .region-sidebar-second {overflow: hidden; margin-top: 20px;} .region-sidebar-first .block, .region-sidebar-second .block {width: 100%;} .container {width: 90%;} } Tuesday, July 24, 12
  • 33. Scalable Images using max-width: 100%; and various other solutions like filament Tuesday, July 24, 12
  • 34. Beware IE and explicit dimensions Embrace Modernizr/Respond.js Tuesday, July 24, 12
  • 36. Cateorizr http://www.brettjankord.com/2012/01/16/categorizr-a- modern-device-detection-script/ Slider Fixes http://www.woothemes.com/flexslider/ Video Fixes http://www.tjkdesign.com/articles/how-to-resize-videos-on- the-fly.asp Table Approach to tables https://github.com/thepeg/MediaTable Tuesday, July 24, 12
  • 37. USEFUL RESPONSIVE FRAMEWORKS Tuesday, July 24, 12
  • 38. HTML5 Boilerplate / Modernizr / Twitter Bootstrap http://twitter.github.com/bootstrap/ Foundation http://foundation.zurb.com/ 320andup http://stuffandnonsense.co.uk/projects/320andup/ Responsive - Wordpress http://wordpress.org/extend/themes/responsive Tuesday, July 24, 12
  • 39. HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS? Tuesday, July 24, 12
  • 41. MONEY + TIME Tuesday, July 24, 12
  • 42. MORE PEOPLE + PLACES Tuesday, July 24, 12
  • 43. • More adaptable. • Design once, deploy everywhere • Maintains aspect ratios • Saves time in long run • More future proof • Less time and money over the long haul Tuesday, July 24, 12
  • 45. TIME + MONEY Tuesday, July 24, 12
  • 47. • Can be difficult to port over to existing complex sites • Need to breakout of the one-off mindset • Not necessarily supported cross browser • Serving up media can be challenging. • Potential bandwidth issues. • May be more time up front (particularly at first) • Addressing non-responsive plug-ins • Navigation • Tables and forms • Sidebars • Selling stakeholders on the process • Advertising Tuesday, July 24, 12
  • 50. • Fat Finger Design • User Agent Sniffing • Javascript sniffing • Design for lowest common denominator • Fluid design Tuesday, July 24, 12
  • 51. TO RESPOND OR NOT? Tuesday, July 24, 12
  • 52. HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE TO MAKE A SITE RESPONSIVE? Tuesday, July 24, 12
  • 53. IS IT WORTH IT? • It all depends on your time, money and energy. • Is your orientation primarily desktop or mobile? • Most of all your clients/organization and customers/visitors. • It all depends on the complexity of your site. • Advertisers • Third party plug ins Tuesday, July 24, 12
  • 54. MARIO’S TRICKS AND OPINIONS Tuesday, July 24, 12
  • 55. TAKE IT WITH A GRAIN OF... Tuesday, July 24, 12
  • 56. TRICKS • Start with mobile first if doing from scratch • Small usable Fat Finger changes for pre existing complex sites • Fix worst offending problems anyway that you can in different contexts. • Display tables inline or reformat as spans or divs Tuesday, July 24, 12
  • 57. OPINIONS • Don’t leave things out. • Give the visitor more actual control. • Allow to choose the context or task • Load media on demand (images, slideshows, galleries, videos) Tuesday, July 24, 12
  • 58. TOWARDS A NEW MINDSET • Pay now or pay later. • Responsive design may not work for you. But you will need to find something that does. • Responsive design is less a technique than a mindset. • Instead of pixel perfect, priority perfect. • Eyes on the prize - Usability and Engagement. Tuesday, July 24, 12

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n