Now you see me... Adaptive Web Design and Development
0 likes2,755 views
Progressive enhancement is still an important approach for building responsive websites and web applications. While JavaScript can now be assumed to be widely available, progressive enhancement avoids single points of failure and improves performance by loading critical content first before non-essential enhancements. The distinction between websites and applications is also blurred, so progressive techniques remain applicable to most digital experiences on the web.
![”
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/](https://image.slidesharecdn.com/nowyouseeme-131213065631-phpapp01/85/Now-you-see-me-Adaptive-Web-Design-and-Development-49-320.jpg)
![Apply no styles before it is time
var collapseWidgets = $("[data-widget=collapse]");
collapseWidgets.each(function() {
!
$(this).attr('aria-expanded', 'false');
$(this).addClass('is-collapsed');
!
.
.
.](https://image.slidesharecdn.com/nowyouseeme-131213065631-phpapp01/85/Now-you-see-me-Adaptive-Web-Design-and-Development-67-320.jpg)
![”
[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/](https://image.slidesharecdn.com/nowyouseeme-131213065631-phpapp01/85/Now-you-see-me-Adaptive-Web-Design-and-Development-105-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (19)
Ad
Similar to Now you see me... Adaptive Web Design and Development (20)
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
Now you see me... Adaptive Web Design and Development
- 1. NOW YOU SEE ME... Adaptive Web Design and Development Jonas Päckos @ pekkos Photo Credit: http://www.flickr.com/photos/pburch_tulane/4192854233/
- 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
- 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
- 13. Photo Credit: http://blog.dk.sg/wp-content/uploads/2013/04/P1090157.jpg
- 16. ANDROID FRAGMENTATION http://opensignalmaps.com/reports/fragmentation.php
- 20. Screen size / Density Touch / Gestures Palm / Lap / Desk Cursor / Keyboard Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/
- 22. ” 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
- 24. ” 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/
- 27. FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
- 28. FIXED GRID 960 px 660 px 300 px
- 29. FLUID GRID 660px / 960px = 0.6875 ! 330px / 960px = 0.3125
- 31. FLEXIBLE MEDIA img, video { max-width: 100%; }
- 32. FLEXIBLE MEDIA
- 33. MEDIA QUERIES @media only screen and (min-width: 600px) { .primary { float: left; } .secondary { float: right; } }
- 34. MEDIA QUERIES > 600 px
- 36. VIEWPORT META TAG <meta name="viewport" content="width=device-width, initial-scale=1">
- 41. Adaptive Web Design Responsive Web Design
- 42. This site is best viewed at 800x600 in Internet Explorer 6 or later Inspired by: http://vimeo.com/64203714
- 43. This site is best viewed on WebKit Inspired by: http://vimeo.com/64203714
- 44. This website is best viewed on a $1000 tablet with HD display Inspired by: http://vimeo.com/64203714
- 45. This website is best viewed in the First World Inspired by: http://vimeo.com/64203714
- 48. 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
- 49. ” 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/
- 50. Do web sites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/
- 53. CODE
- 54. HTML
- 55. HTML
- 56. What about the shiny HTML5 semantic elements ?
- 58. header, footer, section, aside, nav... Need javascript to be stylable in IE8 or older. These elements don’t actually do anything.
- 61. 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
- 62. JS NO JS
- 63. collapse
- 64. Markup needed by a javascript widget should be generated by javascript
- 67. Apply no styles before it is time var collapseWidgets = $("[data-widget=collapse]"); collapseWidgets.each(function() { ! $(this).attr('aria-expanded', 'false'); $(this).addClass('is-collapsed'); ! . . .
- 68. NOW YOU SEE ME... Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
- 69. 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/
- 70. When using e.g. the jQuery built-in functions such as fadeOut(), slideUp() or hide() the default result after hiding is display: none;
- 71. (function() var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();
- 72. (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; }); })();
- 73. .accessibly-hidden { position : absolute; margin : -1px; padding : 0; height : 1px; width : 1px; overflow : hidden; border : 0; clip : rect(0 0 0 0); }
- 77. However, when building a menu using a javascript collapse widget display: none; ! is actually a good idea
- 79. 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
- 81. ” 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/
- 85. 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/
- 86. Why is Progressive Enhancement dead ?
- 87. ” 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/
- 88. How many users have javascript disabled ?
- 91. Yes, but how many users have javascript disabled ?
- 99. ” 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
- 100. http://jakearchibald.com/2013/progressive-enhancement-still-important/
- 102. 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/
- 103. 563 kb 141 kb http://tomdale.net/2013/09/progressive-enhancement-is-dead/
- 104. “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/
- 105. ” [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/
- 106. ” “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/
- 107. web thang
- 109. Progressive Enhancement is like an Escalator Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
- 110. ” 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
- 115. Being backwards compatible is the best way to ensure your sites work on future devices.
- 116. THANKS