Responsive DesignLVL Studio UX Soirée at Station CNovember 21, 2012 in Montreal, Quebec

Clarissa Peterson@clarissa

A Little History

Fixed-width Site

Separate Mobile Site

One Website

Before

After

Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

Responsive Web Design

Responsive Web Design http://www.abookapart.com/products/responsive-web-design/

Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

- Ethan Marcotte

How It Works

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

#content {! width: 90%;}

img { ! max-width: 100%;}

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

@media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}

@media screen and (min-width: 640px) { .section1, .section2 { float: left; width: 50%; }}

@media screen and (min-width: 40em) { .section1, .section2 { float: left; width: 50%; }}

Why?

Mobile

45% of American adults

own a smartphone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

40%have a cell phone that’s

not a smartphone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

17%do most of their online browsing

on their phone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

Content Parity

www.consumerreports.org/

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

- Brad Frost@brad_frost

http://www.geico.com/

Access

http://www.unheap.com/

Future-Friendly

Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL

Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7

Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj

Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd

Responsive Design

Context of Use

Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c

Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv

Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P

Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ

Assumptions

Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6

Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6

Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG

Mobile First

Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer steps.

- Stephanie Rieger@stephanierieger

Make it work better for everybody.

Touchscreen

Touch

Hover

Swipe

Navigation

Top Navigation

http://www.gravitatedesign.com

http://www.gravitatedesign.com

http://www.tuj.ac.jp/

http://www.tuj.ac.jp/

Footer Navigation

http://contentsmagazine.com/

http://contentsmagazine.com/

<div id="site-nav">

<form> ... </form>

! <nav>

! ! <ul class="nav nav-primary">

! ! ! <li><a href="#">Archive</a></li>

! ! ! <li><a href="#">About</a></li>

! ! ! <li><a href="#">Write For Us</a></li>

! ! ! <li><a href="#">Subscribe</a></li>! ! !

! ! </ul>

! </nav>

</div>

@media screen and (min-width: 48em) {! #site-nav {! ! position: absolute;! ! top: -5em;! ! width: 100%;! ! z-index: 5;! }}

http://contentsmagazine.com/

Toggle Navigation

http://starbucks.com/

http://starbucks.com/

http://starbucks.com/

Left Nav Flyout

http://www.emerilsrestaurants.com

http://www.emerilsrestaurants.com

http://www.emerilsrestaurants.com

Breakpoints

Illustration credit: Ruth Leth Andersen via Creative Commons http://flic.kr/p/bmbZgo

Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

Design Process

Design

Develop

Prototyping

Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm

Frameworks

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

http://foundation.zurb.com/docs/forms.php

http://foundation.zurb.com/docs/buttons.php

http://foundation.zurb.com/docs/typography.php

http://www.getswizzle.com/

http://www.getswizzle.com/

http://www.getswizzle.com/

Style Tiles

Communicate theessence of a visual brand

for the web

Style Tiles via Creative Commons http://styletil.es/

help form acommon visual languagebetween the designersand the stakeholders

Style Tiles via Creative Commons http://styletil.es/

Testing

Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)

Examples

http://worldwildlife.org/

http://worldwildlife.org/

http://worldwildlife.org/

http://emerilsrestaurants.com/

http://emerilsrestaurants.com/

http://emerilsrestaurants.com/

http://emerilsrestaurants.com/

http://www.oxideinteractive.com.au/

http://www.oxideinteractive.com.au/

http://www.oxideinteractive.com.au/

http://www.wm.edu/

http://www.wm.edu/

http://www.wm.edu/

Responsive Web Design

1. Give everybody the same content

2. Displayed appropriately for their device

3. No matter what device they have

There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.

- Stephen Hay@stephenhay

Resources

A Few More Examples of Responsive Design

Boston Globe http://www.bostonglobe.com

Smashing Magazine http://www.smashingmagazine.com

People (mobile site) http://m.people.com

Disney http://disney.com/

Mashable (beta) http://beta.mashable.com/

Stuff & Nonsense http://www.stuffandnonsense.co.uk/

Google Nexus http://www.google.com/nexus/

Hotellweb http://www.hotellweb.no/?lang=en_US

Andersson-Wise Architects http://www.anderssonwise.com

WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/

Articles

Responsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/

En français: Le Web Design Réactifhttp://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/

How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

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/

Prototyping & Design Process

Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/

Design Process In The Responsive Age (Drew Clemons) - May 2012http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

Responsive Web Design Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Style Tileshttp://styletil.es/

Frameworks

Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained (Joshua Johnson) - August 2012http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained/

15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August 2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

Navigation

Responsive Navigation Patterns (Brad Frost) - February 2012http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) - October 2012http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/

10 Responsive Navigation Solutions and Tutorials - August 2012http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/

Other Websites & Misc.

@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWD

Future Friendlymaking things that are future-friendlyhttp://futurefriend.ly/

Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/

Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/

Books

Responsive Web DesignEthan Marcotte (2011)http://www.abookapart.com/products/responsive-web-design/

En françaishttp://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-design

Mobile First Luke Wroblewski (2011)http://www.abookapart.com/products/mobile-first

En françaishttp://www.editions-eyrolles.com/Livre/9782212134063/mobile-first

Thanks!

Clarissa Petersonclarissapeterson.com

mail@clarissapeterson.com@clarissa