Embed Size (px)
Citation preview
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
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.
