Learning the Essentials to Design ResponsivelyResponsive Web Design NYC MeetupJanuary 22, 2013 - New York City

Clarissa Petersonclarissapeterson.com

@clarissa

"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

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

Fixed-width Site

Separate Mobile Site

One Website

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

Responsive Design

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

div { width: 25%; float: left;}

1. Flexible Grid2. Flexible Images/Media

3. Media Queries

img, object, video { 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/

@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: 640px) { .section1, .section2 { float: left; width: 50%; }}

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

min-device-width: 00pxmax-device-width: 00px

orientation: landscapeorientation: portrait

device-aspect-ratio: 16/9

min-color-index: 256

min-resolution: 300dpi

Existing Site

target ÷ context = result

#heading { ! width: 960px;}

#heading { ! width: 75%; /* 960px / 1280px */}

Flexible Typesetting

.nav { ! font-size: 22px; }

.nav { ! font-size: 1.375em; /* 22px / 16px */}

Small-Screen First(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

Navigation

http://bradfrost.github.com/this-is-responsive/patterns.html

http://www.gravitatedesign.com

http://www.gravitatedesign.com

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

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

http://contentsmagazine.com/

http://contentsmagazine.com/

http://contentsmagazine.com/

http://starbucks.com/

http://starbucks.com/

http://starbucks.com/

http://starbucks.com/

http://www.emerilsrestaurants.com

http://www.emerilsrestaurants.com

http://www.emerilsrestaurants.com

Design Process

Content

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://foundation.zurb.com/prototype-example2.php

http://foundation.zurb.com/prototype-example2.php

http://foundation.zurb.com/prototype-example2.php

http://foundation.zurb.com/prototype-example2.php

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

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

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

Testing

Touch

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

"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

Examples

http://worldwildlife.org/

http://worldwildlife.org/

http://worldwildlife.org/

http://worldwildlife.org/

http://worldwildlife.org/

http://worldwildlife.org/

http://emerilsrestaurants.com/

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.oxideinteractive.com.au/

http://www.wm.edu/

http://www.wm.edu/

http://www.wm.edu/

http://www.wm.edu/

http://www.hsgac.senate.gov

http://www.hsgac.senate.gov

http://www.hsgac.senate.gov

http://www.hsgac.senate.gov

http://www.hsgac.senate.gov

Resources

Books

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

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

Adaptive Web Design: Crafting Rich Experiences with Progressive EnhancementAaron Gustafson (2011)http://easy-readers.net/books/adaptive-web-design/

Implementing Responsive Design: Building sites for an anywhere, everywhere webTim Kadlec (2012)http://www.implementingresponsivedesign.com/

Content Strategy for MobileKaren McGrane (2012)http://www.abookapart.com/products/content-strategy-for-mobile

Articles

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

Responsive-Ready Content - Sara Wachter-Boettcher (March 2012)http://sarawb.com/2012/03/07/content-strategy-responsive-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 Clemons (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

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

Frameworks & Navigation

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 - Aug. 2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

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-friendly.http://futurefriend.ly/

Responsive ResourcesA collection of resources about the various aspects of responsive web design.http://bradfrost.github.com/this-is-responsive/resources.html

Mediaqueri.esInspirational websites using media queries and responsive web design.http://mediaqueri.es/

Advanced Responsive Design Topics

To learn more about frameworks, navigation patterns, preprocessors, responsive images, responsive tables, and polyfills, check out my slides from:

Responsive Design Tools & Resourceshttp://www.slideshare.net/clarissapeterson/responsive-design-tools-resources-16066514

Find me online:clarissapeterson.com

@clarissa