Your SlideShare is downloading. ×
Now you see me... Adaptive Web Design and Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

1,951
views

Published on

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

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
1,951
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
  • 3. SIZE MATTERS
  • 4. Sony Ericsson W610i 1.96” 176 x 220 px

  • 5. iPhone 5 4.87” 640 x 1136 px

  • 6. iPad Mini 7.9” 768 x 1024 px

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

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

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

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

  • 12. Photo Credit: http://blog.dk.sg/wp-content/uploads/2013/04/P1090157.jpg
  • 13. ANDROID FRAGMENTATION http://opensignalmaps.com/reports/fragmentation.php
  • 14. http://blogs.which.co.uk/technology/tablets-2/does-samsung-make-too-manyphones-and-tablets/
  • 15. Screen size / Density Touch / Gestures Palm / Lap / Desk Cursor / Keyboard Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/
  • 16. http://globalmoxie.com/blog/desktop-touch-design.shtml
  • 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. http://www.alistapart.com/articles/dao/
  • 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. RESPONSIVE WEB DESIGN
  • 21. http://www.alistapart.com/articles/responsive-web-design/
  • 22. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  • 23. FIXED GRID 960 px 660 px 300 px
  • 24. FLUID GRID 660px / 960px = 0.6875 ! 330px / 960px = 0.3125
  • 25. FLUID GRID 90% 68.75% 31.25%
  • 26. FLEXIBLE MEDIA img, video { max-width: 100%; }
  • 27. FLEXIBLE MEDIA
  • 28. MEDIA QUERIES @media only screen and
 (min-width: 600px) { 
 .primary { float: left; } .secondary { float: right; } }
  • 29. MEDIA QUERIES > 600 px
  • 30. VIEWPORT META TAG <meta name="viewport" content="width=device-width, initial-scale=1">
  • 31. http://blog.cloudfour.com/responsive-web-design-is-solid-gold/
  • 32. Adaptive Web Design Responsive Web Design
  • 33. This site is best viewed at 800x600 in Internet Explorer 6 or later Inspired by: http://vimeo.com/64203714
  • 34. This site is best viewed on WebKit Inspired by: http://vimeo.com/64203714
  • 35. This website is best viewed on a $1000 tablet with HD display Inspired by: http://vimeo.com/64203714
  • 36. This website is best viewed in the First World Inspired by: http://vimeo.com/64203714
  • 37. Adaptive Web Design Progressive Enhancement Responsive Web Design
  • 38. PROGRESSIVE ENHANCEMENT
  • 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. ” 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. 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. CODE
  • 43. HTML
  • 44. HTML
  • 45. What about the shiny HTML5 semantic elements ?
  • 46. header, footer, section, aside, nav... Need javascript to be stylable in IE8 or older. These elements don’t actually do anything.
  • 47. ARIA http://www.w3.org/TR/wai-aria/
  • 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. JS NO JS
  • 50. collapse
  • 51. Markup needed by a javascript widget should be generated by javascript
  • 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. NOW YOU SEE ME... Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
  • 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. When using e.g. the jQuery built-in functions such as fadeOut(), slideUp() or hide() the default result after hiding is display: none;
  • 56. (function() var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();
  • 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. .accessibly-hidden { position : absolute; margin : -1px; padding : 0; height : 1px; width : 1px; overflow : hidden; border : 0; clip : rect(0 0 0 0); }
  • 59. http://easy-readers.net/books/adaptive-web-design/
  • 60. http://bit.ly/qILyTj
  • 61. http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
  • 62. However, when building a menu using a javascript collapse widget display: none; ! is actually a good idea
  • 63. http://simplyaccessible.com/article/better-for-accessibility/ http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
  • 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. http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  • 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. http://christophzillgens.com/en/articles/progressive-enhancement-is-deadx§
  • 68. https://twitter.com/smashingmag/status/374899856231247872
  • 69. https://twitter.com/jaffathecake/status/374892649137729537
  • 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. Why is Progressive Enhancement dead ?
  • 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. How many users have javascript disabled ?
  • 74. http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-havejavascript-disabled/
  • 75. Yes, but how many users have javascript disabled ?
  • 76. http://www.searchenginepeople.com/blog/stats-no-javascript.html
  • 77. https://twitter.com/jaffathecake/status/207096228339658752
  • 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. http://jakearchibald.com/2013/progressive-enhancement-still-important/
  • 80. http://jakearchibald.com/2013/progressive-enhancement-is-faster/
  • 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. 563 kb 141 kb http://tomdale.net/2013/09/progressive-enhancement-is-dead/
  • 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. ” [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. ” “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. web thang
  • 87. https://twitter.com/wilto/status/374947035432366080
  • 88. Progressive Enhancement is like an Escalator Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
  • 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. https://blog.twitter.com/2012/improving-performancetwittercom
  • 91. http://www.slideshare.net/nzakas/enoughwiththejavascriptalready
  • 92. http://requirejs.org
  • 93. Adaptive Web Design Progressive Enhancement Responsive Web Design
  • 94. Being backwards compatible is the best way to ensure your sites work on future devices.
  • 95. THANKS
  • 96. Jonas Päckos http://about.me/pekkos http://www.slideshare.net/pekkos @ pekkos