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. 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 !