Choisir le design de son blog et l’adapter à son message

Comment organiser le blog, en 2 ou 3 colonnes ? Le contenu sera-t-il au centre ? Un seul menu ? à droite, à gauche ? Quel est mon message principal ?

Maintenant que votre concept de blog est précis dans votre tête, il est dans votre intérêt de le présenter de manière courte et claire. En d’autres termes, cela se résume à une phrase d’accroche. Cette phrase d’accroche sera présentée différemment suivant le thème choisi. Elle se configure dans les options générales du blog (”Slogan”). Ce message identifie la mission que vous vous êtes lancée pour ce blog, ou alors peut etre une citation personnelle, celle d’un auteur… Il s’agit là de votre accroche, choissisez la bien et donner lui l’importance qu’il faut dans votre design.

Il existe de très nombreux designs ou thème graphiques dans la galerie officielle de wordpress qui peuvent servir de base à une sélection et adaptation personnelle de votre identité graphique.

Choisissez votre top 3 des thèmes graphiques et soumettez le à discussion à votre entourage proche (conjoint, famille, ami(e)s, chiens, chats, poissons rouge….) pour voir ce que cela leur inspire. Parlez leur du concept, de l’idée que vous avez derrière la création de ce journal.

Les couleurs pourront être changé très facilement, soyez plus regardant sur l’ergonomie et l’accessibilité générale du contenu. Personnellement, j’aime bien les fonds blancs aérés et les espaces ouverts.

Généralement, les blogs construits avec le contenu à gauche et un ou plusieurs menus à droite sont plus adaptés à l’optimisation de son référencement dans les moteurs de recherches. Il existe également des templates de blog qui permettent d’optimiser le ranking sur les moteurs . Par exemple Isulong, que j’ai mis en place sur le blog de mon frère sur la kiné et l’ostéopathie (en construction). A première vue, il est effectivement efficace en terme de placement sur les moteurs. Si le blog doit contenir beaucoup de textes, veillez à laisser une grande place à celui-ci afin d’en simplifier la lecture en évitant d’utiliser la barre de défilement du navigateur.

Une fois que vous avez flashé pour votre thème graphique, il va falloir le télécharger pour le remettre en ligne sur votre hébergement dans le répertoire adéquat (wp-content/themes/”nom du thème graphique”). Ensuite dans l’administration de Wordpress, il faut aller dans les menus : gérer, présentation et choisir le nouveau thème.

