La question peut avoir une réponse assez large qui nécessite des jours et des jours d'étude, mais je vais essayer quelque chose de court.
Vous devez concevoir votre mise en page en suivant une grille invisible, comme dans le papier, donc sur le Web qui vous aidera à garder tout sur le bon alignement et la bonne ordre. Les difficultés sont que sur le Web, les tailles et les proportions sont modifiables et le contenu est dynamique sur de nombreux aspects (réglage des préférences, calibrage du moniteur, éclairage, taille du moniteur, navigateur, système d'exploitation, etc.).
Pour cette raison, ne considérons pas la proportion entre les choses, mais concentrons-nous sur une configuration classique. Une disposition classique est en-tête en haut, pied de page en bas et 3 colonnes au centre (avec la gauche et la droite plus petites qu'un centre). Cela pourrait être un site Web sur deux colonnes ou plus, tout dépend de la quantité d'informations dont vous disposez, de la quantité que vous souhaitez afficher ou de la quantité d '"air" (alias: espace blanc) que vous souhaitez mettre entre les informations dont vous disposez. .
Remarque: sachez qu'il existe des limitations techniques CSS telles que l'alignement des colonnes (qui se trouvent sur la même ligne horizontale) à la même hauteur lorsque leur contenu diffère dans la colonne. Les gens essaient de corriger avec une solution créative jusqu'à ce que le navigateur mette à jour leur rendu CSS sur la nouvelle norme
Il y a 4 dispositions possibles:
1) Disposition fixe: vous définissez chaque div en px qui tient dans une taille spécifique qui sera visible dans un navigateur (par exemple à l'intérieur: 800x600)
pro: le design est stable con: vous pourriez avoir beaucoup d'espace blanc en fonction de l'écran de l'utilisateur
De cette solution, vous pouvez décider de gauche (sachant qu'un grand écart sera à votre droite et que vous pourriez jouer avec un arrière-plan graphique), ou d'aligner le centre (en divisant l'espace blanc à gauche et à droite, en réduisant sa quantité par rapport à l'alignement à gauche).
2) Disposition fluide: La page s'adaptera à la taille de l'écran, déplaçant et adaptant le contenu
pro: il remplira toujours la page sans laisser d'espace blanc incontrôlé con: vous perdrez le contrôle sur les proportions et la grille où vous positionnez votre contenu (exemple: un paragraphe sur plusieurs lignes qui devient une longue phrase d'une seule ligne sur des résolutions d'écran plus élevées)
Exemple de technique ou autre plus complexe
3) Mise en page d'origine: elles sont basées sur la violation des règles de mise en page et de grilles. Ils n'utilisent pas la disposition d'une colonne classique et sont principalement basés sur des effets de conception graphique, comme l'affichage d'informations sur tout le site Web, et ils utilisent un positionnement plus absolu que toute autre solution. Bon pour le plaisir artistique sur le web ou le portfolio fou et rien de plus (je ne suis pas contre, mais ils nécessitent une connaissance des règles de communication du web design, un bon effort créatif et technique).
Je ne trouve pas d'exemple pour le moment, désolé.
pro: grande con esthétique et originale: vous ne pouvez pas l'utiliser pour des sites Web commerciaux, ou pour des blogs ou quoi que ce soit avec une grande quantité d'informations.
4) Disposition fixe dynamique: c'est ce que j'utilise de nos jours pour mes sites Web personnels et pour les sites Web des clients qui ont du temps à consacrer pour rendre un site Web flexible mais sous contrôle. Ce n'est rien de plus qu'une mise en page fixe, mais avec un javascript qui vérifie constamment la taille de votre écran (en cas de redimensionnement ou pour déterminer de quelle taille il s'agit) et passez le CSS approprié pour cette taille. Quelle que soit la taille de votre écran, vous aurez toujours un bon contrôle. Par exemple, si j'ai une disposition à 3 colonnes, si je redimensionne le navigateur, je peux décider que la troisième colonne disparaîtra et ira au bas du contenu, avant le pied de page.
pro: Contrôle complet + flexibilité con: Beaucoup d'efforts dans la conception et le débogage du temps à passer pour vérifier que tout est correct, en pensant même à l'avenir car vous ajouterez de nouveaux contenus plus tard dans le futur et tout doit fonctionner correctement.
Article où je me suis inspiré
(de nos jours jquery fait un excellent travail avec resize (), il y a 3 ans j'avais un long script pour ça :))
Une dernière note
Il y a de nos jours une nouvelle tendance chez les graphistes Web (les gens qui sont plus graphistes que les programmeurs), à l'aide d'une mise en page fixe, ils conçoivent chaque page unique de leur blog comme le font les magazines avec leurs articles. Créatif et concevant chaque article avec son propre style.
Un représentant est Jason Santa Maria
Autres articles:
Il y a plus d'articles là-bas. Recherchez les "dispositions CSS". Ou suivez des endroits où les discussions sur la convivialité et le design comme Signal Vs Noise
Tout ce qu'il y a à savoir sur la composition, c'est l'expérience et l'étude, ou les tests d'utilisabilité (essais et erreurs). Mettez quelqu'un en avant de votre site Web et voyez comment il réagit à votre conception. Ou un appareil de suivi des yeux :)
Je suis autodidacte, donc je ne peux pas suggérer de livres sur la composition, mais un bon livre sur la disposition de la grille peut vous aider beaucoup.
Si vous voulez un bon système pour la conception de sites Web, jetez un œil au système de grille 960 . C'est ce que j'utilise pour la plupart de mes mises en page. Je pense qu'il existe également une bonne sélection de modèles à utiliser dans différents packages, tels que Photoshop et InDesign, ainsi que certains modèles imprimables pour tous les besoins de griffonnage de votre site Web.
Un bon exemple de mises en page différentes peut également être vu ici: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples
la source