Your SlideShare is downloading. ×
WTF RWD! Agreeing to Disagree
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WTF RWD! Agreeing to Disagree

9,293
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 …

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

0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,293
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
62
Comments
0
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×