Download - Responsive Design Heaven & Hell
Responsive DesignHeaven & Hell*
Clarissa Petersonclarissapeterson.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 who's not a web designer
Mobile
It’s Not AboutMobile
It’s About the Web
Responsive Web Design
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 experience without creating separate sites for different devices.
Options
1. Design for the Desktop
2. Separate Mobile Site
3. Native Mobile App
4. Responsive Design
Advantages of Responsive Design
Consistent experience
Content parity
No zooming
Single code base
Device agnostic
URL management
Disadvantages ofResponsive Design
Context of use
Speed/bandwidth
Advertising
Workflow
We aren’t good at it yet.
"It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress."
- 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 DC
devicelabdc.com@devicelabdc
Speed/bandwidth
Small-screen first
Let content determine design
Let design determine breakpoints
Consider user experience & business goals first
Communicate with your clients
Responsive workflow
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.gov
WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
Books
Ethan Marcotte - Responsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
Luke Wroblewski - Mobile First (2011)http://www.abookapart.com/products/mobile-first
Websites
@RWD (Ethan Marcotte)https://twitter.com/RWD
Future Friendlyhttp://futurefriend.ly/
Brad Frosthttp://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 Magazine's 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/