Responsive côté serveur

Responsive côté serveur

Gérer votre responsive, côté serveur

F739f02d0af4ab1f8cb745b5677de157?s=128

Remi Grumeau

June 18, 2015
Tweet

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 !

  22. None
  23. None
  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
  36. None
  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
  68. None
  69. Des questions ?

  70. RESSTAFARI (désolé) MERCI À TOUS !