Faire du web moderne destination de tous

Julien Wajsberg Paris-Web octobre 2012

diffrents devicesrsolution et densitPC et crans, tablettes, mobiles

bureaursolutions trs diverses : de 1024x768 2560x1600

pour un 17 ou 19: 1280x1024

crans 20 ou 22 16/9: 1680x1050

tablettesipad 1 et 2 : 1024x768

ipad 3 : 2048x1536 Retina (voir plus bas)

ipad mini ? sans doute comme ipad 1 et 2, juste plus dense

mobilesiphone: 480x320

android: tout est possible

crans plus densesiPhone Retina: 960x640, expos comme un 480x320

problme: le texte parait fin, les images paraissent floues

PC de bureau

tablettes

touchstyletclavier virtuel

mobiles

touchstyletclavier virtuelclavier physiquemolette

claviersouriscrans touch

entres utilisateurs

contexteS

connectivit, latence

attention, concentration

environnement

chez soi

au bureau

dans un magasin

dans le mtro, le train

dans un parc

d'aprs Luke Wroblewskitablettes: chez soi*smartphones: en mobilit

source: http://www.lukew.com/ff/entry.asp?1571

* chez soi peut signifier aussi en vacances

OS et navigateurs

Safari Mobile

Opera Mini

Opera Mini

Opera Mobile

Android Browser

Firefox for Android

Chrome for Android

Windows Phone 7

Windows 8

Windows Mobile 6

Internet Explorer 8 Mobile

Internet Explorer 9

Internet Explorer 10

dfis du design multi devices

s'adapter la rsolution

s'adapter l'entre utilisateur

s'adapter au contexte

s'adapter la connectivit

s'adapter aux navigateurs

dfis du design multi devices

s'adapter la rsolution

s'adapter l'entre utilisateur

s'adapter au contexte

s'adapter la connectivit

s'adapter aux navigateurs

Rappelons nous

2001: Internet Explorer 6

2004: Firefox 1

2005: Internet Explorer 7le dveloppement dbute

2006: Internet Explorer 7

nous avons appris qu'en dveloppant pourune seule plate-formenous la faisonsstagner

Revenons en 2012

les navigateurs modernes nous entourent

-webkit est omniprsent sur mobile

good CSS3 support but quite bad API support

Microsoft and Mozilla are coming

Opera mini has a solid market share

users of old mobile browsers don't use the web much (but may still use operator services)

Internet Explorer 7 et 8des navigateurs anciens sont toujours l15 30% de parts de march pour IE7/8

nous devons nous assurer de conserver la diversitest bnfique pour le Web

quoi de nouveau dans le web

HTML5des balises

des attributs

des APIs

CSS3des slecteurs

des proprits

des media queries avances (pour le responsive design)

JavaScriptnouvelles mthodes

nouvelles syntaxes

HTML5: les balises

balises smantiques section, article, header, footer, etc

Possibilits:utiliser le script html5shiv

utiliser le prfixe XML html5

utiliser la fois ces balises et des div avec une classe du mme nom

utiliser uniquement des div avec des classes section, article, etc

mon opinion pour l'instant: la dernire solution est la plus facile et la plus flexible

HTML5: multimdia

video, audio: utiliser un fallback Flashvoir http://html5video.org/ pour une table de comparaison des solutions

