DESIGNING FOR DESKTOP WEB + MOBILEResponsiveDesignMINNEBAR 2011
Something is happening…
Something is happening…
Something is happening…
(we’re screwed.)
We need to movefrom prescribed design to responsive design.
g	  r	  o	  w	  t	  h	  	  o	  f	  MOBILE WEBH A S 	   O U T P A C E D 	  8 X	  gro wth 	   o f 	   d eskto p 	   web 	  S...
g	  r	  o	  w	  t	  h	  	  o	  f	  MOBILE WEBH A S 	   O U T P A C E D 	  8 X	  gro wth 	   o f 	   d eskto p 	   web 	  S...
15               in	                                                           U S E	                                     ...
in	  the	  next	  4	  years	                    MOBILE internet USAGE                                                     ...
BUT…Responsive design is not    mobile design!
It is design for _______.
It is flexible, device-independent design       for the web.
Rethink.
> 1024   768   480
According to Ethan Marcotte,    Responsive Web Design is:               A flexible grid (with flexible images) that       ...
Flexible Grids
But those are fixed width.
FLEXIBLE GRIDS  part oneFlex your font.
FLEXIBLE GRIDSFontsh2	  p	  
FLEXIBLE GRIDSFonts    body {       font-size: 100%;       line-height: 1.6;       color: #333;       }
FLEXIBLE GRIDSFonts    body {       font-size: 100%;    /* ~ 16px */       line-height: 1.6;       color: #333;       }
FLEXIBLE GRIDSFontsh2	  p	  
FLEXIBLE GRIDSFonts28px	  14px	  
FLEXIBLE GRIDSFonts28px / 16px	  14px / 16px	  
FLEXIBLE GRIDSFonts1.75	  .875	  
FLEXIBLE GRIDSFonts    h2 {        font-size: 1.75em;    /* 28px / 16px */        }    p{         font-size: .875em;   /* ...
FLEXIBLE GRIDS   part twoFlex your layout.
FLEXIBLE GRIDSLayout•  Template Layout (CSS3)•  Floats (CSS2)
Do you remember your      HTML5?
<header>    <nav><section><footer>
FLEXIBLE GRIDSHTML5    <header>        <h1>…</h1>        <nav>            <ul>                …            </ul>        </...
<h2>           <p><figure>
FLEXIBLE GRIDSHTML5    <section>        <h2>…</h2>        <p>…</p>         <figure>              …         </figure>      ...
<h2>                        <p><figure>   <a>       <img />       <figcaption />   </a></figure>
FLEXIBLE GRIDSHTML5    <figure>         <a href=“#”>             <img />             <figcaption>…</figcaption>         </...
20px	  300px	  960px	  
FLEXIBLE GRIDSLayout    section {       width: 960px;       }
FLEXIBLE GRIDSLayout    section {       max-width: 960px;       }
FLEXIBLE GRIDSLayout    figure {        float: left;        width: 300px;        margin: 0 10px;        }
FLEXIBLE GRIDSLayout    300px / 960px = 0.3125    10px / 960px = 0.010416667
FLEXIBLE GRIDSLayout    300px / 960px = 31.25%    10px / 960px = 1.0416667%
FLEXIBLE GRIDSLayout    figure {        float: left;        width: 300px;        margin: 0 10px;        }
FLEXIBLE GRIDSLayout    figure {        float: left;        width: 31.25%;          /* 300px / 960px */        margin: 0 1...
Flexible Media
FLEXIBLE MEDIAFlexible Images    img { max-width: 100% }
FLEXIBLE MEDIAFlexible Videos    video,    object { max-width: 100% }
ISSUE #1max-width in IE6
FLEXIBLE MEDIAmax-width in IE6    img,    video,    object { width: 100% }
ISSUE #2    windowsimage resizing
FLEXIBLE MEDIAWindows Image Rendering                 vs.
FLEXIBLE MEDIAWindows Image Rendering             IE 7 and lower             Firefox 2 and lower
FLEXIBLE MEDIAWindows Image Rendering    IE Proprietary CSS Filter:    AlphaImageLoader()
FLEXIBLE MEDIAWindows Image Rendering    Ethan Marcotte did all the work for you….
FLEXIBLE MEDIAWindows Image Rendering    …just include some JavaScript. Instructions here:      http://unstoppablerobotnin...
ISSUE #3bandwidth
FLEXIBLE MEDIADownloaded vs. Displayed
FLEXIBLE MEDIADownloaded vs. Displayed                 highRes.png
FLEXIBLE MEDIADownloaded vs. Displayed                 highRes.png                 lowRes.png
FLEXIBLE MEDIADownloaded vs. Displayed    Filament Group did all the work for you….
FLEXIBLE MEDIADownloaded vs. Displayed    …just include some JavaScript. Download here:      https://github.com/filamentgr...
FLEXIBLE MEDIADownloaded vs. Displayed    <img src=“highRes.png” />
FLEXIBLE MEDIADownloaded vs. Displayed    <img src=“lowRes.r.png” data-fullsrc=“highRes.png” />                           ...
Media Queries
MEDIA QUERIESMedia Types    <link rel=“stylesheet”          media=“screen”          href=“screen.css” />
MEDIA QUERIESMedia Types    <link rel=“stylesheet”          media=“print”          href=“print.css” />
MEDIA QUERIESMedia Types    <link rel=“stylesheet”          media=“handheld”          href=“handheld.css” />
MEDIA QUERIESMedia Queries    <link rel=“stylesheet”          media=“screen and (max-width: 320px)”          href=“screen....
MEDIA QUERIESMedia Queries    <link rel=“stylesheet”          media=“screen and (min-width: 800px)”          href=“screen....
MEDIA QUERIESMedia Featureswidth                 heightdevice-width          device-heightorientation           aspect-rat...
We can adapt our designto specific range of devices
We can adapt our designto specific range of devices   without changing the           content
MEDIA QUERIESLaptop
MEDIA QUERIESiPad – Portrait    @media screen and (device-max-width: 768px)
MEDIA QUERIESiPhone – Landscape    @media screen and (max-device-width: 480px)
ISSUE #1   browsercompatibility
MEDIA QUERIESBrowser Compatibility                " IE 9           	   IE 8, 7, 6                " Opera 9.5+     " Op...
MEDIA QUERIESBrowser Compatibility    Wouter van der Graaf did all the work for you….
MEDIA QUERIESBrowser Compatibility    …just include some JavaScript. Download here:        http://code.google.com/p/css3-m...
MEDIA QUERIESBrowser Compatibility                " IE 9            IE 8, 7, 6                " Opera 9.5+     " Opera...
ISSUE #2mobile resizing
FLEXIBLE MEDIAMobile Resizing                  vs.
FLEXIBLE MEDIAMobile Resizing    <meta name="viewport"          content="width=device-width; initial-scale=1.0">
Create great experiences.
DESIGNING FOR DESKTOP WEB + MOBILEThanks.mike@livefront.com@mikebollinger
THE EXAMPLE USED IN THIS PRESENTATION:http://livefront.com/responsive-designA LIST APART ARTICLE (Ethan Marcotte):http://a...
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

58,140

Published on

Published in: Design, Technology
16 Comments
516 Likes
Statistics
Notes
No Downloads
Views
Total Views
58,140
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
0
Comments
16
Likes
516
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. DESIGNING FOR DESKTOP WEB + MOBILEResponsiveDesignMINNEBAR 2011
  2. 2. Something is happening…
  3. 3. Something is happening…
  4. 4. Something is happening…
  5. 5. (we’re screwed.)
  6. 6. We need to movefrom prescribed design to responsive design.
  7. 7. g  r  o  w  t  h    o  f  MOBILE WEBH A S   O U T P A C E D  8 X  gro wth   o f   d eskto p   web  Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research
  8. 8. g  r  o  w  t  h    o  f  MOBILE WEBH A S   O U T P A C E D  8 X  gro wth   o f   d eskto p   web  Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research
  9. 9. 15 in U S E   mobile internet everyday  Source: http://www.antennasoftware.com/new-research-shows-mobile-internet-usage-a-daily-habit
  10. 10. in  the  next  4  years   MOBILE internet USAGE W I L L   I N C R E A S E     B Y     A     F A C T O R     O F   26Source: http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.pdf
  11. 11. BUT…Responsive design is not mobile design!
  12. 12. It is design for _______.
  13. 13. It is flexible, device-independent design for the web.
  14. 14. Rethink.
  15. 15. > 1024 768 480
  16. 16. According to Ethan Marcotte, Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.Source: Ethan Marcotte, A Dao of Flexibility presentation, An Event Apart Minneapolis, 2010
  17. 17. Flexible Grids
  18. 18. But those are fixed width.
  19. 19. FLEXIBLE GRIDS part oneFlex your font.
  20. 20. FLEXIBLE GRIDSFontsh2  p  
  21. 21. FLEXIBLE GRIDSFonts body { font-size: 100%; line-height: 1.6; color: #333; }
  22. 22. FLEXIBLE GRIDSFonts body { font-size: 100%; /* ~ 16px */ line-height: 1.6; color: #333; }
  23. 23. FLEXIBLE GRIDSFontsh2  p  
  24. 24. FLEXIBLE GRIDSFonts28px  14px  
  25. 25. FLEXIBLE GRIDSFonts28px / 16px  14px / 16px  
  26. 26. FLEXIBLE GRIDSFonts1.75  .875  
  27. 27. FLEXIBLE GRIDSFonts h2 { font-size: 1.75em; /* 28px / 16px */ } p{ font-size: .875em; /* 14px / 16px */ }
  28. 28. FLEXIBLE GRIDS part twoFlex your layout.
  29. 29. FLEXIBLE GRIDSLayout•  Template Layout (CSS3)•  Floats (CSS2)
  30. 30. Do you remember your HTML5?
  31. 31. <header> <nav><section><footer>
  32. 32. FLEXIBLE GRIDSHTML5 <header> <h1>…</h1> <nav> <ul> … </ul> </nav> </header> <section> … </section> <footer> … </footer>
  33. 33. <h2> <p><figure>
  34. 34. FLEXIBLE GRIDSHTML5 <section> <h2>…</h2> <p>…</p> <figure> … </figure> <figure> … </figure> … </section>
  35. 35. <h2> <p><figure> <a> <img /> <figcaption /> </a></figure>
  36. 36. FLEXIBLE GRIDSHTML5 <figure> <a href=“#”> <img /> <figcaption>…</figcaption> </a> </figure>
  37. 37. 20px  300px  960px  
  38. 38. FLEXIBLE GRIDSLayout section { width: 960px; }
  39. 39. FLEXIBLE GRIDSLayout section { max-width: 960px; }
  40. 40. FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }
  41. 41. FLEXIBLE GRIDSLayout 300px / 960px = 0.3125 10px / 960px = 0.010416667
  42. 42. FLEXIBLE GRIDSLayout 300px / 960px = 31.25% 10px / 960px = 1.0416667%
  43. 43. FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }
  44. 44. FLEXIBLE GRIDSLayout figure { float: left; width: 31.25%; /* 300px / 960px */ margin: 0 1.0416667%; }
  45. 45. Flexible Media
  46. 46. FLEXIBLE MEDIAFlexible Images img { max-width: 100% }
  47. 47. FLEXIBLE MEDIAFlexible Videos video, object { max-width: 100% }
  48. 48. ISSUE #1max-width in IE6
  49. 49. FLEXIBLE MEDIAmax-width in IE6 img, video, object { width: 100% }
  50. 50. ISSUE #2 windowsimage resizing
  51. 51. FLEXIBLE MEDIAWindows Image Rendering vs.
  52. 52. FLEXIBLE MEDIAWindows Image Rendering IE 7 and lower Firefox 2 and lower
  53. 53. FLEXIBLE MEDIAWindows Image Rendering IE Proprietary CSS Filter: AlphaImageLoader()
  54. 54. FLEXIBLE MEDIAWindows Image Rendering Ethan Marcotte did all the work for you….
  55. 55. FLEXIBLE MEDIAWindows Image Rendering …just include some JavaScript. Instructions here: http://unstoppablerobotninja.com/entry/fluid-images
  56. 56. ISSUE #3bandwidth
  57. 57. FLEXIBLE MEDIADownloaded vs. Displayed
  58. 58. FLEXIBLE MEDIADownloaded vs. Displayed highRes.png
  59. 59. FLEXIBLE MEDIADownloaded vs. Displayed highRes.png lowRes.png
  60. 60. FLEXIBLE MEDIADownloaded vs. Displayed Filament Group did all the work for you….
  61. 61. FLEXIBLE MEDIADownloaded vs. Displayed …just include some JavaScript. Download here: https://github.com/filamentgroup/responsive-images
  62. 62. FLEXIBLE MEDIADownloaded vs. Displayed <img src=“highRes.png” />
  63. 63. FLEXIBLE MEDIADownloaded vs. Displayed <img src=“lowRes.r.png” data-fullsrc=“highRes.png” /> HTML5 custom attribute
  64. 64. Media Queries
  65. 65. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“screen” href=“screen.css” />
  66. 66. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“print” href=“print.css” />
  67. 67. MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“handheld” href=“handheld.css” />
  68. 68. MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (max-width: 320px)” href=“screen.css” /> @media screen and (max-width: 320px) { … }
  69. 69. MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (min-width: 800px)” href=“screen.css” /> @media screen and (min-width: 800px) { … }
  70. 70. MEDIA QUERIESMedia Featureswidth heightdevice-width device-heightorientation aspect-ratiodevice-aspect-ratio colorcolor-index monochromeresolution scangrid
  71. 71. We can adapt our designto specific range of devices
  72. 72. We can adapt our designto specific range of devices without changing the content
  73. 73. MEDIA QUERIESLaptop
  74. 74. MEDIA QUERIESiPad – Portrait @media screen and (device-max-width: 768px)
  75. 75. MEDIA QUERIESiPhone – Landscape @media screen and (max-device-width: 480px)
  76. 76. ISSUE #1 browsercompatibility
  77. 77. MEDIA QUERIESBrowser Compatibility " IE 9    IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+    Safari 2 " Firefox 3.5+    Firefox 1, 2 " Chrome
  78. 78. MEDIA QUERIESBrowser Compatibility Wouter van der Graaf did all the work for you….
  79. 79. MEDIA QUERIESBrowser Compatibility …just include some JavaScript. Download here: http://code.google.com/p/css3-mediaqueries-js
  80. 80. MEDIA QUERIESBrowser Compatibility " IE 9  IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+  Safari 2 " Firefox 3.5+  Firefox 1, 2 " Chrome
  81. 81. ISSUE #2mobile resizing
  82. 82. FLEXIBLE MEDIAMobile Resizing vs.
  83. 83. FLEXIBLE MEDIAMobile Resizing <meta name="viewport" content="width=device-width; initial-scale=1.0">
  84. 84. Create great experiences.
  85. 85. DESIGNING FOR DESKTOP WEB + MOBILEThanks.mike@livefront.com@mikebollinger
  86. 86. THE EXAMPLE USED IN THIS PRESENTATION:http://livefront.com/responsive-designA LIST APART ARTICLE (Ethan Marcotte):http://alistapart.com/articles/responsive-web-design/BOOK (Ethan Marcotte):http://abookapart.com/products/responsive-web-designMEDIA QUERIES TEMPLATE (Andy Clarke):https://gist.github.com/798569

×