Responsive : étude de cas concret

Adf4ff2212aea06456ca3c3bca95c0db?s=47 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 ?

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

September 25, 2014
Tweet

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,...
  45. None
  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
  57. None
  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