Scribd
Upload
88 views

Responsive Web Design: Fort Collins Internet Professionals August 12, 2010

The document discusses responsive web design, which is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It covers topics like flexible grids, CSS media queries, responsive images, and browser support for responsive design techniques.

Uploaded by

Barbara Lyschenko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
88 views

Responsive Web Design: Fort Collins Internet Professionals August 12, 2010

The document discusses responsive web design, which is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It covers topics like flexible grids, CSS media queries, responsive images, and browser support for responsive design techniques.

Uploaded by

Barbara Lyschenko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 51

»

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
• 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 Design

Fort Collins Internet Professionals


August 12, 2010

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy