Refonte d’un design de blog [Etude de cas]

Refonte d’un design de blog [Etude de cas]

Dernièrement, j’ai eu l’occasion de refondre le design d’un blog.

L’ensemble du travail fût un vrai plaisir : des premiers échanges avec le client, à la coopération avec la graphiste chargée de re-définir l’identité graphique, en passant par la réalisation à proprement parler. C’est suffisamment rare pour le souligner !

Tant et si bien que j’ai voulu vous présenter ce travail comme une étude de cas : les besoins, les solutions et les difficultés rencontrées.

Le sujet

Le blog qui a subi notre lifting est « Le Blog du Trading » , animé avec succès par Vincent Fristch, amateur passionné de la bourse (j’espère que je dis pas de bêtise…la bourse et le trading, c’est kif-kif-bourrico non ?).

Les besoins

Côté design

Vincent savait ce qu’il voulait : un design sobre, épuré et sérieux à l’image du sujet traité dans ses colonnes.

Loin de la vague « gagnez de l’argent », Vincent associe le trading à un loisir passionnant, ayant pour « 2ème effet kiss-coll » la possibilité d’arrondir ses fins de mois. Pas question donc de carrosserie rutilante ni de liasses de billets!

Côté fonctionnalités

Après plusieurs échanges, et malgré un skype capricieux, nous avons cernés les besoins de Vincent :

  • un diaporama des articles en page d’accueil, complètement configurable en back-office
  • une zone sociale qui regroupe à la fois les compteurs des réseaux sociaux et les liens vers chaque compte
  • un pied de page pour y placer un « Disclaimer »
  • diverses modifications dans les fonctionnalités existantes

Les choix effectués

Carine Santi-Weil, web-designer aux multiples talents, lui a concocté un design à la fois sérieux et relaxant, a refait son logo et la bannière principale, autour du thème du trading.

avant/après - la bannièreAvant (à gauche) / Après (à droite)

Grâce au thème Mystique utilisé, Vincent bénéficiait d’une grande liberté pour modifier son blog. Il m’a donc semblé logique de conserver cette base, afin que ce relooking ne soit pas synonyme d’une perte de iberté.

J’ai donc opté pour un thème enfant, qui viendrait par-dessus le thème actuel, pour transformer son apparence sans altérer ses fonctionnalités.

Le diaporama

Le diaporama ne fût pas simple à trouver car je voulais le beurre et l’argent du beurre ! En effet, il me fallait un plugin suffisamment orienté « développeur » pour me donner la possibilité de modifier le code HTML et CSS, tout en étant aussi orienté « utilisateur », afin que Vincent puisse en changer les paramètres (vitesse, nombre de slides, transitions…).

Je savais dès le début qu’il me faudrait probablement opter pour un plugin premium : et c’est effectivement sur CodeCanyon que j’ai trouvé mon bonheur !

La zone sociale

La plus grosse difficulté est venu du plugin social. Il est en effet TRES difficile de trouver un plugin qui rassemble les compteurs des différents réseaux répandus en francophonie : nombre de fans Facebook, de followers Twitter, d’abonnés Youtube, les inscrits à Google+ et les suiveurs FeedBurners.

Initialement, nous avions inclu le nombre d’abonnés WordPress…avant de nous rendre compte qu’il ne s’agissait pas d’un réseau social !

J’ai bien dû tester une demi-douzaine de plugins sur la trentaine dont la description me semblait pertinente. Il faut dire qu’il y a de quoi perdre son latin, entre:

  • les plugin de partage : pour qu’un visiteur partage à ses amis votre article
  • les plugin d’abonnement : pour qu’un visiteur visite votre compte et s’y abonne
  • les plugin de compteurs, qui sont de 2 types (sinon c’est pas drôle) : les compteurs du nombres d’abonnés à un réseau, et les compteurs du nombre de partage d’un article

Les rares fois où je trouvais un plugin qui affiche effectivement les compteurs relatifs aux comptes des réseaux sociaux, un réseau manquait toujours à l’appel !

Finalement, j’ai trouvé l’impossible.

avant/après - la zone sociale Avant (à gauche) / Après (à droite)
A savoir : les API des différents réseaux sur lesquels est branché le plugin pour récupérer les compteurs sont souvent capricieuses : Twitter en tête. Il n’y a malheureusement rien à faire pour corriger cela.

Le disclaimer

Toute déclaration destinée à préciser ou de délimiter le champ des droits et des obligations qui peuvent être exercés et exécutés par les parties dans une relation légale. (wikipédia)

