Prototyper un modèle de page d'accueil de style magazine avec le framework CSS de Blueprint

Lorsque Collis a lancé ce site et a demandé aux lecteurs de demander des tutoriels, l'un des plus courants était un tutoriel sur les "thèmes de magazines" pour les plateformes de blogs. Ce tutoriel se concentre sur la première partie du processus: appliquer une grille CSS à la conception pour créer un prototype de modèle de page d'accueil..

Démo et Source

Vous pouvez voir une démonstration de ce tutoriel en cliquant sur le bouton "Démo" ci-dessous. Pour la source, le téléchargement du fichier ZIP ne comprend pas le code CSS de Blueprint.

Ce que nous construisons

L'accent est mis ici sur un exemple de conception de page Web utilisant le framework de grille Blueprint CSS, basé sur mon article précédent, Which CSS Grid Framework. Cependant, vous pouvez appliquer le même processus à n'importe quel framework de grille CSS que vous préférez. Si vous n'aimez pas utiliser les frameworks de grille sur les sites de production, vous pouvez toujours remplacer le code CSS et les classes HTML correspondantes par vos propres.

La conception de la page présentée ci-dessous est influencée par de nombreux thèmes de magazines WordPress. Vous pouvez donc voir des éléments de conception familiers, bien que ce ne soit pas un didacticiel spécifique à WP..

Un processus de conception graphique typique

Permettez-moi de souligner que je ne suis qu'un "fauteuil", concepteur autodidacte, et que la nature minimaliste de ma conception reflétera mon manque de formation appropriée. J'espère que cela vous permettra de vous concentrer sur le processus général de conception et de codage de la grille, basé sur des éléments géométriques et non sur le style..

Un processus de conception typique pour les pages Web consiste à commencer par une esquisse sur papier, suivie d'une maquette graphique dans Photoshop ou Fireworks, etc. Insérez tous les éléments de conception, placés approximativement à l'endroit souhaité. Plus tard, lors de la phase de conception basée sur une grille CSS, vous déterminerez les mesures exactes.)

FilmPundits est un site appartenant à un ami que je suis en train de construire. La maquette ci-dessous est l'une des conceptions "FilmScenic" que j'ai déjà prototypées. Le sujet du film se prête bien à cet exemple en raison des images de style grand écran.

Si vous souhaitez utiliser un design similaire pour des sujets autres que des films, ajustez simplement les hauteurs d'image pour les rendre moins larges. Pour mes besoins de conception, la plus grande image doit avoir le plus d’impact. La composition est donc légèrement décalée horizontalement. Cela rend la page un peu plus dynamique et attire l'attention sur les éléments les plus importants..

Regardons les lignes "guides", ci-dessous, qui forment la grille de conception pour la maquette ci-dessus.

Utilisez votre logiciel graphique préféré pour transformer les lignes de guidage en une carte «en tranches»:

Si vous n'utilisez pas de grille CSS, vous pouvez alors coder manuellement votre page Web et votre fichier CSS, ou laisser votre logiciel générer le code pour vous..

Processus de conception basé sur une grille CSS

