Il existe différentes stratégies de conception Web pour qu’une page Web remplisse toute la fenêtre du navigateur, quelle que soit la taille de la page. Voici trois techniques simples, modérément complexes et avancées que vous pouvez utiliser pour optimiser votre site.
Table des matières
La manière la plus simple: utiliser des tableaux
L’une des méthodes les plus courantes utilisées depuis le début de la conception Web était d’utiliser des tableaux pour entourer votre contenu. Si vous définissez la largeur et la hauteur de la table sur «100%», la table s’agrandira jusqu’aux bords de la fenêtre du navigateur, qu’il s’agisse d’un petit écran 640×480 ou d’un moniteur haute résolution plus avancé.
Le code HTML des tableaux est très courant et bien connu, et la propriété « width » est définie au tout début du code:
<TABLE width=100% height=100%><TR><TD>Your Content goes here</TD></TR></TABLE>
Si vous vouliez avoir de la fantaisie, vous pouvez «imbriquer» une table dans l’autre, en définissant l’alignement de la table intérieure sur «centre», ce qui ferait «flotter» votre contenu exactement au centre de la fenêtre du navigateur:
<TABLE width=100% height=100%><TR><TD><TABLE align="center"><TR><TD>Your Content goes here</TD></TR></TABLE></TD></TR></TABLE>
Vous pouvez voir des exemples de code TABLE et essayer vos propres variations avec des propriétés telles que les couleurs d’arrière-plan sur le site Web de W3Schools.
Utilisation de CSS pour la mise en page liquide ultime
Avec l’avènement des feuilles de style en cascade, l’idée de « mises en page liquides » signifiait que votre contenu Web s’étendait et se contracterait gracieusement en fonction de la taille de la fenêtre du navigateur dans laquelle il se trouvait. la gauche, la droite ou des deux côtés, et une zone plus grande au milieu pour le contenu qui se dilaterait ou se contracterait. Matthew James Taylor a beaucoup écrit sur la façon de mettre en place de bonnes mises en page à l’aide de CSS, et comprend de nombreux modèles téléchargeables gratuitement pour le contenu de votre site Web.
Ses mises en page sont assez vastes, mais les sections qui s’appliquent à l’adaptation du site à la page sont relativement simples. Ils utilisent deux pourcentages, 50% et 25%, pour deux des colonnes, et la troisième colonne reprend simplement le pourcentage restant (25%). Le code CSS est téléchargeable gratuitement depuis le site, et le code qui régule les colonnes est clairement indiqué:
/* 3 Column settings */.threecol {background:#eee; /* sets the background color of the right column*/}.threecol .colmid {right:25%; /* sets the width of the right column */background:#ccc; /* sets the background color of the center column */}.threecol .colleft {right:50%; /* sets the width of the middle column */background:#f4f4f4; /* sets the background color of the left column */}
Il y a plus de code utilisé dans chaque colonne pour donner au contenu une bordure de 2%, et les hauteurs sont en fait réglementées par une section d’en-tête et de pied de page avec de nombreux autres paramètres tels que les polices et les bordures. La beauté du CSS est qu’il permet de modifier facilement l’ensemble du site avec seulement quelques lignes de code. Par exemple, si vous souhaitez en faire une mise en page à deux colonnes, vous pouvez simplement supprimer le « .colmid« du code ci-dessus. La colonne du milieu serait toujours à 50% de la page, et le »threecol. « remplirait le reste, s’étirant pour correspondre au reste de la page.
Il existe de nombreux endroits pour apprendre plus d’astuces CSS, mais l’un des meilleurs s’appelle A CSS Zen Garden, qui présente de nombreuses façons différentes de remplir une page d’images et de contenu de manière innovante et élégante.
Mises en page Web avancées utilisant le Javascript conditionnel
Pour les codeurs plus avancés, il existe une méthode d’utilisation de Javascript pour détecter le type de navigateur et d’écran utilisé par le spectateur et passer à une autre feuille de style pour la mise en page appropriée. Un article de Marc Van Den Dobbelstein sur A List Apart explique comment développer des classes séparées pour des écrans allant du «super large» (plus de 1280 pixels de large) aux simples mises en page verticales de PDA comme l’iPhone. Vous pouvez voir comment cela fonctionne à travers une page d’exemple de la technique « switchy McLayout », mais cela implique plusieurs techniques de codage assez étendues qui vont bien au-delà du HTML de base du tableau. Cependant, une fois que vous maîtrisez ce niveau de codage, il est possible d’ajuster votre site Web en fonction de nombreux facteurs différents, notamment la hauteur de l’écran, la présence d’une barre de défilement, la taille de la police, la position de la souris et la profondeur des couleurs.
Rendre le contenu à la fois formel et fonctionnel
L’avantage de s’assurer que votre site Web remplit l’écran est qu’il offre une meilleure concentration sur le contenu de votre site. En fin de compte, si votre contenu est plus facile à lire, il sera plus facile à comprendre, ce qui rendra le flux d’informations entre vous et vos utilisateurs plus transparent. Quelle que soit la technique que vous utilisez, cela vaut la peine de rendre votre site plus beau à l’écran.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
