wtf rwd! agreeing to disagree

WTF RWD!AGREEING TO DISAGREE

#WTFRWD #SXSW

INTRODUCTIONS

HAWK THOMPSONAMANDA KRAUSSCARYN LUSINCHI CHRIS WIEGMAN@hawkt@risatrix@wordedgewise @chriswiegman

RESPONSIVE WEB DESIGN

FIRST THINGS FIRST

Buy this book.

Also these.

TEN SIMPLE WORDS

Fluid design that anticipates and responds to the user’s needs.

THREE KEY INGREDIENTS

1) Flexible grid-based layout

Source: Responsive Web Design, Marcotte, 2009.

2) Flexible images and media

Source: Responsive Web Design, Marcotte, 2009.

3) Media queries

Source: Responsive Web Design, Marcotte, 2009.

ONE HELL OF A QUANDARY

Thousands of devices (and counting).Source: Luke Wroblewski

And that’s just Android, y’all.

CONSIDERATIONS

APPROACH

PROS CONS

Potentially high return on investment

Potentially highinitial investment

Unified code base Siloed tech stacks

Long-term channel management

Interim legacy site support

DESIGN

PROS CONS

Flat design Flat design

More control Fewer options

Easy to govern Difficult to brand

UX

PROS CONS

Scalable info architecture Complexities of scale

Streamlined user interface

Device-specificclick/touch targets

Omnichannelconsistency

One size fits all?Really??

Source: Luke Wroblewski

CONTENT

PROS CONS

“Chunks not blobs” De-blobbing takes time

Semantic content Arguing over semantics

Content decoupled from presentation layer

Limited range of WCM options

SEARCH

PROS CONS

Same metadataacross all channels

Same metadataacross all channels

Optimal for consistent search behavior

Contextual search behavior, not so much

Google rankingfavors responsive

Responsive hatchet jobs

PERFORMANCE

PROS CONS

Easy to cache Difficult to be dynamic

Reduced HTTP requests Potential code bloat

Quicker dev time Longer dev time

USABILITY

PROS CONS

Mobile optimized Requires mobile mindset

Accessibility oriented Accessibility challenged

Future friendly Legacy unfriendly

ECOMMERCE

PROS CONS

Easy to integrate and augment channels

Hard to leverage native capabilities of channels

More shopping = more $ Shopping engine woes

One shopping experience to rule them all

A million tiny user interface complexities

FUTURE

FACTORS EXAMPLES

Bigger screens Smart TV, DOOH

Smaller screens Glass, Pebble, Fitbit

No screens BCI, MMI

PRESENT

“I’m not designing this for your effing Fitbit.” -anonymous designer

Like it or not, you might want to consider designing for everything.

QUESTIONS?

#WTFRWD #SXSW

bit.ly/wtfrwd-sxsw

SHOUTOUTS

Maria SaavedraTom HudsonStacey Doyle

Brad ZabroskiChun Kong

Gray Luckett...

...and Ethan Marcotte, obvs.

THANKS!