Créer un thème de blog minimaliste et graphique à la fois en très peu de temps avec seulement 3 images c’est possible ! Explications…
Lire la suite
Certaines personnes ont des occupations de week-end un peu tordues, et j’en fais parti, j’assume.
Alors cela ne surprendra personne si je dis que j’ai passé mon samedi après-midi à me lancer le défis suivant:
construire un template de blog suffisamment graphique pour se démarquer, et suffisamment simple pour être facile à mettre en œuvre ainsi qu’optimiser le temps de chargement.
Tout d’abord on part d’un thème basique avec le minimum syndical au niveau CSS. Sur Blogger j’ai utilisé le thème “Minima”. Soit: un fond blanc, une zone de titre, une sidebar, une zone de post.
Rien de folichon en somme…
Voici le schéma de la structure du futur template:
En premier on défini une image de fond qui va se répéter, de préférence une texture, les patterns sont a éviter car gênant pour la lecture, et si possible discrète. On lui mettra les attributs “top center” pour ne pas avoir de surprise sur les différentes résolutions.
Ensuite, vient le bandeau, qui reprend la texture de l’image de fond.
Utilisez un effet de lumière, cela accroche le regard du visiteur, un titre décentré pour éviter toute monotonie, et un élément graphique simple qui vient délimiter subtilement le titre de la zone de post. Ajouter un logo ou des icônes stylisées vont aider à donner une touche de volume et à donner un peu de vie.
Pour la zone d’articles, j’ai testé une solution un peu originale qui consiste a descendre le titre sur l’article et faire un alignement droit. Si l’on veut mettre une photo en bannière à chaque début d’article la solution est idéale, mais si ce n’est pas le cas mieux vaut garder uniquement un alignement droit.
Pour délimiter visuellement chaque article, je réutilise une partie de l’image de titre en guise de ligne de séparation. Ainsi, j’économise en requête et donc en vitesse de chargement! CQFD.
Le thème est donc à la fois minimaliste et rapide à charger. Bref, il a tout pour plaire…
