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
! ! 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é)
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
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…
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
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
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
(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, …)
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