Embed Size (px)
DESCRIPTION
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. 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.
Citation preview
New Perspectives in Web Design
Vitaly Friedman02/10/2013 • YAC, Moscow
Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag
This talk is about new techniques.
And about clever UX patterns.This talk is about new techniques.
And about clever UX patterns.This talk is about new techniques.
And what works in real-life projects.
We are blinded by chrome. When it comes to RWD, we think about layouts, and often we should, but we have to keep in mind that we are not rectangle artists. we explore solutions to problems. Browsers think in boxes, but humans shouldn't. And we do it because we had to find some
“ 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.
Designing Systems
“ If you’re used to designing fixed-width layouts, it’s going to be really, really hard to get your head around designing and building in a fluid way… at first.
— Elliot Jay Stockshttp://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/
“ ...Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money.
— Elliot Jay Stockshttp://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/
“ ...The homepage is comprised of Lego-like building blocks designed to be combined together...
— Dave Rupert
“ ...Today, the deliverables could look a lot like fully-functioning Twitter Bootstrap-style systems which are custom tailored for your clients’ needs. Think of it as tiny bootstraps, for every client.
— Dave Rupert
Responsive Deliverables
•ComponentsFlexible gridTypographyNavigationAccessible form controlsCarouselsTabbed navigationResponsive tablesAccordionsMedia listsDrop-downsPaginationData tablesButtonsIcon fonts
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
•StrategyResponsive imagesResponsive typographyAccessibility architectureLegacy browser supporti18n/l10n tolerancePerformance budgetInteraction/AnimationsResponsive advertising
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
•StrategyResponsive imagesResponsive typographyAccessibility architectureLegacy browser supporti18n/l10n tolerancePerformance budgetInteraction/AnimationsResponsive advertising
•LayoutsHomepage layoutSubpage layoutArticle index layoutArticle layoutProduct index layoutProduct detail layoutSign up flowCheckout flow
•ComponentsFlexible gridTypographyNavigationAccessible form controlsCarouselsTabbed navigationResponsive tablesAccordionsMedia listsDrop-downsPaginationData tablesButtonsIcon fonts
“ Atomic design gives us the ability to traverse from abstract to concrete. We can create systems that promote consistency and scalability. We assemble rather than deconstruct.
— Brad Frost
Atomic Design
• Obvious relationships between modules
• Abstract → Concrete: atoms are used for references, pages for review, rest for build.
• Pattern library serves as a final deliverable, and as such scalable and future-proof.
Resolution Independence
Resolution Independence
• High pixel density displays prompt us to create future-proof solutions for graphics.
• Creating multiple assets for the same graphics (not photos) isn’t future-proof.
• Two options: SVG and Icon Fonts.
• HTML:<ul class="actions"><li><a class="a-share" href="#">Share</a></li><li><a class="a-print" href="#">Print</a></li></ul>
• CSS: .actions a { font-size: 1em; /* Sprite: 30x160px */ background-image: url('sprite.png'); }.actions .a-share { background-position: 10px 0; }.actions .a-print { background-position: 10px -40px; }
PNG sprites
• HTML:<ul class="actions"><li><a class="a-share" href="#">Share</a></li></ul>
• CSS:body { font-size: 100%; } /* = 16px by default */.actions a { font-size: 1em; background-image: url('sprite.svg'); background-size: 1.875em 10em; }.actions .a-share { background-position: 0.625em 0; }
SVG sprites
Resolution Independence (SVG)
• Good SVG support: Chrome 4+, Safari 4+, FF4+, Opera 9.5+, IE9+, mobile browsers.
• For legacy browsers (and Android 2.3)we need PNG-fallback with Cond. Comments (IE<9) or Modernizr or SVG polyfills (Canvg).
• HTML:<a class="icon share" href="#">Share</a>
• CSS:@font-face { font-family: 'Icon Font'; src: url('icon-font.eot'); src: local('☺'); url('icon-font.woff') format('woff'), url('icon-font.ttf') format('truetype'), url('icon-font.svg') format('svg'); }.icon { font-family: 'Icon Font'; font-size: 1.5em; }.share:before { content: "s"; }
Icon Fonts
• HTML:<a class="icon" data-icon="s" href="#">Share</a><a class="icon" data-icon="h" href="#">History</a>
• CSS:.icon:before { content: attr(data-icon); /* Optional color definition */ }
Icon Fonts
• Furthermore, we can combine icon font glyphs to create complex multi-layered icons.
• Idea: Split apart the components of your multi-color vector, add each element to the icon font, then stack them to create a new icon.
Resolution Independence(Web Fonts)
Resolution Independence(Web Fonts)
• There are many comprehensive Web fonts: Entypo and FontAwesome are free.
• Excellent support: everywhere but Opera Mini and Android 2.1.
• Build custom, small “bundles” with Fontello (combines popular open-source fonts).
Compressive Images
Compressive Images
• To display photos properly on high pixel density displays, we don’t need hi-res images.
• If a JPG image has relatively small dimensions, we can use a workaround to keep its size small.
“ ...Given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it’s highly compressed and dramatically larger in dimensions than it is displayed.
— Daan Jobsis
600×400px file, 0% JPEG quality,displayed in 600×400 (file size 7 Kb)
600×400px file, 0% JPEG quality,displayed in 300×200 (file size 7 Kb)
600×400px file (7 Kb)________________________________0% JPEG qualitydisplayed in 300×200
300×200px file (21 Kb)_________________________________80% JPEG qualitydisplayed in 300×200
Responsive Images
• For photos, consider using Scott Jehl’sPicturefill or Tyson Matanich’s branch of it.
• Allows images to load before the entire DOM is ready or after the rest of the page loads.
• Allows you to wait for the new image to complete downloading before updating <img>. Also, allows you to disable swapping of images.
Clown Car Technique (With SVG)
• We can use media queries within SVG to serve right raster images without double markup.
• HTML:<img src="image.svg" alt="Responsive image" />
•SVG:<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329"> <title>The Clown Car Technique</title>
<g> <image id="small" height="329" width="300" xlink:href="small.png" /> <image id="medium" height="329" width="300" xlink:href="medium.png" /> <image id="big" height="329" width="300" xlink:href="big.png" /> <image id="huge" height="329" width="300" xlink:href="huge.png" /> </g> </svg>
•SVG:<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329"> <title>The Clown Car Technique</title>
<g> <image id="small" height="329" width="300" xlink:href="small.png" /> <image id="medium" height="329" width="300" xlink:href="medium.png" />
<defs> <style> image { display: none; } #small { display: block; }
@media screen and (max-width: 25em) { #medium { display: block; } #small { display: none; } }
@media screen and (max-width: 45em) { #big { display: block; } #small { display: none; } } </style> </defs>
•SVG:<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329"> <title>The Clown Car Technique</title>
<g> <image id="small" height="329" width="300" xlink:href="small.png" /> <image id="medium" height="329" width="300" xlink:href="medium.png" />
<defs> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; }
@media screen and (max-width: 25em) { svg { background-image: url(small.png"); } }
@media screen and (max-width: 45em) { svg { background-image: url(medium.png"); } }
@media screen and (max-width: 60em) { svg { background-image: url(large.png"); } }
</style> </defs>
Clown Car Technique (With SVG)
• Due to cross-browser issues, we have to use the <object> tag instead of <img>:
<object data="image.svg" type="image/svg+xml"></object>
• Two main benefits:
• MQs within SVG are based on the parent element in which the SVG is contained, not the viewport width.
• All image options are encapsulated in an SVG file.
Conditional Loading
Conditional Loading
• We ask browsers to load assets progressively— ensuring a fast and functional core experience.
• Essentially, the state-of-the-art progressive enhancement with a focus on performance.
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
The Guardian’s Modular Load
• Consider at least three types of page content:
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more 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
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• Load JS into a browser asynchronously.While JS is being downloaded, browser stillcan parse the document and show content.
• HTML/JS (for modern browsers):@if(isModernBrowser) { <script src="enhanced.js" async defer></script>}
The Guardian’s Modular Load
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• Load JS into a browser asynchronously.While JS is being downloaded, browser stillcan parse the document and show content.
• HTML/JS (for modern browsers):@if(isModernBrowser) { <script src="enhanced.js" async defer></script>}
BBC’s isModernBrowser( )
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• 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}
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• 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.
BBC’s isModernBrowser( )
Gmail’s Lazy Loading
• Idea: let browsers download all of the JS right away, but evaluate it “on demand”, i.e. when users need a particular feature.
• Much of the downloaded JS is commented out, and when needed uncommented and eval-ed.
• Gmail’s case:200 Kb of JS -> 2600 ms page load200 Kb of JS (lazy loaded) -> 240 ms page load
Gmail’s Lazy Loading
• <script id="lazy">// Make sure you strip out (or replace) comment blocks in your JavaScript first./* JavaScript of lazy module */</script>
<script>function lazyLoad() {var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML;var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); }</script>
<div onclick=lazyLoad()>Lazy Load</div>
The Two-Click Social Widget
• Load social widgets only when user explicitly chooses to take that action to share content.
• Idea: load small social icons by default, and load the FB, Twitter and G+ widgets on click.
• Cuts down on bandwidth and on latency.(FB button alone weighs 120 Kb + 4 requests).
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”
• 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”
Optimistic Interfaces
“ 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.
“ Performance isn’t solely a technical concern for developers. It’s time to treat performance as an essential design feature.
— Brad Frost
Performance Budget
• Idea: always include performance in project documents—e.g. proposals and design briefs.
• Set a “budget” on your site and don’t allow the site to exceed it (number of requests, page size).
• Helps make every decision through the design/build process, as something that has consequence.
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.
• 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.
Progressive Reduction
Responsive Design Patterns
“ If a design problem can be solved responsively, eventually it will be solved responsively.
— You-know-who
Conclusion
Thank you.
Image credits
• Front cover: Geometric Wallpapersby Simon C Page (http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/)
•JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('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
