Dispositions à largeur fixe par rapport aux dispositions liquides

click fraud protection

Mise en page Web suit l'une des deux approches différentes:

  • Dispositions à largeur fixe: Ce sont des mises en page où la largeur de la page entière est définie avec une valeur numérique spécifique.
  • Dispositions liquides: il s'agit de mises en page où la largeur de la page entière est flexible en fonction de la largeur du navigateur de l'utilisateur.

Il y a de bonnes raisons d'utiliser les deux méthodes de mise en page, mais sans comprendre à la fois les avantages et lacunes de chaque méthode, vous ne pouvez pas prendre une bonne décision sur laquelle utiliser pour votre site Web page.

Dispositions à largeur fixe

Les mises en page fixes sont des mises en page qui commencent par une taille spécifique telle que stipulée par le concepteur Web. Ils conservent cette largeur, quelle que soit la taille de la fenêtre du navigateur affichant la page. Les mises en page à largeur fixe permettent au concepteur de contrôler plus directement l'apparence de la page dans la plupart des situations. Ils sont souvent préférés par les concepteurs avec un arrière-plan imprimé, car ils permettent au concepteur d'apporter des ajustements minutieux à la mise en page et de les faire rester cohérents entre les navigateurs et les ordinateurs.

instagram viewer

Dispositions liquides

Les mises en page liquides sont des mises en page basées sur des pourcentages de la taille de la fenêtre actuelle du navigateur. Ils s'adaptent à la taille de la fenêtre, même si l'utilisateur actuel modifie la taille de son navigateur pendant qu'il consulte le site. Les mises en page à largeur liquide permettent une utilisation efficace de l'espace fourni par n'importe quelle fenêtre de navigateur ou résolution d'écran. Ils sont souvent préférés par les concepteurs qui ont beaucoup d'informations à faire passer dans un espace aussi réduit que possible. possible, car ils restent cohérents en termes de taille et de poids relatif des pages, quelle que soit la personne qui consulte le page.

Ce qui est en jeu?

Votre conception de site Web affecte votre la réactivité et l'adaptabilité du site. Selon ce que vous choisissez, la capacité de vos lecteurs à scanner votre texte, à trouver ce qu'ils recherchent ou parfois même à utiliser votre site peut être aidée ou entravée. L'identité globale de la marque de votre site peut également être menacée, surtout si les normes de votre marque suivent un modèle logique d'impression d'abord.

Avantages des dispositions à largeur fixe

Une disposition à largeur fixe est utile dans certaines circonstances.

  • Une mise en page à largeur fixe permet au concepteur de créer des pages qui seront identiques, peu importe qui les regarde.
  • Les éléments à largeur fixe tels que les images ne domineront pas le texte sur des moniteurs plus petits car la largeur de la page entière inclura ces éléments.
  • La longueur de numérisation ne sera pas affectée par de grands segments de texte, quelle que soit la largeur du navigateur.

Avantages des dispositions liquides

Une disposition liquide fonctionne mieux dans d'autres circonstances.

  • Une disposition à largeur liquide se dilate et se contracte pour remplir l'espace disponible.
  • Tout l'espace disponible est utilisé, permettant au concepteur d'afficher plus de contenu sur des écrans plus grands, tout en restant viable sur des écrans plus petits.
  • Les mises en page liquides offrent une cohérence dans les largeurs relatives, permettant à une page de répondre de manière plus dynamique aux restrictions imposées par le client, telles que des tailles de police plus grandes.

Inconvénients des dispositions à largeur fixe

Cependant, un format fixe n'est pas sans coût.

  • Les mises en page à largeur fixe forcent le défilement horizontal dans les fenêtres de navigateur plus petites. La plupart des gens n'aiment pas faire défiler horizontalement.
  • Ils laissent de grandes étendues d'espace blanc dans les moniteurs plus grands, ce qui entraîne beaucoup d'espace inutilisé et un défilement vertical plus important qu'il ne serait autrement nécessaire.
  • Les mises en page à largeur fixe ne gèrent pas très bien les modifications apportées par les clients aux tailles de police. Pour de petites augmentations de la taille de la police, elles peuvent être acceptables, mais pour des augmentations plus importantes, la mise en page peut être compromise.

Inconvénients des mises en page liquides

Les mises en page liquides, aussi, ne sont pas sans inconvénients.

  • Les mises en page liquides permettent très peu de contrôle précis sur la largeur des différents éléments de la page.
  • Ils peuvent entraîner des colonnes de texte qui sont soit trop larges pour être scannées confortablement, soit sur des navigateurs plus petits, trop petites pour que les mots s'affichent clairement.
  • Erreur de mise en page liquide lorsqu'un élément de largeur fixe, tel qu'une image, est placé à l'intérieur d'une colonne liquide. Si la colonne est rendue sans suffisamment d'espace pour l'image, certains navigateurs augmenteront la largeur de la colonne, sans tenir compte des instructions du concepteur, tandis que d'autres navigateurs forcent les chevauchements de texte et d'images pour obtenir le bon pourcentages.

Préférence de mise en page et approches mixtes

Certains designers préfèrent mélanger ces concepts. Ils n'aiment pas utiliser des mises en page liquides pour de gros blocs de texte, car cette structure rend le texte illisible sur un petit moniteur ou illisible sur un grand écran. Ils ont donc tendance à donner aux colonnes principales des pages une largeur fixe, mais à créer des en-têtes, des pieds de page et des côtés colonnes plus flexibles pour occuper le reste de l'immobilier et ne pas perdre la capacité des plus grandes navigateurs.

Certains sites utilisent des scripts pour déterminer la taille de la fenêtre de votre navigateur, puis modifient les éléments d'affichage en conséquence. Par exemple, si vous ouvrez un tel site dans une fenêtre très large, vous pouvez obtenir une colonne supplémentaire de liens sur le côté gauche que les visiteurs avec des moniteurs plus petits pourraient ne pas voir. De plus, l'habillage du texte autour de la publicité dépend de la largeur de la fenêtre de votre navigateur. S'il est suffisamment large, le site l'entourera de texte, sinon, il affichera le texte de l'article sous l'annonce. Bien que la plupart des sites n'aient pas besoin de ce niveau de complexité, cela montre un moyen de tirer parti des écrans plus grands sans affecter l'affichage sur des écrans plus petits.

instagram story viewer