173
Mise en page
vient.se.placer..La.méthode.de.la.largeur.fixe.est.en.conséquence.la.plus.simple.à.utiliser.et.
la.plus.couramment.employée.
Les.mises.en.page.à.largeur.fixe.ont.cependant.leurs.inconvénients..Comme.elles.sont.fixes,.
elles.conservent.la.même.taille,.quelle.que.soit.la.taille.de.la.fenêtre.du.navigateur..Elles.utilisent.donc.mal.l’espace.disponible..Sur.les.écrans.à.haute.résolution,.les.mises.en.page.créées.
pour.les.écrans.à.1 024 × 760 pixels.peuvent.sembler.menues,.comme.perdues.au.milieu.
de.l’écran..À l’inverse,.une.mise.en.page.créée.pour.une.résolution.de.1 024 × 760 pixels.
contraindra.l’utilisateur.à.faire.défiler.l’écran.horizontalement.avec.les.résolutions.d’écran.
plus.petites..Alors.que.la.variété.des.tailles.d’écran.ne.cesse.d’augmenter,.ces.types.de.mises.
en.page.ont.le.défaut.de.mal.s’adapter.à.la.nature.flexible.du.Web..Ils.constituent.à.cet.égard.
un.compromis.quelque.peu.maladroit.
tionnent.bien.avec.la.taille.de.texte.par.défaut.des.navigateurs,.il.suffit.en.revanche.d’augmenter.cette.taille.de.quelques.points.pour.que.les.colonnes.latérales.se.mettent.à.manquer.
d’espace.et.que.les.longueurs.de.ligne.soient.insuffisantes.pour.une.lecture.confortable..
Pour.contourner.ces.problèmes,.vous.pouvez.choisir.une.mise.en.page.liquide.ou.élastique.
plutôt.qu’une.structure.à.largeur.fixe.
Mises en page liquides
Dans.les.mises.en.page.liquides,.les.dimensions.sont.définies.à.l’aide.de.pourcentages.et.non.
de.pixels..Ces.mises.en.page.peuvent.ainsi.se.redimensionner.en.fonction.de.la.fenêtre.du.
navigateur..Plus.cette.dernière.s’agrandit,.plus.les.colonnes.s’élargissent..Inversement,.plus.
la.fenêtre.se.rétrécit,.plus.les.colonnes.se.réduisent.en.largeur..Les.mises.en.page.liquides.
exploitent. efficacement. l’espace.et,. si. le. travail. est.bien.adapté,.les. mieux. conçues.ne.se.
remarquent.même.pas.
Cependant,.elles.ont.aussi.leurs.problèmes..Lorsque.la.largeur.de.la.fenêtre.du.navigateur.est.
étroite,.les.longueurs.de.lignes.peuvent.être.très.faibles.et.le.texte.difficile.à.lire,.notamment.
avec.les.mises.en.page.multicolonnes..Il.peut.alors.être.intéressant.de.spécifier.une.largeur.
minimale.(min-width).en.pixels.ou.en.cadratins.pour.empêcher.la.mise.en.page.de.devenir.
trop.étroite..Mais.si.la.valeur.de.min-width.est.trop.grande,.la.mise.en.page.hérite.alors.des.
mêmes.défauts.que.celles.à.largeur.fixe.
À. l’inverse,. si. la. mise. en. page. s’étend. sur. la. largeur. entière. de. la. fenêtre. du. navigateur,.
les.lignes.peuvent.devenir.trop.longues.et.difficiles.à.lire..Il.existe.plusieurs.solutions.pour.
éviter.ce.problème..Tout.d’abord,.au.lieu.de.couvrir.la.totalité.de.la.largeur,.vous.pouvez.
amener.le.conteneur.à.n’en.couvrir.qu’un.certain.pourcentage.(par.exemple,.85 %)..Vous.
pouvez.envisager.de.définir.le.remplissage.et.les.marges.internes.sous.forme.de.pourcentage.
également..Le.remplissage.et.les.marges.augmenteront.ainsi.proportionnellement.à.la.taille.
de.la.fenêtre,.en.empêchant.les.colonnes.de.s’élargir.trop.rapidement..Enfin,.vous.pouvez.
définir. une. largeur. maximale. pour. le. conteneur. afin. d’éviter. que. le. contenu. ne. devienne.
excessivement.large.sur.les.moniteurs.de.grande.taille..
Mise en page
vient.se.placer..La.méthode.de.la.largeur.fixe.est.en.conséquence.la.plus.simple.à.utiliser.et.
la.plus.couramment.employée.
Les.mises.en.page.à.largeur.fixe.ont.cependant.leurs.inconvénients..Comme.elles.sont.fixes,.
elles.conservent.la.même.taille,.quelle.que.soit.la.taille.de.la.fenêtre.du.navigateur..Elles.utilisent.donc.mal.l’espace.disponible..Sur.les.écrans.à.haute.résolution,.les.mises.en.page.créées.
pour.les.écrans.à.1 024 × 760 pixels.peuvent.sembler.menues,.comme.perdues.au.milieu.
de.l’écran..À l’inverse,.une.mise.en.page.créée.pour.une.résolution.de.1 024 × 760 pixels.
contraindra.l’utilisateur.à.faire.défiler.l’écran.horizontalement.avec.les.résolutions.d’écran.
plus.petites..Alors.que.la.variété.des.tailles.d’écran.ne.cesse.d’augmenter,.ces.types.de.mises.
en.page.ont.le.défaut.de.mal.s’adapter.à.la.nature.flexible.du.Web..Ils.constituent.à.cet.égard.
un.compromis.quelque.peu.maladroit.
tionnent.bien.avec.la.taille.de.texte.par.défaut.des.navigateurs,.il.suffit.en.revanche.d’augmenter.cette.taille.de.quelques.points.pour.que.les.colonnes.latérales.se.mettent.à.manquer.
d’espace.et.que.les.longueurs.de.ligne.soient.insuffisantes.pour.une.lecture.confortable..
Pour.contourner.ces.problèmes,.vous.pouvez.choisir.une.mise.en.page.liquide.ou.élastique.
plutôt.qu’une.structure.à.largeur.fixe.
Mises en page liquides
Dans.les.mises.en.page.liquides,.les.dimensions.sont.définies.à.l’aide.de.pourcentages.et.non.
de.pixels..Ces.mises.en.page.peuvent.ainsi.se.redimensionner.en.fonction.de.la.fenêtre.du.
navigateur..Plus.cette.dernière.s’agrandit,.plus.les.colonnes.s’élargissent..Inversement,.plus.
la.fenêtre.se.rétrécit,.plus.les.colonnes.se.réduisent.en.largeur..Les.mises.en.page.liquides.
exploitent. efficacement. l’espace.et,. si. le. travail. est.bien.adapté,.les. mieux. conçues.ne.se.
remarquent.même.pas.
Cependant,.elles.ont.aussi.leurs.problèmes..Lorsque.la.largeur.de.la.fenêtre.du.navigateur.est.
étroite,.les.longueurs.de.lignes.peuvent.être.très.faibles.et.le.texte.difficile.à.lire,.notamment.
avec.les.mises.en.page.multicolonnes..Il.peut.alors.être.intéressant.de.spécifier.une.largeur.
minimale.(min-width).en.pixels.ou.en.cadratins.pour.empêcher.la.mise.en.page.de.devenir.
trop.étroite..Mais.si.la.valeur.de.min-width.est.trop.grande,.la.mise.en.page.hérite.alors.des.
mêmes.défauts.que.celles.à.largeur.fixe.
À. l’inverse,. si. la. mise. en. page. s’étend. sur. la. largeur. entière. de. la. fenêtre. du. navigateur,.
les.lignes.peuvent.devenir.trop.longues.et.difficiles.à.lire..Il.existe.plusieurs.solutions.pour.
éviter.ce.problème..Tout.d’abord,.au.lieu.de.couvrir.la.totalité.de.la.largeur,.vous.pouvez.
amener.le.conteneur.à.n’en.couvrir.qu’un.certain.pourcentage.(par.exemple,.85 %)..Vous.
pouvez.envisager.de.définir.le.remplissage.et.les.marges.internes.sous.forme.de.pourcentage.
également..Le.remplissage.et.les.marges.augmenteront.ainsi.proportionnellement.à.la.taille.
de.la.fenêtre,.en.empêchant.les.colonnes.de.s’élargir.trop.rapidement..Enfin,.vous.pouvez.
définir. une. largeur. maximale. pour. le. conteneur. afin. d’éviter. que. le. contenu. ne. devienne.
excessivement.large.sur.les.moniteurs.de.grande.taille..