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.

1. Real-Life Responsive
Web Design
Vitaly Friedman
20/02/2014 • UX Riga, Latvia

2. Vitaly Friedman, editor-in-chief
and co-founder of SmashingMag

6. “
Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating their
shadows.
— Tim Brown

8. Responsive Design is an appropriate
tool for “multi-dimensional” designs.

9. It’s a new mindset that requires us to
rethink and extend our practices.

13. Content Choreography

14. “
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
http://www.lukew.com/ff/entry.asp?1684

19. “
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

21. Gov.uk 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.

23. Gov.uk 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).

24. “
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 Gov.uk…
— Sarah Richards
“Revolutionizing Government Content”, https://vimeo.com/83280410

25. “
…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”, https://vimeo.com/83280410

32. Gov.uk 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.

35. Gov.uk 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)

38. •
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.

41. “
…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”, https://vimeo.com/83280410

45. Responsive Iconography

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

48. “
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

58. “
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
http://www.markboulton.co.uk/journal/sparkicons

62. Optimistic Interfaces

63. 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”

64. 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”

71. “
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.

76. Progressive Reduction

77. “
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

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

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

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

88. Designing for Extremes

89. “
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”

90. “
...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”

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

100. Delightful UX

101. “
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”, http://doriantaylor.com/the-redesign-dissolved

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

107. Pain

108. Value > Pain

109. Delightful UX + Value > Value > Pain

111. The key to Delightful UX + Value is a
great, authentic, humane personality.

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

140. Responsive Newsletters

144. 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”, http://www.emailmonday.com/mobile-email-usage-statistics
“Mobile Opens Hit Record High”, https://litmus.com/blog/mobile-opens-hit-record-high-of-47?
“Only 11% of newsletters feature responsive mobile layouts”, http://blog.equinux.com/2013/07/responsive-mobile-email-layouts/

153. 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, https://litmus.com/blog/twitter-inspires-with-unique-responsive-design
Dreamforce Email Newsletter, https://litmus.com/blog/inspiration-dreamforce
VML Backgrounds, http://www.emailonacid.com/blog/details/C13/emailology_vector_markup_language_and_backgrounds

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

155. “Email Market Share”, Litmus, http://emailclientmarketshare.com

166. Conclusion

168. Thank you.

169. Image credits
• Front cover: Geometric Wallpapers
by Simon C Page (http://simoncpage.co.uk/
blog/2012/03/ipad-hd-retina-wallpaper/)
• Homer Simpsons: http://smashed.by/homer
• Sections illustrations: “bisous les copains”,
by Guillaume Kurkdjian (http://
bisouslescopains.tumblr.com/)
• Hypercube: http://en.academic.ru, Wikipedia