Real-Life Responsive Web Design

Vitaly Friedman20/02/2014 • UX Riga, Latvia

Vitaly Friedman, editor-in-chiefand 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 settings and input modes the user uses.

— Scott Jehlhttp://www.lukew.com/ff/entry.asp?1684

“ 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

Gov.uk Redesign (2011–2012)

• Typical characteristics of a “decaying” system:

• Huge, slow-moving, complex architecture,• Outdated and heavily customized legacy CMS,

• Solution: a new content-focused digital strategy based on user needs and sound design principles.

• Increasing maintenance and development costs,• An inconsistent, fragmented online presence,• Duplicate content authored by single departments,• Steady increase in user complaints and requests.

• Rethinking the role of the UK government online:

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

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

Gov.uk Redesign (2011–2012)

“ 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

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

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

Gov.uk Redesign (2011–2012)

• Every user need had to pass a strategic review:

Gov.uk Redesign (2011–2012)

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

• 18 months of work, with 200 people involved.Total cost saved: £542.000.000 per year.

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

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

Responsive Iconography

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.

“ 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

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

Optimistic Interfaces

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”

Optimistic Interfaces

• Perform actions optimisticallyPretend that an action succeeded right away.

• Adaptively prefetch contentReprioritize 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”

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

Progressive Reduction

“ 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

Progressive Reduction

• Usability is a moving target; users getsmarter at a product as they keep using it.

• An interface should adapt and enable usersto become more efficient at using it.

• Idea: change the UI as the user moves through different stages of proficiency.

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.

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.

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 we really need to do to design well, is to look at the extremes…

— Dan Formosa, “Smart Design”

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

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.

Delightful UX

“ 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

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.

Pain

Value > Pain

Delightful UX + Value Value > Pain>

Delightful UX + ValueThe key to is agreat, authentic, humane personality.

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.

Responsive Newsletters

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/

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,

Twitter Inspires With Unique Responsive Design, https://litmus.com/blog/twitter-inspires-with-unique-responsive-designDreamforce Email Newsletter, https://litmus.com/blog/inspiration-dreamforceVML Backgrounds, http://www.emailonacid.com/blog/details/C13/emailology_vector_markup_language_and_backgrounds

• Backgrounds with VML for Outlook 07/10/13.

Responsive Newsletters

• Mobile email is a fragile medium with many specific constraints and requirements:

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

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

“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-wallpaper/)

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

• Homer Simpsons: http://smashed.by/homer

• Sections illustrations: “bisous les copains”, by Guillaume Kurkdjian (http://bisouslescopains.tumblr.com/)

• Hypercube: http://en.academic.ru, Wikipedia