UX & Responsive Design

UX & Responsive DesignOptimizing User Experience Across DevicesUXCamp DC -- January 5, 2013 Clarissa Peterson clarissapeterson.com @clarissa

"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

You have some options:

Fixed-width Site

Separate Mobile Site

One Website

History

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

Responsive Design

How It Works(but words don’t mean much)

two things:

Flexible

Adjustable

http://www.unitedpixelworkers.com/

85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

40% have a cell phone that’snot a smartphonehttp://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

But most of them also have a desktop or laptop.

Content Parity

The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or conﬁguration. - Brad Frost @brad_frost

Access

http://www.unheap.com/

Future-Friendly

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

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

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

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

The best way to be future friendly is to bebackwards-compatible. - Jeremy Keith @adactio

Context of Use

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

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

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

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

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

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

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

Small-Screen First

Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger

Design Process

Start with content.

DesignDevelop

Prototyping

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

Frameworks

http://foundation.zurb.com/

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

Style Tiles

Communicate theessence of a visual brand for the web

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

help form acommon visual language between the designers and the stakeholders

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

Testing

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

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

Give everybody the same content Displayed appropriately for their deviceNo matter what device they have.

There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web. - Stephen Hay @stephenhay

http://womentalkdesign.com	362
http://www.womentalkdesign.com	109
http://lanyrd.com	57
http://www.scoop.it	57
http://articulategeek.tumblr.com	48
https://twitter.com	23
http://ec2-54-242-168-170.compute-1.amazonaws.com	9
http://womentalkdesign.zippysites.com	9
http://www.tumblr.com	2
http://feeds.feedburner.com	2
http://www.linkedin.com	2
http://kred.com	1
https://www.rebelmouse.com	1

UX & Responsive Design

by Clarissa Peterson on Jan 07, 2013

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 682

Statistics

UX & Responsive Design Presentation Transcript