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.

1. WTF TO DISAGREE
RWD!
AGREEING

2. #WTFRWD #SXSW

3. INTRODUCTIONS

4. CARYN LUSINCHI
@wordedgewise
AMANDA KRAUSS
@risatrix
HAWK THOMPSON
@hawkt
CHRIS WIEGMAN
@chriswiegman

6. RESPONSIVE WEB DESIGN

7. FIRST THINGS FIRST

8. Buy this book.

9. Also these.

10. TEN SIMPLE WORDS

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

12. THREE KEY INGREDIENTS

13. 1) Flexible grid-based layout
Source: Responsive Web Design, Marcotte, 2009.

14. 2) Flexible images and media
Source: Responsive Web Design, Marcotte, 2009.

15. 3) Media queries
Source: Responsive Web Design, Marcotte, 2009.

16. ONE HELL OF A QUANDARY

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

18. And that’s just Android, y’all.

19. CONSIDERATIONS

20. APPROACH

21. PROS
CONS
Potentially high
return on investment
Potentially high
initial investment
Unified code base
Siloed tech stacks
Long-term channel
management
Interim legacy
site support

22. DESIGN

23. PROS
CONS
Flat design
Flat design
More control
Fewer options
Easy to govern
Difficult to brand

24. UX

25. PROS
CONS
Scalable info architecture
Complexities of scale
Streamlined
user interface
Device-specific
click/touch targets
Omnichannel
consistency
One size fits all?
Really??

26. Source: Luke Wroblewski

27. CONTENT

28. PROS
CONS
“Chunks not blobs”
De-blobbing takes time
Semantic content
Arguing over semantics
Content decoupled from
presentation layer
Limited range of
WCM options

29. SEARCH

30. PROS
CONS
Same metadata
across all channels
Same metadata
across all channels
Optimal for consistent
search behavior
Contextual search
behavior, not so much
Google ranking
favors responsive
Responsive
hatchet jobs

31. PERFORMANCE

32. PROS
CONS
Easy to cache
Difficult to be dynamic
Reduced HTTP requests
Potential code bloat
Quicker dev time
Longer dev time

33. USABILITY

34. PROS
CONS
Mobile optimized
Requires mobile mindset
Accessibility oriented
Accessibility challenged
Future friendly
Legacy unfriendly

35. ECOMMERCE

36. 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

37. FUTURE

38. FACTORS
EXAMPLES
Bigger screens
Smart TV, DOOH
Smaller screens
Glass, Pebble, Fitbit
No screens
BCI, MMI

39. PRESENT

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

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

42. QUESTIONS?

43. #WTFRWD #SXSW

44. bit.ly/wtfrwd-sxsw

45. SHOUTOUTS

46. Maria Saavedra
Tom Hudson
Stacey Doyle
Brad Zabroski
Chun Kong
Gray Luckett...

47. ...and Ethan Marcotte, obvs.

48. THANKS!