Responsive Web Design

»

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• ronz@codegeek.net• 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