WTF RWD! Agreeing to Disagree

40,333 views

Published on

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.

Published in: Technology

WTF RWD! Agreeing to Disagree

  1. WTF TO DISAGREE RWD! AGREEING
  2. #WTFRWD #SXSW
  3. INTRODUCTIONS
  4. CARYN LUSINCHI @wordedgewise AMANDA KRAUSS @risatrix HAWK THOMPSON @hawkt CHRIS WIEGMAN @chriswiegman
  5. RESPONSIVE WEB DESIGN
  6. FIRST THINGS FIRST
  7. Buy this book.
  8. Also these.
  9. TEN SIMPLE WORDS
  10. Fluid design that anticipates and responds to the user’s needs.
  11. THREE KEY INGREDIENTS
  12. 1) Flexible grid-based layout Source: Responsive Web Design, Marcotte, 2009.
  13. 2) Flexible images and media Source: Responsive Web Design, Marcotte, 2009.
  14. 3) Media queries Source: Responsive Web Design, Marcotte, 2009.
  15. ONE HELL OF A QUANDARY
  16. Thousands of devices (and counting). Source: Luke Wroblewski
  17. And that’s just Android, y’all.
  18. CONSIDERATIONS
  19. APPROACH
  20. 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
  21. DESIGN
  22. PROS CONS Flat design Flat design More control Fewer options Easy to govern Difficult to brand
  23. UX
  24. PROS CONS Scalable info architecture Complexities of scale Streamlined user interface Device-specific click/touch targets Omnichannel consistency One size fits all? Really??
  25. Source: Luke Wroblewski
  26. CONTENT
  27. PROS CONS “Chunks not blobs” De-blobbing takes time Semantic content Arguing over semantics Content decoupled from presentation layer Limited range of WCM options
  28. SEARCH
  29. 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
  30. PERFORMANCE
  31. PROS CONS Easy to cache Difficult to be dynamic Reduced HTTP requests Potential code bloat Quicker dev time Longer dev time
  32. USABILITY
  33. PROS CONS Mobile optimized Requires mobile mindset Accessibility oriented Accessibility challenged Future friendly Legacy unfriendly
  34. ECOMMERCE
  35. 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
  36. FUTURE
  37. FACTORS EXAMPLES Bigger screens Smart TV, DOOH Smaller screens Glass, Pebble, Fitbit No screens BCI, MMI
  38. PRESENT
  39. “I’m not designing this for your effing Fitbit.” -anonymous designer
  40. Like it or not, you might want to consider designing for everything.
  41. QUESTIONS?
  42. #WTFRWD #SXSW
  43. bit.ly/wtfrwd-sxsw
  44. SHOUTOUTS
  45. Maria Saavedra Tom Hudson Stacey Doyle Brad Zabroski Chun Kong Gray Luckett...
  46. ...and Ethan Marcotte, obvs.
  47. THANKS!

×