Maintenant que nous avons une maquette de conception graphique, nous devons la traduire en code HTML et CSS. Pour rappel, utiliser un framework de grille CSS accélère le processus de prototypage. Vous pouvez mesurer vos éléments de conception en largeur de pixel et les ajuster au grillage de la grille CSS que vous utilisez. (Je ne m'intéresse pas beaucoup au positionnement vertical car j'ai tendance à contrôler cela avec les hauteurs d'image et les marges supérieure / inférieure.)

Voici le processus que j'utilise généralement pour appliquer des grilles CSS, qui traitent la maquette de conception graphique comme un aparté. Vous devrez adapter cela à vos besoins.

Sur un morceau de papier, tracez un rectangle de délimitation - paysage ou portrait - représentant la forme générale de la conception de votre page..
Partitionnez le rectangle de délimitation en sections approximatives: en-tête, pied de page, contenu principal, barre latérale.
Partitionnez les sections brutes plus loin, si nécessaire.
Choisissez votre framework de grille CSS, qu'il soit pré-construit ou personnalisé. J'utilise Blueprint. Vous pouvez utiliser ce document PDF d'une page comme "aide-mémoire".
Décidez de la largeur maximale de la page. J'ai utilisé la largeur de page par défaut Blueprint de 950 pixels, composée de 24 colonnes de 30 px de large chacune et de gouttières de 10 px de large entre les colonnes (24x30 - 10 = 950 px).
Maquette de votre conception dans un logiciel graphique raster (Photoshop, Fireworks, etc.) si vous le souhaitez. J'ai tendance à sauter cette étape parce que. Notez que la plupart des frameworks de grille CSS incluent une grille PNG ou JPG que vous pouvez superposer en tant que guide. Je n'ai pas utilisé cette grille dans le processus de conception graphique décrit ci-dessus.
Décidez des largeurs minimales pour vos différentes sections.
1. Je voulais que la barre latérale ait au moins 190 px de large (5 colonnes Blueprint), mais je l'ai laissée jusqu'à la fin, afin de garantir la priorité des trois petits blocs de fonctions en bas à gauche..
2. Le côté gauche du bloc "Fonctionnalités" doit comporter un peu d'espace blanc (> = 30 px, car il s'agit de la largeur d'une colonne dans Blueprint). Après avoir tourné avec les sections de priorité supérieure, je me suis installé sur 3 colonnes = 110 px de large.
3. Les trois petits blocs caractéristiques doivent avoir la même largeur. Toute largeur inférieure à 190 px n'aurait pas le même impact visuel. Plus de 190 px ne laisserait pas assez de place pour l'espace blanc à gauche. (Si j'avais le temps et l'inclination, j'aurais pu créer un framework Blueprint personnalisé qui donnerait un contrôle plus fin, ou utiliser une page de largeur plus grande.)
4. La largeur de la grande image de référence (590 px = 15 colonnes) est automatiquement définie car elle doit s'étendre sur la largeur des trois plus petits blocs de fonction. Son rapport hauteur / largeur est plus grand que pour les images d'entités plus petites, pour un impact visuel, ce qui signifie qu'il est "plus important" que les autres éléments de la page. Toutes ces images ont un aspect grand écran, malgré des rapports hauteur / largeur différents.
5. Dans la section "Messages récents" de la barre latérale, la largeur de l'image est forcée à 70 px (2 colonnes) - au lieu de mes pouces 48x48 souhaités - en raison de ce qu'il reste sur l'écran horizontal. (Voici où un framework de grille CSS peut être un handicap: tailles forcées.) En fin de compte, même les petites vignettes font légèrement allusion au thème "écran large".
6. Les blocs de texte trop larges peuvent facilement être corrigés en utilisant une police plus petite, de préférence en utilisant une famille de polices toujours lisible à la taille réduite..
Déterminez la hauteur des éléments si possible. Satisfaire les préférences de hauteur me préoccupe moins, mais j'ai minimisé le placement vertical des éléments de conception, de sorte que la conception de la page globale reflète un aspect "grand écran". Au moins pour ce modèle de page d'accueil, je ne voulais pas que la hauteur de la page soit si grande que la plupart des lecteurs devraient faire défiler l'écran vers le bas. Cela ruinerait l'effet "écran large".
1. Le menu est seulement un espace réservé et n'est pas couvert ici dans le code. Il couvre toute la largeur du "contenu" de 710 px (18 colonnes)..
2. La hauteur de la grande image a été déterminée par la mise en page. Ses proportions doivent ressembler à un "écran large".
3. Les petites images sont une version réduite de celles que j'utilise sur un autre site de tournage. Les originaux sont 470 lx 175 h. Comme il n’ya que 190 px de large pour travailler, le redimensionnement d’une image originale donne la hauteur résultante de 71 px, que j’ai rognée ici à 70 px. La proportion qui en résulte donne toujours une impression d’écran large, mais rappelle que ces blocs ne sont pas aussi importants que la grande image de fond..
4. La hauteur du texte de chaque petite section est définie par quatre sections verticales: titre du film, date du post, auteur du post et description, ainsi que plusieurs "bordures du bas". (Dans le code CSS, vous verrez plus tard que la hauteur de ligne par défaut est de 115%.)
5. La hauteur des éléments du bloc Articles récents est au minimum de 49 px, mais ils varient en fonction de la longueur du titre de l'article..
6. Le haut de la section Nouvelles ne correspond pas tout à fait au haut des petites fonctionnalités. Il existe des moyens pour y parvenir, même si je n'ai pas couvert cela ici.
Déterminez les largeurs finales de chaque élément en tenant compte des paramètres de votre structure de grille. Vous pouvez utiliser votre esquisse en papier ou votre maquette graphique comme aide.
Découpez votre maquette graphique, si vous en utilisez une, et enregistrez des segments dans des fichiers image..
Ajoutez les balises div Blueprint et les attributs de classe nécessaires pour prendre en charge votre conception..
Testez et modifiez jusqu'à obtenir un design final qui vous satisfasse.
Si vous le souhaitez, supprimez le cadre Blueprint. Cela signifie remplacer le cadre explicite (HTML, CSS) par un cadre implicite, ce qui me semble être un travail inutile (mais ce n'est que moi). À tout le moins, en production, utilisez la version "compressée" des fichiers Blueprint.
Aller vivre.

Si vous êtes un vrai designer, contrairement à moi, vous ferez probablement la majeure partie de la maquette de conception dans votre logiciel d'édition graphique préféré. Je préfère généralement faire des croquis sur papier, puis me maquiller à la volée en utilisant HTML et CSS (classes Blueprint et personnalisées), comme indiqué ci-dessous..

Processus de codage basé sur la grille

Maintenant que vous avez une maquette de votre mise en page, vous pouvez commencer à coder en HTML et CSS. Voici un processus approximatif des étapes de codage réelles:

Inclure les références CSS de Blueprint nécessaires et le code conditionnel d’IE dans le tête élément de votre page web.
Dans la balise body, commencez par un div dont classe attribut est défini sur "conteneur". C'est un code de plan directeur permettant de spécifier une zone de conteneur pour les éléments de conception. Cette section de la page entière. Si vous voulez que la grille soit visible, pour vous aider à placer les éléments correctement, ajoutez également la valeur "showgrid" à la classe attribut de cette div.
Commencez à affiner les blocs en sections plus petites en utilisant du contenu HTML intégré div balises, ainsi que des rectangles pour les images contrôlés par CSS. Pour spécifier les largeurs, utilisez les classes "span-x" de Blueprint. Ajoutez toutes les classes CSS personnalisées dont vous avez besoin. Je mets généralement des blocs personnalisés redondants (avec un arrière-plan gris), puis les supprime une fois ma conception réelle implémentée dans le code..
Vous pouvez continuer à affiner chaque bloc brut ou passer à l'étape suivante..
Créez tous les logos, icônes ou bannières nécessaires qui n'avaient pas déjà été créés.
Remplacez les blocs bruts par des éléments de conception réels. Ajouter le approprié div balises, toutes les valeurs de classe Blueprint restantes.

Exemple de code HTML et CSS

Pour clarifier les processus ci-dessus, examinons quelques fragments de code HTML et CSS réels pour l'exemple de conception de site de film décrit précédemment. Gardez à l'esprit que je suis allé extrême avec les balises div non-Blueprint dans un but de clarté dans ce didacticiel. Vous voudrez probablement supprimer les classes en excès, éventuellement fusionner les balises div imbriquées.

Notez également que j’ai utilisé des noms de classe CSS "moche" non Blueprint pour plus de clarté. Ils sont tous précédés de "fs-", suivi d'un nom fonctionnel, pour préciser leur utilité..

J'ai codé cinq étapes pour ce tutoriel afin d'illustrer le processus de raffinement en HTML et CSS. Normalement, je compresserais les étapes 1-3.

Modèle vierge avec la classe "conteneur" de Blueprint et un fichier CSS vide.
Blocage brutal étape 1.
Blocage approximatif de l'étape 2. Affiner les blocs bruts de l'étape 1.
Blocage approximatif étape 3. Affinage final du bloc en sections nécessaires.
Page Web finale et CSS.

Ces étapes seront plus claires dans les sections ci-dessous.

Étape 1: Code de modèle vierge

Pour commencer, nous voulons configurer le fichier HTML:

   Modèle FilmScenic          en-tête, contenu, barre latérale et pied de page allez ici

Lien vers les fichiers CSS "screen" et "print" de Blueprint. Si vous utilisez une structure de répertoire différente, n'oubliez pas de modifier les URL en conséquence. J'ai placé le répertoire "blueprint" sous le fichier index.html, bien qu'en production, il devrait probablement aller "au-dessus" de votre répertoire de thème.
Lien vers le fichier CSS personnalisé "style", qui contiendra toutes les classes CSS non Blueprint. Dans cette étape, c'est style.css.
Configurez une div avec les classes "container" et "showgrid", qui font toutes deux partie de Blueprint. L'utilisation de la classe showgrid rendra la grille que nous utilisons, ce qui permettra de voir plus facilement que les éléments de conception sont placés correctement..

Étape 2: étape brute du blocage 1

Maintenant, bloquez grossièrement la page entière (le conteneur) en trois sections contrôlées par CSS: fs-mainblock, fs-sidebar et fs-footer. Vous pouvez le voir dans le code HTML ci-dessous, qui remplit une partie de l'élément div.container que nous avons présenté plus tôt:

    en-tête, les blocs de contenu vont ici
 barre latérale
 
 
  (c) Copyright 2008-present, Ce blog

Vous remarquerez que les div ci-dessus utilisent à la fois des classes personnalisées et des classes Blueprint (span-18, colborder, span-5, last, span-24). La "dernière" classe est très importante, sinon la marge droite par défaut de la section fs-sidebar ne sera pas désactivée et la section sera rendue au-dessous de la section fs-mainblock au lieu d'être placée à côté. La frontière française trace une ligne verticale entre fs-mainblock et fs-sidebar, et prend une colonne seule. Cela ne se reflète pas dans la valeur "span-18". En théorie, le bloc principal occupe en réalité 19 colonnes (19 + 5 = 24 colonnes, la valeur par défaut de Blueprint).

Maintenant, nous ajoutons des classes à la feuille de style personnalisée pour ces trois blocs (voir ci-dessous). Remarque: certaines d'entre elles sont temporaires pour montrer les rectangles de bloc à l'écran tout en affinant la conception. Consultez le fichier final style.css au lieu d'utiliser exactement les règles présentées dans les extraits de code CSS ci-dessous..

 div.fs-content margin-bottom: 20px;  div.fs-mainblock height: 700px; arrière-plan: #ccc;  div.fs-sidebar height: 700px; arrière-plan: #ccc;  div.fs-footer margin-top: 20px; rembourrage en haut: 5px; hauteur: 30px; arrière-plan: #ccc; border-top: 1px solid # 000;

Le CSS ci-dessus donne la maquette approximative ci-dessous:

Étape 3: Phase brute de blocage 2

Affinons la conception plus loin en décomposant les sections. La classe div fs-mainblock est divisée en sections fs-header et fs-disabled. La barre latérale fs est divisée en fs-recentposts et fs-newsbox. Voici le div.container raffiné:

     Logo + menu
 Sections en vedette
 
   Messages récents 
 
  Nouvelles 
 
 
 
  (c) Copyright 2008-present, Ce blog

Comme auparavant, les classes des nouvelles sections sont ajoutées à la feuille de style personnalisée, style.css. La hauteur de chaque section est approchée si nécessaire, et nous ajoutons encore une fois un arrière-plan temporaire à certains des éléments, qui seront supprimés dans le fichier final style.css. Voici quelques règles CSS supplémentaires:

 div.fs-header // Largeur du logo + du menu: 710px; hauteur: 110px; arrière-plan: #ccc; marge inférieure: 10px;  div.fs-selected // Largeur des sections sélectionnées: 710px; hauteur: 580px; arrière-plan: #ccc; marge inférieure: 10px;  div.fs-sidebar div.fs-recentposts height: 370px; arrière-plan: #ccc; marge inférieure: 10px;  div.fs-sidebar div.fs-newsbox hauteur: 270px; arrière-plan: #ccc;

Cela se traduit par la maquette suivante:

Étape 4: Phase brute de blocage 3

C'est la dernière étape du processus de maquette. Nous ajoutons des sections pour tous les éléments de conception restants:

Diviser la classe div fs-header en fs-logo et fs-horiznav.
Diviser les fonctions fs en fonctions fs-txt et fs.
Diviser davantage les caractéristiques fs en fs-bigfeature et fs-smfeatures.
Divisez ensuite fs-smfeatures en trois blocs, chacun couvrant 5 colonnes Blueprint. Aucune classe CSS personnalisée n'est nécessaire pour ce dernier.
Divisez les contributions récentes en cinq sections. (Dans un tutoriel ultérieur, ces sections seront intégrées à WordPress, de sorte qu'une seule section sera utilisée dans une boucle de code.)

Voici à quoi ressemble notre div.container:

      Logo
 Menu
 
  En vedette
  gros trait
  fonction sm
 fonction sm
 fonction sm
 
 
 
 
 
   Messages récents post récent
 post récent
 post récent
 post récent
 post récent
 
 
  Nouvelles 
 
 
 
  (c) Copyright 2008-present, Ce blog

Comme vous pouvez le constater, de nombreux divs imbriqués sont utilisés. Certaines sont simplement pour plus de clarté dans ce tutoriel. Pour le reste, sur un site de production, vous pouvez en compacter une partie ou remplacer les classes Blueprint par les vôtres. Certaines personnes préfèrent utiliser la mise en cache sur leurs sites, lors de l'utilisation de thèmes "magazines" avec des grilles - bien que ce tutoriel n'en ait pas les moyens.

Chacune des nouvelles classes est ajoutée à la feuille de style personnalisée, avec des hauteurs et des arrière-plans temporaires:

 div.fs-logo / * Logo du site * / hauteur: 90px; largeur: 400px; arrière-plan: # 999; marge inférieure: 10px;  div.fs-horiznav / * Menu horizontal * / height: 25px; largeur: 710px; arrière-plan: # 999; marge inférieure: 10px;  div.fs-Featured / * Sections sélectionnées * / width: 710px; hauteur: 580px; arrière-plan: #ccc; marge supérieure: 10 px; marge inférieure: 10px;  div.fs-txt-feature / * Featured * / height: 30px; largeur: 110px; arrière-plan: # 999;  div.fs-features / * Features * / height: 570px; largeur: 590px; arrière-plan: # 999;  div.fs-bigfeature / * Grande fonctionnalité * / height: 260px; largeur: 590px; arrière-plan: # 666; marge inférieure: 20 px;  div.fs-smfeatures div / * Petite fonctionnalité * / hauteur: 280px; arrière-plan: # 666; marge inférieure: 10px;  div.fs-recentpost / * Article récent individuel. La hauteur est en fait variable, mais est au minimum de 49 px * / height: 50px; // grossièrement largeur: 190px; arrière-plan: # 999; marge inférieure: 10px;

Cela aboutit à notre dernière étape de la maquette, dont la géométrie est assez proche de celle de notre maquette de conception graphique "découpée en tranches":

Nous sommes maintenant prêts à produire le code final.

Étape 5: Code du modèle final

Il s’agit de la dernière étape du processus de codage, où nous ajoutons des éléments de conception réels, nettoyons les divs et les classes en excès, et supprimons tout élément "bloquant":

Prenez toutes les classes CSS personnalisées et supprimez les paramètres d’arrière-plan et de hauteur, à l’exception de fs-horiznav. (Certains réglages de largeur sont nécessaires. Supprimez ceux qui ne le sont pas.)
Ajoutez maintenant des éléments de conception (images, blocs de texte) aux endroits appropriés. Utilisez les classes Blueprint nécessaires. (Par exemple, j'utilise "div" pour forcer une réinitialisation verticale après un groupe de blocs horizontaux. Recherchez ceci dans l'exemple et essayez de les supprimer pour voir ce qui se passe autrement.)
Ajoutez toutes les sections div finales et les classes CSS, si nécessaire. Par exemple, fs-smfeature, fs-posttitle, fs-postdate, fs-postauth, fs-descr, fs-repposts-head, fs-newsbox-head, fs-newsbox-ul.
Supprimez toutes les classes CSS personnalisées qui ne sont plus nécessaires. Ex., Caractéristiques fs, fs-txt-sélectionnée.
Supprimez tous les div de "constructeur" personnalisés qui sont étrangers, ou fusionnez-les avec les div de Blueprint existants dans votre code HTML. Je les ai laissés dans la clarté.
Notez que le fichier CSS ci-dessous utilise "contour" au lieu de "bordure" pour toutes les images. Les contours sont affichés au-dessus d'une image et n'occupent donc pas davantage d'espace à l'écran..
La hauteur de ligne par défaut de la page est définie sur 115%.

Maintenant, nous avons notre conception finale, ci-dessous, qui est identique à celle du début de ce tutoriel:

Démo et téléchargement

Les fichiers finaux ne contiennent aucun des éléments grisés, et le fichier style.css contient d'autres commentaires détaillés qui devraient vous aider à déchiffrer l'objectif de chaque classe personnalisée. Le fichier ZIP contient des images recadrées de différentes affiches de film, qui sont la propriété de leurs propriétaires respectifs. Les fichiers de grille Blueprint CSS ne sont pas inclus dans le ZIP.

Veuillez noter que des différences mineures peuvent exister entre les fichiers source et le code présenté ci-dessus..

Dernières pensées

Quelques derniers commentaires sur l'exemple de ce tutoriel:

Le code présenté ici est un peu maladroit avec son extra div balises, mais ils sont utilisés pour illustrer clairement un processus de conception basé sur une grille. Plus précisément, j'ai étendu le processus de maquette et de codage pour mettre en évidence les étapes possibles. Beaucoup d'éléments de conception peuvent être resserrés et leurs classes div correspondantes éliminées dans le fichier CSS.
Au fur et à mesure que vous vous habituerez à utiliser les frameworks de grille CSS, il est probable que vous compressiez les trois étapes de la maquette de grille CSS décrites ci-dessus en une seule étape, en particulier si vous avez une découpe de conception graphique pour commencer..
Ce n'est pas le seul processus pour la conception de pages basée sur une grille. Pour un traitement beaucoup plus approfondi de la conception de la grille, veuillez vous reporter à la série intitulée Cinq étapes simples pour concevoir des systèmes de grille de Mark Boulton..

Ce n'est pas un exemple complexe, ni un thème complet pour une plate-forme de blog, mais j'espère que cela vous aidera à comprendre comment utiliser les grilles CSS pour la conception de pages Web. Bien que le code ici concerne une page statique, l'étape suivante consiste à l'intégrer à une plateforme de blog pour produire un modèle de page d'accueil..

Code