»

Responsive Web Design

Fort Collins Internet Professionals

August 12, 2010
 » When life was simple

Flickr: Jean-Lou Dupont

 » 1280 x 800

1280 x 800
Flickr: goodrob13

Photo: Steve Rhodes

 » 1280 x 800

16 : 9
Photo: Steve Rhodes

Photo: Steve Rhodes

 » 1280 x 800

Netbook 8.9” screen

Flickr: ziaek

Photo: Steve Rhodes

 » Title

Many screens
Flickr: aranarth
 » Title

More is better 5120 x 1600

Flickr: jochenWolters
 » Title

2006 Smart Phones

Flickr: barnoid

Flickr: photographer
 » Title

2007 Smart Phones

Flickr: PowerupMobile.com

Flickr: photographer
 » Title

And then came…

Flickr: photographer
 » Title

The One.

Flickr: photographer
 » Title

Copyright: Fox Studios

Flickr: photographer
 » Title

Flickr: bandita

Flickr: photographer
 » Title

January 9, 2007
Flickr: shapeshift

Flickr: photographer
 » Title

2008 Smart Phones

Flickr: midnightglory

Flickr: photographer
 » Title

2009 Smart Phones

Flickr: lalunablanca

Flickr: photographer
 » Title

2009: Me
Flickr: Spartacus007

Flickr: photographer
» 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

Innovation & Transition

Flickr: photographer
 » Title

2010 iPad – 3 million sold in 80 days

Flickr: JaredEarle

Flickr: photographer
 » Title

Oh yeah, it doesn’t run Flash

Flickr: JaredEarle

Flickr: photographer
 » Title

iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”

Flickr: Yutaka Tsutano

Flickr: photographer
 » Title

Android, BlackBerry
Flickr: Johan Larsson, dusk-photography

Flickr: photographer
 » Title

2010 Many Screens

Flickr: AndreasSchepers

Flickr: photographer
 »

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

Einstein’s quest for the Unified Field

Flickr: photographer
Flickr: 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 to
create 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 • color
• height • color-index
• device-width • monochrome
• device-height • resolution
• orientation • scan
• aspect-ratio • grid
• device-aspect-ratio
» 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/respon
sive-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 Design

Fort Collins Internet Professionals

August 12, 2010