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
2. Crédit photo © Mathieu Drouet raphaël goetter alsacreations.com goetter.fr mydevice.io knacss.com @goetter
3. www.univ-lille1.fr (ne marche pas sans les www)
4. Voilà, voilà, voilà… Tout riquiqui là le site de l’Université Lille 1 … sur mobile
5. Woaouw ! génial ! j'adore ! www.kiwi.gg/min2rien le but du jeu...
6. DÉCORTIQUER L'EXISTANT APPLIQUER UNE MÉTHODOLOGIE COMPRENDRE LES TECHNIQUES
7. DÉCORTIQUER L'EXISTANT
8. ben c'est pas gagné !
9. L’Enfer, c’est l’existant – Jean-Marcel Sartre
10. ça commence plutôt bien :) HTML5 ❤
11. mais dans le détail…:( 3223 lignes de HTML à se farcir ! 62ko ! (25ko si minifié)
12. idem pour CSS…:( 2840 lignes de CSS 5 fichiers CSS 57ko (39ko si minifié)
13. outils
14. stylestats
15. stylestats http://www.stylestats.org/ › 12 tailles de police différentes › 50x « font-size » › 26 couleurs de texte différentes › 118x « color » › etc.
16. cssstats
17. cssstats http://cssstats.com/
18. en résumé › 561 sélecteurs CSS › 15x position : absolute › 71x float › 171x width › 27x !important
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
20. si jamais... http://www.css-maintenables.fr/
21. Soyez Responsive qu ils disaient ! ’ WikiMedia : Man in a box - Keith Allison
22. APPLIQUER UNE MÉTHODOLOGIE
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
24. objectif : "viewport" ⓿
25. objectif : "viewport" <meta name="viewport" content="width=device-width ; initial-scale=1.0">
26. objectif : "viewport" <meta name="viewport" content="width=device-width ; initial-scale=1.0"> Avant (zoom: 0.3) Après (zoom: 1)
27. objectif : "base de travail" ❶
28. objectif : "base de travail" › appliquer un « reset » spécial mobile
29. objectif : "base de travail" › appliquer un « reset » spécial mobile › définir les largeurs en « box-sizing : border-box »
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
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
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, …)
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
34. objectif : "ça doit rentrer" ❷
35. objectif : "ça doit rentrer" › supprimer les valeurs problématiques de « width » (et « min-width »)
36. objectif : "ça doit rentrer" › supprimer les valeurs problématiques de « width » (et « min-width ») › idem pour « margin » et « padding »
37. objectif : "ça doit rentrer" › supprimer les valeurs problématiques de « width » (et « min-width ») › idem pour « margin » et « padding » › idem pour « float »
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 »)
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)
40. › 561 sélecteurs CSS › 15x position : absolute › 71x float › 171x width › 27x !important ( rappel... )
41. objectif : "contenus adaptés" ❸
42. objectif : "contenus adaptés" › gérer les contenus trop longs ( « word-wrap », « hyphens ») →
43. objectif : "contenus adaptés" › gérer les contenus trop longs ( « word-wrap », « hyphens ») → › rendre les images fluides ( « max-width : 100 %; height : auto ») →
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,...
46. objectif : "navigation adaptée" ❹
47. objectif : "navigation adaptée" › taille de liens adaptés « touch »
48. objectif : "navigation adaptée" › taille de liens adaptés « touch » › espacement entre les liens
49. objectif : "navigation adaptée" › taille de liens adaptés « touch » › espacement entre les liens › ne pas forcément copier la navigation « desktop »
50. objectif : "navigation adaptée" Interactions and usability with Windows Phone
51. objectif : "navigation adaptée" Avant Après
52. objectif : "ça va vite !" ❺
53. objectif : "ça va vite !" › une seule feuille de styles
54. objectif : "ça va vite !" › une seule feuille de styles › ne charger que le nécessaire
55. objectif : "ça va vite !" › une seule feuille de styles › ne charger que le nécessaire › réduire le poids des ressources
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
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
59. résultat Avant Après
60. DANS LE DÉTAIL...
61. LES TECHNIQUES CACHÉES
62. box-sizing
63. box-sizing div { width: 500px; } 500px
64. box-sizing div { width: 500px; padding: 10px; }
65. box-sizing div { width: 500px; padding: 10px; } 520px
66. box-sizing div { width: 50%; padding: 1em; border: 1px; }
67. box-sizing div { width: 50%; padding: 1em; border: 1px; box-sizing: border-box ; } 50% 50%
68. box-sizing 8
69. :nth-child()
70. :nth-child() <section> <div> <div> <div> <div> <div> <div> div:nth-child(2) { … }
71. :nth-child() <section> <div> <div> <div> <div> <div> <div> div:nth-child(n+4) { … }
72. :nth-child() div:nth-child(n+4) { … }
73. :nth-child() div:nth-child(n+4) { display: none ; }
74. :nth-child() 9
75. multicolonnes
76. multicolonnes nav { /* rien */ }
77. multicolonnes nav { columns: 2; column-gap: 4px; } ( sur tablettes )
78. multicolonnes nav { columns: 1; } ( sur smatrphones )
79. multicolonnes 10
80. flexbox
81. flexbox pas flexbox
82. flexbox flexbox !
83. flexbox flexbox ! parent { display : flex; } select, input { flex : 1; }
84. flexbox 10
85. CONCLUSION
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
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 « »
88. ça se décide en amont... et ça prend du temps le Responsive c'est pas du bonus ! – quelqu'un qui a raison
89. kiwi.gg/min2rien
90. MERCI, BISOUS raphaël goetter raphaël goetter www.alsacreations.fr www.alsacreations.fr @goetter @goetter