UX & Responsive DesignOptimizing User Experience Across Devices

UXCamp DC -- January 5, 2013

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

You have some options:

Fixed-width Site

Separate Mobile Site

One Website

History

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

Responsive Design

How It Works

(but words don’t mean much)

two things:

Flexible

Adjustable

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

Why?

85% of American adults

own a cell phone

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

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

But most of them also havea desktop or laptop.

Content Parity

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

- Brad Frost@brad_frost

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

The best way to be future friendly is to be backwards-compatible.

- Jeremy Keith@adactio

Context of Use

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

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

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

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

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

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

Design Process

Start with 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/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 languagebetween the designersand the stakeholders

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

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

Give everybody the same content

Displayed appropriatelyfor their device

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

Fin