RESPONSIVE DESIGN                        Basic concepts and implementationTuesday, July 24, 12
WHO ARE YOU?                          Mario NobleTuesday, July 24, 12
WHAT IS RESPONSIVE                              DESIGN?    • Responsive    design is a        technique that uses fluid    ...
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
FRUSTRATIONTuesday, July 24, 12
VARIOUS CONTEXTSTuesday, July 24, 12
NOT JUST MOBILETuesday, July 24, 12
THE GOLDEN MEANTuesday, July 24, 12
PROGRESSIVE ENHANCEMENTTuesday, July 24, 12
BACK TO THE FUTURETuesday, July 24, 12
PURE FLUID VS. RESPONSIVETuesday, July 24, 12
• Fluid            stretches but doesn’t deliberately arrange.    • Adaptive             is break point based    • Respons...
HOW DO YOU DO IT?Tuesday, July 24, 12
DESIGNTuesday, July 24, 12
FOCUS, FOCUS, FOCUSTuesday, July 24, 12
MODULAR APPROACHTuesday, July 24, 12
STYLE TILESTuesday, 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...
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               ...
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...
This is where SASS or LESS can help.                       http://sass-lang.com/tutorial.html                             ...
<link rel="stylesheet" type="text/css"             media="screen and (max-device-width: 480px)"                         hr...
media only screen and (min-width:321px) and (max-width:481px) {  .two-sidebars .content-inner,.one-sidebar .content-inner,...
Scalable Images                             using                       max-width: 100%;                       and various...
Beware IE and explicit dimensions           Embrace Modernizr/Respond.jsTuesday, July 24, 12
USEFUL TOOLSTuesday, July 24, 12
Cateorizr        http://www.brettjankord.com/2012/01/16/categorizr-a-                  modern-device-detection-script/    ...
USEFUL RESPONSIVE                         FRAMEWORKSTuesday, July 24, 12
HTML5 Boilerplate / Modernizr / Twitter Bootstrap                      http://twitter.github.com/bootstrap/               ...
HOW CAN YOU USE IT? WHAT              ARE THE PROS AND CONS?Tuesday, July 24, 12
PROSTuesday, July 24, 12
MONEY + TIMETuesday, July 24, 12
MORE PEOPLE + PLACESTuesday, July 24, 12
• More              adaptable.    • Design             once, deploy everywhere    • Maintains            aspect ratios    ...
CONSTuesday, July 24, 12
TIME + MONEYTuesday, July 24, 12
ADAPTING EXISTING SITESTuesday, July 24, 12
•   Can be difficult to port over to existing complex sites    •   Need to breakout of the one-off mindset    •   Not neces...
RUBBER PEGTuesday, July 24, 12
ALTERNATIVESTuesday, July 24, 12
• Fat              Finger Design    • User Agent                 Sniffing    • Javascript            sniffing    • Design   ...
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 o...
MARIO’S TRICKS AND                           OPINIONSTuesday, 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 exis...
OPINIONS    • Don’t            leave things out.    • Give   the visitor more actual        control.    • Allow    to choo...
TOWARDS A NEW MINDSET     • Pay             now or pay later.     • Responsive    design may not          work for you. Bu...
Upcoming SlideShare
Loading in...5
×

Responsive design presentation

1,479

Published on

Presentation on responsive design, it's reasons, execution, ramifications and alternatives.

Published in: Design, Technology
1 Comment
1 Like
Statistics
Notes
  • Here's the link to the example montage referred to in the slideshow:
    http://youtu.be/ZWIWRsBrxSU
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,479
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive design presentation

    1. 1. RESPONSIVE DESIGN Basic concepts and implementationTuesday, July 24, 12
    2. 2. WHO ARE YOU? Mario NobleTuesday, July 24, 12
    3. 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- designTuesday, July 24, 12
    4. 4. I WANT TO SEE SOME EXAMPLES.Tuesday, July 24, 12
    5. 5. WHY SHOULD I DO IT?Tuesday, July 24, 12
    6. 6. FOR THE MONEY, OF COURSE!Tuesday, July 24, 12
    7. 7. CHANGING EXPECTATIONS.Tuesday, July 24, 12
    8. 8. FRUSTRATIONTuesday, July 24, 12
    9. 9. VARIOUS CONTEXTSTuesday, July 24, 12
    10. 10. NOT JUST MOBILETuesday, July 24, 12
    11. 11. THE GOLDEN MEANTuesday, July 24, 12
    12. 12. PROGRESSIVE ENHANCEMENTTuesday, July 24, 12
    13. 13. BACK TO THE FUTURETuesday, July 24, 12
    14. 14. PURE FLUID VS. RESPONSIVETuesday, July 24, 12
    15. 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. 16. HOW DO YOU DO IT?Tuesday, July 24, 12
    17. 17. DESIGNTuesday, July 24, 12
    18. 18. FOCUS, FOCUS, FOCUSTuesday, July 24, 12
    19. 19. MODULAR APPROACHTuesday, July 24, 12
    20. 20. STYLE TILESTuesday, July 24, 12
    21. 21. CODING aka the Boring Part, depending on who you are...Tuesday, July 24, 12
    22. 22. TARGET ÷ CONTEXT = RESULT NOOOOO!!!!!! MATHHHHHH!!!!!!Tuesday, July 24, 12
    23. 23. 900 ÷ 960 = 0.9375 becomes 93.75%Tuesday, July 24, 12
    24. 24. #MAIN {   MARGIN: 0 AUTO;   WIDTH: 93.75%; /* 900 / 960 */ }Tuesday, July 24, 12
    25. 25. 650 ÷ 900 = 0.72222222 72.222222%Tuesday, July 24, 12
    26. 26. 215 ÷ 900 = 0.238888 or 23.8888%Tuesday, July 24, 12
    27. 27. #main-content {   float: left;   width: 72.222222%; /* 650 / 900 */ } #sidebar {   float: right;   width: 23.8888%; /* 215 / 900 */ }Tuesday, July 24, 12
    28. 28. Ouch! Do I need to Calculate all this all the time?Tuesday, July 24, 12
    29. 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. 30. This is where SASS or LESS can help. http://sass-lang.com/tutorial.html http://lesscss.orgTuesday, July 24, 12
    31. 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. 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. 33. Scalable Images using max-width: 100%; and various other solutions like filamentTuesday, July 24, 12
    34. 34. Beware IE and explicit dimensions Embrace Modernizr/Respond.jsTuesday, July 24, 12
    35. 35. USEFUL TOOLSTuesday, July 24, 12
    36. 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/MediaTableTuesday, July 24, 12
    37. 37. USEFUL RESPONSIVE FRAMEWORKSTuesday, July 24, 12
    38. 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/responsiveTuesday, July 24, 12
    39. 39. HOW CAN YOU USE IT? WHAT ARE THE PROS AND CONS?Tuesday, July 24, 12
    40. 40. PROSTuesday, July 24, 12
    41. 41. MONEY + TIMETuesday, July 24, 12
    42. 42. MORE PEOPLE + PLACESTuesday, July 24, 12
    43. 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 haulTuesday, July 24, 12
    44. 44. CONSTuesday, July 24, 12
    45. 45. TIME + MONEYTuesday, July 24, 12
    46. 46. ADAPTING EXISTING SITESTuesday, July 24, 12
    47. 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 • AdvertisingTuesday, July 24, 12
    48. 48. RUBBER PEGTuesday, July 24, 12
    49. 49. ALTERNATIVESTuesday, July 24, 12
    50. 50. • Fat Finger Design • User Agent Sniffing • Javascript sniffing • Design for lowest common denominator • Fluid designTuesday, July 24, 12
    51. 51. TO RESPOND OR NOT?Tuesday, July 24, 12
    52. 52. HOW MUCH TIME, MONEY AND ENERGY DOES IT TAKE TO MAKE A SITE RESPONSIVE?Tuesday, July 24, 12
    53. 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 insTuesday, July 24, 12
    54. 54. MARIO’S TRICKS AND OPINIONSTuesday, July 24, 12
    55. 55. TAKE IT WITH A GRAIN OF...Tuesday, July 24, 12
    56. 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 divsTuesday, July 24, 12
    57. 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. 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

    ×