"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashing Magazine
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashing Magazine

on

  • 8,976 views

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

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.

Statistics

Views

Total Views
8,976
Views on SlideShare
5,565
Embed Views
3,411

Actions

Likes
28
Downloads
143
Comments
0

18 Embeds 3,411

http://tech.yandex.ru 2411
http://css.yoksel.ru 296
http://tech.yandex.com 139
https://tech.yandex.com 122
http://stupid-studio.com 122
https://twitter.com 102
https://tech.yandex.ru 96
https://www.facebook.com 50
http://localhost 34
http://yoksel.github.io 15
http://test2013.stupid-studio.com 12
https://www.linkedin.com 4
http://stupid2013.morten 3
http://www.conferize.com 1
http://yastatic.net 1
http://news.google.com 1
http://feeds.feedburner.com 1
http://cloud.feedly.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashing Magazine Presentation Transcript

  • 1. New Perspectives in Web Design Vitaly Friedman 02/10/2013 • YAC, Moscow
  • 2. Vitaly Friedman, editor-in-chief and co-founder of SmashingMag
  • 3. This talk is about new techniques.
  • 4. And about clever UX patterns. This talk is about new techniques.
  • 5. And about clever UX patterns. This talk is about new techniques. And what works in real-life projects.
  • 6. 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
  • 7. “ Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. — Tim Brown
  • 8. Responsive Design is an appropriate tool for “multi-dimensional” designs.
  • 9. It’s a new mindset that requires us to rethink and extend our practices.
  • 10. Designing Systems
  • 11. “ 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 Stocks http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/
  • 12. “ ...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 Stocks http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/
  • 13. “ ...The homepage is comprised of Lego-like building blocks designed to be combined together... — Dave Rupert
  • 14. “ ...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
  • 15. Responsive Deliverables •Components Flexible grid Typography Navigation Accessible form controls Carousels Tabbed navigation Responsive tables Accordions Media lists Drop-downs Pagination Data tables Buttons Icon fonts •Strategy Responsive images Responsive typography Accessibility architecture Legacy browser support i18n/l10n tolerance Performance budget Interaction/Animations Responsive advertising
  • 16. •Strategy Responsive images Responsive typography Accessibility architecture Legacy browser support i18n/l10n tolerance Performance budget Interaction/Animations Responsive advertising •Layouts Homepage layout Subpage layout Article index layout Article layout Product index layout Product detail layout Sign up flow Checkout flow •Components Flexible grid Typography Navigation Accessible form controls Carousels Tabbed navigation Responsive tables Accordions Media lists Drop-downs Pagination Data tables Buttons Icon fonts
  • 17. “ 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
  • 18. 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.
  • 19. Resolution Independence
  • 20. 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.
  • 21. • 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
  • 22. • 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
  • 23. 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).
  • 24. • 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
  • 25. • 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
  • 26. • 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)
  • 27. 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).
  • 28. Compressive Images
  • 29. 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.
  • 30. “ ...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
  • 31. 600×400px file, 0% JPEG quality, displayed in 600×400 (file size 7 Kb)
  • 32. 600×400px file, 0% JPEG quality, displayed in 300×200 (file size 7 Kb)
  • 33. 600×400px file (7 Kb) ________________________________ 0% JPEG quality displayed in 300×200 300×200px file (21 Kb) _________________________________ 80% JPEG quality displayed in 300×200
  • 34. Responsive Images • For photos, consider using Scott Jehl’s Picturefill 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.
  • 35. 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" />
  • 36. •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>
  • 37. •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" /> <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>
  • 38. •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" /> <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>
  • 39. 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.
  • 40. Conditional Loading
  • 41. 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.
  • 42. 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.
  • 43. 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> }
  • 44. 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> }
  • 45. 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 }
  • 46. • 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( )
  • 47. 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 load 200 Kb of JS (lazy loaded) -> 240 ms page load
  • 48. 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>
  • 49. 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).
  • 50. Optimistic Interfaces
  • 51. 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”
  • 52. • 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” Optimistic Interfaces
  • 53. “ 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.
  • 54. “ Performance isn’t solely a technical concern for developers. It’s time to treat performance as an essential design feature. — Brad Frost
  • 55. 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.
  • 56. Progressive Reduction
  • 57. “ 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
  • 58. 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.
  • 59. 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.
  • 60. • 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
  • 61. Responsive Design Patterns
  • 62. “ If a design problem can be solved responsively, eventually it will be solved responsively. — You-know-who
  • 63. Conclusion
  • 64. www.smashingbook.com
  • 65. www.the-mobile-book.com
  • 66. Thank you.
  • 67. 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