Responsible Design ou Le web moderne à destination de tous
-
Upload
jwajsberg -
Category
Technology
-
view
1.770 -
download
0
Transcript of Responsible Design ou Le web moderne à destination de tous
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
/