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