Responsive : étude de cas concret

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

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