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

    View Slide

  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

    View Slide

  3. Gestion du web mobile côté serveur

    View Slide

  4. un peu impopulaire…

    View Slide

  5. un peu impopulaire…
    …pour de bonnes raisons

    View Slide

  6. http://domain.com
    : )
    Historiquement impopulaire pour de bonnes raisons
    http://domain.com
    serveur

    View Slide

  7. http://domain.com http://domain.com
    : (
    : )
    Historiquement impopulaire pour de bonnes raisons
    http://domain.com
    serveur

    View Slide

  8. http://domain.com http://iphone.domain.com
    : )
    : )
    Historiquement impopulaire pour de bonnes raisons
    http://domain.com
    serveur

    View Slide

  9. http://domain.com http://iphone.domain.com
    : ) : (
    : )
    Historiquement impopulaire pour de bonnes raisons
    http://domain.com
    serveur

    View Slide

  10. http://domain.com http://mobile.domain.com
    : ) : )
    : )
    Historiquement impopulaire pour de bonnes raisons
    http://domain.com
    serveur

    View Slide

  11. : )
    : )
    : (
    http://domain.com
    Historiquement impopulaire pour de bonnes raisons
    http://mobile.domain.com
    http://domain.com
    : )
    serveur

    View Slide

  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

    View Slide

  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)

    View Slide

  14. Cat astrophe…

    View Slide

  15. D’où l’élan massif de gérer ça
    100% côté client, tout en CSS et Javascript

    View Slide

  16. Mobile-first + amélioration progressive + grille fluide

    View Slide

  17. fin

    View Slide

  18. On demande tout au navigateur.
    !

    View Slide

  19. On demande tout au navigateur.
    Beaucoup de questions…

    View Slide

  20. On demande tout au navigateur.
    Beaucoup de questions…
    … dont on connait déjà 90% des réponses

    View Slide

  21. un iPhone !

    View Slide

  22. View Slide

  23. View Slide

  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é)

    View Slide

  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

    View Slide

  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

    View Slide

  27. et Javascript n’est parfois pas une option
    !
    contenus référençables
    newsletters
    flux d’applications
    version wap
    images

    View Slide

  28. Bref, on télécharge et execute plus de fichiers qu’avant
    mais on continue à se louper quand même…

    View Slide

  29. RESS!
    !
    REsponsive + Server-Side components

    View Slide

  30. Gestion côté serveur 2, le retour

    View Slide

  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…

    View Slide

  32. http://domain.com
    : )
    : )
    Gabarit selon le type de périphérique!
    !
    : )
    : )
    DESKTOP TABLETTE SMARTPHONE MOBILE
    A
    B
    B
    C
    D
    serveur

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  36. View Slide

  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

    View Slide

  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

    View Slide

  39. Et si on ne le sait pas ?
    (nouveau Galaxy S72, tablette chinoise XY, …)
    !
    !
    MOBILE-FIRST !!

    View Slide

  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

    View Slide

  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, …)

    View Slide

  42. Exemple avec un menu

    View Slide

  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

    View Slide

  44. $RESS->init();
    echo $RESS->getComponent(‘header’);
    ?>

    = $RESS->getComponent(‘mainheader’) ?>

    Titre

    = $RESS->getComponent(‘mainmenu’, [’A’,’bot’]) ?>

    = $RESS->getComponent(‘mainmenu’, [’B’,’C’]) ?>

    View Slide



  45. Mon Site


    Menu 1
    Menu 2
    Menu 3





    View Slide


  46. Mon Site
    $RESS->getComponent(‘mainmenu’, [’D’]);
    ?>

    View Slide

  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
    }
    }
    +
    +
    + +

    View Slide

  48. logo
    menus
    contenu
    footer
    logo
    contenu
    menus
    recherche
    footer
    aside
    recherche

    View Slide

  49. Images Responsive côté serveur

    View Slide

  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

    View Slide

  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

    View Slide


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

    View Slide

  53. https://app.resrc.it/s=w780,pd1/o=80/http://domain.com/kiwi.jpg
    largeur densité qualité image source
    ou sinon…

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  57. Et … y’a des gens qui utilisent ça ?!

    View Slide

  58. desktop iPhone
    Android
    WinPhone 8
    WinPhone 7
    WebOS
    Symbian

    View Slide

  59. desktop iPhone
    Android
    WinPhone 8 WinPhone 7
    Symbian

    View Slide

  60. desktop iPhone
    Android
    WinPhone 8 WinPhone 7
    Symbian

    View Slide

  61. desktop iPhone
    Android
    WinPhone 8
    WinPhone 7
    Symbian
    3GP

    View Slide

  62. Feature phone
    iPhone
    Android

    View Slide

  63. !
    Desktop
    iPhone
    Android
    WinPhone 8

    View Slide

  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);!
    }

    View Slide

  65. A éviter…

    View Slide

  66. Utiliser la méthode « La Rache » …
    http://fr.slideshare.net/nobug/a1-rache

    View Slide

  67. Se fier à 100% à un service tiers
    sans gérer de « log d’erreur » selon vos visiteurs

    View Slide

  68. View Slide

  69. Des questions ?

    View Slide

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

    View Slide