NOW YOU SEE ME...Adaptive Web Design and Development

Photo Credit: http://www.flickr.com/photos/pburch_tulane/4192854233/

Jonas Päckos pekkos @

http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html

SIZE MATTERS

Sony Ericsson W610i 1.96” 176 x 220 px

iPhone 5 4.87” 640 x 1136 px

iPad Mini 7.9” 768 x 1024 px

Samsung Galaxy 8 8” 800 x 1280 px

Photo Credit: http://www.pcpro.co.uk/blogs/2013/02/26/samsung-galaxy-note-8-review-first-look/

iPad 3rd Gen 9.5” 1536 x 2048 px

Dell XPS 12 12.5” 1920 x 1080 px

Lenovo Centre Horizon 27” 1920 x 1080 px

Photo Credit: http://blog.dk.sg/wp-content/uploads/2013/04/P1090157.jpg

http://opensignalmaps.com/reports/fragmentation.php

ANDROID FRAGMENTATION

http://blogs.which.co.uk/technology/tablets-2/does-samsung-make-too-many-phones-and-tablets/

Touch / Gestures Cursor / Keyboard

Photo Credit: http://www.flickr.com/photos/earlysound/4490601295/

Screen size / Density Palm / Lap / Desk

http://globalmoxie.com/blog/desktop-touch-design.shtml

”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

http://www.alistapart.com/articles/dao/

”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/

RESPONSIVE WEB DESIGN

http://www.alistapart.com/articles/responsive-web-design/

FLUID GRIDSFLEXIBLE MEDIAMEDIA QUERIES

Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/

FIXED GRID960 px

660 px 300 px

660px / 960px = 0.6875 !

330px / 960px = 0.3125

FLUID GRID

FLUID GRID90%

68.75% 31.25%

img, video { max-width: 100%; }

FLEXIBLE MEDIA

FLEXIBLE MEDIA

@media only screen and (min-width: 600px) { .primary { float: left; } .secondary { float: right; } }

MEDIA QUERIES

MEDIA QUERIES

> 600 px

<meta name="viewport" content="width=device-width, initial-scale=1">

VIEWPORT META TAG

http://blog.cloudfour.com/responsive-web-design-is-solid-gold/

Adaptive Web Design

Responsive Web Design

This site is best viewed at 800x600 in Internet Explorer 6 or later

Inspired by: http://vimeo.com/64203714

This site is best viewed on WebKit

Inspired by: http://vimeo.com/64203714

This website is best viewed on a $1000 tablet with HD display

Inspired by: http://vimeo.com/64203714

This website is best viewed in the First World

Inspired by: http://vimeo.com/64203714

Adaptive Web Design

Responsive Web Design

Progressive Enhancement

PROGRESSIVE ENHANCEMENT

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

”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/

Photo Credit: http://www.flickr.com/photos/timdorr/2096272747/

Do web sites need to look exactly the same in every browser?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

CODE

HTML

HTML

What about the shiny HTML5 semantic elements ?

header, footer, section, aside, nav...

Need javascript to be stylable in IE8 or older.

These elements don’t actually do anything.

ARIA

http://www.w3.org/TR/wai-aria/

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

JS NO JS

collapse

Markup needed by a javascript widget should be generated by javascript

Apply no styles before it is timevar collapseWidgets = $("[data-widget=collapse]"); collapseWidgets.each(function() { !$(this).attr('aria-expanded', 'false'); $(this).addClass('is-collapsed');

!. . .

Photo Credit: http://www.flickr.com/photos/zopeuse/2766206504/

NOW YOU SEE ME...

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/

When using e.g. the jQuery built-in functions such as fadeOut(), slideUp() or

hide() the default result after hiding isdisplay: none;

(function() var $button = $('#myButton'), $text = $('#myText'), visible = true; ! $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();

(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; }); })();

.accessibly-hidden { position : absolute; margin : -1px; padding : 0; height : 1px; width : 1px; overflow : hidden; border : 0; clip : rect(0 0 0 0); }

http://easy-readers.net/books/adaptive-web-design/

http://bit.ly/qILyTj

http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/

However, when building a menu using a javascript collapse widget

!

is actually a good ideadisplay: none;

http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/http://simplyaccessible.com/article/better-for-accessibility/

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

http://tomdale.net/2013/09/progressive-enhancement-is-dead/

” 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/

http://christophzillgens.com/en/articles/progressive-enhancement-is-deadx§

https://twitter.com/smashingmag/status/374899856231247872

https://twitter.com/jaffathecake/status/374892649137729537

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...

Why is Progressive Enhancement dead ?

”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/

How many users have javascript disabled ?

http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/

Yes, but how many users have javascript disabled ?

http://www.searchenginepeople.com/blog/stats-no-javascript.html

https://twitter.com/jaffathecake/status/207096228339658752

”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

http://jakearchibald.com/2013/progressive-enhancement-still-important/

http://jakearchibald.com/2013/progressive-enhancement-is-faster/

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

http://tomdale.net/2013/09/progressive-enhancement-is-dead/

563 kb 141 kb

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”

”[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/

”“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/

web thang

https://twitter.com/wilto/status/374947035432366080

Photo Credit: http://www.flickr.com/photos/jdn/3365996669/

Progressive Enhancement is like an Escalator

”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

https://blog.twitter.com/2012/improving-performance-twittercom

http://www.slideshare.net/nzakas/enough-withthejavascriptalready

http://requirejs.org

Adaptive Web Design

Responsive Web Design

Progressive Enhancement

Being backwards compatible is the best way to ensure your sites work on future devices.

THANKS

Jonas Päckoshttp://about.me/pekkos http://www.slideshare.net/pekkos

pekkos@