Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive côté serveur

Responsive côté serveur

Gérer votre responsive, côté serveur

Remi Grumeau

June 18, 2015
Tweet

Other Decks in Programming

Transcript

  1. 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
  2. : ) : ) : ( http://domain.com Historiquement impopulaire pour

    de bonnes raisons http://mobile.domain.com http://domain.com : ) serveur
  3. 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
  4. 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)
  5. 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é)
  6. 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
  7. 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
  8. et Javascript n’est parfois pas une option ! contenus référençables

    newsletters flux d’applications version wap images …
  9. 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…
  10. http://domain.com : ) : ) Gabarit selon le type de

    périphérique! ! : ) : ) DESKTOP TABLETTE SMARTPHONE MOBILE A B B C D serveur
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Et si on ne le sait pas ? (nouveau Galaxy

    S72, tablette chinoise XY, …) ! ! MOBILE-FIRST !!
  17. 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
  18. 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, …)
  19. 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
  20. <?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>
  21. <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>
  22. // 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 } } + + + +
  23. 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
  24. // breakpoint A & B : 0 -> 600 viewportWidth!

    ! // breakpoint C : 600 -> 1280 (viewportWidth / 100) * 70! ! // breakpoint D : 1280 et + 640 }* ppi = imageWidth A C D B
  25. <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
  26. // 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
  27. 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);! }
  28. Se fier à 100% à un service tiers sans gérer

    de « log d’erreur » selon vos visiteurs