$30 off During Our Annual Pro Sale. View Details »

Responsive : étude de cas concret

Raphael Goetter
September 25, 2014

Responsive : étude de cas concret

Adapter en Responsive le site existant de l'Université de Lille 1 : trop facile ou pas ?

Raphael Goetter

September 25, 2014
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. RWD : ÉTUDE DE CAS
    le site de l'Université Lille 1

    View Slide

  2. Crédit photo © Mathieu Drouet
    raphaël goetter
    alsacreations.com
    goetter.fr
    mydevice.io
    knacss.com
    @goetter

    View Slide

  3. www.univ-lille1.fr
    (ne marche pas sans les www)

    View Slide

  4. Voilà, voilà, voilà…
    Tout riquiqui là
    le site de l’Université Lille 1
    … sur mobile

    View Slide

  5. Woaouw ! génial ! j'adore !
    www.kiwi.gg/min2rien
    le but du jeu...

    View Slide

  6. DÉCORTIQUER L'EXISTANT
    APPLIQUER UNE MÉTHODOLOGIE
    COMPRENDRE LES TECHNIQUES

    View Slide

  7. DÉCORTIQUER
    L'EXISTANT

    View Slide

  8. ben c'est pas gagné !

    View Slide

  9. L’Enfer, c’est l’existant
    – Jean-Marcel Sartre

    View Slide

  10. ça commence plutôt bien :)
    HTML5 ❤

    View Slide

  11. mais dans le détail…:(
    3223 lignes de HTML à se farcir !
    62ko !
    (25ko si minifié)

    View Slide

  12. idem pour CSS…:(
    2840 lignes de CSS
    5 fichiers CSS
    57ko
    (39ko si minifié)

    View Slide

  13. outils

    View Slide

  14. stylestats

    View Slide

  15. stylestats
    http://www.stylestats.org/
    › 12 tailles de police différentes
    › 50x « font-size »
    › 26 couleurs de texte différentes
    › 118x « color »
    › etc.

    View Slide

  16. cssstats

    View Slide

  17. cssstats
    http://cssstats.com/

    View Slide

  18. en résumé
    › 561 sélecteurs CSS
    › 15x position : absolute
    › 71x float
    › 171x width
    › 27x !important

    View Slide

  19. en résumé
    Écrivez du code maintenable !
    – vos collègues, vos futurs collègues,
    votre client, votre patron, vos amis,
    l'univers, les générations à venir

    View Slide

  20. si jamais...
    http://www.css-maintenables.fr/

    View Slide

  21. Soyez Responsive
    qu ils disaient !

    WikiMedia : Man in a box - Keith Allison

    View Slide

  22. APPLIQUER UNE
    MÉTHODOLOGIE

    View Slide

  23. méthodologie
    adapter le niveau de zoom (viewport)






    avoir une base de travail (reset)
    faire rentrer les gabarits (largeurs, marges, ...)
    faire rentrer les contenus (word-wrap, max-width, ...)
    adapter la navigation
    améliorer la vitesse d'affichage

    View Slide

  24. objectif : "viewport"

    View Slide

  25. objectif : "viewport"

    View Slide

  26. objectif : "viewport"

    Avant (zoom: 0.3) Après (zoom: 1)

    View Slide

  27. objectif : "base de travail"

    View Slide

  28. objectif : "base de travail"
    › appliquer un « reset » spécial mobile

    View Slide

  29. objectif : "base de travail"
    › appliquer un « reset » spécial mobile
    › définir les largeurs en « box-sizing : border-box »

    View Slide

  30. objectif : "base de travail"
    › appliquer un « reset » spécial mobile
    › définir les largeurs en « box-sizing : border-box »
    › appliquer des styles selon l’orientation

    View Slide

  31. objectif : "base de travail"
    › appliquer un « reset » spécial mobile
    › définir les largeurs en « box-sizing : border-box »
    › appliquer des styles selon l’orientation
    › appliquer des styles selon la densité de pixels

    View Slide

  32. objectif : "base de travail"
    › appliquer un « reset » spécial mobile
    › définir les largeurs en « box-sizing : border-box »
    › appliquer des styles selon l’orientation
    › appliquer des styles selon la densité de pixels
    › règles spécifiques (text-size-adjust, tap-highligh-
    color, …)

    View Slide

  33. objectif : "base de travail"
    › appliquer un « reset » spécial mobile
    › définir les largeurs en « box-sizing : border-box »
    › appliquer des styles selon l’orientation
    › appliquer des styles selon la densité de pixels
    › règles spécifiques (text-size-adjust, tap-highligh-
    color, …)
    http://knacss.com

    View Slide

  34. objectif : "ça doit rentrer"

    View Slide

  35. objectif : "ça doit rentrer"
    › supprimer les valeurs problématiques de « width »
    (et « min-width »)

    View Slide

  36. objectif : "ça doit rentrer"
    › supprimer les valeurs problématiques de « width »
    (et « min-width »)
    › idem pour « margin » et « padding »

    View Slide

  37. objectif : "ça doit rentrer"
    › supprimer les valeurs problématiques de « width »
    (et « min-width »)
    › idem pour « margin » et « padding »
    › idem pour « float »

    View Slide

  38. objectif : "ça doit rentrer"
    › supprimer les valeurs problématiques de « width »
    (et « min-width »)
    › idem pour « margin » et « padding »
    › idem pour « float »
    › idem pour « position: absolute » (et « fixed »)

    View Slide

  39. objectif : "ça doit rentrer"
    › supprimer les valeurs problématiques de « width »
    (et « min-width »)
    › idem pour « margin » et « padding »
    › idem pour « float »
    › idem pour « position: absolute » (et « fixed »)
    › éradiquer « !important » (quand c’est possible)

    View Slide

  40. › 561 sélecteurs CSS
    › 15x position : absolute
    › 71x float
    › 171x width
    › 27x !important
    ( rappel... )

    View Slide

  41. objectif : "contenus adaptés"

    View Slide

  42. objectif : "contenus adaptés"
    › gérer les contenus trop longs
    ( « word-wrap », « hyphens »)

    View Slide

  43. objectif : "contenus adaptés"
    › gérer les contenus trop longs
    ( « word-wrap », « hyphens »)

    › rendre les images fluides
    ( « max-width : 100 %; height : auto »)

    View Slide

  44. objectif : "contenus adaptés"
    › gérer les contenus trop longs
    ( « word-wrap », « hyphens »)

    › rendre les images fluides
    ( « max-width : 100 %; height : auto »)

    › gérer au cas par cas les tableaux, iframes, vidéos,...

    View Slide

  45. View Slide

  46. objectif : "navigation adaptée"

    View Slide

  47. objectif : "navigation adaptée"
    › taille de liens adaptés « touch »

    View Slide

  48. objectif : "navigation adaptée"
    › taille de liens adaptés « touch »
    › espacement entre les liens

    View Slide

  49. objectif : "navigation adaptée"
    › taille de liens adaptés « touch »
    › espacement entre les liens
    › ne pas forcément copier la navigation « desktop »

    View Slide

  50. objectif : "navigation adaptée"
    Interactions and usability with Windows Phone

    View Slide

  51. objectif : "navigation adaptée"
    Avant Après

    View Slide

  52. objectif : "ça va vite !"

    View Slide

  53. objectif : "ça va vite !"
    › une seule feuille de styles

    View Slide

  54. objectif : "ça va vite !"
    › une seule feuille de styles
    › ne charger que le nécessaire

    View Slide

  55. objectif : "ça va vite !"
    › une seule feuille de styles
    › ne charger que le nécessaire
    › réduire le poids des ressources

    View Slide

  56. objectif : "ça va vite !"
    › une seule feuille de styles
    › ne charger que le nécessaire
    › réduire le poids des ressources
    › réduire le nombre des requêtes

    View Slide

  57. View Slide

  58. méthodologie
    adapter le niveau de zoom (viewport)






    avoir une base de travail (reset)
    faire rentrer les gabarits (largeurs, marges, ...)
    faire rentrer les contenus (word-wrap, max-width, ...)
    adapter la navigation
    améliorer la vitesse d'affichage

    View Slide

  59. résultat
    Avant Après

    View Slide

  60. DANS LE DÉTAIL...

    View Slide

  61. LES TECHNIQUES CACHÉES

    View Slide

  62. box-sizing

    View Slide

  63. box-sizing
    div {
    width: 500px;
    }
    500px

    View Slide

  64. box-sizing
    div {
    width: 500px;
    padding: 10px;
    }

    View Slide

  65. box-sizing
    div {
    width: 500px;
    padding: 10px;
    }
    520px

    View Slide

  66. box-sizing
    div {
    width: 50%;
    padding: 1em;
    border: 1px;
    }

    View Slide

  67. box-sizing
    div {
    width: 50%;
    padding: 1em;
    border: 1px;
    box-sizing: border-box ;
    }
    50% 50%

    View Slide

  68. box-sizing
    8

    View Slide

  69. :nth-child()

    View Slide

  70. :nth-child()







    div:nth-child(2) { … }

    View Slide

  71. :nth-child()







    div:nth-child(n+4) { … }

    View Slide

  72. :nth-child()
    div:nth-child(n+4) { … }

    View Slide

  73. :nth-child()
    div:nth-child(n+4) {
    display: none ;
    }

    View Slide

  74. :nth-child()
    9

    View Slide

  75. multicolonnes

    View Slide

  76. multicolonnes
    nav {
    /* rien */
    }

    View Slide

  77. multicolonnes
    nav {
    columns: 2;
    column-gap: 4px;
    }
    ( sur tablettes )

    View Slide

  78. multicolonnes
    nav {
    columns: 1;
    }
    ( sur smatrphones )

    View Slide

  79. multicolonnes
    10

    View Slide

  80. flexbox

    View Slide

  81. flexbox
    pas flexbox

    View Slide

  82. flexbox
    flexbox !

    View Slide

  83. flexbox
    flexbox !
    parent {
    display : flex;
    }
    select,
    input {
    flex : 1;
    }

    View Slide

  84. flexbox
    10

    View Slide

  85. CONCLUSION

    View Slide

  86. temps passé
    › production effective RWD = 8 heures
    › analyse de l'existant = 8 heures
    › réflexion en amont, stratégie = 4 heures
    › correction bugs, anomalies = 1 heure
    total = 21 heures

    View Slide

  87. › seule la page d'accueil a été traitée
    › ergonomie : uniquement le minimum vital
    › aucune adaptation à l'orientation (portrait / paysage)
    › aucune adaptation aux performances d'affichage
    › aucune prise en compte « HD » / « Retina »
    › etc.
    non traité
    conclusion = à l'arrache
    « »

    View Slide

  88. ça se décide en amont... et ça prend du temps
    le Responsive c'est pas du bonus !
    – quelqu'un qui a raison

    View Slide

  89. kiwi.gg/min2rien

    View Slide

  90. MERCI, BISOUS
    raphaël goetter
    raphaël goetter
    www.alsacreations.fr
    www.alsacreations.fr
    @goetter
    @goetter

    View Slide