Responsive web design

Responsive Web Design

An Introduction

Presenter: Erikk Ross (eross@aii.edu)

Back in my day…

Back in my day…

Today

Flickr: Roberrific, sucelloleiloes, minitechnet, IQ computer services

Mobile Web Stats

3 million new iPads sold on launch weekend

iPhone 4 has sold 75 million units190 million Android activations1.6 billion mobile devices sold to

end users in 201085% of handsets shipped globally in

2011 will include a web browser

Mobile Web Stats

Mobile web will be bigger than desktop Internet use by 2015. --Morgan Stanley

The Problem

How do you design a web site that works well on all devices?

Beyond the desktop

The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.

– Ethan Marcotte

Current approach

Current approach

Multiple web sites for different devices

http://site.com/mobile/ http://mobile.site.com http://site.com/ipad/ http://site.com/iphone/ http://site.com/android http://site.com/ridiculous/

Responsive Web Design

One site to rule them all

Responsive Web Design

It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.

–Jeffrey Zeldman

One site, multiple devices

One site, multiple devices

One site, multiple devices

Example Sites

The Book

Responsive Web Design by Ethan Marcotte

157 pages $9 for the e-book www.abookapart.com Go buy it now, I’ll

wait

The Ingredients

A flexible, grid-based layoutFlexible images and mediaMedia queries, a module from the

CSS3 specification.

Flexible Grid

No more fixed sizes Do not use px…ever. Seriously.

What about widths? %

What about font sizes? em

target / context = result

target / context = result Left Column:

204 / 637 = .32025117 Right column:

420 /637 = .659340659

#blog .main {            float: right;            width: 420px; } #blog .aside {            float: left;            width: 204px; }

#blog .main {            float: right;            width: 65.9340659%; /* 429 / 637 */ } #blog .aside {            float: left;            width: 32.025117%; /* 204 / 637 */ }

Flexible Grid

target / context = result

Buy this book

Flexible Images

The image will now resize and reflow itself proportionally

It will never be larger than its container. Will grow or shrink based on container size Can be applied to other HTML tags too:

img {   max-width: 100%;}

img, video, object {   max-width: 100%;}

Media Queries

Used to change the layout of the page based on the size of the display.

@media screen and (max-width: 660px) {   /* any screen size 660px and less will have the following CSS applied */ }

@media screen and (max-width: 340px) {   /* any screen size 340px and less will have the following CSS applied */ }

@media screen and (max-width: 1100px) {   /* any screen size 1100px and less will have the following CSS applied */ }

Resources

Ethan Marcotte’s article that coined the termhttp://www.alistapart.com/articles/responsive-web-design/

Responsive Web Design, the bookhttp://www.abookapart.com/products/responsive-web-design

Fluid Images, by Ethan Marcotte (Chapter 3 of the book)http://www.alistapart.com/articles/fluid-images/

Fluid Grids, by Ethan Marcottehttp://www.alistapart.com/articles/fluidgrids/

Responsive Web Design, another article by Ethan Marcottehttp://www.netmagazine.com/features/responsive-web-design

CSS3 Media Querieshttp://webdesignerwall.com/tutorials/css3-media-queries

Mediaqueries.es, a list of sites using Responsive Web Design techniqueshttp://mediaqueri.es/

This presentationhttp://www.slideshare.net/erikkross/responsive-web-design-12143547