responsive web design - why and how

Responsive Web DesignHow and Why

Back in my day…

When life was simple

And Then Came The One

January 9, 2007

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, saw a 4,932% increase in mobile traffic data in the since the iPhone’s launch. http://www.lukew.com/ff/entry.asp?933

Smartphone sales surpassed worldwide PC sales by the end of 2011 http://www.pcworld.com/article/171380/

Does Mobile Matter?

Innovation & Transition

2010 iPad – 3 million sold in 80 days

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

Today

iPhone 5 sold 5 Million on first day

2 Million in first 24 hours

Over 210 MillionAndroid Activations in 2013

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

Beyond the desktop

Mobile

MobileIt’s Not About

It’s About the Web

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

1. Design for the Desktop2. Separate Mobile Site3. Native Mobile App4. Responsive Design

Options

Desktop Design

Separate Mobile Design

One site to rule them all

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

–Jeffrey Zeldman

Responsive Web Design

One site, multiple devices

One site, multiple devices

• Consistent Experience• Content Parity• No Zooming• Single Code Base (also for CMS users, one login)• Device Agnostic• URL Management

Advantages of Responsive Design

• Context of Use• Speed/bandwidth• Advertising• Workflow• Project Management

Disadvantages of Responsive Design

“It’s not like our industry nailed web design before we started responsive design. It’s still a work in progress.”

- Dan Willis@uxcrank

• Content sites vs. transactional sites• Context of use• Resources• CMS• Don’t do a native app just because the

client wants one

How do you choose?

• Device/browser support• Test on real devices• Test in real-life, everyday scenarios• Speed/bandwidth• Small-screen first• Let content determine design• Let design determine breakpoints• Consider UX and Business goals first• Communicate with your clients• Responsive workflow

Things to Consider

A flexible, grid-based layout

Flexible images and media

Media queries, a module from the CSS3 specification.

The Ingredients

Design Process

Design

Develop

Content Parity

Content Parity

Content Parity

Content Parity

Content Parity

The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration.

- Brad Frost

Context of Use

Context of Use

Mobile First

Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps.

Make it work better for everybody.

Some Examples

Some Examples

Some Examples

Some Examples

Clean out the clutter

Give Everybody the same content

Displayed appropriately for their device

No Matter what device they have

Responsive Web Design

Start with Content

Style TilesCommunicate the

essence of a visual brandfor the web

Mostly Fluid

Column Drop

Layout Shifter

Off Canvas

Style Tiles

Style Tiles

Breakpoints

Set breakpoints according to the content

Device Breakpoints

Device Class Breakpoints

Natural Breakpoints

320px? 480px? WTF!

Break at the specific device width. DON’T DO THIS!!

Identify your most important device widths, classify thedevices and set the breakpoints BETWEEN them.

Define breakpoints where your layout breaks. Also definebreakpoints where you need a layout change due to spacelimitations.

Frameworks

http://foundation.zurb.com/

http://foundation.zurb.com/grid-example1.php

http://www.zurb.com/soapbox

• Bootstrap• Skeleton• 320 and UP• SimpleGrid• Semantic Grid System• Frameless (Kind of)• HTML5 Boilerplate• Golden Grid System

Other Frameworks

Wireframes and Prototyping

Navigation Patterns

http://bradfrost.github.com/this-is-responsive/patterns.html

Navigation PatternsTop Navigation

Footer Anchor

Navigation PatternsToggle Navigation

Navigation PatternsLeft Nav Flyout

Navigation PatternsThree-Dimensional Menu

Content, Content, Content

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

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

Resources

• @rdoddlm – follow me on Twitter• me@ryandoddcs.com or rdodd@siteworx.com• Linkedin

Where to find me

Questions?