J'ai testé: le nouvel éditeur de modèle blogger. Personnalisation et déboires...

Un article spécial "blogs blogger" sur le nouvel éditeur de modèles de blogs:

Devoirs de vacances, j'ai testé ce nouvel éditeur de modèles pour refaire totalement le modèle de mon blog enseignement. Voilà mes premières impressions sur le sujet.

Après quelques déboires, voilà la version définitive (ou presque) de mon autre blog, créée avec le nouvel éditeur, et personnalisée.

Cliquez pour agrandir

Utiliser l'éditeur de modèle: facile?

Oui! Il est très simple de choisir son modèle, puis de le personnaliser.

• De nombreuses images d'arrière-plan sont à notre disposition. Il y en a pour tous les goûts. A noter que certaines images sont "transparentes": un dessin en ombres chinoises qui prend la couleur de fond que l'on choisit.On peut également opter pour la sobriété: pas d'image de fond, mais un fond monochrome.
  

• L'éditeur nous guide également pour choisir la palette de couleurs de notre blog, en nous proposant une série de couleurs assorties.

• Les modèles eux-mêmes sont plutôt sympas et "modernes". Chacun offre de petits détails qui "finissent" bien le blog: des coins arrondis, une image dans laquelle s'inscrit la date, des pointillés comme séparateurs de liens dans les listes des gadgets...

Voir l'article avec captures d'écran: le nouvel éditeur de blogs blogger

Alors, tout beau tout rose, le nouvel éditeur de blogs blogger?

Pas tant que ça...

• Tout d'abord, pour aller plus loin dans la personnalisation, et pour en particulier utiliser un fond (background) personnalisé, il faut obligatoirement repasser par le code CSS HTML (je reviendrais sur ce point précis dans un article dédié).

