Etude de cas : Habillage du Blog Typepad Espace Innovation

Le projet

Le blog du GIe Espace innovation est un projet initié par les trois sociétés RC&A, Factorielles et Avensi Consulting.

Le but du projet est de créer une tribune d’expression pour le GIE avec une forte importance donnée à la participation et réactions des visiteurs/lecteurs.

Cahier des charges :

Nous fixons un rendez-vous physique pour parler du projet, dégager les pistes de travail initiales tant d’un point de vue technique que graphique.

Créer un habillage personnalisé pour le blog du GIE Espace Innovation hébergé sous plateforme Typepad.

Rechercher et intégrer tout élément complémentaire nécessaire au bon fonctionnement du blog.

La cible client du blog : cabinet comptables, experts comptables qui sont le coeur de cible des 3 sociétés fondatrices du GIE.

Les textes seront rédigés par le client, ils sont déjà en partie réalisés et seront finalisés lors de la phase de production.

Il y aura certaines pages considérées comme statiques : A propos, Actualités générales, Contact.

La présentation générale de l’information devra tourner autour de ce schéma :

  • Bandeau du haut : Logo EI + slogan Puis à droite, logos des partenaires
  • Onglets : Accueil, A propos, Actualités, Contact
  • Article (2/3 de la page) : Date de l?article – Titre de l?article – Auteur – Version imprimable – Faire suivre cet article – Lire la suite?
  • Bandeau de droite : Rechercher – S?inscrire à la newsletter – Syndication – Les commentaires récents – Les notes récentes – Archives – Catégories – Liens utiles (avec logo)
  • Bandeau bas de page : Différentes mentions – Haut de page – Accueil

Quelques aménagements ont été réalisés par la suite pour cause de limitations de possibilités de personnalisations « dynamiques » de l’architecture des blogs typepad hébergés. Ces aménagements simplifiaient le travail à effectuer et évitaient d’avoir à décomposer l’ensemble des modules/boucles intégrés dans les pages de template typepad.

En nous basant sur différents types de design existants et sur l’étude de la cible client, nous déterminons l’esprit graphique qui devra être donné au blog : Clair, lisible, efficace, professionnel, « classe ».

Comme il s’agit d’un projet suivi et piloté par plusieurs personnes géographiquement éloignées, un espace de collaboration et d’information est créé en ligne pour que chacun puisse suivre les évolutions du dossier au fur et à mesure de son avancement. Cet espace est secondé par la mise en place d’une « mailing list » classique couplée à un abonnement par mail au flux RSS de l’espace de collaboration : Tous les participants au projet sont prévenus par mail dss publication d’un nouveau contenu.

Passons à la production.

Le logo

Le logo est déjà existant, il servira donc de base à la construction chromatique de l’ensemble du graphisme : bleu, vert, orange et bien sûr, du gris.

Logo du GIE Espace Innovation

L’interface graphique du site

Le layout général

Suite à différentes discussions le contenu général a été un peu repensé et l’architecture a été revue pour l’usage à court terme du blog et la prise en compte de son évolution future.

Voici la première pré-maquette proposée :

première maquette graphique du projet Espace Innovation

Oui, je pousse toujours mes pré-maquettes assez loin, souvent proches du rendu final d’ailleurs et ce d’autant plus que la piste de travail est claire.

Après confrontation de la maquette avec les clients, plusieurs modifications sont effectuées :

  • La couleur Orange est trop dominante, étant donné que c’est un peu la couleur « affiliée » au RSS, il est hors de question de changer la couleur de ce pavé. De plus le titre orange, doit le rester, pour ne pas déséquilibrer l’ordre des couleurs et le balisage de lecture créé par les blocs verts (date et bloc de colonne de droite en diagonale). Nous allons donc opter pour un remplacement des couleurs des onglets vers du gris, ce qu’il y a de plus neutre.
  • Les logos en haut à droite ne sont pas assez mis en avant, il va donc falloir modifier cette partie pour donner à chaque logo d’entreprise la visibilité qu’il mérite. Décision est prise d’essayer d’en faire une animation ou les logos seront affichés les uns après les autres.
  • Pour la colonne de droite, l’ensemble est validé (en attendant l’ajout de logos liés aux derniers liens du bas) sauf le bleu utilisé qui est trop aérien, trop léger, nous allons essayer de lui trouver une teinte plus soutenue.

Ce qui nous donne la version suivante (sans les logos qui se retrouvent maintenant à part) :

deuxieme maquette graphique du projet Espace Innovation

Qui vous semble forcément très proche, mais les petits détails de modification sont très importants avec par exemple, l’ajout d’un deuxieme article dans la maquette pour que le client se rende bien compte du rendu final potentiel des articles « en résumé » et du rapport de force entre les gris typographiques et les blocs d’information de la colonne de droite.

Le bleu des blocs n’est pas encore assez soutenu, je vais donc aller directement au bleu le plus foncé que l’on retrouve dans le logo. Les liens de bas de page vont être remontés dans le bloc blanc d’information principale pour leur donner une meilleure lisibilité.

Le rendu final

Le plus simple est d’aller voir directement le site en ligne à cette adresse : http://www.espace-innovation.fr/

Vous y trouverez quelques variations mineures par rapport à la maquette pour une simple raison, je n’ai pas la main totale sur la structuration html car nous sommes dans le cas d’un produit « tout-en-un » hébergé.

En fait, il est possible de pousser encore plus loin la personnalisation graphique d’un blog typepad, mais le ratio temps passé/utilité n’est pas intéressant, d’autant plus que c’est prendre le risque que vos modifications ne survivent pas à une mise à jour du moteur typepad.

Technologie employée

C’est un blog typepad, tout simplement. Comme vous pouvez le voir, il est fort possible de totalement personnaliser un blog typepad.

Les besoins en terme de graphisme ont obligé une restructuration avancée du rendu html du blog, mais il est fort possible d’arriver à des designs évolués en gardant la structure par défaut, il faut dans ce cas s’adapter, ce qui n’est pas toujours simple.

Si je devais avoir un reproche à faire à typepad, c’est l’impossibilité de créer un template sur mesure de la partie de gestion des commentaires, de fait j’ai été obligé de m’appuyer sur la structure typepad pour leur donner un habillage en adéquation avec celui du blog :

habillage partie commentaires typepad

Pensez-y si on vous commande un habillage de blog typepad, car si vous repartez d’une feuille de style vierge appliquée à une structure html que vous aurez créée sur mesure, cette partie ne sera plus habillée du tout, ce qui fait désordre.

Cerise sur le gateau

Le GIE a mis en place un mailing pour communiquer sur son blog et son actualité, c’est donc tout naturellement que nous avons créé une matrice html dont la charte graphique est proche de celle du blog :

matrice de mail html pour le GIE

Avec la prise en compte de la possibilité des clients mails à ne pas afficher les images ou à les bloquer :

matrice de mail html pour le GIE sans images

Ce qui fait que le mail reste lisible, ce qui n’est pas le cas de nombreux mails de prospection que je reçois chaque jour.

Pour finir

Un travail très intéressant, des clients avec un projet pensé et travaillé mais ouverts aux conseils d’un professionnel du secteur, ce qui est très appréciable.

La maquette initiale a presque coulé de source, le travail en amont ayant été bien réalisé et les discussions sur les besoins et envies bien cadrées. Il n’y a pas de secrets, si vous savez écouter votre client, décrypter les non-dits et que votre client est en pleine confiance, tout se passe pour le mieux dans le meilleur des mondes.

Le fait de travailler sur une plateforme sur laquelle les possibilités de personnalisation du code sont quand même limitées est également très enrichissant, même si j’avais déjà eu affaire à typepad, entre autres pour le site de Ze Village.

En tous cas, bonne journée à vous, et travaillez bien.

Mise en ligne de projet : Blog du G.I.E Espace Innovation

Projet d’habillage et de création de template personnalisé de blog Typepad :

Capture d'écran du site espace-innovation.fr

Espace Innovation a été créé à l?initiative de ses trois membres fondateurs, les sociétés RC&A, Factorielles et Avensi Consulting, afin d?aider exclusivement les experts-comptables à formaliser et à professionnaliser leur offre de conseil et plus généralement leur service client.

Source : http://www.espace-innovation.fr

Projet intéressant, des clients motivés et impliqués comme on aimerait en voir plus souvent.

