Responsive Enhancement

578 views

Published on

Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
578
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Enhancement

  1. 1. Responsive Enhancement Sven Wolfermann | maddesigns
  2. 2. Bullshit Bingo?
  3. 3. Responsive Bingo Responsive Webdesign Performance Retina Desktop Mobilefirst Progressive Enhancement ContentStrategy Smartphone Android ContentFirst iOS Flexible Tablet ResponsiveImages Conditional Loading Media Queries
  4. 4. Did you mean Progressive Enhancement?
  5. 5. PE? Yeah, kind of. http://alistapart.com/article/understandingprogressiveenhancement
  6. 6. An escalator can never break – it can only become stairs. —Mitch Hedberg (a comedian, not a web developer) “ ”
  7. 7. Responsive Web Design A List Apart article by Ethan Marcotte
  8. 8. first website http://info.cern.ch/hypertext/WWW/TheProject.html
  9. 9. Web native features no pixel perfection unknown browser features Interaction you can't control the flow of content · · · ·
  10. 10. Responsive Webdesign solves many things one URL, one code base, one deployment all contents available (if not hidden) Future friendly · · ·
  11. 11. moto.oakley.com · Oakley's monster page of baubles 85.4MB page weight 471 HTTP requests 2 minutes 45 seconds until loading screen replaced with content 4 minutes 10 seconds until onLoad event · · · ·
  12. 12. 85.4MB, 471 requests! THIS IS NOT RWD!
  13. 13. moto.oakley.com fail ok, ok, Oakley does it better now: JUST 14.2MB, 291 request (more than 70MB less) with mobile user-agent? 6.7MB, 114 requests :/ Oakley's Moto diet
  14. 14. RWD has some issues site tend to be too large for mobile some content is hard to adapt: images, tables, ads, ... IE8 doesn't understand media queries · · ·
  15. 15. Guy Podjarny's RWD performance tests sites have nearly same weight on mobile as on desktop Real World RWD Performance – Take 2
  16. 16. go mobile first!
  17. 17. Mobile first == Smartphone first
  18. 18. HTML5 input fields Android Chrome vs iOS7 test native input styles http://nativeformelements.com/
  19. 19. Beyond Squishy: The Principles of Adaptive Design
  20. 20. Performance is our biggest issue
  21. 21. Performance Reduce image payload (the biggest effect) Reduce JavaScript and CSS payload Further optimize based on feature detection · · · Lightening Your Responsive Website Design With RESS
  22. 22. Cutting the mustard The BBC test the browser support like this if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application } if browser supports 'querySelector', 'localStorage' and 'addEventListener' do hot stuff! BBC Responsive News – Cutting the mustard
  23. 23. Modernizr Client side feature detection Modernizr is a JavaScript library that detects HTML5 & CSS3 features in the user's browser.http://modernizr.com/
  24. 24. Modernizr Modernizr adds classes to <html> based on their tests <html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage hashchange history boxshadow cssanimations csscolumns cssgradients csstransforms csstransforms3d csstransitions fontface video audio localstorage svg inlinesvg"> Modernizr features test: geolocation Modernizr.geolocation // true or false if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try a fallback? }
  25. 25. Modernizr Another Sample: datepicker <script src="modernizr.js"></script> <script> Modernizr.load({ test: Modernizr.inputtypes.date, nope: ['jquery.datepicker.js', 'jquery.datepicker.css'], complete: function () { $('input[type=date]').datepicker({ dateFormat: 'yy-mm-dd' }); } }); </script> load jQuery datepicker library for browsers that don't have native datepickers
  26. 26. Conditional loading
  27. 27. Conditional loading could become an important part of the content-first responsive design approach —Jeremy Keith (2011) “ ” Conditional Loading for Responsive Designs
  28. 28. Conditional loading http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote-11.png
  29. 29. Conditional loading http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote3.png
  30. 30. Conditional loading – Ajax-include pattern Replace: <a href="..." data-replace="/url/path/fragment.html">Latest Articles</a> Before: <a href="..." data-before="/url/path/fragment.html">Latest Articles</a> After: <a href="..." data-after="/url/path/fragment.html">Latest Articles</a> init with jQuery: $("[data-replace],[data-before],[data-after]").ajaxInclude(); An Ajax-Include Pattern for Modular Content
  31. 31. Conditional loading – Modernizr.load Modernizr loads scripts and CSS based on media queries Modernizr.load([ { test: Modernizr.mq("only screen and (min-width: 1051px)"), yep: '/js/large.js' }, { test: Modernizr.mq("only screen and (min-width: 600px) and (max-width: 1050px)"), yep: '/js/medium.js' }, { test: Modernizr.mq("only screen and (min-width: 320px) and (max-width: 599px)"), yep: '/js/small.js' } ]); you can use EM in media queries too ;) Modernizr.load is not part of the "development" version Modernizr.load won't be part of Modernizr 3.0, falls back to yepnopejs.com
  32. 32. Conditional Loading in Foundation Framework Map Example Display a static map image by default Display an interactive map for large screens <div data-interchange="[partials/static_map.html, (default)], [views/interactive_map.html, (large)]"> Loading map... </div> · · Using Interchange to Load the Right HTML for the Right Browser
  33. 33. RequireJS simple explained require.js is about three things: Dependency management Modularity Dynamic script loading can load modules on click – example: video gallery module (load markup and video asset on click) · · ·
  34. 34. Client meets server
  35. 35. Modernizr Server Client features for the server <?php include('modernizr-server.php'); print 'The server knows:'; foreach($modernizr as $feature=>$value) { print " $feature: "; print_r($value); } ?> The server knows: canvas: 1 geolocation: 1 crosswindowmessaging: 1 indexeddb: 0 hashchange: 1 ... https://github.com/jamesgpearce/modernizr-server
  36. 36. RESS Responsive Web Design + ServerSide Components
  37. 37. RESS http://www.lukew.com/ff/entry.asp?1392
  38. 38. Browser-Sniffing
  39. 39. Device Detection
  40. 40. Device Detection Problems databases are old just a second later updates are slow not reliable · · · WTFmobile
  41. 41. RESS in the wild? -> Adaptive Images http://adaptive-images.com/
  42. 42. Adaptive Images
  43. 43. Responsive Images a topic foritself… Responsive Images [german]
  44. 44. Responsive Images Art Direction A List Apart article about Responsive Webdesign
  45. 45. Thanks for your attention! Sven Wolfermann | maddesigns Twitter: @maddesigns Web: http://maddesigns.de

×