Responsive Web Design

Responsive Web Design Fort Collins Internet Professionals August 12, 2010

When life was simple Flickr: Jean-Lou Dupont

1280 x 800 Photo: Steve Rhodes 1280 x 800 Flickr: goodrob13

1280 x 800 Photo: Steve Rhodes 16 : 9 Photo: Steve Rhodes

1280 x 800 Photo: Steve Rhodes Netbook 8.9” screen Flickr: ziaek

Title Many screens Flickr: aranarth

Title More is better 5120 x 1600 Flickr: jochenWolters

Title Flickr: photographer 2006 Smart Phones Flickr: barnoid

Title Flickr: photographer 2007 Smart Phones Flickr: PowerupMobile.com

Title Flickr: photographer And then came…

Title Flickr: photographer The One.

Title Flickr: photographer Copyright: Fox Studios

Title Flickr: photographer Flickr: bandita

Title Flickr: photographer January 9, 2007 Flickr: shapeshift

Title Flickr: photographer 2008 Smart Phones Flickr: midnightglory

Title Flickr: photographer 2009 Smart Phones Flickr: lalunablanca

Title Flickr: photographer 2009: Me Flickr: Spartacus007

Does Mobile Matter? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Title Flickr: photographer Innovation & Transition

Title Flickr: photographer 2010 iPad – 3 million sold in 80 days Flickr: JaredEarle

Title Flickr: photographer Oh yeah, it doesn’t run Flash Flickr: JaredEarle

Title Flickr: photographer iPhone 4 – 960 x 640 @ 326 ppi “Retina Display” Flickr: Yutaka Tsutano

Title Flickr: photographer Android, BlackBerry Flickr: Johan Larsson, dusk-photography

Title Flickr: photographer 2010 Many Screens Flickr: AndreasSchepers

We can rise above it ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mobile browsers converging ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Title Flickr: photographer Einstein’s quest for the Unified Field Flickr: Thomas Thomas

The Unified (web) Field? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Responsive Web Design is ,[object Object],[object Object],[object Object],[object Object]

Responsive Web Design ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Where do you start? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Keep in mind the context ,[object Object],[object Object],[object Object],[object Object]

Full width blocks ,[object Object],[object Object],[object Object]

Sizing in % rather than px ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What about images? ,[object Object],[object Object],[object Object]

Media Types ,[object Object],[object Object]

CSS3 Media Queries… ,[object Object],[object Object],[object Object]

CSS3 Media Queries ,[object Object],[object Object],[object Object],[object Object]

More Media Queries ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Browser Support ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A magic bullet ,[object Object],[object Object],[object Object],[object Object]

Design: Factors to Consider ,[object Object],[object Object],[object Object],[object Object]

Resources ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A few examples ,[object Object]

Resources ,[object Object],[object Object]

Where to find me ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Many Thanks to: ,[object Object],[object Object],[object Object],[object Object]

Responsive Web Design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Responsive Web Design

Similar to Responsive Web Design (20)

Recently uploaded

Recently uploaded (20)

Responsive Web Design

Editor's Notes