Responsive côté serveur

Gérer votre responsive, côté serveur

Transcript

1. RESS! Le responsive côté serveur
2. 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
3. Gestion du web mobile côté serveur
4. un peu impopulaire…
5. un peu impopulaire… …pour de bonnes raisons
6. http://domain.com : ) Historiquement impopulaire pour de bonnes raisons http://domain.com serveur
7. http://domain.com http://domain.com : ( : ) Historiquement impopulaire pour de bonnes raisons http://domain.com serveur
8. http://domain.com http://iphone.domain.com : ) : ) Historiquement impopulaire pour de bonnes raisons http://domain.com serveur
9. http://domain.com http://iphone.domain.com : ) : ( : ) Historiquement impopulaire pour de bonnes raisons http://domain.com serveur
10. http://domain.com http://mobile.domain.com : ) : ) : ) Historiquement impopulaire pour de bonnes raisons http://domain.com serveur
11. : ) : ) : ( http://domain.com Historiquement impopulaire pour de bonnes raisons http://mobile.domain.com http://domain.com : ) serveur
12. http://domain.com/page1 : ( http://domain.com/page1 http://domain.com/cat1/page2 : ( page 2 http://mobile.domain.com http://mobile.domain.com http://mobile.domain.com : ( home! page Historiquement impopulaire pour de bonnes raisons
13. 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)
14. Cat astrophe…
15. D’où l’élan massif de gérer ça 100% côté client, tout en CSS et Javascript
16. Mobile-first + amélioration progressive + grille fluide
17. fin
18. On demande tout au navigateur. !
19. On demande tout au navigateur. Beaucoup de questions…
20. On demande tout au navigateur. Beaucoup de questions… … dont on connait déjà 90% des réponses
21. un iPhone !
24. 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é)
25. 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
26. 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
27. et Javascript n’est parfois pas une option ! contenus référençables newsletters flux d’applications version wap images …
28. Bref, on télécharge et execute plus de fichiers qu’avant mais on continue à se louper quand même…
29. RESS! ! REsponsive + Server-Side components
30. Gestion côté serveur 2, le retour
31. 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…
32. http://domain.com : ) : ) Gabarit selon le type de périphérique! ! : ) : ) DESKTOP TABLETTE SMARTPHONE MOBILE A B B C D serveur
33. 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
34. via user-agent sniffing android | sgh-i77 android | sgh-t98 android | sph-d710 android | gt-i9100 Samsung Galaxy S2 android | sol25 android | htc650 android | d6503 Sony Xperia Z2 android|htv31 HTC J Butterfly lg-h818 LG G4
35. 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
37. 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
38. 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
39. Et si on ne le sait pas ? (nouveau Galaxy S72, tablette chinoise XY, …) ! ! MOBILE-FIRST !!
40. http://domain.com xHTML CSS 2 IMAGE S MODERNIZR LOG ajax vérification! manuelle MOBILE FIRST Pour savoir par la suite Périphérique! ! ?! serveur
41. 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, …)
42. Exemple avec un menu
43. logo menu 1 menu 2 menu 3 contenu footer logo contenu footer logo contenu menu 1 menu 2 menu 3 A B A D logo contenu footer menu 1 menu 2 menu 3 logo
44. <?php $RESS->init(); echo $RESS->getComponent(‘header’); ?> <div class=‘’wrapper’’> <?= $RESS->getComponent(‘mainheader’) ?> <section id=‘’content’’> <h1>Titre</h1> </section> <?= $RESS->getComponent(‘mainmenu’, [’A’,’bot’]) ?> </div> <?= $RESS->getComponent(‘mainmenu’, [’B’,’C’]) ?> </body> </html>
45. <nav id=‘’mainmenu’’> <?php if( _gabarit == ‘B’ || _gabarit == ‘C’ ) { ?> <h3><a href=‘’..’’>Mon Site</a></h3> <?php } ?> <ul> <li><a href=’’/menu1’’>Menu 1</a></li> <li><a href=’’/menu2’’>Menu 2</a></li> <li><a href=’’/menu3’’>Menu 3</a></li> </ul> <?php if( _gabarit == ‘B’ || _gabarit == ‘C’ ) { ?> <div id=‘’mainmenu_background’’></div> <?php } ?> </nav>
46. <section id=‘’header’’> <h3><a href=‘’..’’>Mon Site</a></h3> <?php if( _gabarit == ‘D’ ) $RESS->getComponent(‘mainmenu’, [’D’]); ?> </section>
47. // breakpoint A : 0 -> 320 ! ! ! // breakpoint B : 320 -> 600 ! ! ! // breakpoint C : 600 -> 1280 ! ! ! // breakpoint D : 1280 et + body { font-family: Helvetica, Arial, sans-serif; font-size: 110%/1.5; background: #fff; text-align: center } body>footer, body>header { width: 100% } section { width: 98%; margin: .3em 1%; text-align: left } ! @media (min-width:320px) and (max-width:599px) { body>header h1 { font-size: 1.8em } } ! @media (min-width:600px) and (max-width:1279px) { body>header { background-image: url(header-medium.jpg) } } ! @media (min-width:1280px) { body>footer ul { width: auto } } + + + +
48. logo menus contenu footer logo contenu menus recherche footer aside recherche
49. Images Responsive côté serveur
50. 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
51. // breakpoint A & B : 0 -> 600 viewportWidth! ! // breakpoint C : 600 -> 1280 (viewportWidth / 100) * 70! ! // breakpoint D : 1280 et + 640 }* ppi = imageWidth A C D B
52. <img src=’’http://domain.com/assets/rwd/kiwi.jpg’’> 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
53. https://app.resrc.it/s=w780,pd1/o=80/http://domain.com/kiwi.jpg largeur densité qualité image source ou sinon…
54. // breakpoint A : 0 -> 320 $width = viewportWidth || $quality=60! ! ! // breakpoint B : 320 -> 600 $width = viewportWidth || $quality=(70 / ppi)! ! ! // breakpoint C : 600 -> 1280 $width = (viewportWidth / 100) * 70 || $quality=(70 / ppi)! ! ! // breakpoint D : 1280 et + $width = 640 || $quality=80
55. https://app.resrc.it/s=w240,pd1/o=60/http://domain.com/kiwi.jpg https://app.resrc.it/s=w360,pd3/o=24/http://domain.com/kiwi.jpg https://app.resrc.it/s=w360,pd2/o=35/http://domain.com/kiwi.jpg https://app.resrc.it/s=w600,pd1/o=80/http://domain.com/kiwi.jpg
56. https://app.resrc.it/s=w360/http://domain.com/dog.jpg https://app.resrc.it/s=w360/c=sq/http://domain.com/dog.jpg
57. Et … y’a des gens qui utilisent ça ?!
58. desktop iPhone Android WinPhone 8 WinPhone 7 WebOS Symbian
59. desktop iPhone Android WinPhone 8 WinPhone 7 Symbian
60. desktop iPhone Android WinPhone 8 WinPhone 7 Symbian
61. desktop iPhone Android WinPhone 8 WinPhone 7 Symbian 3GP
62. Feature phone iPhone Android
63. ! Desktop iPhone Android WinPhone 8
64. Open Sans, Blackberry 7 @font-face {! font-family:! ! 'Open Sans';! font-style:! ! normal;! font-weight:! ! 300;! src:! local('Open Sans Light’),! ! ! ! local(‘OpenSans-Light'),! ! ! ! url(http://fonts.gstatic.com/DXO(...)hgs.ttf) format('truetype');! } Open Sans, WindowsPhone 8 @font-face {! font-family:! ! 'Open Sans';! font-style:! ! normal;! font-weight:! ! 300;! src:! local('Open Sans Light’),! ! ! ! local(‘OpenSans-Light'),! ! ! ! url(http://fonts.gstatic.com/DXO(...)uXM.woff) format('woff');! } Open Sans, WindowsPhone 7 @font-face {! font-family:! ! 'Open Sans';! font-style:! ! normal;! font-weight:! ! 400;! src:! url(http://fonts.gstatic.com/DXO(...)uXMaG2iE.eot);! }
65. A éviter…
66. Utiliser la méthode « La Rache » … http://fr.slideshare.net/nobug/a1-rache
67. Se fier à 100% à un service tiers sans gérer de « log d’erreur » selon vos visiteurs
69. Des questions ?
70. RESSTAFARI (désolé) MERCI À TOUS !