ux & responsive design

94
UX & Responsive Design Optimizing User Experience Across Devices UXCamp DC -- January 5, 2013 Clarissa Peterson clarissapeterson.com @clarissa

Upload: clarissa-peterson

Post on 17-Aug-2014

10.807 views

Category:

Design


0 download

DESCRIPTION

At UXCamp DC, January 5, 2013.

TRANSCRIPT

Page 1: UX & Responsive Design

UX & Responsive DesignOptimizing User Experience Across Devices

UXCamp DC -- January 5, 2013

Clarissa Petersonclarissapeterson.com

@clarissa

Page 2: UX & Responsive Design

"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

Page 3: UX & Responsive Design

You have some options:

Page 4: UX & Responsive Design

Fixed-width Site

Page 5: UX & Responsive Design
Page 6: UX & Responsive Design
Page 7: UX & Responsive Design

Separate Mobile Site

Page 8: UX & Responsive Design
Page 9: UX & Responsive Design
Page 10: UX & Responsive Design

One Website

Page 11: UX & Responsive Design
Page 12: UX & Responsive Design
Page 13: UX & Responsive Design
Page 14: UX & Responsive Design
Page 15: UX & Responsive Design

History

Page 16: UX & Responsive Design
Page 17: UX & Responsive Design

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

Page 18: UX & Responsive Design

Responsive Design

Page 19: UX & Responsive Design

How It Works

(but words don’t mean much)

Page 20: UX & Responsive Design

two things:

Page 21: UX & Responsive Design

Flexible

Page 22: UX & Responsive Design
Page 23: UX & Responsive Design
Page 24: UX & Responsive Design

Adjustable

Page 25: UX & Responsive Design

http://www.unitedpixelworkers.com/

Page 26: UX & Responsive Design

http://www.unitedpixelworkers.com/

Page 27: UX & Responsive Design

http://www.unitedpixelworkers.com/

Page 28: UX & Responsive Design

http://www.unitedpixelworkers.com/

Page 29: UX & Responsive Design

http://www.unitedpixelworkers.com/

Page 30: UX & Responsive Design

Why?

Page 31: UX & Responsive Design

85% of American adults

own a cell phone

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

Page 32: UX & Responsive Design

45% of American adults

own a smartphone

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

Page 33: UX & Responsive Design

40%have a cell phone that’s

not a smartphone

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

Page 34: UX & Responsive Design

17%do most of their online browsing

on their phone

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

Page 35: UX & Responsive Design

But most of them also havea desktop or laptop.

Page 36: UX & Responsive Design

Content Parity

Page 37: UX & Responsive Design
Page 38: UX & Responsive Design
Page 39: UX & Responsive Design
Page 40: UX & Responsive Design
Page 41: UX & Responsive Design

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

- Brad Frost@brad_frost

Page 42: UX & Responsive Design
Page 43: UX & Responsive Design
Page 44: UX & Responsive Design
Page 45: UX & Responsive Design
Page 46: UX & Responsive Design
Page 47: UX & Responsive Design
Page 48: UX & Responsive Design
Page 49: UX & Responsive Design
Page 50: UX & Responsive Design

Access

Page 51: UX & Responsive Design

http://www.unheap.com/

Page 52: UX & Responsive Design

Future-Friendly

Page 53: UX & Responsive Design

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

Page 54: UX & Responsive Design

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

Page 55: UX & Responsive Design

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

Page 56: UX & Responsive Design

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

Page 57: UX & Responsive Design

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

- Jeremy Keith@adactio

Page 58: UX & Responsive Design

Context of Use

Page 59: UX & Responsive Design

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

Page 60: UX & Responsive Design

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

Page 61: UX & Responsive Design

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

Page 62: UX & Responsive Design

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

Page 63: UX & Responsive Design

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

Page 64: UX & Responsive Design

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

Page 65: UX & Responsive Design

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

Page 66: UX & Responsive Design

Small-Screen First

Page 67: UX & Responsive Design
Page 68: UX & Responsive Design
Page 69: UX & Responsive Design
Page 70: UX & Responsive Design

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

Page 71: UX & Responsive Design

Design Process

Page 72: UX & Responsive Design

Start with content.

Page 73: UX & Responsive Design

Design

Develop

Page 74: UX & Responsive Design

Prototyping

Page 75: UX & Responsive Design

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

Page 76: UX & Responsive Design

Frameworks

Page 77: UX & Responsive Design

http://foundation.zurb.com/

Page 78: UX & Responsive Design

http://foundation.zurb.com/

Page 83: UX & Responsive Design

Style Tiles

Page 84: UX & Responsive Design

Communicate theessence of a visual brand

for the web

Page 85: UX & Responsive Design

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

Page 86: UX & Responsive Design

help form acommon visual languagebetween the designersand the stakeholders

Page 87: UX & Responsive Design

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

Page 88: UX & Responsive Design

Testing

Page 89: UX & Responsive Design

Touch

Page 90: UX & Responsive Design

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

Page 91: UX & Responsive Design

"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

Page 92: UX & Responsive Design

Give everybody the same content

Displayed appropriatelyfor their device

No matter what device they have.

Page 93: UX & Responsive Design

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

Page 94: UX & Responsive Design

Fin