Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)


Published on

Responsive Web design challenges Web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)

  1. 1. Real-Life Responsive Web Design Vitaly Friedman 20/02/2014 • UX Riga, Latvia
  2. 2. Vitaly Friedman, editor-in-chief
 and co-founder of SmashingMag
  3. 3. “ Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. — Tim Brown
  4. 4. Responsive Design is an appropriate tool for “multi-dimensional” designs.
  5. 5. It’s a new mindset that requires us to rethink and extend our practices.
  6. 6. Content Choreography
  7. 7. “ Content parity doesn’t mean every experience is identical. It means that the content is always available: whatever settings and input modes the user uses. 
 — Scott Jehl
  8. 8. “ It’s OK if we don’t have complete content up front, but we do need complete content structure when we start designing. 
 — Sarah Parmenter
  9. 9. Redesign (2011–2012) • Typical characteristics of a “decaying” system: • • • • • • Huge, slow-moving, complex architecture, Outdated and heavily customized legacy CMS, Increasing maintenance and development costs, An inconsistent, fragmented online presence, Duplicate content authored by single departments, Steady increase in user complaints and requests. • Solution: a new content-focused digital strategy based on user needs and sound design principles.
  10. 10. Redesign (2011–2012) • Rethinking the role of the UK government online: • Digital content to be managed centrally,
 (was run on a departmental level previously); • Service model with focus on user needs,
 (iterative, agile mentality now re-applied); • “Radical simplification of the digital footprint”
 (both in terms of content and technology).
  11. 11. “ The UK Government has 400 organizations, and each of them had at least one website, overall with 75.000 pages. The goal was to bring them all together, in one central place on…
 — Sarah Richards
 “Revolutionizing Government Content”,

  12. 12. “ …Users don’t need to know what institution is responsible for a specific task—they need to find answers, easily. So the government structure can’t be the main point of interaction, the content should be.
 — Sarah Richards
 “Revolutionizing Government Content”,
  13. 13. Redesign (2011–2012) • User stories helped define content’s main scope: • All content was rephrased as a set of user needs, • 1,800 user needs grouped/classified as stories, • Each was assigned a format (page, multipart guide), • A priority/tags were assigned to each user need, • Needotron was built to track and prioritise user needs.
  14. 14. Redesign (2011–2012) • Every user need had to pass a strategic review: • What’s the point of the page?
 (identify the core, remove the waffle) • Do people want it?
 (based on traffic and search terms) • Do they want it from government?
 (content should be reasonably expected) • Can only government meet the need?
 (focused content, no general advice)
  15. 15. • 116,000 documents deleted, 223 policies rewritten, 222 subdomains closed, 22,250 user stories. • 18 months of work, with 200 people involved.
 Total cost saved: £542.000.000 per year.
  16. 16. “ …The service manual tells all departments how to conduct their services. If a service can’t prove that there is a use case for specific content, it won’t go live.
 — Sarah Richards
 “Revolutionizing Government Content”,

  17. 17. Responsive Iconography
  18. 18. Responsive Iconography • Sometimes, rescaling an icon or illustration doesn’t aid but rather hinders usability. • Idea: with iconography, for different views deliver various levels of fidelity & interaction. • The “art-direction” use-case beyond images— applied to icons, based on its displayed size.
  19. 19. “ Just because an image is scalable doesn’t mean it’s legible at all sizes. Most visual elements have a perfect sweet spot in terms of legibility— icons are no different in this regard.
 — Iconic
  20. 20. “ Sparkicon is a small, inline icon with additional link meta data to describe either the content and/or the behaviour when the user clicks the link.
 — Mark Boulton
  21. 21. Optimistic Interfaces
  22. 22. Optimistic Interfaces • Performance is not only about technology;
 it’s about how users perceive it, too. • To create a noticeable performance improvement, it has to improve by 20%. • Idea: fake performance by being optimistic about user’s next steps. Steven C. Seow, “Designing and Engineering Time: The Psychology of Time Perception”
  23. 23. Optimistic Interfaces • Perform actions optimistically
 Pretend that an action succeeded right away. • Adaptively prefetch content
 Reprioritize loading based on user’s actions. • Move bits when no one is watching
 Keep users busy while boring stuff happens. Mike Krieger, co-founder of Instagram, “Secrets to Lightning-Fast Mobile Design”
  24. 24. “ The optimal style is a backwards moving and decelerating ribbed progress bar, which made the load time appear 11% faster than a solid colored bar.

  25. 25. Progressive Reduction
  26. 26. “ Your proficiency in a product will decay over time without usage. As such, this proficiency is reflected in experience decays over time. These decays should be avoided at all costs. 
 — Allan Grinshtein
  27. 27. Progressive Reduction • Usability is a moving target; users get
 smarter at a product as they keep using it. • An interface should adapt and enable users
 to become more efficient at using it. • Idea: change the UI as the user moves through different stages of proficiency.
  28. 28. Progressive Reduction • Every UI regresses without usage. For major features, track and observe their usage. • Create a proficiency profile for every user;
 as a feature is used more, start reducing the “hand-holding” in a series of levels.
  29. 29. Progressive Reduction • Assign a proficiency level to each feature and design its variations for each level. • If a user doesn’t use a feature for a long time, UI regresses back to level 1. • If a user uses a feature more, UI keeps increasing levels to the “advanced” mode.
  30. 30. Designing for Extremes
  31. 31. “ We have clients come to us and say, “We know our average customer. She’s female, 34 years old, with 2.3 kids…” But what we really need to do to design well, is to look at the extremes… 
 — Dan Formosa, “Smart Design”
  32. 32. “ ...the weakest, or the person with arthritis, or the athlete, or the strongest or the fastest person. Because if we really understand what the extremes are, the middle will take care of itself. 
 — Dan Formosa, “Smart Design”
  33. 33. Designing for Extremes • Average user is an artificial, static representation of users that don’t exist. • Real users change constantly, reaching different positions, roles and contexts. • Idea: optimize for edge cases first (“minimal usability threshold”), then converge towards more common cases.
  34. 34. Delightful UX
  35. 35. “ Online relationships are like regular relationships; we should aspire to design interfaces [that] recognize users are humans by mirroring the natural process of relationship building. 
 — Trent Walton “Human Internet”,
  36. 36. Delightful UX • Feature sets can’t empathize with users.
 The atmosphere of performing tasks can. • Being friendly and personal is default.
 Small kindnesses help us go beyond that. • Idea: integrate small kindnesses in every interaction to keep users engaged and happy.
  37. 37. Pain
  38. 38. Value > Pain
  39. 39. Delightful UX + Value > Value > Pain
  40. 40. The key to Delightful UX + Value is a
 great, authentic, humane personality.
  41. 41. Delightful UX • For every potential negative experience, provide reassurance, solutions and rewards: • • • • • • • Intl. shipping? Detect user’s country and reassure her. Input mistakes: Show only error-fields and hints. Slow checkout: Give $5 discount after 45s in checkout. Card declined: Provide alternate payment methods. First purchase: Provide a discount for next purchase. Large purchase: Send a handwritten thank-you note. Personal profile: Ask for the favorite movie character.
  42. 42. Responsive Newsletters
  43. 43. Responsive Emails • “Mobile” email is big: 47% of email opens on mobile; more than desktop clients/webmail. • Only 12% of high-impact newsletters are responsive; 80% delete email if it looks broken. • Most newsletters are broken on mobile (zoom’n’pinching) → business advantage. “Mobile Email Usage Statistics”,
 “Mobile Opens Hit Record High”,
 “Only 11% of newsletters feature responsive mobile layouts”,
  44. 44. Twitter’s Case-Study • Minor tweaks in the layout help optimize the newsletter experience for readers: • • • • • Colored cells for buttons (text+background), Different CTA/landing pages for different views, Column switching and padding adjustments, Inline table styling first, media queries second, Backgrounds with VML for Outlook 07/10/13. Twitter Inspires With Unique Responsive Design,
 Dreamforce Email Newsletter,
 VML Backgrounds,
  45. 45. Responsive Newsletters • Mobile email is a fragile medium with many specific constraints and requirements: • • • • • • • • Single-column layout, width 500–600px,
 Minimum target area of 44×44 px, Minimum font size of 13px, DOCTYPE ignore: clients impose their own/leave out, No JavaScript support is available, Often images are disabled (base64 won’t work), There is no way around tables, px and display: none. Culprits: Outlook 2010, Lotus Notes, Yahoo, Gmail.
  46. 46. “Email Market Share”, Litmus,

  47. 47. Conclusion
  48. 48. Thank you.
  49. 49. Image credits • Front cover: Geometric Wallpapers
 by Simon C Page ( blog/2012/03/ipad-hd-retina-wallpaper/) • Homer Simpsons:
 • Sections illustrations: “bisous les copains”, by Guillaume Kurkdjian (http://
 • Hypercube:, Wikipedia