La mise en page d'un site web

Qu'est-ce que la mise en page?

La mise en page correspond à la façon dont les différents éléments graphiques qui composent une page sont mis en relation entre eux.
Dans le domaine du web, on trouve une tendance générale à construire les pages de la façon suivante:

La mise en page d'un site web

On trouvera de légères variantes avec le menu à droite ou encore deux colonnes plutôt qu'une, mais la tendance générale est établie sur ce schéma.
Cette standardisation s'explique par le fait qu'il est plus facile pour l'internaute d'y retrouver l'information.

Bien entendu, il n'est pas obligatoire de respecter ce type de mise en page et il appartient à chacun de présenter le contenu de ses pages comme il le souhaite.
Certains secteurs d'activité ont même tout intérêt à jouer la carte de l'originalité.
Quoi qu'il en soit, la façon dont vous souhaitez présenter vos pages vous appartient et il sera bon de mener une réflexion préalable pour établir une mise en page qui corresponde aux objectifs que vous vous êtes fixés.

Largeur fixe ou extensible

Après cette première réflexion pour déterminer la tendance de votre mise en page, vous devrez vous poser la question de savoir si vous donnez à votre site une largeur fixe ou extensible.
En effet, il y existe un phénomène important à gérer lors de la conception d'un site, il s'agit de la résolution d'écran.
En consultant les propriétés d'affichage de votre ordinateur (Clic droit sur le bureau + propriétés), l'onglet Paramètres vous indique la résolution de votre écran comme le montre l'image ci-dessous:

Affichage du site selon la résolution d'écran

Ici, l'écran est réglé avec une résolution de 1440 x 900 pixels. Cela signifie que l'écran affiche une fenêtre de 1440 pixels horizontalement et 900 verticalement. Il est bien entendu possible de choisir la résolution qui correspond le mieux à ses préférences mais c'est là qu'intervient le problème lors de la mise en page d'un site web car on ne connaît pas la résolution que chaque internaute a choisi. Il est donc nécessaire de construire des pages qui s'adaptent aussi bien à une résolution de 1024 x 768 qu'une autre de 1280 x 1024.
La tendance générale consiste alors à choisir entre un site de largeur fixe (exemple 960 pixels) centré horizontalement et un site à largeur variable s'adaptant à la largeur de la fenêtre.

Exemple de largeur fixe:

Exemple de largeur fixe

La largeur du site reste la même quelque soit la résolution de l'écran mais les bandes latérales sont plus ou moins larges.

Exemple de largeur extensible:

Exemple de largeur extensible

Le site s'adapte à la largeur de la fenêtre en variant la largeur de la colonne centrale de texte.

Besoin d'un cahier des charges pour votre site?
Générateur de cahier des charges pour un site internet
Devis gratuit

Pas à pas

Suivez notre guide pour la création de votre site web.

Pas à pas

Nos conseils

N'hésitez pas à parcourir nos conseils pour la création d'un site.

Nos conseils

Lexique du web

Ce lexique vous permet de trouver des explications sur les termes spécifiques au jargon du web.

Lexique