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. 11.

    mais dans le détail…:( 3223 lignes de HTML à se

    farcir ! 62ko ! (25ko si minifié)
  2. 13.
  3. 15.

    stylestats http://www.stylestats.org/ › 12 tailles de police différentes › 50x

    « font-size » › 26 couleurs de texte différentes › 118x « color » › etc.
  4. 16.
  5. 18.

    en résumé › 561 sélecteurs CSS › 15x position :

    absolute › 71x float › 171x width › 27x !important
  6. 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
  7. 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
  8. 29.

    objectif : "base de travail" › appliquer un « reset

    » spécial mobile › définir les largeurs en « box-sizing : border-box »
  9. 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
  10. 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
  11. 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, …)
  12. 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
  13. 36.

    objectif : "ça doit rentrer" › supprimer les valeurs problématiques

    de « width » (et « min-width ») › idem pour « margin » et « padding »
  14. 37.

    objectif : "ça doit rentrer" › supprimer les valeurs problématiques

    de « width » (et « min-width ») › idem pour « margin » et « padding » › idem pour « float »
  15. 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 »)
  16. 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)
  17. 40.

    › 561 sélecteurs CSS › 15x position : absolute ›

    71x float › 171x width › 27x !important ( rappel... )
  18. 42.
  19. 43.

    objectif : "contenus adaptés" › gérer les contenus trop longs

    ( « word-wrap », « hyphens ») → › rendre les images fluides ( « max-width : 100 %; height : auto ») →
  20. 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,...
  21. 45.
  22. 48.
  23. 49.

    objectif : "navigation adaptée" › taille de liens adaptés «

    touch » › espacement entre les liens › ne pas forcément copier la navigation « desktop »
  24. 54.

    objectif : "ça va vite !" › une seule feuille

    de styles › ne charger que le nécessaire
  25. 55.

    objectif : "ça va vite !" › une seule feuille

    de styles › ne charger que le nécessaire › réduire le poids des ressources
  26. 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
  27. 57.
  28. 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
  29. 80.
  30. 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
  31. 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 « »
  32. 88.

    ça se décide en amont... et ça prend du temps

    le Responsive c'est pas du bonus ! – quelqu'un qui a raison