now you see me... adaptive web design and development
DESCRIPTION
A talk I gave at the annual EVRY symposium, in the fall of 2013.TRANSCRIPT
![Page 1: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/1.jpg)
NOW YOU SEE ME...Adaptive Web Design and Development
Photo Credit: http://www.flickr.com/photos/pburch_tulane/4192854233/
Jonas Päckos pekkos @
![Page 2: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/2.jpg)
http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
![Page 3: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/3.jpg)
SIZE MATTERS
![Page 4: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/4.jpg)
Sony Ericsson W610i 1.96” 176 x 220 px
![Page 5: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/5.jpg)
iPhone 5 4.87” 640 x 1136 px
![Page 6: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/6.jpg)
iPad Mini 7.9” 768 x 1024 px
![Page 7: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/7.jpg)
Samsung Galaxy 8 8” 800 x 1280 px
![Page 8: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/8.jpg)
Photo Credit: http://www.pcpro.co.uk/blogs/2013/02/26/samsung-galaxy-note-8-review-first-look/
![Page 9: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/9.jpg)
iPad 3rd Gen 9.5” 1536 x 2048 px
![Page 10: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/10.jpg)
Dell XPS 12 12.5” 1920 x 1080 px
![Page 11: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/11.jpg)
Lenovo Centre Horizon 27” 1920 x 1080 px
![Page 12: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/12.jpg)
![Page 13: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/13.jpg)
Photo Credit: http://blog.dk.sg/wp-content/uploads/2013/04/P1090157.jpg
![Page 14: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/14.jpg)
![Page 15: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/15.jpg)
![Page 16: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/16.jpg)
http://opensignalmaps.com/reports/fragmentation.php
ANDROID FRAGMENTATION
![Page 17: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/17.jpg)
http://blogs.which.co.uk/technology/tablets-2/does-samsung-make-too-many-phones-and-tablets/
![Page 18: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/18.jpg)
![Page 19: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/19.jpg)
![Page 20: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/20.jpg)
Touch / Gestures Cursor / Keyboard
Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/
Screen size / Density Palm / Lap / Desk
![Page 21: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/21.jpg)
http://globalmoxie.com/blog/desktop-touch-design.shtml
![Page 22: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/22.jpg)
”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
![Page 24: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/24.jpg)
”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/
![Page 25: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/25.jpg)
RESPONSIVE WEB DESIGN
![Page 26: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/26.jpg)
http://www.alistapart.com/articles/responsive-web-design/
![Page 27: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/27.jpg)
FLUID GRIDSFLEXIBLE MEDIAMEDIA QUERIES
Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
![Page 28: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/28.jpg)
FIXED GRID960 px
660 px 300 px
![Page 29: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/29.jpg)
660px / 960px = 0.6875 !
330px / 960px = 0.3125
FLUID GRID
![Page 30: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/30.jpg)
FLUID GRID90%
68.75% 31.25%
![Page 31: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/31.jpg)
img, video { max-width: 100%; }
FLEXIBLE MEDIA
![Page 32: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/32.jpg)
FLEXIBLE MEDIA
![Page 33: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/33.jpg)
@media only screen and (min-width: 600px) { .primary { float: left; } .secondary { float: right; } }
MEDIA QUERIES
![Page 34: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/34.jpg)
MEDIA QUERIES
> 600 px
![Page 35: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/35.jpg)
![Page 36: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/36.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1">
VIEWPORT META TAG
![Page 37: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/37.jpg)
![Page 38: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/38.jpg)
![Page 39: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/39.jpg)
![Page 40: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/40.jpg)
http://blog.cloudfour.com/responsive-web-design-is-solid-gold/
![Page 41: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/41.jpg)
Adaptive Web Design
Responsive Web Design
![Page 42: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/42.jpg)
This site is best viewed at 800x600 in Internet Explorer 6 or later
Inspired by: http://vimeo.com/64203714
![Page 44: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/44.jpg)
This website is best viewed on a $1000 tablet with HD display
Inspired by: http://vimeo.com/64203714
![Page 45: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/45.jpg)
This website is best viewed in the First World
Inspired by: http://vimeo.com/64203714
![Page 46: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/46.jpg)
Adaptive Web Design
Responsive Web Design
Progressive Enhancement
![Page 47: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/47.jpg)
PROGRESSIVE ENHANCEMENT
![Page 48: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/48.jpg)
Photo Credit: http://www.flickr.com/photos/clagnut/315554083
Behaviours and enhancements with javascript
Start with a baseline and layer on enhancement.
Solid markup in HTML
Presentation with CSS
![Page 49: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/49.jpg)
”Progressive enhancement doesn’t require that you provide the same experience in different browsers. [Apply] technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.
— Aaron Gustafsson
http://easy-readers.net/books/adaptive-web-design/
![Page 50: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/50.jpg)
Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/
Do web sites need to look exactly the same in every browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
![Page 51: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/51.jpg)
![Page 52: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/52.jpg)
![Page 53: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/53.jpg)
CODE
![Page 54: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/54.jpg)
HTML
![Page 55: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/55.jpg)
HTML
![Page 56: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/56.jpg)
What about the shiny HTML5 semantic elements ?
![Page 57: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/57.jpg)
![Page 58: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/58.jpg)
header, footer, section, aside, nav...
Need javascript to be stylable in IE8 or older.
These elements don’t actually do anything.
![Page 60: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/60.jpg)
![Page 61: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/61.jpg)
USE ARIA FOR SEMANTICSBy all means, use HTML 5
elements as placeholders if it makes the code clearer
But don’t use those elements for styling
![Page 62: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/62.jpg)
JS NO JS
![Page 63: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/63.jpg)
collapse
![Page 64: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/64.jpg)
Markup needed by a javascript widget should be generated by javascript
![Page 65: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/65.jpg)
![Page 66: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/66.jpg)
![Page 67: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/67.jpg)
Apply no styles before it is timevar collapseWidgets = $("[data-widget=collapse]"); collapseWidgets.each(function() { !$(this).attr('aria-expanded', 'false'); $(this).addClass('is-collapsed');
!. . .
![Page 68: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/68.jpg)
Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/
NOW YOU SEE ME...
![Page 69: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/69.jpg)
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 off-
screen
Screen readers have access to the content
http://easy-readers.net/books/adaptive-web-design/
![Page 70: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/70.jpg)
When using e.g. the jQuery built-in functions such as fadeOut(), slideUp() or
hide() the default result after hiding isdisplay: none;
![Page 71: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/71.jpg)
(function() var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();
![Page 72: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/72.jpg)
(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; }); })();
![Page 73: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/73.jpg)
.accessibly-hidden { position : absolute; margin : -1px; padding : 0; height : 1px; width : 1px; overflow : hidden; border : 0; clip : rect(0 0 0 0); }
![Page 74: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/74.jpg)
http://easy-readers.net/books/adaptive-web-design/
![Page 76: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/76.jpg)
http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
![Page 77: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/77.jpg)
However, when building a menu using a javascript collapse widget
!
is actually a good ideadisplay: none;
![Page 78: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/78.jpg)
http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/http://simplyaccessible.com/article/better-for-accessibility/
![Page 79: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/79.jpg)
Photo Credit: http://www.flickr.com/photos/clagnut/315554083
Behaviours and enhancements with javascript
Start with a baseline and layer on enhancement.
Solid markup in HTML
Presentation with CSS
![Page 80: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/80.jpg)
http://tomdale.net/2013/09/progressive-enhancement-is-dead/
![Page 81: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/81.jpg)
” 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/
![Page 82: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/82.jpg)
http://christophzillgens.com/en/articles/progressive-enhancement-is-deadx§
![Page 83: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/83.jpg)
https://twitter.com/smashingmag/status/374899856231247872
![Page 84: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/84.jpg)
https://twitter.com/jaffathecake/status/374892649137729537
![Page 85: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/85.jpg)
Photo Credit: http://www.flickr.com/photos/georgo10/3286708793/
“Progressive Enhancement is dead!”
“No it isn’t!”
“Yes it is!”
“No it isn’t!”
“I hate you!”
And so, the PE flame war went on...
![Page 86: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/86.jpg)
Why is Progressive Enhancement dead ?
![Page 87: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/87.jpg)
”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/
![Page 88: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/88.jpg)
How many users have javascript disabled ?
![Page 89: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/89.jpg)
![Page 90: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/90.jpg)
http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/
![Page 91: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/91.jpg)
Yes, but how many users have javascript disabled ?
![Page 92: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/92.jpg)
http://www.searchenginepeople.com/blog/stats-no-javascript.html
![Page 93: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/93.jpg)
![Page 94: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/94.jpg)
![Page 95: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/95.jpg)
![Page 96: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/96.jpg)
![Page 97: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/97.jpg)
https://twitter.com/jaffathecake/status/207096228339658752
![Page 98: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/98.jpg)
![Page 99: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/99.jpg)
”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
![Page 100: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/100.jpg)
http://jakearchibald.com/2013/progressive-enhancement-still-important/
![Page 101: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/101.jpg)
http://jakearchibald.com/2013/progressive-enhancement-is-faster/
![Page 102: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/102.jpg)
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
How most pages load
http://jakearchibald.com/2013/progressive-enhancement-still-important/
PE: more or less in parallell,step 2 blocks rendering
JS driven: All 7 steps blocks rendering
![Page 103: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/103.jpg)
http://tomdale.net/2013/09/progressive-enhancement-is-dead/
563 kb 141 kb
![Page 104: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/104.jpg)
Image Credit: http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/
“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”
![Page 105: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/105.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/
![Page 106: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/106.jpg)
”“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/
![Page 107: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/107.jpg)
web thang
![Page 108: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/108.jpg)
https://twitter.com/wilto/status/374947035432366080
![Page 109: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/109.jpg)
Photo Credit: http://www.flickr.com/photos/jdn/3365996669/
Progressive Enhancement is like an Escalator
![Page 110: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/110.jpg)
”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
![Page 111: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/111.jpg)
https://blog.twitter.com/2012/improving-performance-twittercom
![Page 112: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/112.jpg)
http://www.slideshare.net/nzakas/enough-withthejavascriptalready
![Page 114: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/114.jpg)
Adaptive Web Design
Responsive Web Design
Progressive Enhancement
![Page 115: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/115.jpg)
Being backwards compatible is the best way to ensure your sites work on future devices.
![Page 116: Now you see me... Adaptive Web Design and Development](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7be134a795906498b458d/html5/thumbnails/116.jpg)
THANKS