Un nouveau template responsive design pour mon Blogger Blog

By Crack-net - 17 mars 2013 11 Comments




A l’instar de mon collègue Coreight, j’ai finalement décidé de faire légèrement évoluer le thème de mon blog. Accédant parfois à mon blog depuis mon Smartphone et ma tablette je reste souvent sur ma faim quant au résultat affiché sur les appareils mobiles. 

Or, ce type d’équipements c’est supposé être l’avenir d’internet (même si à ce jour, de mon point de vue, ça ne vaut pas encore ni l’ergonomie, ni le confort et encore moins la productivité que confère l’ordinateur), et je constate d’ailleurs que mon blog est de plus en plus visité depuis ce type d’appareils.

image   Version PC de Crack-net

image
Version mobile de Crack-net



Fort de ce constat, il n’y avait plus qu’à…. Plus qu’à?
  • Utiliser les versions mobiles par défaut de blogger… Assez limité en terme de design et de fonctionnalité ou alors il faut codouiller… Pas envie ;-)
  • Me débrouiller pour optimiser la version mobile de mon template… Humhum… J’aurais plus vite fait de trouver un template avec une chouette version mobile…
  • Utiliser un template qui s’adapte de manière optimale à tous les appareils : ordinateurs, Smartphones, tablettes, Web TV… On parle ici de Responsive design ou, dixit Wikipédia, de site web adaptatif.
N’en déplaise à ses détracteurs, Blogger est une plateforme de blog solide et très souple à la fois, autorisant tout le nécessaire et suffisant pour bloguer de manière optimale à condition de mettre parfois les doigts et les neurones dans le code. La communauté utilisant cette plateforme est très réactive et à l’affut de toutes les mises en œuvre techniques susceptibles de compenser ses quelques lacunes. Aussi, on peut facilement trouver en ligne des Templates de qualité, gratuits et payants, “SEO friendly”, au même titre que pour WordPress ou Joomla. Il en va de même pour ce qui est des widgets et autres scripts même s’il en coutera parfois quelques minutes/heures de débogage.

Aussi, après quelques recherches et après avoir abandonné l’idée de coder moi même( car pas assez compétent), j’ai trouver quelques Templates qui répondaient à mes critères :
  • Responsive et s’adaptant à n’importe quelle résolution d’écran
  • Personnalisable
  • Au moins aussi rapide à charger que son prédécesseur
  • Esthétique (c’est relatif)
  • Gratuit
J’ai opté pour le template MyExtraNews made in Indonesia, codé par le webmaster de MKR et qui correspondait au cahier des charges. Un peu de customisation, de widgetisation et de caféine et j’ai pu l’adapter à mes besoins en reprenant même les éléments de bases de l’identité graphique du précédent Template. Il reste encore quelques détails à régler mais ma personnalisation du Template est fonctionnelle comme vous pouvez le constater.

Vous pouvez réduire la taille de la fenêtre de votre navigateur pour voir la réactivité et l’adaptabilité du design à la résolution de l’écran.

Le rendu visuel est assez classique (c’est dans les vieux pot qu’on fait les meilleures…) et à l’exception de la page d’accueil et de son widget  qui met en évidence certains articles choisis, vous ne serez pas trop dépaysés.

Maintenant à vous de me dire ce que vous en pensez.

11 commentaires to ''Un nouveau template responsive design pour mon Blogger Blog"

ADD COMMENT
  1. Pour la version mobile, je pense qu'il faut faire au plus simple, et les Templates de Blogger sont très bien pour cela. La moindre image trop lourde ou javascript mal foutu fait coincer les navigateurs mobiles malgré la la 3G+ et 4G. J'utilise la 4G depuis son lancement à Lyon et j'ai toujours autant de difficulté à accéder à pas mal de sites.

    RépondreSupprimer
    Réponses
    1. Sinon pas mal le coup de l'image Anonymous pour les commentaire anonymes :-) Suis-je un Anonymous introverti !

      Supprimer
    2. L'image anonymous n'est visible que sur chrome mais pas sur les autres navigateurs... faut que je vois ça...

      Supprimer
    3. J'aurais bien aimé que tu me dises ton ressenti en terme de lenteur, de fluidité de chargement...

      Supprimer
    4. Au redimensionnement de la fenêtre du navigateur, tes éléments se repositionnent très bien. Niveau rapidité de chargement, j'ai rien à dire, et blogger est connu pour être une des plateformes de blog les plus rapide, je suis sur blogger aussi.
      Après si tu veux mon avis ton header est trop simpliste, la date et l'heure en haut, c'est pas vraiment utile, surtout que ça implique un code JavaScript qui même à moindre échelle bouffe un poil sur le chargement de page, et je suis pas fan de la disparition des liens dans ton footer au survol. Ils prennent la couleur du pied je pense . quand on déroule le menu "Gratuit" une flèche indique la droite mais le sous menu apparaît à gauche. est-ce volontaire ?

      Supprimer
    5. Merci je prends note de tes remarques et notamment pour la date et le titre redondant, je comptais les supprimer de toute manière.Je vais essayer de mettre davantage à profit l'espace du header

      Supprimer
  2. Très bonne idée :-D
    Je suis d'ailleurs surpris que peu de blogs high-tech soit équipé en thèmes responsives, on se doit d'être à la pointe ! (ou pas)
    En tout cas ça rend très bien chez toi, on retrouve le design précédent, l'affichage se fait bien sur les différentes résolutions (sans doute bien mieux qu'avec mon thème bricolé main), et je ne note pas de problème de performance.

    Beau travail :-)

    (petite question en passant qui me chagrine sur blogger : y'a pas moyen de commenter avec Gravatar pour voir sa belle tronche s'afficher ?)

    RépondreSupprimer
    Réponses
    1. En effet étonnant que ce type de design ne se généralise pas encore dans notre champs d'activité...

      il me reste encore à bricoler des boutons de partage flottants et responsive... Mes tests ne sont pas encore concluant...

      Pour les gravatar ce n'est pas possible avec le système de commentaires natif mais en externalisant avec un système tiers (comme disqus) c'est faisable...

      Supprimer
  3. Pas mal les smileys ! Comment les as-tu ajouté ? :-?

    RépondreSupprimer
    Réponses
    1. C'était déjà implémenté dans le template que j'ai modifié mais je peux te filer le code si tu veux... Je t'avoue que je me tâtais pour les virer :-?

      Supprimer
  4. il est vraiment bien ton template. (h) les smileys sont sympas, tu devrais traduire le texte en français à l'occasion

    RépondreSupprimer

Recevez par mail les nouveautés de crack-net