Mise en page fluide

Une mise en page fluide est un type de conception de page Web dans lequel la mise en page de la page se redimensionne lorsque la taille de la fenêtre est modifiée. Cela est possible en définissant les zones de la page à l’aide de pourcentages plutôt qu’avec des largeurs fixes en pixels.

La plupart des mises en page de pages Web comprennent une, deux ou trois colonnes. Aux débuts de la conception Web, lorsque la plupart des utilisateurs avaient des tailles d’écran similaires, les développeurs Web attribuaient des largeurs fixes aux colonnes. Par exemple, une mise en page fixe peut inclure une zone de contenu principale de 960px de large, avec trois colonnes d’une largeur respective de 180px, 600px et 180px. Bien que cette mise en page puisse être très esthétique sur un écran de 1024x768, elle peut sembler petite sur un écran de 1920x1080 et ne pas tenir sur un écran de 800x600.

Les mises en page fluides résolvent ce problème en utilisant des pourcentages pour définir chaque zone de la mise en page. Par exemple, au lieu de créer une zone de contenu de 960px, un développeur Web peut créer une mise en page qui occupe 80 % de l’écran, les trois colonnes pouvant occuper respectivement 18 %, 64 % et 18 %. Grâce aux pourcentages, le contenu peut s’agrandir ou se réduire pour s’adapter à la fenêtre de l’ordinateur de l’utilisateur. Le CSS utilisé pour créer une mise en page fixe par rapport à une mise en page fluide est présenté ci-dessous.

Les classes CSS des exemples peuvent chacune être attribuées à un div dans le HTML d’une page, les classes .left, .right et .middle étant incluses dans la classe .content. La classe de contenu peut également être attribuée à un tableau, et les autres classes peuvent être attribuées aux cellules du tableau. La classe .content à largeur fixe n’exige pas de largeur définie, car elle s’étend automatiquement sur la largeur des div ou des cellules de tableau qu’elle contient.

Mise en page fluide et conception Web adaptative

Les termes « mise en page fluide » et « conception Web adaptative » sont parfois utilisés indifféremment, mais il s’agit de deux choses différentes. Une page créée à l’aide de la conception Web adaptative inclut des requêtes média CSS, qui chargent des styles différents selon la largeur de la fenêtre ou le type d’appareil utilisé pour accéder à la page. La conception Web adaptative nécessite davantage de CSS et parfois de (JavaScript) qu’une mise en page fluide de base, mais elle offre également un meilleur contrôle sur la mise en page de la page.