Sur un site web, il s’agit d’une zone de texte libre dans laquelle le webmaster peut communiquer. Côté technique, rien de plus simple : création d’une sidebar horizontale sous l’actuelle sidebar du pied-de-page.

En pratique, ce fût un sacré défi ! J’ai commencé à créer ma sidebar comme à mon habitude, mais celle-ci ne s’affichait pas. J’ai alors tout tenté pour résoudre ce problème…jusqu’à me rendre à l’évidence : on ne peut pas créer de sidebar supplémentaire avec le thème Mystique. Pourquoi ? Mystère…

Par contre, j’ai remarqué que Mystique mettait à disposition une sidebar spéciale, dans laquelle les widgets ne sont pas affichés à un endroit voulu, mais librement à l’aide d’un shortcode. Je pensais être arrivé aux bouts de mes peines. Mais non : impossible de faire afficher le moindre widget !

J’ai fini par coder en dur dans footer.php, à mon grand regret (et celui de Vincent).

Si quelqu’un a la solution à cet épineux problème, je suis preneuse !

EDIT du 25/07/2013 : Merci à Patrice pour sa solution que je retransmets ici au propre.

Tout d’abord placez ce code dans le fichier functions.php de votre thème enfant :

// theme unique ID, used as theme option name, text domain for translations, and possibly other identifiers
// make sure there are no spaces in it if you're setting your own ID inside a child theme
defined('ATOM') or define('ATOM', get_stylesheet());

// the core; if you're reconfiguring Atom from a child theme, this line must be present as well
require_once TEMPLATEPATH.'/atom-core.php';

// and this function
if(!function_exists('atom')){
  function atom(){
    static $app;

    if(!($app instanceof Atom))
      $app = Atom::app();

    return $app;
  }
}

Ensuite, déclarer la sidebar, toujours dans le même fichier :

/* Ajout de la sidebar pour le disclaimer */
atom()->registerWidgetArea(array(
	'id'            => 'footer2',
	'name'          => atom()->t('Disclaimer'),
	'description'   => atom()->t('Active only if at least one of its widgets is visible to the current user. You can add between 1 and 6 widgets here (3 or 4 are optimal). They will adjust their size based on the widget count.'),
	'before_widget' => '<p>',
	'after_widget'  => '</p>'
));

Et pour terminer, affichez la sidebar dans le template de votre choix (footer.php pour moi) :

  <?php if(atom()->MenuExists('footer')): ?>
       <div class="nav nav-footer page-content">
          <?php atom()->Menu($location = 'footer', $class = 'slide-up'); ?>
       </div>
       <?php endif; ?>

Avant/Après final

La page d’accueil

avant/après - la page d'accueil Avant (à gauche) / Après (à droite)

Vue d’un article

avant/apres - la vue des articlesAvant (à gauche) / Après (à droite)

Avez-vous déjà repensé le design de votre blog ? Quelles difficultés avez-vous rencontrés ?

CSS, HTML, image, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

