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 full-size 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 full-size slide

  3. Gestion du web mobile côté serveur

    View full-size slide

  4. un peu impopulaire…

    View full-size slide

  5. un peu impopulaire…
    …pour de bonnes raisons

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  14. Cat astrophe…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. On demande tout au navigateur.
    !

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. RESS!
    !
    REsponsive + Server-Side components

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. Exemple avec un menu

    View full-size slide

  38. 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 full-size slide

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

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

    Titre

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

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

    View full-size slide



  40. Mon Site


    Menu 1
    Menu 2
    Menu 3





    View full-size slide


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

    View full-size slide

  42. // 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 full-size slide

  43. logo
    menus
    contenu
    footer
    logo
    contenu
    menus
    recherche
    footer
    aside
    recherche

    View full-size slide

  44. Images Responsive côté serveur

    View full-size slide

  45. 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 full-size slide

  46. // 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 full-size slide


  47. 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 full-size slide

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

    View full-size slide

  49. // 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 full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

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

    View full-size slide

  53. desktop iPhone
    Android
    WinPhone 8
    WinPhone 7
    WebOS
    Symbian

    View full-size slide

  54. desktop iPhone
    Android
    WinPhone 8 WinPhone 7
    Symbian

    View full-size slide

  55. desktop iPhone
    Android
    WinPhone 8 WinPhone 7
    Symbian

    View full-size slide

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

    View full-size slide

  57. Feature phone
    iPhone
    Android

    View full-size slide

  58. !
    Desktop
    iPhone
    Android
    WinPhone 8

    View full-size slide

  59. 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 full-size slide

  60. A éviter…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. Des questions ?

    View full-size slide

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

    View full-size slide