A Responsive ProcessDave Ruse

@daveruse

Hi, I’m Dave.Web DesignerPhase2 Technology

...design that can respond to the constraints of the browser window or device that renders it.

Ethan Marcotte

“

”

Responsive Web Design

• Flexible Grid

• Flexible Media

• Media Queries

22-25% of US and UK mobile Internet browsers never or infrequently use the desktop Internet.

http://www.lukew.com/ff/entry.asp?1405

Nearly 7 percent of all online purchases were made using iPads, just 18 months after the tablet

computers were released by Apple Inc.http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-12

1.45M devices shipped per day - 317,124 birthshttp://www.lukew.com/ff/entry.asp?1506

http://www.flickr.com/photos/kenleewrites/4770358603/

The role of the designer, is that of a very good, thoughtful host, all of whose energy goes into trying to anticipate the needs of his guests.

Charles Eames

“

”

Education

Setting the Stage

Within your project team.

http://www.flickr.com/photos/elstudio/3532534210/

http://farm3.staticflickr.com/2220/2520224926_3cc57b

http://www.flickr.com/photos/sonictk/376526369/

Content

Copy

Device Agnostic

Check out the links in the sidebar for more information.

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

IMPORTANT LINKS

Here’s a linkAnother linkSo many links

Check out the links in the sidebar for more information.

No Hiding

Images

Video

UX

Prototypes

http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Visual Design

Style Tiles

www.styletil.es

Style Tiles

Design Comps

or

and

FIDELITY FLEXIBILITY

“

”

Oliver Reichenstein

The tool doesn’t make the craftsman.

Style Guides

TitleInternal Reviews

Development

Testing

“

”

@jbrewer

If you think responsive’s simple I feel bad for you son. We got 99 breakpoints, but the iPhone’s just one.

http://www.flickr.com/photos/magicdaddy/3679257428/

Handoff

http://www.flickr.com/photos/stevendepolo/5749192621/

@daveruse

Thanks!

?

ResourcesResponsive Web Design - Ethan Marcottehttp://www.abookapart.com/products/responsive-web-design

Mobile First - Luke Wroblewskihttp://www.abookapart.com/products/mobile-first

Responsive Text - Frankie Robertohttp://www.frankieroberto.com/responsive_text

Ads and Responsive Web Designhttp://blog.jonphillips.ca/2012/01/17/ads-and-responsive-web-design/

Responsive Video - Fitvid.jshttp://fitvidsjs.com/

BBC Style Guidehttp://www.bbc.co.uk/gel/

Test on Real Mobile Devices Without Breaking the Bank - Brad Frosthttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Strategies for Choosing Test Deviceshttp://stephanierieger.com/strategies-for-choosing-test-devices/

Wireframes in the Browser http://dropbox.headscapedev.com/projects/wireframes/demo.htm

Style Tileshttp://www.styletil.es

How Much Does A One-Second Page Load Delay Cost? http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-second_page_load_d.php

Limit Bandwidth to Your Mac/PChttp://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/http://www.netlimiter.com/

Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/