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
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
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
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
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, …)
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
objectif : "ça doit rentrer" › supprimer les valeurs problématiques de « width » (et « min-width ») › idem pour « margin » et « padding » › idem pour « float »
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 »)
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)
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
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
› 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 « »