Responsive Design Heaven & Hell

Responsive Design Heaven & Hell* Clarissa Peterson clarissapeterson.com @clarissa*Someone else chose the title, not me.... I’m not quite so dramatic.

UX & Mobile Creatives Meetup September 25, 2012

"So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my friend whos not a web designer

Mobile

It’s Not About MobileIt’s About the Web

Responsive Web Design

Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.This allows all users to have an optimal experiencewithout creating separate sites for different devices.

Options

1. Design for the Desktop2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design

Advantages ofResponsive Design

Consistent experience

Content parity

No zooming

Single code base

Device agnostic

URL management

Disadvantages ofResponsive Design

Context of use

Speed/bandwidth

Advertising

Workﬂow

We aren’t good at it yet.

"Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank

How do you choose?

Content sites vs. transactional sites

Context of use

Resources

Your CMS might decide for you

Don’t do a native app justbecause your boss wants one.

Things to Consider when Doing Responsive Design

Device/browser support

Test on real devices

Brief promo: Device Lab DCdevicelabdc.com @devicelabdc

Speed/bandwidth

Small-screen ﬁrst

Let content determine design

Let design determine breakpoints

Consider user experience & business goals ﬁrst

Communicate with your clients

Responsive workﬂow

Questions

Resources

A Few Examples of Responsive Design Boston Globe http://www.bostonglobe.com Smashing Magazine http://www.smashingmagazine.com People (mobile site) http://m.people.com United Pixelworkers http://www.unitedpixelworkers.com/ World Wildlife Fund http://worldwildlife.org/ Stuff & Nonsense http://www.stuffandnonsense.co.uk/ Emeril’s Restaurants http://www.emerilsrestaurants.com/ Andersson-Wise Architects http://www.anderssonwise.com AIDS.gov (HHS) http://aids.govWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/

BooksEthan Marcotte - Responsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/ Luke Wroblewski - Mobile First (2011) http://www.abookapart.com/products/mobile-ﬁrst Websites @RWD (Ethan Marcotte) https://twitter.com/RWD Future Friendly http://futurefriend.ly/ Brad Frost http://bradfrostweb.com/blog/

Articles Responsive Web Design - Ethan Marcotte (May 2010) http://www.alistapart.com/articles/responsive-web-design/How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012) http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/ Design Process In The Responsive Age - Drew Clemens (May 2012) http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Making of: People Magazines Responsive Mobile Website (July 2012) http://globalmoxie.com/blog/making-of-people-mobile.shtml Presidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012) http://mobile.smashingmagazine.com/2012/08/22/ separate-mobile-responsive-website-presidential-smackdown/

http://www.womentalkdesign.com	17
https://twitter.com	8
http://presentationdocs.playableitems.demobo.com	5
http://womentalkdesign.com	5
http://localhost	4
https://si0.twimg.com	3
http://tweetedtimes.com	2
http://lanyrd.com	2
https://twimg0-a.akamaihd.net	1
http://womentalkdesign.zippysites.com	1

Responsive Design Heaven & Hell

by Clarissa Peterson on Sep 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 48

Statistics

Responsive Design Heaven & Hell Presentation Transcript