Upload
clarissa-peterson
View
110
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Presentation to: Chicago Web Professionals Meetup Group - February 12, 2013. Responsive Web Design NYC Meetup - January 22, 2013.
Citation preview
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.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/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://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
http://www.oxideinteractive.com.au/
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