UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations

Responsive Design: Clever Tips & Tricks

Vitaly Friedman13/05/2015 • Istanbul, Turkey

Responsive Design: Clever Tips & Tricks

Vitaly Friedman13/05/2015 • Istanbul, Turkey

Responsive Design: Clever Tips & Tricks

Vitaly Friedman13/05/2015 • Istanbul, Turkey

Responsive Design: Clever Tips & Tricks

Vitaly Friedman13/05/2015 • Istanbul, Turkey

Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag

Responsive Design Patterns

“ The design process is weird and complicated because it involves people and organisations, which often are weird and complicated.

— Mark Boulton

Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

Design patterns help recover from hitting dead ends in creative process. They re-route your decision making process efficiently.

They help you converge towards the final solution way quicker than when starting from scratch, and also limit your options much more effectively.

• Keep important actions visible, not behind an icon. Clear label: MENU. Clear affordance: button shape.

• ”Burger” icon isn’t widely recognized nor understood.

• 75% of people rely on their thumb and 49% rely on a one-handed grip. Keep important actions at the bottom.

• Upper navigation controls aren’t optimized for thumbs.

“ …The hardest things on mobile is figuring out the right time and place to display an action.

— Luke Wroblewski

“ Important actions should be in the visible area of the page. We need to ensure that the CTA buttons remain above the fold.

— pretty much every meeting

Scrolling “under” the fold

• Scrolling is a widely acceptable behaviour on mobile and desktop. Just above and just below the fold areas are equally important.

• Scrolling is a continuation, clicking is a decision.Interested users will scroll as long as necessary.

Chartbeat blog, “Scroll behavior across the web”, http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/

• The most viewed area of the page is just above the fold,at about 550px, with just over 80% viewership.

• Many users scroll down the page before it finishes loading.

• The area between 750px and 1500px is viewed for nearly three times as long as the top of the page.

• From peak at 550px, there is a slow decay in viewership.

“View Mode” Approach

• Idea: using the off-canvas pattern beyond navigation, bringing focus to important features.

• Divide different features of a website into individual, encapsulated views.

• Main benefits are regaining space and the ability to live update and process user input.

“‘View mode’ approach to responsive web design”, https://medium.com/design-ux/914c7d3795fb

Smarter Web Forms

Image source: https://medium.com/p/7c03a9274f9

Image source: https://medium.com/p/7c03a9274f9

Inventory-Based Sliders

• Depending on the task, we can use single / double sliders (one value / range of values).

• Continuous sliders for indeterminate values (price/temperature), discrete sliders for pre-defined values (clothing size). Prefer the latter.

• Idea: to prevent zero-results page and weak input, use histogram slider/inventory slider.

• Emoji are supported on Mac OS X 10.7+, iOS 6+, Android 4.1+, Win 8+. Not supported in Chrome.

• On Yelp, you can use Emoji to search for businesses.

Better Checkout 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 favourite movie character.

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

Skeleton Screens

Skeleton Screens

• Good feedback focuses on the progress;keeps updating current state to ease anxiety.

• Blank screens are user experience gaps that disrupt user experience. Progress bars focus on the waiting; focus on the progress instead.

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

• Idea: minimize gaps to reduce friction with “seamless” transitionsand skeleton screens.

Performance Strategy

“ There is no difference for the user between a site being down and a site being inaccessible due to loading issues caused by blocking resources or slow networks.

— Andy Hume“Real-Life Responsive Redesign”, SmashingConf 2013

Ilya Grigorik,“Resilient Networking: Planning for Failure”, https://www.igvita.com/2015/01/26/resilient-networking/

• T-Mobile roaming charges for loading thefull front page of Vogue.co.uk, in Moscow: €93,13

The Guardian Redesign (2013)

• Project goals focused on mobile experience:

• Tackle dropping print circulation with mobile,• Replace the slow, rigid mobile/desktop sites,

• Solution: a mobile-first “stealth” redesign with a strong focus on progressive enhancement.

• First focus on “mobile” experience, • Long term: new RWD client-side architecture,• Ultimate goal: one code base, one responsive site.

“ “Core HTML content first” with “Core CSS styles first” is a simple corollary of the good ol’ progressive enhancement.

— Andy Hume“Real-Life Responsive Redesign”, SmashingConf 2013

The Guardian Redesign

• Priority lists for content and styles to define “core”:

• Core content doesn’t rely on JavaScript,• Only one main feature image considered “core”,• No Ajax support for ratings, comments and live scores,

• “Cutting the mustard” to “buckle” browsers,• Web fonts aren’t loaded by default (prevent FOUT).

The Guardian’s Modular Load

