Remi Grumeau • développeur web front & backend • (et du flash mais y’a longtemps…) ! • co-fondateur d’un studio digital • co-créateur des meetups web ChtiJS & WelshDesign à Lille • développeur du projet emy-library.org @remi_grumeau
Historiquement impopulaire pour de bonnes raisons IE7 (mais WindowsPhone) Blackberry (mais QNX/Webkit, pas WAP) Opera (sur Android, pas QT) Android (certes, mais Smart-TV) ni iOS ni Android (mais pas un PC non plus)
Poser une question pour réagir au mieux, c’est très bien. ! ! Poser la même question toutes les 10 minutes sans jamais retenir la réponse, c’est de la c… de l’amnésie côté client d’où le poisson rouge (désolé)
coût en performance & donc aussi UX ! multiplication du nombre de requêtes / latence réseau ! repaint / reflow / FOUC ! gestion de dépendances / conflits ! maintenance
Sans oublier que Modernizr aussi se trompe ! iOS 6 gérait la geoloc’ mais ne la retourne pas en standalone ! Android < 4 gère le cache hors-ligne mais pas plus de 5 fichiers Javascript ! Blackberry 6&7 gère la vidéo HTML5 mais oups, on a oublié les codecs ! WindowsPhone gère le SVG mais en background-image, c’est une cata
Apprendre des erreurs du passé! ! ! Redirections vers des sous-domaines ! Detection selon la plateforme ! Gabarit selon le type de périphérique ! Faire l’amalgame iPhone = Safari ! Vouloir trop en faire côté serveur ! ! Lightbox de promo de son app native Ok, rien à voir mais qd même…
http://domain.com : ) : ) Gabarit selon le viewport du périphérique! ! : ) : ) supérieur à 1024 entre 1024 et 600 entre 600 et 320 > 320 A B B C D serveur
Samsung Galaxy S5 1080 x 1920 | 5.1’’ Samsung Galaxy Alpha 720 x 1280 | 4.7’’ 360 x 640 360 x 640 LG G4 1440 x 2560 | 5.5’’ 360 x 640 Google Nexus 5 1080 x 1900 | 5’’ 360 x 633 Galaxy Tab S 10.5 2560 x 1600 | 10.5’’ 1250 x 800 PPI 431 PPI 312 PPI 534 PPI 437 PPI 282 @3x @2x @4x @3x @2x Samsung SGH-U600 240 x 320 | 2.2’’ 240 x 320 PPI 181 @1x Résolution & taille d’écran Densité Retina Viewport
http://domain.com HTML5 CSS3 CSS 2 JAVASCRIPT IMAGE XL HTML5 CSS3 JAVASCRIPT IMAGE L HTML5 CSS3 JAVASCRIPT IMAGE M xHTML CSS 2 IMAGE S xHTML Gabarit selon le viewport du périphérique! ! supérieur à 1024 entre 1024 et 600 entre 600 et 320 > 320 A B B C D serveur
http://domain.com HTML5 CSS3 CSS 2 JAVASCRIPT IMAGE XL HTML5 CSS3 JAVASCRIPT IMAGE L HTML5 CSS3 JAVASCRIPT IMAGE M xHTML CSS 2 IMAGE S Gabarit selon le viewport du périphérique! ! supérieur à 1024 entre 1024 et 600 entre 600 et 320 > 320 xHTML A B B C D et Google Bot et Google Bot Mobile serveur
Tout ce qui ne change pas est stocké côté serveur (si écran tactile, taille de l’écran, PPI, viewport …) ! ! Tout ce qui peut changer DOIT être testé côté client (géoloc, online/offline, écran tactile sous Windows, …)
http://domain.com/assets/rwd/kiwi.jpg Profil selon détection du périphérique kiwi.jpg! qualité HD de la mort 240 @1x 320 @2x 360 @3x 500 @2x 640 @1x génération du visuel à la volée serveur
// breakpoint A & B : 0 -> 600 viewportWidth! ! // breakpoint C : 600 -> 1280 (viewportWidth / 100) * 70! ! // breakpoint D : 1280 et + 640 }* ppi = imageWidth A C D B
serveur Profil selon détection du périphérique /rwd/image.php?img=kiwi.jpg! ! 360px @3x => 1080px! ! réutilisation du cache /_cache/kiwi_1080.jpg /rwd/image.php?img=kiwi.jpg! ! 240px @1x => 240px! ! génération à la volée /_cache/kiwi_240.jpg kiwi.jpg! qualité HD de la mort compatible HTML2
ogiwarat
schroneko
iimokoy
shimabox
subomi
uhooi
mascii
deresmos
taowata
nozomiito
parttimenerd
slsops
davidbonilla
quramy
addyosmani
palkan
malarkey
maltzj
dotmariusz
tanoku
maggiecrowley
lemiorhan
sugarenia
thekraken