12. LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES)

Transcription

1 LES MISES EN PAGE FLUIDES (LIQUIDES ET ELASTIQUES) Pour rappel, il existe trois grands principes de mise en page 1 : Fixe le design possède une largeur fixe exprimée le plus souvent en pixels. Les dimensions ne changent pas quelle que soit la taille de la fenêtre du navigateur. Élastique le design semble fixe, mais peut supporter une augmentation plus ou moins importante de la taille du texte (ou du zoom) sans que le design global en pâtisse. Liquide la largeur du design est exprimée en pourcentage et s adapte à la taille de la fenêtre du navigateur. C est donc le site qui s adapte à l internaute et non l inverse Les 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. On parle d'interface fluide lorsque le contenu et la disposition sont élastiques. Cette conception modulaire avec des blocs en unités relatives permet de jouer sur la composition de la page en fonction de la largeur de l'écran. Les éléments fluides occupent le même pourcentage d'espace sur les différents écrans. Par exemple un élément prendra 50% de la largeur, quel que soit le terminal. Calculer au mieux les % des mises en page liquides Imaginons une largeur de l ensemble du site fixée à 980px, cette valeur correspond à 100% du site. Le header correspond à la largeur totale (980px) avec une gouttière de 10px à gauche et une autre de 10px à droite, le site a donc une largeur réelle de 960 px. Le calcul de la taille du header se fera comme suit : = soit 97,959 % Il est préférable de ne pas arrondir pour éviter les décalages non désirés. 1 A ne pas confondre avec «responsive» qui, en plus d être fluide, va se réorganiser en fonction du média qui le lit

2 120 Les éléments structurels de la page seront calculés comme suit : content : = % sidebar : = % footer : = % Dimensions des gouttières = = 1.02% Déterminer les marges et les espacements en % h1 { margin-left: 40px; /* = 4.167%;*/ Définir le remplissage et les marges internes sous forme de pourcentage leur permettent d augmenter proportionnellement à la taille de la fenêtre, en empêchant les colonnes de s élargir trop rapidement. Ces paramètres permettent une mise en page liquide s adaptant à la dimension de tous les écrans. Les proportions du titre resteront toujours intactes, même si celui-ci est redistribué pour s'adapter à la taille de la fenêtre du navigateur. Outils pour calculer les dimensions en pourcentages (Extension pour Fireworks) Fluid Width Calculator ( Calcul en ligne : Gérer les fenêtres de faible résolution et de très haute résolution Pour éviter une mise en page étriquée avec les fenêtres de petite ou de très grande taille, ajoutons un réglage minwidth et max-width : #wrapper { width: %; margin: 0 auto; text-align: left; max-width: 1200px; min-width: 700px; Les mises en page élastiques Ici, toutes les dimensions sont proportionnelles à la taille des caractères. Les dimensions données en em permettent un redimensionnement de la page en fonction de la taille des caractères au lieu de la largeur du navigateur, lorsque la taille de police augmente, toute la mise en page s ajuste en fonction. Pour une mise en page élastique efficace, il faut donc créer une page web qui s'adapte selon le redimensionnement du texte, ses dimensions changent lorsqu'un utilisateur décide de changer la taille du texte.

3 121 Mettre en place une mise en page élastique 1 Exemple : Imaginons une structure de site basée sur une grille de 7 colonnes de 124 pixels chacune, séparées par des gouttières de 20px. La largeur total du site est donc égale à (7*124)+(6*20)=988px Déterminer la largeur maximale du conteneur L inconvénient de cette technique de mise en page est que les dimensions peuvent devenir beaucoup plus larges que la fenêtre du navigateur et donc générer des barres de défilement horizontales. Pour éviter cela, on ajoute une propriété max-width fixée à 100 % de la div conteneur. Pour calculer la dimension maximale du conteneur : Nous prenons la valeur ciblée pour la taille de l élément (en pixels) et on le divise par la taille de police par défaut de son conteneur. Nous obtenons la taille souhaitée, exprimée en em px / 16px = 61.75em (target context = result) Déclarer les largeurs internes sous forme de pourcentages et définir la largeur du conteneur en em permet aux largeurs internes de se redimensionner en fonction de la taille de police tout en gardant possible la modification de la taille globale de la mise en page (sans avoir à changer la largeur de chaque élément individuel). L'autre solution consiste à utiliser une mise en page fluide dans laquelle la largeur du contenu n'est pas précisée du tout, ce qui fait que le texte prendra toute la largeur de l'écran, c'est un avantage pour les petits affichages comme ceux des appareils mobiles. Ainsi, si un utilisateur choisit d'agrandir son texte, les marges autour de celui-ci s'élargiront en conséquence. De ce fait, les proportions générales telles que définies par le designer seront toujours les mêmes et le texte restera agréable à lire. Cette méthode nous apporte un autre avantage : plus de retours à la ligne intempestive. Si une colonne possède une largeur définie en pixels et que le texte contenu à l'intérieur est agrandi, cela peut casser toute votre mise en page. Ce problème n'apparaîtra pas si la largeur de la colonne est définie proportionnellement au texte (donc avec des ems). Déterminer les dimensions des éléments de contenu Imaginons que nous souhaitions que la taille de police de base corresponde approximativement à 10 pixels, dans la plupart des navigateurs, la taille de police par défaut étant de 16 pixels, 10 pixels correspondent donc à 62,5 % de 16 pixels. Il suffit alors de définir une taille de police pour l élément body fixée à 62,5 % ou em body { font-size: 62.5%; 1 Source : 2

4 122 Eviter les décalages causés par les arrondis de certains navigateurs Des arrondis vers le haut effectués par Internet Explorer peuvent casser une mise en page, une mesure de protection comme celle-ci peut être mise en place par sécurité : Dimension de base de nos colonnes : = em Cette fois, calculée sur une base de 123px : = em Cette largeur de em ou 12,449% sera imputée à une feuille de style spécifique ou une classe conditionnelle spécifique à IE afin d éviter des problèmes de mise en page. Intégrer les éléments de contenu fixes Il sera toujours nécessaire d utiliser des pixels pour déterminer les largeurs de bordures ou les images. Conclusions Les points positifs Le texte est agréable à lire car il n'est jamais étendu sur une trop grande largeur Le site supporte bien l'agrandissement de police et garde sa cohérence jusqu'à un certain point Les points négatifs Le montage du design (les effets graphiques et décoratifs) peut s'avérer plus complexe et plus lourd Autre exemple de structure : wrapper { max-width: 61.75em ; margin: 0 auto; text-align: left;.content.primary { width: 72.82%; float: right;.content.secondary { width: 25%; float: left;.content.primary.primary { width: 59.7%; float: left;.content.primary.secondary { width: 34.33%; padding-right: 2em; float: right; Avec ce code, on obtient une mise en page identique à la mise en page à largeur fixe dans le cas d une taille de police standard mais qui se réajuste lorsque la taille du texte est augmentée.

5 123 Lecture Web : Sites proposant des gabarits utilisant des feuilles de styles pour différents types de mises en page :