WTF RWD! Agreeing to Disagree
-
Upload
hawk-thompson -
Category
Technology
-
view
4.885 -
download
0
description
Transcript of 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!