WTF RWD! Agreeing to Disagree

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

1. WTF RWD! AGREEING TO DISAGREE
2. #WTFRWD #SXSW
3. INTRODUCTIONS
4. HAWK THOMPSON AMANDA KRAUSS CARYN LUSINCHI CHRIS WIEGMAN @hawkt @risatrix @wordedgewise @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!