» Responsive Web Responsive Web Design Design Fort Collins Internet Professionals Fort Collins Internet Professionals August 12, 2010 August 12, 2010
Oct 28, 2014
»
Responsive Web Responsive Web DesignDesign
Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsAugust 12, 2010August 12, 2010
» When life was simple
Flickr: Jean-Lou Dupont
» 1280 x 800
Photo: Steve Rhodes
1280 x 800Flickr: goodrob13
1280 x 800Flickr: goodrob13
» 1280 x 800
Photo: Steve Rhodes
16 : 9Photo: Steve Rhodes
16 : 9Photo: Steve Rhodes
» 1280 x 800
Photo: Steve Rhodes
Netbook 8.9” screenFlickr: ziaek
Netbook 8.9” screenFlickr: ziaek
» Title
Many screensFlickr: aranarth
Many screensFlickr: aranarth
» Title
More is better 5120 x 1600Flickr: jochenWolters
More is better 5120 x 1600Flickr: jochenWolters
» Title
Flickr: photographer
2006 Smart PhonesFlickr: barnoid
2006 Smart PhonesFlickr: barnoid
» Title
Flickr: photographer
2007 Smart PhonesFlickr: PowerupMobile.com
2007 Smart PhonesFlickr: PowerupMobile.com
» Title
Flickr: photographer
And then came…And then came…
» Title
Flickr: photographer
The One.The One.
» Title
Flickr: photographer
Copyright: Fox StudiosCopyright: Fox Studios
» Title
Flickr: photographer
Flickr: banditaFlickr: bandita
» Title
Flickr: photographer
January 9, 2007Flickr: shapeshift
January 9, 2007Flickr: shapeshift
» Title
Flickr: photographer
2008 Smart PhonesFlickr: midnightglory
2008 Smart PhonesFlickr: midnightglory
» Title
Flickr: photographer
2009 Smart PhonesFlickr: lalunablanca
2009 Smart PhonesFlickr: lalunablanca
» Title
Flickr: photographer
2009: MeFlickr: Spartacus007
2009: MeFlickr: Spartacus007
» 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/
»
Flickr: Gravitywave
» Title
Flickr: photographer
Innovation & TransitionInnovation & Transition
» Title
Flickr: photographer
2010 iPad – 3 million sold in 80 daysFlickr: JaredEarle
2010 iPad – 3 million sold in 80 daysFlickr: JaredEarle
» Title
Flickr: photographer
Oh yeah, it doesn’t run FlashFlickr: JaredEarle
Oh yeah, it doesn’t run FlashFlickr: JaredEarle
» 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
» Title
Flickr: photographer
Android, BlackBerryFlickr: Johan Larsson, dusk-photography
Android, BlackBerryFlickr: Johan Larsson, dusk-photography
» Title
Flickr: photographer
2010 Many ScreensFlickr: AndreasSchepers
2010 Many ScreensFlickr: AndreasSchepers
»
Flickr: Malingering
»
Flickr: Beni Ishaque Luthor
» 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!)
» 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/
» Title
Flickr: photographerEinstein’s quest for the Unified FieldFlickr: Thomas Thomas
Einstein’s quest for the Unified FieldFlickr: Thomas Thomas
» 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
» Responsive Web Design is
“A flexible grid (with flexible images)that incorporates media queries tocreate a responsive, adaptive layout.”
- Ethan Marcotte
» 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.”
» 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)
» Keep in mind the context
• Target ÷ Context = Result
.outer {
width: 90.82%; /* 930px / 1024px */
}
» Full width blocks
#masthead, #nav, #home_intro {
width: 100%; /* 930px / 930px */
}
» 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 */
}
» 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
» Media Types<link rel="stylesheet" media="screen" href="c.css" />
<link rel="stylesheet" media=”print" href="c.css" />
» 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) { ... }
» 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
» 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
» Browser Support
• Opera 9.5+• Firefox 3.5+• Safari 3• Chrome• Mobile Webkit• Opera Mobile ~
» A magic bullet
code.google.com/p/css3-mediaqueries-js/
• IE8 and below• Firefox 1 & 2• Safari 2
» 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
» 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
» A few examples
• http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/
» Resources
• Notes and links to resources:– http://typewith.me/fcip-rwd
» 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
» 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/
»
Responsive Web Responsive Web DesignDesign
Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsAugust 12, 2010August 12, 2010