• Save
Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Responsive Design

on

  • 56,843 views

 

Statistics

Views

Total Views
56,843
Views on SlideShare
47,989
Embed Views
8,854

Actions

Likes
502
Downloads
0
Comments
16

97 Embeds 8,854

http://www.splashnology.com 3854
http://pedagog.localdomain 796
http://digitalsynopsis.com 635
http://madebymany.com 320
http://www.creedinteractive.com 305
http://www.un-a-un.com 285
http://webwatching.eustema.it 282
http://joefrancisninal.info 241
http://www.vleerkatcreations.com 183
http://fred.tl 173
http://paper.li 166
http://jimmypad.com 124
http://www.wizda.in 117
http://designblog 99
http://neuestijl.com 87
http://www.conseilsmarketing.fr 85
http://www.bettiblue.com 84
http://webdesignerskit.blogspot.in 80
http://www.gatec.com.br 65
http://yellowroz-myhomework.blogspot.com 63
http://startthinking.posterous.com 62
http://gcre.ragedev 60
http://www.carbongraffiti.com 59
http://localhost 47
http://glueinnovation.posterous.com 46
http://mag.splashnology.com 44
http://multbit.kinghost.net 40
http://www.conseilsmarketing.com 39
http://un-a-un.com 28
http://webdesignerskit.blogspot.com 27
https://www.facebook.com 27
http://pinterest.com 17
http://log.vikingkarwur.com 16
url_unknown 16
http://www.techgig.com 15
http://d.hatena.ne.jp 14
http://voyelle.tumblr.com 13
http://sumerator.blogspot.com 13
http://blog.websourcing.fr 12
https://twitter.com 11
http://twitter.com 11
https://madsack.instawiki.com 10
http://kalovskihost.com 9
http://www.slideshare.net 8
http://nloc.tumblr.com 8
http://share 8
http://www.twylah.com 8
http://us-w1.rockmelt.com 8
http://sumerator.blogspot.in 7
http://www.onlydoo.com 7
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 16 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 16

Post Comment
Edit your comment

Responsive Design Responsive Design Presentation Transcript

  • 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  Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research
  • 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
  • 15 in U S E   mobile internet everyday  Source: http://www.antennasoftware.com/new-research-shows-mobile-internet-usage-a-daily-habit
  • 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
  • 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 incorporates media queries to create a responsive, adaptive layout.Source: Ethan Marcotte, A Dao of Flexibility presentation, An Event Apart Minneapolis, 2010
  • 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; /* 14px / 16px */ }
  • 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> </nav> </header> <section> … </section> <footer> … </footer>
  • <h2> <p><figure>
  • FLEXIBLE GRIDSHTML5 <section> <h2>…</h2> <p>…</p> <figure> … </figure> <figure> … </figure> … </section>
  • <h2> <p><figure> <a> <img /> <figcaption /> </a></figure>
  • FLEXIBLE GRIDSHTML5 <figure> <a href=“#”> <img /> <figcaption>…</figcaption> </a> </figure>
  • 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.0416667%; }
  • 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://unstoppablerobotninja.com/entry/fluid-images
  • 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/filamentgroup/responsive-images
  • FLEXIBLE MEDIADownloaded vs. Displayed <img src=“highRes.png” />
  • FLEXIBLE MEDIADownloaded vs. Displayed <img src=“lowRes.r.png” data-fullsrc=“highRes.png” /> HTML5 custom attribute
  • 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.css” /> @media screen and (max-width: 320px) { … }
  • MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (min-width: 800px)” href=“screen.css” /> @media screen and (min-width: 800px) { … }
  • MEDIA QUERIESMedia Featureswidth heightdevice-width device-heightorientation aspect-ratiodevice-aspect-ratio colorcolor-index monochromeresolution scangrid
  • 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+ " Opera Mobile " Safari 3+    Safari 2 " Firefox 3.5+    Firefox 1, 2 " Chrome
  • 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-mediaqueries-js
  • 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
  • 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://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