Pour personnaliser votre thème, vous pouvez utiliser des outils tel que CSS Vista ou encore le plugin web developer pour Firefox (pour accéder à l’édition en ligne du fichier CSS, vous cliquez sur l’onglet “CSS” puis sur “Edit CSS”. Tous les changements que vous effecturez seront immédiatement pris en compte, mais attention, il ne seront pas enregistrés dans le fichiers CSS. Pour cela vous devrez copier vos changements et les collez dans le fichier (sur l’administration wordpress) pour voir l’impact des changements sur le design du blog. Les fichiers sont éditables directement à partir de la partie d’administration de votre blog wordpress (Menu « gérer » puis « fichiers »). Certains templates ont des fonctionnalités qui pourraient vous plaire et qui ne sont pas présentes dans le thème de votre choix. Dans ce cas il faudra faire un peu de copier coller de l’autre thème dans votre thème mais pour cela il faut avoir quelques notions techniques.

N’oubliez pas de faire des tests de vos modifications de design CSS dans plusieurs navigateurs (surtout Internet Explorer ET Firefox) car ils ne les interprétent pas forcément de la même façon.

Si vous avez besoin de conseils complémentaires ou de compétences techniques pour vous aidez dans la personnalisation de votre blog peut-être sera t il intéressant de jeter un œil à ces membres de ziki et à leur contenu.

Articles précédents :
Article d’introduction : 14 étapes pour créer son blog dans les règles de l’art.
Article 1 : Les pré-requis humains à la création d’un blog.
Article 2 : Comment trouver un (bon) nom pour son blog ?
Article 3 : Choisir son hébergement internet pour son blog.
Article 4 : Choisir et installer sa plateforme de blog open source.

Aucun article relatif pour le moment.

10 Commentaires »

Le 4 September 2006 à 7:13Commentaire by lyonelk
Si le blog doit contenir beaucoup de textes, veillez à laisser une grande place à celui-ci afin d’en simplifier la lecture en évitant d’utiliser la barre de défilement du navigateur.
Eh bien visiblement c’est une mauvaise idée en terme de lisibilité à l’écran ! Si le texte est relativement long, une ligne de texte à l’écran devrait comporter entre 70-75 signes (espaces compris) au maximum.
Pour le reste, relativement à des blogs que je qualifierai avant tout de textuel, j’avais fait récemment d’autres constats ici
Bonne journée.
PS : merci pour cette série d’articles.
Le 4 September 2006 à 9:55Commentaire by Sébastien Billard
“les blogs construits avec le contenu à gauche et un ou plusieurs menus à droite sont plus adaptés à l’optimisation de son référencement” : Ce n’est pas le fait pour le menu d’être à gauche ou à droite qui est bon pour le référencement, c’est le fait que le contenu apparaisse en 1er DANS LE CODE. Cela augmente également l’ergonomie pour les utilisateurs de navigateurs vocaux par exemple (ou de PDA), quand des liens d’évitement sont présents.
Le 4 September 2006 à 10:05Commentaire by LostInBrittany
JF, je voulais seulement te féliciter pour cette série de billets, qui mettent par écrit plein de choses que normalement on apprend que avec la technique d’essai-erreur. Je crois que ces articles peuvent bien aider à des nouveaux bloggeurs à se retrouver.
Le 4 September 2006 à 20:10Commentaire by Jean-François Ruiz
lyonelK : Personnellement cela me soule de scroller à la souris. Je préfère largement les blogs ou l’espace réservé au texte est suffisamment grand et je pense ne pas être le seul Pour ce qui est de la lisibilité du texte, on peut aussi augmenter la taille de celui ci.
Sébastien : Oui je suis au courant, mais je n’ai pas souhaité rentré dans les détails techniques ici. Donc effectivement ce qu’il faut c’est que le contenu soit le plus haut possible dans la source HTML de la page générer. Par défaut sur de nombreux thèmes avec colonne à droite cela est le cas et c’est pour cela que j’ai conseillé ceux ci.
LostInBrittany : Merci. Je mets tout mon coeur à l’écriture de ces billets. Dans quelques billets on devrait arriver à des sujets qui pourront aussi servir aux bloggueurs déjà en place. So wait & see & comment
Le 5 September 2006 à 0:02Commentaire by lyonelk
lyonelK : Personnellement cela me soule de scroller à la souris. Je préfère largement les blogs ou l’espace réservé au texte est suffisamment grand et je pense ne pas être le seul Pour ce qui est de la lisibilité du texte, on peut aussi augmenter la taille de celui ci.
Moi aussi, je partageais ce point de vue. Or, les choses sont moins simples que cela. Et surtout mon propos s’adressait relativement à des textes relativement long.
Dans ce cadre-là, il est bon de s’arrêter aux règles de la typographie et aux facultés de lecture de l’oeil.
Et alors, la lisibilité est au moins autant affaire de taille de caractère que de type de fonte et de nombre de signes par ligne.
L’intervention de Jean-François est utile, car elle m’a obligé d’aller à la recherche de textes et de gens experts en norme de typographie.
Je vous invite à aller lire le texte suivant où vous apprendrez que
Le lecteur « attend » d’un journal des lignes très courtes (26 caractères par ligne), moyennes pour un magazine (40 caractères), longues pour un livre (60 caractères et plus).
(La lecture facile à l’écran)
L’article poursuit en prônant en taille normale une largeur d’environ 80 caractères (calcul approximatif, variant suivant les caractère choisit) relativement aux écrans d’ordinateur.
Pour le reste, je pense qu’une observation un peu fine des journaux et magazine en ligne (Libération, Le Monde, Le Figaro, Le Nouvel Observateur etc.) sera également instructive.
Le 5 September 2006 à 0:06Commentaire by lyonelk
Petit complément, comme ce site a choisi une largeur flexible, vous pouvez faire l’exercice sur cet article pour déterminer dans quelles situations votre lecture est plus ou moins facilitée en fonction de sa largeur. Inférieure ou supérieur à 80 caractères par ligne ?
Le 5 September 2006 à 0:28Commentaire by Jean-François Ruiz
Super ce commentaire ! Très bon complément d’information. Bien vu aussi sur le fait de tester la largueur directement ici
J’ai fait le test, et je maintiens ma préférence pour le non-scrolling. Faites le test et dîtes moi ce que vous préférez. Je vais surement revoir le design de ce blog d’ici quelques temps alors aidez moi à le faire au mieux.
Le 5 September 2006 à 13:00Commentaire by Le blog de LostInBrittany
La lecture facile à l’écran
En parcourant les commentaires de ce billet de JF Ruiz, j’ai trouvé un lien vers un article très intéressant sur comment présenter des textes longs sur le web.
L’article décortique en détail tous les aspects de la présentations des…
Le 20 November 2006 à 4:24Commentaire by JF Ruiz : Révolution Web 2.0 en Live !
[…] 04/09/2006 02:31 Choisir le design de son blog et l’adapter à son messageQuelques astuces pour donner la bonne image à son blog. […]
Le 9 February 2007 à 17:39Commentaire by Yazerty
JF > Pour la largeur mieux vaut rester en dessous de 70-80 (maximum) pour un confort de lecture optimal. Comme dit précédemment il n’y a qu’à voir l’expérience des journaux : ce n’est pas pour rien qu’il y a une présentation en colonnes sur les grandes pages des journaux ;-).
Sinon pour le menu à droite, seul le code compte effectivement. Et un menu à gauche peut parfaitement avoir son code après le contenu si tout est en css. Si le thème prévoit de mettre le code du menu avant le contenu alors on peut le déplacer après manuellement. Ca ne changera rien à la présentation finale normalement. C’est donc une question de goût pour le menu à gauche ou à droite…
Encore que l’oeil navigue naturellement de la gauche vers la droite. Le menu à gauche permettra donc de donner une image plus structurée et donnera également une meilleure visibilité aux publicités (du fait que l’oeil balaiera d’abbord le côté gauche pour prendre ses repères…). Le menu à droite conviendra mieux pour une lecture plus aisée du contenu.

Adresse de TrackBackRSS flux RSS des commentaires sur cet article.

Laisser un commentaire

Nom (required)

Mail (jamais publié) (required)

Site Web

Notifiez moi des nouvelles réponses par email