A Responsive Process

A Responsive ProcessDave Ruse

Hi, I’m Dave.Web DesignerPhase2 Technology @daveruse

“...design that can respond to theconstraints of the browser window ordevice that renders it.Ethan Marcotte

Responsive Web Design• Flexible Grid• Flexible Media• Media Queries

Nearly 7 percent of all online purchases weremade 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 22-25% of US and UK mobile Internet browsers never or infrequently use the desktop Internet. http://www.lukew.com/ff/entry.asp?1405 1.45M devices shipped per day - 317,124 births http://www.lukew.com/ff/entry.asp?1506

http://www.ﬂickr.com/photos/kenleewrites/4770358603/

“The role of the designer, is that of a verygood, thoughtful host, all of whoseenergy goes into trying to anticipate theneeds of his guests.Charles Eames

Education

Setting the Stage

Within yourproject team. http://www.ﬂickr.com/photos/elstudio/3532534210/

http://farm3.staticﬂickr.com/2220/2520224926_3cc57b

http://www.ﬂickr.com/photos/sonictk/376526369/

Content

Device Agnostic

Check out the links in IMPORTANT LINKS Here’s a linkthe sidebar for more Another link So many linksinformation.

Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links

No Hiding

Images

Prototypes

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

Visual Design

Style Tiles

www.styletil.es

Style Tiles

Design Comps

FIDELITY FLEXIBILITY

“The tool doesn’t make the craftsman.Oliver Reichenstein

Style Guides

Internal Reviews Title

Development

Testing

“If you think responsive’s simple I feelbad for you son. We got 99 breakpoints,but the iPhone’s just one.@jbrewer

http://www.ﬂickr.com/photos/magicdaddy/3679257428/

Handoff

http://www.ﬂickr.com/photos/stevendepolo/5749192621/

Thanks! @daveruse

ResourcesResponsive Web Design - Ethan Marcottehttp://www.abookapart.com/products/responsive-web-designMobile First - Luke Wroblewskihttp://www.abookapart.com/products/mobile-firstResponsive Text - Frankie Robertohttp://www.frankieroberto.com/responsive_textResponsive Video - Fitvid.jshttp://fitvidsjs.com/Ads and Responsive Web Designhttp://blog.jonphillips.ca/2012/01/17/ads-and-responsive-web-design/

Wireframes in the Browserhttp://dropbox.headscapedev.com/projects/wireframes/demo.htmStyle Tileshttp://www.styletil.esBBC 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/

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.phpLimit 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/

A Responsive Process

by daveruse on Jul 27, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 3

Statistics

A Responsive Process Presentation Transcript

https://twimg0-a.akamaihd.net	1
http://us-w1.rockmelt.com	1
http://tweetedtimes.com	1