Your SlideShare is downloading. ×
0
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

5,644

Published on

Do your websites adapt to the device or screen on which they're being viewed? Do they accommodate viewing on a smart phone as elegantly as on a 1920-pixel wide monitor? Or a 5000px monitor? Or a …

Do your websites adapt to the device or screen on which they're being viewed? Do they accommodate viewing on a smart phone as elegantly as on a 1920-pixel wide monitor? Or a 5000px monitor? Or a netbook?

Responsive Design is the answer. It's a technique that employs flexible grids, fluid layouts, and most importantly - CSS3 media queries that let you change how things are laid out on the screen depending on the screen size (and many other factors), dynamically.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,644
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
173
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Prediction: by 2014 90% of web devices will be mobile
  • Show example of Amscan.org
  • Transcript

    • 1. Responsive Web Design Fort Collins Internet Professionals August 12, 2010
    • 2. When life was simple Flickr: Jean-Lou Dupont
    • 3. 1280 x 800 Photo: Steve Rhodes 1280 x 800 Flickr: goodrob13
    • 4. 1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes
    • 5. 1280 x 800 Photo: Steve Rhodes Netbook 8.9” screen Flickr: ziaek
    • 6. Title Many screens Flickr: aranarth
    • 7. Title More is better 5120 x 1600 Flickr: jochenWolters
    • 8. Title Flickr: photographer 2006 Smart Phones Flickr: barnoid
    • 9. Title Flickr: photographer 2007 Smart Phones Flickr: PowerupMobile.com
    • 10. Title Flickr: photographer And then came…
    • 11. Title Flickr: photographer The One.
    • 12. Title Flickr: photographer Copyright: Fox Studios
    • 13. Title Flickr: photographer Flickr: bandita
    • 14. Title Flickr: photographer January 9, 2007 Flickr: shapeshift
    • 15. Title Flickr: photographer 2008 Smart Phones Flickr: midnightglory
    • 16. Title Flickr: photographer 2009 Smart Phones Flickr: lalunablanca
    • 17. Title Flickr: photographer 2009: Me Flickr: Spartacus007
    • 18. Does Mobile Matter? <ul><li>Mobile internet adoption has outpaced desktop internet adoption by eight times </li></ul><ul><ul><li>http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html </li></ul></ul><ul><li>AT&T, the exclusive carrier for Apple's iPhone, has seen a 4,932% increase in mobile traffic data in the past three years </li></ul><ul><ul><li>http://www.lukew.com/ff/entry.asp?933 </li></ul></ul><ul><li>Smartphone sales will surpass worldwide PC sales by the end of 2011 </li></ul><ul><ul><li>http://www.pcworld.com/article/171380/ </li></ul></ul>
    • 19. Flickr: Gravitywave
    • 20. Title Flickr: photographer Innovation & Transition
    • 21. Title Flickr: photographer 2010 iPad – 3 million sold in 80 days Flickr: JaredEarle
    • 22. Title Flickr: photographer Oh yeah, it doesn’t run Flash Flickr: JaredEarle
    • 23. Title Flickr: photographer iPhone 4 – 960 x 640 @ 326 ppi “Retina Display” Flickr: Yutaka Tsutano
    • 24. Title Flickr: photographer Android, BlackBerry Flickr: Johan Larsson, dusk-photography
    • 25. Title Flickr: photographer 2010 Many Screens Flickr: AndreasSchepers
    • 26. Flickr: Malingering
    • 27. Flickr: Beni Ishaque Luthor
    • 28. We can rise above it <ul><li>Consolidation </li></ul><ul><li>Web browsers are the most standards-compliant we’ve ever experienced </li></ul><ul><ul><li>Google Chrome: Webkit </li></ul></ul><ul><ul><li>Safari: Webkit </li></ul></ul><ul><ul><li>Firefox: Gecko </li></ul></ul><ul><ul><li>IE8 is pretty darn good </li></ul></ul><ul><ul><li>IE7 has issues, but manageable </li></ul></ul><ul><ul><li>IE6 < 10% usage (finally!) </li></ul></ul>
    • 29. Mobile browsers converging <ul><li>Android: Chrome: Webkit </li></ul><ul><li>iOS: Safari: Webkit </li></ul><ul><li>Blackberry: </li></ul><ul><ul><li>Proprietary browser is default </li></ul></ul><ul><ul><li>Opera Mobile available: Presto </li></ul></ul><ul><ul><ul><li>On par with Webkit </li></ul></ul></ul><ul><ul><li>Blackberry 6 will use Webkit </li></ul></ul><ul><ul><ul><li>http://devblog.blackberry.com/2010/08/developing-new-blackberry-browser/ </li></ul></ul></ul>
    • 30. Title Flickr: photographer Einstein’s quest for the Unified Field Flickr: Thomas Thomas
    • 31. The Unified (web) Field? <ul><li>While devices vary widely in </li></ul><ul><ul><li>Physical dimensions </li></ul></ul><ul><ul><li>Pixel dimensions </li></ul></ul><ul><ul><li>Resolution </li></ul></ul><ul><li>Consolidation in browsers means </li></ul><ul><ul><li>We can start using HTML5 and CSS3 now </li></ul></ul><ul><ul><li>The foundation is now there for a unified approach to displaying content effectively on myriad devices </li></ul></ul>
    • 32. Responsive Web Design is <ul><ul><li>“ A flexible grid (with flexible images ) </li></ul></ul><ul><ul><li>that incorporates media queries to </li></ul></ul><ul><ul><li>create a responsive, adaptive layout.” </li></ul></ul><ul><ul><li>- Ethan Marcotte </li></ul></ul>
    • 33. Responsive Web Design <ul><li>A flexible grid </li></ul><ul><ul><li>Sizing in proportions </li></ul></ul><ul><ul><ul><li>% rather than px, creates the fluid layout </li></ul></ul></ul><ul><ul><ul><li>images too: flexible images so they are fluid too </li></ul></ul></ul><ul><li>CSS3 Media Queries </li></ul><ul><ul><li>Conditional styling </li></ul></ul><ul><ul><li>Allows you to target specific viewport sizes, device sizes and much more </li></ul></ul><ul><ul><li>Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.” </li></ul></ul>
    • 34. Where do you start? <ul><li>Layout width </li></ul><ul><ul><li>Pick a default reference design </li></ul></ul><ul><ul><ul><li>User research </li></ul></ul></ul><ul><ul><li>For our example </li></ul></ul><ul><ul><ul><li>We’ll target at 1024px wide browser, but our fluid grid will accommodate a range of screens </li></ul></ul></ul><ul><ul><ul><li>Content area will be 930px wide (in the context of a 1024px viewport) </li></ul></ul></ul>
    • 35. Keep in mind the context <ul><li>Target ÷ Context = Result </li></ul><ul><li>.outer { </li></ul><ul><li>width: 90.82%; /* 930px / 1024px */ </li></ul><ul><li>} </li></ul>
    • 36. Full width blocks <ul><li>#masthead, #nav, #home_intro { </li></ul><ul><li>width: 100%; /* 930px / 930px */ </li></ul><ul><li>} </li></ul>
    • 37. Sizing in % rather than px <ul><li>.intro_content { </li></ul><ul><li>width: 59.35%; </li></ul><ul><li>/* 552px / 930px = 59.35% */ </li></ul><ul><li>margin and padding too </li></ul><ul><li>padding: 50px 30px 25px 25px; </li></ul><ul><li>Becomes: </li></ul><ul><li>padding: 50px 3.23% 25px 2.69%; </li></ul><ul><li>/* 30px / 930px, 25px / 930px */ </li></ul><ul><li>} </li></ul>
    • 38. What about images? <ul><li>img { max-width: 100%; } </li></ul><ul><li>Important: in the HTML, don’t specify height and width attributes on images </li></ul><ul><li>Can apply this to img, video, and object </li></ul>
    • 39. Media Types <ul><li><link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;c.css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; media=”print&quot; href=&quot;c.css&quot; /> </li></ul>
    • 40. CSS3 Media Queries… <ul><li><link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width:340px)” href=“c.css” /> </li></ul><ul><li>@media screen and (max-width:340px) { ... } </li></ul><ul><li>@media screen and (max-width:340px) { ... } </li></ul>
    • 41. CSS3 Media Queries <ul><li>min-width (refers to viewport dimensions) </li></ul><ul><li>min-device-width refers to display dimensions of the device (maybe safe for identifying the device, iPad, iPhone, etc.) </li></ul><ul><li>can select based on dpi or dpcm, not just width </li></ul><ul><li>can select based on color depth </li></ul>
    • 42. More Media Queries <ul><li>http://www.w3.org/TR/css3-mediaqueries/ </li></ul><ul><li>width </li></ul><ul><li>height </li></ul><ul><li>device-width </li></ul><ul><li>device-height </li></ul><ul><li>orientation </li></ul><ul><li>aspect-ratio </li></ul><ul><li>device-aspect-ratio </li></ul><ul><li>color </li></ul><ul><li>color-index </li></ul><ul><li>monochrome </li></ul><ul><li>resolution </li></ul><ul><li>scan </li></ul><ul><li>grid </li></ul>
    • 43. Browser Support <ul><li>Opera 9.5+ </li></ul><ul><li>Firefox 3.5+ </li></ul><ul><li>Safari 3 </li></ul><ul><li>Chrome </li></ul><ul><li>Mobile Webkit </li></ul><ul><li>Opera Mobile ~ </li></ul>
    • 44. A magic bullet <ul><li>code.google.com/p/css3-mediaqueries-js/ </li></ul><ul><li>IE8 and below </li></ul><ul><li>Firefox 1 & 2 </li></ul><ul><li>Safari 2 </li></ul>
    • 45. Design: Factors to Consider <ul><li>Range of devices with which your content will be viewed </li></ul><ul><li>How to layout content effectively for different platforms </li></ul><ul><li>Base image size may not be based on your default targeted layout. </li></ul><ul><li>Have a plan for long-line lengths on large displays </li></ul>
    • 46. Resources <ul><li>The article that started it all, by Ethan Marcotte: </li></ul><ul><ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul></ul><ul><li>Fluid Images by Ethan Marcotte: </li></ul><ul><ul><li>http://unstoppablerobotninja.com/entry/fluid-images </li></ul></ul><ul><li>IE8 and below Media Queries fix: </li></ul><ul><ul><li>http://code.google.com/p/css3-mediaqueries-js/ </li></ul></ul><ul><li>IE6 min/max-width hack: </li></ul><ul><ul><li>http://www.cameronmoll.com/archives/000892.html </li></ul></ul><ul><li>Fluid Grids by Ethan Marcotte: </li></ul><ul><ul><li>http://www.alistapart.com/articles/fluidgrids/ </li></ul></ul><ul><li>Media Queries reference, list of Media Query selectors available: </li></ul><ul><ul><li>http://www.w3.org/TR/css3-mediaqueries/ </li></ul></ul><ul><li>Responsive Typesetting: </li></ul><ul><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html </li></ul></ul>
    • 47. A few examples <ul><li>http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/ </li></ul>
    • 48. Resources <ul><li>Notes and links to resources: </li></ul><ul><ul><li>http://typewith.me/fcip-rwd </li></ul></ul>
    • 49. Where to find me <ul><li>@ron_z – follow me on Twitter </li></ul><ul><li>[email_address] </li></ul><ul><li>codegeek.net </li></ul><ul><li>SocialMediaPilots.com </li></ul><ul><li>EinsteinAndSockMonkey.com </li></ul><ul><ul><li>@EinsteinMonkey </li></ul></ul><ul><ul><li>A new web design/dev/ux podcast with Steve Martin @CleverCubed </li></ul></ul><ul><li>IgniteFortCollins.com and @IgniteFC </li></ul><ul><li>The Fort Collins Hive: HiveFC.com </li></ul>
    • 50. Many Thanks to: <ul><li>Ethan Marcotte – for the well-crafted articles describing and demonstrating Responsive Web Design, Fluid Grids, and Fluid Images. Thanks for the excellent talk on the topic at An Event Apart Minneapolis in July 2010 too. </li></ul><ul><ul><li>http://unstoppablerobotninja.com/ </li></ul></ul><ul><li>Luke Wroblewski for the info and stats about mobile trends and techniques during your talk at AEA Minneapolis and on the web </li></ul><ul><ul><li>http://www.lukew.com/ ff/ </li></ul></ul>
    • 51. Responsive Web Design Fort Collins Internet Professionals August 12, 2010

    ×