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