Comme d’habitude, un billet parlant du déroulement du projet devrait être rédigé dans les jours à venir.

PS : je suis quand même un peu jaloux, même pas une journée d’existence officielle et déjà 26 commentaires.

Quelle est l’utilité des plateformes de sites internet "tout en un" ?

En dehors de nos CMS adorés ou de nos développements sur mesure, il existe un certain nombre de plateformes d’hébergement proposant des solutions de gestion de sites internet.

Ces plateformes proposent à leurs clients des sites « clé en main » avec des fonctionnalités plus ou moins avancées, du blog à la boutique complète en passant par le site corporate et le catalogue produit.

Si je vous dis typepad ou blogger, vous voyez de quoi je veux parler, même si ces deux exemples ne proposent à la base que des offres de blogs ?

Bref, ce type d’offres existe presque depuis les débuts d’internet et jusqu’à maintenant je ne m’y étais que peu intéressé.

Sauf que les produits évoluent, en bien, et c’est sans honte que j’avoue avoir été approché par une de ces plateformes pour créer du template ou revendre leur solution à mes clients, leur produit me semble de qualité mais je n’ai pas encore pris de décision pour l’instant.

Pour revenir à la question à l’origine de ce billet je vais essayer de dresser une liste assez simple de l’utilité de ce type de plateformes tant du point de vue du client lambda que du professionnel du web.

Utilité pour le client lambda :

  • Il peut se créer son blog, son site internet en 5 minutes top chrono avec un rendu professionnel.
  • Il peut du coup n’avoir qu’un seul interlocuteur puisque certaines de ces plateformes gèrent également le nom de domaine (attention je ne dis pas forcément que c’est bien, juste que pour beaucoup de personnes, c’est pratique).
  • C’est un coût maîtrisé, le client sait combien il va payer chaque mois.
  • l’investissement initial est moindre : pour une jeune société avec un petit capital, créer son site internet peut être un énorme investissement.

Utilité pour le professionnel :
Attention, j’entends ici par « professionnel », un indépendant dans mon cas, principalement Webdesigner pour qui la partie gestion/hébergement/entretien n’est pas à forte valeur ajoutée.

  • Peu ou pas de besoins spécifiques en programmation.
  • Des produits techniques « clé en main » répondant souvent assez bien à des besoins de projets « simples ».
  • Les mises à jour techniques/failles de sécurité sont gérées par la plateforme.
  • On peut souvent gérer de multiples comptes et nombre d’options que l’on ne trouve pas sur un CMS classique sont proposées (principalement des fonctions liées à l’hébergement).
  • Centralisation des projets et uniformité des solutions.

Inconvénients (et oui, tout n’est pas rose dans le monde des plateformes) :

  • Prise en main souvent limitée au niveau de la structure html.
  • De fait il est souvent difficile de travailler l’accessibilité en profondeur.
  • Technologies souvent propriétaires.
  • Portabilité des projets pour des évolutions futures loin d’être optimum.
  • Possibilités d’évolutions limitées, bien que souvent ces plateformes sont assez réactives face aux besoins de leurs utilisateurs.
  • Coût important sur le long terme sachant qu’en fonction des besoins des projets ces plateformes font des abonnements allant de 15 à 60 euros et plus par mois.

Il n’empêche que pour des projets assez « simples », ce type de solutions peut parfaitement suffire pour gérer des sites internet, elles proposent même assez souvent des gestions de médias très avancées là où il faut souvent bidouiller pour obtenir des outils similaires sur nos CMS préférés.

Je vais essayer à l’avenir de faire quelques tests de plateformes du genre qui me semblent prometteuses, je vous tiendrai au courant.

Limitation des habillages avancés de blog Typepad

Vous pouvez faire des habillages avancés en éditant le code HTMl et la feuille de style CSS…

Ils oublient juste de rappeler pour les webdesigners qui ont la mémoire courte qu’il est impossible de modifier la structure de la page de prévisualisation de commentaires et du captcha… j’ai l’air fin avec mon nettoyage de balises moi.

Du coups faut feinter en jouant avec la structure html par défaut qui est lourde… mais alors lourde.

C’était mon petit aparté semi coup de gueule du jour, je retourne tout de suite terminer mon intégration.