Download as PDF, PPTX
![”
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)
Uploaded byJonas Päckos
Now you see me... Adaptive Web Design and Development
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.
More Related Content
Similar to Now you see me... Adaptive Web Design and Development
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
Now you see me... Adaptive Web Design and Development
- 1. NOW YOU SEEME... Adaptive Web Design and Development Jonas Päckos @ pekkos Photo Credit: http://www.flickr.com/photos/pburch_tulane/4192854233/
- 2.
- 3.
- 4. Sony Ericsson W610i 1.96” 176x 220 px
- 5. iPhone 5 4.87” 640 x1136 px
- 6. iPad Mini 7.9” 768 x1024 px
- 7. Samsung Galaxy 8 8” 800x 1280 px
- 8.
- 9. iPad 3rd Gen 9.5” 1536x 2048 px
- 10. Dell XPS 12 12.5” 1920x 1080 px
- 11. Lenovo Centre Horizon 27” 1920x 1080 px
- 13.
- 16.
- 17.
- 20. Screen size /Density Touch / Gestures Palm / Lap / Desk Cursor / Keyboard Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/
- 21.
- 22. ” After poking atthis 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
- 23.
- 24. ” Make pages whichare 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/
- 25.
- 26.
- 27. FLUID GRIDS FLEXIBLE MEDIA MEDIAQUERIES Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
- 28. FIXED GRID 960 px 660px 300 px
- 29. FLUID GRID 660px /960px = 0.6875 ! 330px / 960px = 0.3125
- 30.
- 31. FLEXIBLE MEDIA img, video{ max-width: 100%; }
- 32.
- 33. MEDIA QUERIES @media onlyscreen and (min-width: 600px) { .primary { float: left; } .secondary { float: right; } }
- 34.
- 36. VIEWPORT META TAG <metaname="viewport" content="width=device-width, initial-scale=1">
- 40.
- 41.
- 42. This site isbest viewed at 800x600 in Internet Explorer 6 or later Inspired by: http://vimeo.com/64203714
- 43. This site isbest viewed on WebKit Inspired by: http://vimeo.com/64203714
- 44. This website isbest viewed on a $1000 tablet with HD display Inspired by: http://vimeo.com/64203714
- 45. This website isbest viewed in the First World Inspired by: http://vimeo.com/64203714
- 46.
- 47.
- 48. Behaviours and enhancementswith 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 requirethat 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 sitesneed to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/
- 53.
- 54.
- 55.
- 56. What about theshiny 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.
- 59.
- 61. USE ARIA FORSEMANTICS By all means, use HTML 5 elements as placeholders if it makes the code clearer But don’t use those elements for styling
- 62.
- 63.
- 64. Markup needed bya javascript widget should be generated by javascript
- 67. Apply no stylesbefore it is time var collapseWidgets = $("[data-widget=collapse]"); collapseWidgets.each(function() { ! $(this).attr('aria-expanded', 'false'); $(this).addClass('is-collapsed'); ! . . .
- 68. NOW YOU SEEME... Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
- 69. CSS RULES DISPLAY EFFECT ACCESSIBILITYEFFECT 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); }
- 74.
- 75.
- 76.
- 77. However, when buildinga menu using a javascript collapse widget display: none; ! is actually a good idea
- 78.
- 79. Behaviours and enhancementswith 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
- 80.
- 81. ” I’ve got badnews, 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/
- 82.
- 83.
- 84.
- 85. And so, thePE 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.
- 87. ” We live ina 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 usershave javascript disabled ?
- 90.
- 91. Yes, but howmany users have javascript disabled ?
- 92.
- 97.
- 99. ” Progressive enhancement isnot 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.
- 101.
- 102. How most pagesload 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.
- 104. “Progressive enhancement isn'tfor 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’tclear. 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 thisweb 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.
- 108.
- 109. Progressive Enhancement islike an Escalator Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
- 110. ” An escalator cannever 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
- 111.
- 112.
- 113.
- 114.
- 115. Being backwards compatibleis the best way to ensure your sites work on future devices.
- 116.
- 117.