Now you see me... Adaptive Web Design and Development

2,401 views

Published on

A talk I gave at the annual EVRY symposium, in the fall of 2013.

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

  • Be the first to like this

No Downloads
Views
Total views
2,401
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Now you see me... Adaptive Web Design and Development

  1. 1. NOW YOU SEE ME... Adaptive Web Design and Development Jonas Päckos @ pekkos Photo Credit: http://www.flickr.com/photos/pburch_tulane/4192854233/
  2. 2. http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
  3. 3. SIZE MATTERS
  4. 4. Sony Ericsson W610i 1.96” 176 x 220 px

  5. 5. iPhone 5 4.87” 640 x 1136 px

  6. 6. iPad Mini 7.9” 768 x 1024 px

  7. 7. Samsung Galaxy 8 8” 800 x 1280 px

  8. 8. Photo Credit: http://www.pcpro.co.uk/blogs/2013/02/26/samsung-galaxy-note-8-review-first-look/
  9. 9. iPad 3rd Gen 9.5” 1536 x 2048 px

  10. 10. Dell XPS 12 12.5” 1920 x 1080 px

  11. 11. Lenovo Centre Horizon 27” 1920 x 1080 px

  12. 12. Photo Credit: http://blog.dk.sg/wp-content/uploads/2013/04/P1090157.jpg
  13. 13. ANDROID FRAGMENTATION http://opensignalmaps.com/reports/fragmentation.php
  14. 14. http://blogs.which.co.uk/technology/tablets-2/does-samsung-make-too-manyphones-and-tablets/
  15. 15. Screen size / Density Touch / Gestures Palm / Lap / Desk Cursor / Keyboard Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/
  16. 16. http://globalmoxie.com/blog/desktop-touch-design.shtml
  17. 17. ” After poking at this problem for a few weeks, my conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do. — Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml
  18. 18. http://www.alistapart.com/articles/dao/
  19. 19. ” Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. — John Allsop http://www.alistapart.com/articles/dao/
  20. 20. RESPONSIVE WEB DESIGN
  21. 21. http://www.alistapart.com/articles/responsive-web-design/
  22. 22. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  23. 23. FIXED GRID 960 px 660 px 300 px
  24. 24. FLUID GRID 660px / 960px = 0.6875 ! 330px / 960px = 0.3125
  25. 25. FLUID GRID 90% 68.75% 31.25%
  26. 26. FLEXIBLE MEDIA img, video { max-width: 100%; }
  27. 27. FLEXIBLE MEDIA
  28. 28. MEDIA QUERIES @media only screen and
 (min-width: 600px) { 
 .primary { float: left; } .secondary { float: right; } }
  29. 29. MEDIA QUERIES > 600 px
  30. 30. VIEWPORT META TAG <meta name="viewport" content="width=device-width, initial-scale=1">
  31. 31. http://blog.cloudfour.com/responsive-web-design-is-solid-gold/
  32. 32. Adaptive Web Design Responsive Web Design
  33. 33. This site is best viewed at 800x600 in Internet Explorer 6 or later Inspired by: http://vimeo.com/64203714
  34. 34. This site is best viewed on WebKit Inspired by: http://vimeo.com/64203714
  35. 35. This website is best viewed on a $1000 tablet with HD display Inspired by: http://vimeo.com/64203714
  36. 36. This website is best viewed in the First World Inspired by: http://vimeo.com/64203714
  37. 37. Adaptive Web Design Progressive Enhancement Responsive Web Design
  38. 38. PROGRESSIVE ENHANCEMENT
  39. 39. Behaviours and enhancements with javascript Presentation with CSS Solid markup in HTML Start with a baseline and layer on enhancement. Photo Credit: http://www.flickr.com/photos/clagnut/315554083
  40. 40. ” Progressive enhancement doesn’t require that you provide the same experience in different browsers. [Apply] technologies in an intelligent way, layer-uponlayer, to craft an amazing experience. — Aaron Gustafsson http://easy-readers.net/books/adaptive-web-design/
  41. 41. Do web sites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/
  42. 42. CODE
  43. 43. HTML
  44. 44. HTML
  45. 45. What about the shiny HTML5 semantic elements ?
  46. 46. header, footer, section, aside, nav... Need javascript to be stylable in IE8 or older. These elements don’t actually do anything.
  47. 47. ARIA http://www.w3.org/TR/wai-aria/
  48. 48. USE ARIA FOR SEMANTICS By all means, use HTML 5 elements as placeholders if it makes the code clearer But don’t use those elements for styling
  49. 49. JS NO JS
  50. 50. collapse
  51. 51. Markup needed by a javascript widget should be generated by javascript
  52. 52. Apply no styles before it is time var collapseWidgets = $("[data-widget=collapse]"); collapseWidgets.each(function() { ! $(this).attr('aria-expanded', 'false'); $(this).addClass('is-collapsed'); ! . . .
  53. 53. NOW YOU SEE ME... Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
  54. 54. CSS RULES DISPLAY EFFECT ACCESSIBILITY EFFECT visibility: hidden; Elements hidden from view, but not removed from normal flow Content is ignored by screen readers display: none; Element is removed from the normal flow and hidden Content is ignored by screen readers height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers text-indent: -999em; Contents are shifted off-screen and hidden from view Screen readers have access to the content - limited to text and inline elements position: absolute; left: -999em; Content is removed from the normal flow and shifted offscreen Screen readers have access to the content http://easy-readers.net/books/adaptive-web-design/
  55. 55. When using e.g. the jQuery built-in functions such as fadeOut(), slideUp() or hide() the default result after hiding is display: none;
  56. 56. (function() var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();
  57. 57. (function(){ var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast',function(){ $text .addClass('accessibly-hidden') .slideDown(0); }); } else { $text.slideUp(0,function(){ $text .removeClass('accessibly-hidden') .slideDown('fast'); }); } visible = ! visible; }); })();
  58. 58. .accessibly-hidden { position : absolute; margin : -1px; padding : 0; height : 1px; width : 1px; overflow : hidden; border : 0; clip : rect(0 0 0 0); }
  59. 59. http://easy-readers.net/books/adaptive-web-design/
  60. 60. http://bit.ly/qILyTj
  61. 61. http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
  62. 62. However, when building a menu using a javascript collapse widget display: none; ! is actually a good idea
  63. 63. http://simplyaccessible.com/article/better-for-accessibility/ http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
  64. 64. Behaviours and enhancements with javascript Presentation with CSS Solid markup in HTML Start with a baseline and layer on enhancement. Photo Credit: http://www.flickr.com/photos/clagnut/315554083
  65. 65. http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  66. 66. ” I’ve got bad news, though: Progressive enhancement is dead, baby. It’s dead. At least for the majority of web developers. At some point recently, the browser transformed from being an awesome interactive document viewer into being the world’s most advanced, widely-distributed application runtime. — Tom Dale http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  67. 67. http://christophzillgens.com/en/articles/progressive-enhancement-is-deadx§
  68. 68. https://twitter.com/smashingmag/status/374899856231247872
  69. 69. https://twitter.com/jaffathecake/status/374892649137729537
  70. 70. And so, the PE flame war went on... “Progressive Enhancement is dead!” “No it isn’t!” “Yes it is!” “No it isn’t!” “I hate you!” Photo Credit: http://www.flickr.com/photos/georgo10/3286708793/
  71. 71. Why is Progressive Enhancement dead ?
  72. 72. ” We live in a time where you can assume JavaScript is part of the web platform. Worrying about browsers without JavaScript is like worrying about whether you’re backwards compatible with HTML 3.2 or CSS2. — Tom Dale http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  73. 73. How many users have javascript disabled ?
  74. 74. http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-havejavascript-disabled/
  75. 75. Yes, but how many users have javascript disabled ?
  76. 76. http://www.searchenginepeople.com/blog/stats-no-javascript.html
  77. 77. https://twitter.com/jaffathecake/status/207096228339658752
  78. 78. ” Progressive enhancement is not about supporting people who turn off Javascript, it is about avoiding a single point of failure. — Jeremy Keith http://www.lukew.com/ff/entry.asp?1776
  79. 79. http://jakearchibald.com/2013/progressive-enhancement-still-important/
  80. 80. http://jakearchibald.com/2013/progressive-enhancement-is-faster/
  81. 81. How most pages load PE: more or less in parallell,
 step 2 blocks rendering 1. HTML downloads 2.CSS downloads 3. CSS fetches additional assets 4. JS downloads 5. JS executes 6. JS fetches additional assets 7. JS updates DOM JS driven: All 7 steps 
 blocks rendering http://jakearchibald.com/2013/progressive-enhancement-still-important/
  82. 82. 563 kb 141 kb http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  83. 83. “Progressive enhancement isn't for building real apps” “Ok for web sites to be developed with PE, but web apps don’t need that” “Yeah, but I'm building a web app, not a website” Image Credit: http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/
  84. 84. ” [The] distinction isn’t clear. Many sites morph from one into the other. Is Wikipedia a website up until the point that I start editing an article? Are Twitter and Pinterest websites while I’m browsing through them but then flip into being web apps the moment that I post something? — Jeremy Keith http://adactio.com/journal/6246/
  85. 85. ” “Check out this web thang I’m working on.”
 “Have you seen this great web thang?”
 “What’s that?”
 “It’s a web thang.” — Jeremy Keith http://adactio.com/journal/6246/
  86. 86. web thang
  87. 87. https://twitter.com/wilto/status/374947035432366080
  88. 88. Progressive Enhancement is like an Escalator Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
  89. 89. ” An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.” — Mitch Hedberg http://en.wikiquote.org/wiki/Mitch_Hedberg
  90. 90. https://blog.twitter.com/2012/improving-performancetwittercom
  91. 91. http://www.slideshare.net/nzakas/enoughwiththejavascriptalready
  92. 92. http://requirejs.org
  93. 93. Adaptive Web Design Progressive Enhancement Responsive Web Design
  94. 94. Being backwards compatible is the best way to ensure your sites work on future devices.
  95. 95. THANKS
  96. 96. Jonas Päckos http://about.me/pekkos http://www.slideshare.net/pekkos @ pekkos

×