Real-Life Responsive
Web Design
Vitaly Friedman
20/02/2014 • UX Riga, Latvia
Vitaly Friedman, editor-in-chief

and co-founder of SmashingMag
“

Designing for the Web is like
visualizing a tesseract. We build
experiences by manipulating their
shadows.
— Tim Brown
Responsive Design is an appropriate
tool for “multi-dimensional” designs.
It’s a new mindset that requires us to
rethink and extend our practices.
Content Choreography
“

Content parity doesn’t mean every
experience is identical. It means
that the content is always available:
whatever sett...
“

It’s OK if we don’t have complete
content up front, but we do need
complete content structure when
we start designing.
...
Gov.uk Redesign (2011–2012)
• Typical characteristics of a “decaying” system:
•
•
•
•
•
•

Huge, slow-moving, complex arch...
Gov.uk Redesign (2011–2012)
• Rethinking the role of the UK government online:
•

Digital content to be managed centrally,...
“

The UK Government has 400
organizations, and each of them
had at least one website, overall
with 75.000 pages. The goal...
“

…Users don’t need to know what
institution is responsible for a
specific task—they need to find
answers, easily. So the g...
Gov.uk Redesign (2011–2012)
• User stories helped define content’s main scope:
• All content was rephrased as a set of user...
Gov.uk Redesign (2011–2012)
• Every user need had to pass a strategic review:
•

What’s the point of the page?

(identify ...
•

116,000 documents deleted, 223 policies rewritten,
222 subdomains closed, 22,250 user stories.

•

18 months of work, w...
“

…The service manual tells all
departments how to conduct their
services. If a service can’t prove
that there is a use c...
Responsive Iconography
Responsive Iconography
• Sometimes, rescaling an icon or illustration
doesn’t aid but rather hinders usability.

• Idea: w...
“

Just because an image is scalable
doesn’t mean it’s legible at all sizes.
Most visual elements have a perfect
sweet spo...
“

Sparkicon is a small, inline icon
with additional link meta data to
describe either the content and/or
the behaviour wh...
Optimistic Interfaces
Optimistic Interfaces
• Performance is not only about technology;

it’s about how users perceive it, too.

• To create a n...
Optimistic Interfaces
• Perform actions optimistically

Pretend that an action succeeded right away.

• Adaptively prefetc...
“

The optimal style is a backwards
moving and decelerating ribbed
progress bar, which made the load
time appear 11% faste...
Progressive Reduction
“

Your proficiency in a product
will decay over time without
usage. As such, this proficiency
is reflected in experience dec...
Progressive Reduction
• Usability is a moving target; users get

smarter at a product as they keep using it.

• An interfa...
Progressive Reduction
• Every UI regresses without usage. For major
features, track and observe their usage.

• Create a p...
Progressive Reduction
• Assign a proficiency level to each feature and
design its variations for each level.

• If a user d...
Designing for Extremes
“

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

...the weakest, or the person with
arthritis, or the athlete, or the
strongest or the fastest person.
Because if we rea...
Designing for Extremes
• Average user is an artificial, static
representation of users that don’t exist.

• Real users chan...
Delightful UX
“

Online relationships are like
regular relationships; we should
aspire to design interfaces [that]
recognize users are h...
Delightful UX
• Feature sets can’t empathize with users.

The atmosphere of performing tasks can.

• Being friendly and pe...
Pain
Value > Pain
Delightful UX + Value > Value > Pain
The key to Delightful UX + Value is a

great, authentic, humane personality.
Delightful UX
• For every potential negative experience,
provide reassurance, solutions and rewards:

•
•
•
•
•
•
•

Intl....
Responsive Newsletters
Responsive Emails
• “Mobile” email is big: 47% of email opens on
mobile; more than desktop clients/webmail.

• Only 12% of...
Twitter’s Case-Study
• Minor tweaks in the layout help optimize the
newsletter experience for readers:

•
•
•
•
•

Colored...
Responsive Newsletters
• Mobile email is a fragile medium with many
specific constraints and requirements:

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

Conclusion
Thank you.
Image credits
• Front cover: Geometric Wallpapers

by Simon C Page (http://simoncpage.co.uk/
blog/2012/03/ipad-hd-retina-w...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga 2014)
Upcoming SlideShare
Loading in...5
×

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

908

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
908
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
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
 http://www.lukew.com/ff/entry.asp?1684
  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. 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.
  10. 10. 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).
  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 Gov.uk…
 — Sarah Richards
 “Revolutionizing Government Content”, https://vimeo.com/83280410

  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”, https://vimeo.com/83280410
  13. 13. 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.
  14. 14. 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)
  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”, https://vimeo.com/83280410

  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
 http://www.markboulton.co.uk/journal/sparkicons
  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”, http://doriantaylor.com/the-redesign-dissolved
  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”, 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/
  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, 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
  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, http://emailclientmarketshare.com

  47. 47. Conclusion
  48. 48. Thank you.
  49. 49. 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

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×