36 commentaires

  1. Bonjour Marie Eve,

    Super boulot, il est vrai que c’est agréable de peaufiner le design de son site je l’ai fait il y a peu ça prend un temps monstrueux mais c’est sympa quand on voit le résultat finale, la bourse ce n’est pas mon truc aussi, en lisant ton article j’aurais été au moins une fois dans ma vie sur un de ces sites.

    Je vois qu’il y a les blogs amis en pieds de page sur ton site et sur celui que tu as réalisé, j’ai lu quelque part que les back Link n’étaient plus d’actualités, je m’étais inscrit sur quelque annuaires avec mon ancien site dois-je les remettre en pied de page ?

    @mitié

    Répondre
    • Bonjour Sandrine,

      Je ne suis pas sûre de l’utilité des liens au point de vue SEO…mais je les laisse par soucis de « réseautage », à titre informatif.

      Tu as mis des liens sur ton site vers des annuaires ? Pourquoi ? Parce qu’ils te l’ont demandé (alors je dirais que le lien n’est pas de bonne qualité) ou parce que tu recommandes ces annuaires (alors laisse les) ?

      Répondre
      • Non les liens je ne les ais plus je me demandais justement s’il fallait les remettre.J’ai ma réponse.

        Merci pour ta réponse.

  2. Bonjour Marie-Eve,
    bien sympa l’histoire du plug-in pour compter tout le monde qui nous suit, je vais y jeter un coup d’oeil pour voir ce que je peux en tirer 😉
    Merci du partage en tout cas,

    A bientôt
    Benjamin

    Répondre
  3. Bonjour MarieEve,

    Je viens de tester en local sous wamp la dernière version de Mystique 3.3.2 http://digitalnature.eu/themes/mystique/

    Dans les widgets, il existe un emplacement Pied de Page dans lequel j’insère le widget Texte.

    Cordialement.

    Répondre
    • Complément, car je pense que ma précédente réponse ne répond pas à ton problème pour afficher le disclaimer.

      En fait, il faut 2 Pieds de page, alors voilà ce que j’ai fait:
      Dans le fichier footer.php, tu fait un copié collé de footer1 comme suivant:

      isAreaActive(‘footer1’)) > 0): // make sure there are visible widgets ?>
      <ul class="blocks count- clear-block »>
      Widgets(‘footer1’); ?>


      isAreaActive(‘footer2’)) > 0): // make sure there are visible widgets ?>
      <ul class="blocks count- clear-block »>
      Widgets(‘footer2’); ?>

      Et tu fais la même chose dans le fichier functions.php comme suivant:

      atom()->registerWidgetArea(array(
      ‘id’ => ‘footer1’,
      ‘name’ => atom()->t(‘Footer’),
      ‘description’ => atom()->t(‘Active only if at least one of its widgets is visible to the current user. You can add between 1 and 6 widgets here (3 or 4 are optimal). They will adjust their size based on the widget count.’),
      ‘before_widget’ =>  »,
      ‘after_widget’ =>  »,
      ‘before_title’ =>  »,
      ‘after_title’ =>  »
      ));

      atom()->registerWidgetArea(array(
      ‘id’ => ‘footer2’,
      ‘name’ => atom()->t(‘Footer’),
      ‘description’ => atom()->t(‘Active only if at least one of its widgets is visible to the current user. You can add between 1 and 6 widgets here (3 or 4 are optimal). They will adjust their size based on the widget count.’),
      ‘before_widget’ =>  »,
      ‘after_widget’ =>  »,
      ‘before_title’ =>  »,
      ‘after_title’ =>  »
      ));

      J’espère que les codes passeront, et que cela répond à ton problème.

      Bonne continuation

      Répondre
    • Bonjour à nouveau,

      J’ai repensé à votre question sur le disclaimer et je me demande si ma précédente réponse n’était pas un peu hâtive.

      En fait, ce qu’il faut c’est 2 Pied de Page dans les widgets.
      J’ai peu être une solution à ce cas en modifiant les fichiers footer.php et functions.php

      Je ne sais pas si je peux mettre le code ici.

      Cordialement

      Répondre
      • Bonjour patrice

        En effet il en faut un 2ème. Le code ne passera peut être pas ici, pouvez-vous me l’envoyer via le form de contact ? J’editerais l’article par après. Merci d’avance.

      • Je n’arrive pas à l’envoyer par le formulaire.
        Je l’ai envoyé par mail.

      • 2 petits compléments au code du fichier functions.php:

        Dans le code j’ai mis des balises commentaires , il faut les remplacer par // footer2. La première balise mêt en défaut à la ligne 177.

        Il est aussi possible de donner une autre nom que « Pied de page » dans les widgets et donc ne pas l’avoir en double avec celui déjà existant.
        sur cette ligne : ‘name’ => atom()->t(‘footer’),
        remplacer ‘footer’ par exemple ‘Pied de Page 2’

        Cordialement.

      • Je t’ai à nouveau envoyé un autre mail (avec ton formulaire on est pas copain apparament) avec les dernières informations.

  4. Bonjour,

    En tout cas, je dis bravo aussi à Carine pour la bannière.
    En arriver à illustrer un bœuf et apparament un ours pour le mot « dompter », le tout sans parler d’argent, je lui tire mon chapeau.
    On voit bien que c’est tout un art de maîtriser le graphisme.

    Merci MarieEve pour ce partage instructif. Pour le slider, je regarderais car il parait interressant.

    Bonne continuation

    Répondre
    • Bonjour Patrice,

      Le choix des animaux n’est pas anodin et vient d’une demande de Vincent. Si je me souviens bien, ils ont leur place dans la symbolique du trading.

      Répondre
  5. Je ne suis pas fan de la bannière, mais la hiérarchisation des informations et donc la lecture générale de la page est très bonne. Une page fonctionnelle et ergonomique : ce qu’attend précisément l’internaute.

    Répondre
  6. La structure de la page et surtout l’agencement des différents éléments me plait beaucoup.
    De surcroit, et comme cela a été dit, le plug-in compteur de visite est un outil très utile et je ne saurais trop conseiller son utilisation.
    Bonne continuation!

    Répondre
  7. Peu importe les tactiques que nous avez déjà mises en oeuvre pour booster le taux de conversion,Le design ne se réduit pas au travail d’un graphiste.Le design, c’est aussi du marketing.

    Répondre
    • Bonjour Julie,

      Je ne vois pas trop où vous voulez en venir… Pouvez-vous développer ?

      Répondre
  8. Je m’étais promis d’améliorer le design de mon blog tous les ans, j’ai raté l’occasion de tenir ma parole 2 fois déjà. Je me demandais encore s’il fallait tout changer ou ajouter de petites touches ci et là, mais là je crois bien que je vais commencer à voir quelques thèmes premium quelque chose qui me fait envie, et trouver le courage de coder un peu ce week-end…

    Répondre
  9. Ca du bien de vous retrouver , après pour le « lifting » je trouve qu’on pourrait qualifié ça comme du botox:) juste de une mis a jour et nouvelle disposition plus claire des billets, une nouvelle bannière qui se rapporte au slogan sinon voilà pour le contenue je sais pas ?

    Répondre
  10. Je le trouve très réussi, c’est sobre et simple, pas de chi chi inutile.

    Bravo.

    Répondre
  11. Au sujet du plugin social, il y a effectivement beaucoup de difficultés avec l’API Twitter en ce moment !

    Twitter a lancé une nouvelle version 1.1 de son API au mois de juin dernier. Et par conséquent tous les plugin / widget doivent être mis à jour.

    J’ai moi-même des problèmes avec mon Thème WP qui n’a pas suivi la mise à jour . J’ai perdu le fil des derniers tweets !

    Donc, le conseil est de bien vérifier la compatibilité de son Plugin / Thème / Widget avec Twitter 1.1.

    Très bon travail.
    Youcef

    Répondre
  12. Ah je savais pas que Word Press ne suivait pas tous les mis à jour
    merci pour l’info je vais allez verifier de suite

    Répondre
    • Bonjour Mireille,

      Que voulez-vous dire ? WordPress est ce qui se met à jour…ce sont les plugins qui doivent suivre…

      Répondre
    • Bonjour Mireille,

      Je me permets de préciser que je ne parlais pas de WordPress lui-même, mais du Thème installé.

      Certains Thèmes incluent nativement un module social, qui doit donc suivre les mise à jour des API tiers (comme Twitter par exemple)

      Ne vous précipitez pas à faire une MAJ complète de WordPress !

      Répondre
  13. Bonjour Marie-Eve,
    une petit commentaire pour te remercier encore une fois pour ce super boulot : sérieux, efficace et sympathique ! C’est suffisamment rare pour le signaler. J’ai eu de supers retours de mes lecteurs, appréciant l’aspect épuré du blog. Merci encore et à bientôt surement pour de nouveaux projets !

    Répondre
    • Bonjour Vincent,

      Je suis ravie que tes lecteurs apprécient ! Je dois dire que tout ça me donne furieusement envie d’engager Carine pour lifter Les Doigts dans le Net !

      Un projet de plus dans les cartons… 😉

      Au plaisir de retravailler ensemble !

      Répondre
  14. Bonjour,
    merci pour toutes les precisions ,Marie Eve et Youssef , j’avoue que je suis nouvelle dans le domaine et les mots technique parfois ne suivent pas 😉

    Répondre
  15. Merci pour cette étude de cas. Juste, je vous déclare une faute de frappe au niveau « J’ai comméncé à créer ma sidebar »

    Répondre
  16. Merci d’avoir partagé cette étude de cas. On peut voir que la présence de certains lecteurs peut vraiment aider en cas de problème! J’ai déjà eu l’occasion d’utiliser le thème mystique et c’est vrai que c’est pas facile de s’y retrouver…

    Répondre
    • Oui, c’est super de pouvoir se faire aider en retour par mes lecteurs. Intelligence collective !

      Répondre
  17. Vu d’Alexa

    Un mot sur l’augmentation spectaculaire du trafic survenue dernièrement à votre blogue et à celui de Vincent Fristch que vous avez joliment refondu récemment.

    Votre rang mensuel mondial brut s’est avancé de 392,630 à 104,214 du 15 juillet au 3 août , votre rang brut en France de 13,579 à 3,317 pour la même période. Félicitations !

    Son rang français, après être disparu le 22 juillet, est réapparu le 31 à 75,763 où il se maintient presque depuis. Gros 31 juillet.

    J’ai été alerté de cet heureux événement par quatre bouffées de demande à son Blogue du trading les 16, 23 et 31 juillet et le récent 3 août.

    Cette augmentation de demande et son reflet aux rangs régional et mensuel mondial d’Alexa ne fait-t-elle que coïncider à une ruée au vôtre depuis le 16 juillet ou cette dernière peut-elle l’expliquer ?

    – Coïncidence ou rapport ?

    – Je dirais rapport et répéterais félicitations !

    Répondre
    • Bonjour Robert,

      C’est assez incroyable ce que vous me dîtes…car s’il y a eu du spectaculaire dans mon trafic ces semaines-ci, c’est plutôt vers le bas :(

      Je suis punie de mon (total) manque de référencement, rappelée à l’ordre par la dernière mise à jour de Google.

      M’enfin, si mon rang s’améliore, tant mieux. Je ne m’en fais pas trop pour l’instant, la chute s’est stabilisée, y’a plus qu’à bosser pour remonter ! :) Merci quand même pour cette info réjouissante !

      Répondre
  18. Je sais, j’ai aussi vu d’Alexa. Le spectaculaire ne date que de deux semaines.

    Avant le 4 avril, vous étiez, sauf exceptions marginales, des 100 mille premiers sites rangés au mondial chez Alexa. De là, vous avez reculé graduellement jusqu’à vers 236,525 environ le 22 juin. Au trimestriel, vous êtes maintenant revenue sous 163 mille, au mensuel sous 100 mille et au français, sous 3,150.

    Je dirais que depuis janvier, 19 sites ou blogues sur 20 en France ont connu des pertes considérables de rangs. Il faut tenir compte de la méthodologie d’Alexa fondée sur une estimation du nombre de visiteurs à un site sur l’ensemble des internautes chaque jours. En gros, une forte croissance aux territoires en développement pourrait avoir des répercussions dévalorisantes en territoires développés.

    L’impact de Facebook et autres, je ne connais pas. La dernière mise à jour de Google date de quand ?

    Le rang mondial est une moyenne sur trois mois ce qui retarde la représentation des faits récents de 45 jours minimum, peut-être que c’est plutôt 67 ou 68. Les rang mensuels ou de pays sont plus actuels. La représentation au rang trimestriel serait en retard d’au moins deux mois sur la récente réalité, en tendance centrale. Ça prendrait un dessin ou un chapitre pour être clair.

    J’imagine que vous observez de Google. Les différences de méthodologie entre Alexa et Google feraient un bon sujet d’article. Qu’est-ce qu’un visiteur unique en particulier.

    À plus tard pour :

    Manque de référencement

    Répondre
  19. Manque de référencement

    J’ai noté la présence d’un lien chez Forttrafic à votre article Modifier son thème, 6 août.

    Au même blogue se trouve une référence à un article de Cédric Vimeux du 4 août où celui-ci mentionne Conseils de 11 blogueurs pour réussir vos vidéos sur Internet.

    J’imagine que la publication en deuxième de vos articles du 13 juin au 6 août à ce lien,

    http://www.forttrafic.com/aggregator/sources/2

    serait pour beaucoup dans la ruée à votre blogue depuis le 16 juillet et les changements qui s’en suivent aux rangs mondiaux d’Alexa et mensuel de pays, France.

    L’indice nombre de demandeurs a augmenté de 250 % et l’indice nombre de pages demandées de 240 % en montée du mouvement haussier. Si vous admettez le principe que sur terre, tout ce qui monte doit redescendre un jour, il faut vous attendre à une baise dans un mois et trois aux indices respectifs.

    Le nombre moyen de pages demandées par visiteurs est passé depuis le 26 juillet de 1,5 à 2,5 en dépit de l’augmentation du nombre de visiteurs. Les taux de rebond et de provenance de moteur de recherche n’ont pas varié pour la peine. Le temps de visualisation a augmenté de 3:15 à 3:50, ici encore en dépit de l’augmentation du nombre de demandeurs.

    Vu d’Alexa, les blogues d’Yvon Cavelier, de Cédric Vimeux et d’autres connaissent une revitalisation similaire à celle du vôtre. Il en va du nombre d’articles mais aussi sans doute d’un artéfact méthodologique. Allez savoir !

    Répondre
  20. Un blog sympa et un bon article, effectivement peaufiner le design de son blog est sympas mais surtout très utiles quand on voit la mauvaise qualité de certains… Sinon les liens sont évidemment important pour son SEO tout comme les partenariats avec d’autres blogs dans le même secteur d’activité ou non.

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint