wtf rwd! agreeing to disagree

48
WTF RWD! AGREEING TO DISAGREE

Upload: hawk-thompson

Post on 08-Sep-2014

4.885 views

Category:

Technology


0 download

DESCRIPTION

Some say responsive web design means a different content strategy between different devices based on the context of use. Others say responsive web design means getting the same content no matter what device and context. Join us as we agree to disagree in this heated debate on responsive web design and how it interweaves with coding, analytics, SEO and user experience.

TRANSCRIPT

Page 1: WTF RWD! Agreeing to Disagree

WTF RWD!AGREEING TO DISAGREE

Page 2: WTF RWD! Agreeing to Disagree

#WTFRWD #SXSW

Page 3: WTF RWD! Agreeing to Disagree

INTRODUCTIONS

Page 4: WTF RWD! Agreeing to Disagree

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

Page 5: WTF RWD! Agreeing to Disagree
Page 6: WTF RWD! Agreeing to Disagree

RESPONSIVE WEB DESIGN

Page 7: WTF RWD! Agreeing to Disagree

FIRST THINGS FIRST

Page 8: WTF RWD! Agreeing to Disagree

Buy this book.

Page 9: WTF RWD! Agreeing to Disagree

Also these.

Page 10: WTF RWD! Agreeing to Disagree

TEN SIMPLE WORDS

Page 11: WTF RWD! Agreeing to Disagree

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

Page 12: WTF RWD! Agreeing to Disagree

THREE KEY INGREDIENTS

Page 13: WTF RWD! Agreeing to Disagree

1) Flexible grid-based layout

Source: Responsive Web Design, Marcotte, 2009.

Page 14: WTF RWD! Agreeing to Disagree

2) Flexible images and media

Source: Responsive Web Design, Marcotte, 2009.

Page 15: WTF RWD! Agreeing to Disagree

3) Media queries

Source: Responsive Web Design, Marcotte, 2009.

Page 16: WTF RWD! Agreeing to Disagree

ONE HELL OF A QUANDARY

Page 17: WTF RWD! Agreeing to Disagree

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

Page 18: WTF RWD! Agreeing to Disagree

And that’s just Android, y’all.

Page 19: WTF RWD! Agreeing to Disagree

CONSIDERATIONS

Page 20: WTF RWD! Agreeing to Disagree

APPROACH

Page 21: WTF RWD! Agreeing to Disagree

PROS CONS

Potentially high return on investment

Potentially highinitial investment

Unified code base Siloed tech stacks

Long-term channel management

Interim legacy site support

Page 22: WTF RWD! Agreeing to Disagree

DESIGN

Page 23: WTF RWD! Agreeing to Disagree

PROS CONS

Flat design Flat design

More control Fewer options

Easy to govern Difficult to brand

Page 24: WTF RWD! Agreeing to Disagree

UX

Page 25: WTF RWD! Agreeing to Disagree

PROS CONS

Scalable info architecture Complexities of scale

Streamlined user interface

Device-specificclick/touch targets

Omnichannelconsistency

One size fits all?Really??

Page 26: WTF RWD! Agreeing to Disagree

Source: Luke Wroblewski

Page 27: WTF RWD! Agreeing to Disagree

CONTENT

Page 28: WTF RWD! Agreeing to Disagree

PROS CONS

“Chunks not blobs” De-blobbing takes time

Semantic content Arguing over semantics

Content decoupled from presentation layer

Limited range of WCM options

Page 29: WTF RWD! Agreeing to Disagree

SEARCH

Page 30: WTF RWD! Agreeing to Disagree

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

Page 31: WTF RWD! Agreeing to Disagree

PERFORMANCE

Page 32: WTF RWD! Agreeing to Disagree

PROS CONS

Easy to cache Difficult to be dynamic

Reduced HTTP requests Potential code bloat

Quicker dev time Longer dev time

Page 33: WTF RWD! Agreeing to Disagree

USABILITY

Page 34: WTF RWD! Agreeing to Disagree

PROS CONS

Mobile optimized Requires mobile mindset

Accessibility oriented Accessibility challenged

Future friendly Legacy unfriendly

Page 35: WTF RWD! Agreeing to Disagree

ECOMMERCE

Page 36: WTF RWD! Agreeing to Disagree

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

Page 37: WTF RWD! Agreeing to Disagree

FUTURE

Page 38: WTF RWD! Agreeing to Disagree

FACTORS EXAMPLES

Bigger screens Smart TV, DOOH

Smaller screens Glass, Pebble, Fitbit

No screens BCI, MMI

Page 39: WTF RWD! Agreeing to Disagree

PRESENT

Page 40: WTF RWD! Agreeing to Disagree

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

Page 41: WTF RWD! Agreeing to Disagree

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

Page 42: WTF RWD! Agreeing to Disagree

QUESTIONS?

Page 43: WTF RWD! Agreeing to Disagree

#WTFRWD #SXSW

Page 44: WTF RWD! Agreeing to Disagree

bit.ly/wtfrwd-sxsw

Page 45: WTF RWD! Agreeing to Disagree

SHOUTOUTS

Page 46: WTF RWD! Agreeing to Disagree

Maria SaavedraTom HudsonStacey Doyle

Brad ZabroskiChun Kong

Gray Luckett...

Page 47: WTF RWD! Agreeing to Disagree

...and Ethan Marcotte, obvs.

Page 48: WTF RWD! Agreeing to Disagree

THANKS!