canvas: utiliser un fallback en JavaScript pour Internet Explorer (attention: c'est lent), et un fallback texte (entre et ) qui est lu par les revues d'cran rcentes

HTML5: nouveaux attributs

formulaires: tel, number, url: utiliser

formulaires: color, date, etc: problme d'accessibilit lorsqu'ils sont supports

attributs de validation: utiliser avec attention, fournir un fallback javaScript (sans oublier la vrification serveur videmment)

attributs data: utiliser! enfin un moyen standard d'associer des donnes des lmnts!

HTML5: APIs

WebSocket, postMessage, traitement du JSON, local storage, XHR2, Web Workers, File, request animation frame, Database, Audio, WebRTC

bien sr pas prsents dans les vieux navigateurs

pas tous prsents dans tous les navigateurs modernes

quand ils sont prsents, ils n'ont pas toujours la mme API et sont parfois prfixsc'est du boulot supplmentaire pour les utiliser et pour les faire fonctionner de la mme manire dans tous les navigateurs qui les supportent.

c'est le prix payer lorsqu'on utilise des API non stabilises.

Javascript et DOM APIs

coder redevient amusant

exemples: mthodes d'Array (forEach, map, filter, etc), querySelector/querySelectorAll, Object.keys, function binding, getElementsByClassName, classList...

deux manires de grer: polyfills ou wrappers

les wrappers sont peut-tre plus populaires mais a amne une dpendance

polyfills

une bonne manire d'viter le code spaghettimme API que l'API standard, on implmente en JavaScript, mais l'implmentation peut se comporter diffremment

des fois c'est facile, et des fois non

il faut faire la part des choses entre cette fonction est super importante et j'ai besoin de 300ko de script pour l'implmenter

une liste de polyfills, parfois perfectibles:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

wrappers

avec underscore ou Lo-Dash, on peut facilement utiliser des mthodes fonctionnelleshttp://underscorejs.org/ http://lodash.com/

des bibliothques orientes DOM comme jQuery utilient dj des APIs DOM plus rapides si elles sont dispos

d'autres existent: requestAnimationFrame, websocket...

wrappers

utiliser si la fonctionnalit peuttre amene changer

polyfills

fonctions dont laspcification est finalise

doit tre conforme la spcificationparfois complexe faire correctement

parlons maintenant de CSS

CSS3

Par construction, CSS est permissif: si un navigateur ne comprend pas quelque chose, il l'ignore

c'est donc possible d'utiliser des proprits nouvelles, mais il faut aussi utiliser les anciennes comme fallback

Ah oui, aussi, arrtons de penser qu'on aura le mme rendu dans tous les navigateurs

CSS: slecteurs

prsumons qu'IE6 n'est plus utilis.
IE 7 est le navigateur le plus vieux

les slecteurs CSS 2 sont les plus importants. Super, IE7 les supportent!

CSS3 amne des choses avances comme :not,:target,::first-line,::first-letter utiliser pour du cosmtique

si vraiment on les veut dans IE7/8, on peut utiliser selectivzr
(http://selectivizr.com/)

CSS: des proprits

en CSS 2 on a display: table, inline-block, le contenu gnrbonne nouvelle: IE8 supporte tout a!

CSS 3 amne des gradients, fonds multiples, etc

utiliser des vieilles proprits comme fallback

CSS: example with backgrounds

div { background: rgb(255, 127, 127); background: rgba(255, 127, 127, .5); /* works with IE9 */ /* Saf4+, Chrome */ background: -webkit-gradient(linear, left top,left bottom, from(#444444), to (#999999)); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -webkit-linear-gradient(top, #444444, #999999); /* FF3.6+ */ background: -moz-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */ background: -o-linear-gradient(top, #444444, #999999); /* W3C */ /* pas de prfixe MS car IE10 va utiliser uniquement la version sans prfixe */ background: linear-gradient(to bottom, #444444, #999999);}

d'autres proprits CSS

transformations, transitions, animations

pourrait tre fait en JS pour les navigateurs qui ne les supportent pasmais c'est bien lent et a saccade et a rame

il suffit de... ne pas utiliser d'animations dans ces navigateurs, non? ;-)

Attention!Les vieux navigateurs sont lents

Les vieux navigateurs sont lents

avec JavaScript on pourrait amener les fonctions modernes de CSS et JS aux vieux navigateursmais

en plus d'avoir moins de fonctions, ils sont pniblement lentslents pour tlcharger des ressources

lents pour analyser

lents pour faire le rendu

lents pour excuter le JS et accder au DOM

acceptons que les vieux navigateurs n'auront pas toutes les fonctions modernes

mais n'oublions pas qu'il y a des utilisateurs derrirefournissons leur une exprience acceptable

Quelques outils

Quelques outils

Modernizr: http://modernizr.com/l'utiliser pour changer de comportement/style en fonction des fonctions disponibles

has.js: https://github.com/phiggins42/has.js/

prprocesseurs (Sass...) aide utiliser les prfixes corrects pour tous les navigateurs

c'est le wrapper de CSS: il est facile de dfinir des fonctions/mixins/imports pour des fonctions en cours de spcification

peut permettre de supporter des vieux navigateurs ct serveurvoir http://nicolasgallagher.com/mobile-first-css-sass-and-ie/

When can I use?

http://caniuse.com

HTML5 Please!

http://html5please.com

CSS3 Please!

http://css3please.com

d'autres outils

http://css3please.com

Ceaser:http://matthewlein.com/ceaser/

retenir

retenir

c'est plutt facile de coder pour IE7on code surtout pour des utilisateurs, ils ne choisissent pas d'utiliser IE7

c'est plutt facile de coder pour d'autres moteurs que webkit

La diversit est importante pour la prennit du web

questions?

sources des images

le vieux camion: http://www.fotopedia.com/items/flickr-5607519430

les outils: http://www.fotopedia.com/items/flickr-3147506658

des mains anonymes:
http://www.brand.orange.com/pages/view.php?ref=76049

/