• Consider at least three types of page content:

• Core content(essential HTML+CSS, usable non-JS enhanced experience);

• Enhancement(JS, Geolocation, touch, enhanced CSS, Web fonts, widgets);

• Leftovers(analytics, advertising, third-party content).

• Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.

The Guardian’s Modular Load

• Load JS into a browser asynchronously.While JS is being downloaded, browser still can parse the document and show content.

• HTML/JS (for modern browsers):@if(isModernBrowser) { <script src="enhanced.js" async defer></script> }

BBC’s isModernBrowser( )

• We can use server-side device detection using UA strings with DeviceAtlas, WURFL etc.

• We can use client-side feature detection to split browsers into groups “HTML4” / “HTML5”.

• JS:if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // HTML5 browser detected; load the JS app }

BBC’s isModernBrowser( )

• JS:if ( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // HTML5 browser detected; load the JS app }

• HTML5 Browsers:IE9+, FF 3.5+, Opera 9+,Safari 4+, Chrome 1+, iOS1+,Android phone and tablets 2.1+,Blackberry OS6+, Win 7.5+,Mobile Firefox, Opera Mobile

• HTML4 Browsers:IE8-, Blackberry OS5-,Nokia S60 v6-, Nokia S40,Symbian, Windows 7 Phone (pre-Mango), a plethora of legacy devices.

• A median start render time for an uncached page:0.798 seconds (iPhone 4, 3G, 1.6Mps, 300ms RTT).

• Guardian users need to successfully complete 1 HTTP-request to start reading the news.

• Median time for an uncached page to startdisplaying: 0.727 seconds (stable networks).

• With enhanced JS loaded, front page has 35 images on “desktop”, 67 requests, 657 Kb.

SmashingMag’s Refactoring

• Drawbacks prompted a focus on performance:

• Independent sections with separate WP-installs,• Accessing content was difficult on slow connections,

• Question: (once we clean up the front-end), how fast can we be, rather than how fast should we be?

• Decoupling JS dependencies (also with ads), • Dealing with annoying Web fonts loading.• Ultimate goal: one code base, one responsive site.

“ So how fast ist fast enough? A Speed Index of under 1000. And for professionals that get there, they should shoot for delivering the critical-path view (above the fold) in the first 14Kb of the page.

— Paul Irish

Performance Strategies

• Average page load (onLoad) doesn’t say much about the quality of performance. Metrics:

• Visual comparison (against competitors)• Interface response times (<=100ms)• Start render time within 1s on a suboptimal 3G

(“above-the-fold” optimization),

• Monitor perf. with a private instance of WebPageTest,

• Run code against performant budget (Grunt-task).

SmashingMag’s Modular Load

• Consider three types of page content:

• Core content(essential HTML+CSS, usable non-JS enhanced experience);

• Enhancement(JS, syntax highlighter, full CSS, Web fonts, comments);

• Leftovers(analytics, advertising, Gravatar images).

• Idea: load Core content first, then Enhancement on DOMContentReady, then Leftovers on Load.

SmashingMag’s Optimization

• Minor optimizations based on a simple principle: optimize content, defer the rest.

• Load critical CSS inline and full CSS on load,• Avoid JavaScript libraries ( jQuery → JavaScript),• Store Web fonts in localStorage + cookies,• Defer advertising, tracking and all non-critical CSS/JS,

• Replaced Respond.js with IE8 stylesheet (fixed-width).• Optimize the critical rendering path for content delivery.

“ Critical rendering path is the chain of events that need to take place in order for a browser to start rendering this page (first paint of the page).

— Ilya Grigorik

Minimizing Critical Path: CSS

• To avoid unnecessary requests necessary for the page to load, optimize the critical path:

• Identify critical CSS for main entry pages,• Load critical CSS inline on these pages,• Load the CSS async via JS during rendering,• Detect cookie to decide: inline CSS or request it directly,

• Can be automated with task runners like Grunt.

• Critical CSS is a subset of CSS needed to render the top portion of a page across all breakpoints.

An Ongoing Battle

• Minor optimizations prompted us to review and adjust our editorial workflow:

• Using srcset and sizes for images in articles,• Using grunt-perfbudget to track performance,• Measuring changes in traffic and ad impressions,• Reviewing articles for performance before publishing,

• PageSpeed >= 98 both on mobile and desktop as a goal.

• Next: WebViews issues, “jumps” to comments, defer Gravatars, move to new servers, offline UX.

“ SmashingMag is the only site I can read on an EDGE connection when commuting in São Paulo, every day. It makes me think why other sites aren’t optimizing for slow connections, too.

— a reader from Brazil

Thank you.