• Ensuite, et c'est le plus problématique: tous ces nouveaux modèles ne sont pas 100% compatibles avec tous les navigateurs. La plupart du temps, les problèmes se posent lorsque l'on visite le blog avec Internet Explorer (pourquoi tout le monde n'utilise-t-il pas firefox?).

Les problèmes que j'ai observés dans différents blogs et avec mes essais:

• Les coins arrondis créent des problèmes d'affichage avec IE

• Avec IE, les gadgets et barre d'onglets de certains modèles "flottent" un moment avant de trouver leur place définitive.

• Avec IE, l'image de fond de certains modèles ne s'affiche pas immédiatement. A chaque clic sur un lien interne, le fond du blog devient monochrome (parfois cette couleur est proche de celle de votre fond, parfois non... et c'est vraiment moche!).

• Avec Chrome: certains effets d'ombre sur le texte (titre...) rendent le texte en question illisible.

Au final, de nombreux détails sympas ne le sont plus tant que ça... Mais tout dépend du navigateur utilisé par vos visiteurs. En général, les blogs photos et relatifs au web touchent des visiteurs familiers de firefox, qui savent bien qu'Internet Explorer ne lit pas les codes de nos blogs comme il le faudrait. Ils ne seront donc pas choqués par ces problèmes d'affichage.
Par contre, Internet Explorer reste largement utilisé: plus de la moitié de mes visiteurs pour Le coin des petits, qui viennent juste consulter mon blog, et n'ont pas leur propre page web. Je voulais donc un modèle qui ne paraisse pas trop "instable".

Mes déboires pour créer le modèle de mon autre blog:

• J'ai choisi un premier modèle à coins arrondis, que j'aimais beaucoup. Mais j'ai du faire marche arrière, après avoir constaté trop de problèmes d'affichage avec IE, que nous ne sommes pas parvenus à résoudre. (Lorsque j'appelle au secours, Essere accourt. Mais même avec une feuille de style spécial "IE", le résultat n'était pas assez "stable" sous IE).

Problème d'affichage avec Internet Explorer: à chaque clic sur un lien, le joli fond rose dragée tout en transparence de mon blog devenait noir une seconde. Les gadgets et onglets "flottaient" avant de se fixer à leur place définitive. J'ai dû renoncer à ce modèle.
Cliquez pour agrandir

• Je suis donc passée à un second modèle, avec quelques petits détails qui me plaisaient bien, comme l'image dans laquelle s'inscrit la date. Cette fois, ça a été au tour de Chrome de faire des caprices (c'est d'ailleurs la première fois que je constate des problèmes de ce genre avec Chrome): certains effets d'ombre presque imperceptibles altéraient la fonte du titre des gadgets. Cette fois, nous avons vite trouvé la solution: désactiver ces effets d'ombre dans le code.

Personnaliser son modèle:

Le problème, avec tous ces nouveaux modèles, c'est que l'on se retrouve comme un petit enfant dans un magasin de friandises: je veux tout! Les coins arrondis, la transparence sur la barre d'onglets, les pointillés comme séparateurs... A chaque modèle ses détails "cousus mains".
Et puis, il y a ces images de fond qui ne nous plaisent pas forcément. Pour Le coin des petits, je voulais vraiment rester dans un décor "maternelle", et reprendre les dessins qui accompagnent le blog depuis sa création.

• J'ai donc créé un arrière-plan personnalisé que j'ai substitué à l'image de fond. (Tutoriel grand débutant à suivre. En attendant, pour résumer: on crée son image, on l'héberge ailleurs que chez Picasa, qui n'accepte pas les images de très grandes tailles, et on recopie simplement son adresse à la place de l'adresse de l'image de fond imposée, dans le code HTML de son blog.)

• J'ai ensuite inséré ma bannière d'entête, et je me suis aperçue que dans le modèle que j'avais choisi, cette bannière était trop près des bords (pas de marge entre la bannière et la navbar ou la ligne d'onglets): première incursion obligée dans mon code HTML CSS pour créer une marge autour de ma bannière!
  

J'ai ensuite fait quelques caprices:

• La couleur de la "bulle" dans laquelle s'écrit la date ne me plaisait pas. Comme pour le fond, j'ai juste recréé une bulle (format png), je l'ai hébergée et substituée à la bulle marron d'origine.

• Quelques petits détails ne me plaisaient pas non plus: un pied de page trop voyant, des titres de gadgets que je voulais en petites majuscules (small-caps), des séparateurs de listes en pointillés, ou à effacer... Là encore, rendez-vous dans le code CSS HTML pour personnaliser ces détails (Merci Essere!).

Conclusion:

Personnellement, j'aime bien les nouveaux modèles blogger, qui incitent plutôt à l'austérité, et qui vont peut-être enfin venir à bout de la réputation des blogs blogger: "Ils se ressemblent tous". Mais pour mon blog Le coin des petits, j'avais quelques contraintes: un design "maternelle", une palette de tons en liaison, et des dessins à intégrer, et j'ai dû remonter (un peu) mes manches.

Si l'on trouve le modèle qui nous convient dès le départ, tout va bien. Par contre, pas si simple de personnaliser son propre modèle, en dehors des classiques couleurs de fonte et de fond.

Dernière réserve: les problèmes d'affichage qui peuvent se poser avec certains navigateurs (en particulier sur les effets "coins arrondis" et "ombres".)

Si l'on veut se lancer dans un grand changement de modèle, mieux vaut:

• Opter pour des modèles simples et vérifier l'affichage de son blog dans différents navigateurs.

• Sauvegarder AVANT toute modification le modèle actuel de son blog. Si le résultat ne convient pas, on peut alors revenir au modèle précédent.

• Ne pas hésiter à se créer un "blog-brouillon" pour faire ses expériences.

Attention: si vous avez rajouté des codes dans votre blog (en particulier les codes pour google analytics ou autres), ils seront automatiquement effacés dès que vous aurez validé le nouveau modèle depuis l'éditeur. Il faudra donc ne pas oublier de les replacer manuellement dans votre code HTML.

Le mot de la fin?
Depuis que j'ai fouiné dans ce nouvel éditeur de modèles, et fait quelques expériences, l'idée de refaire le modèle de mon blog photo me titille. (Pour alléger le poids des pages, l'assortir à la fois à mon autre blog et à mon port-folio.) Je vais attendre quelques "retours" de mes visiteurs sur "Le coin des petits", et qui sait si dans quelques semaines, je ne me lancerais pas dans la création d'un nouveau modèle ici aussi?

Je vous ai livré dans cet article mes impressions "à chaud" sur le nouvel éditeur de modèles blogger. Je reviendrais plus en détail sur le sujet fin Août: j'aurai un peu plus de recul, et beaucoup de blogueurs seront rentrés de vacances.

N'hésitez pas à laisser en commentaire vos remarques et expériences personnelles: le nouvel éditeur est encore très récent, et on trouve beaucoup plus de questions que de réponses, lorsque l'on fait une recherche sur internet sur le sujet.