Voici la 2ème partie de cette étude de cas. Après le logo il y a quelques jours, voici le processus de création du blog Tecchan.
Introduction
Je suis rentré de mon dernier voyage au Japon avec une passion pour les trains (oui, comme Sheldon), je suis inscrit sur un forum spécialisé mais j’avais envie d’un lieu ou partager mes projets et mes photos sur l’univers des trains japonais et le modélisme ferroviaire. C’était donc le prétexte rêvé pour un projet comme je les aime: logo, identité et site web!
Le briefing
La publication d’articles ne devait pas être compliquée et la gestion devait être facile. J’ai longtemps hésité entre un Tumblr ou un WordPress. La flexibilité de WordPress contre la simplicité d’un Tumblr. Ce qui m’a finalement décidé à choisir WordPress est sa réelle force en tant que plate forme de blog: commentaires, catégories, pages, etc.
Le design du blog
Comme je voulais lancer le site rapidement, j’ai commencé par chercher un thème WordPress servant de base pour pouvoir le modifier. J’ai trouvé Zexee de Design Superhero qui m’a beaucoup plu: textures, rubans, effets de profondeur et de matières. Il correspondait bien à mes attentes. Elles étaient simples: partage de photos, de vidéos et articles.
Je l’ai alors récupéré et j’ai commencé à le modifier. Après quelques heures à bricoler dans le code, je me suis trouvé frustré: je devais faire pas mal de compromis sans arriver à un résultat qui me plaisait réellement. Au final, je passais beaucoup de temps sur des détails qui n’étaient pas satisfaisants une fois finis. J’ai donc décidé de reprendre tout à zéro et de créer un thème de A à Z comme j’en avais envie.
J’ai donc ressorti mon carnet de croquis et mon stylo en composant une structure selon ce qui m’avait plu dans Zexee: une composition en colonnes.
Conception et design
J’avais vraiment envie de jouer avec des détails de textures et de volumes afin de composer un design qui soit très fort, à l’oposé totale de la tendance minimaliste actuelle. J’ai souhaité conserver les éléments qui me plaisaient dans Zexee et les adapter à ma sauce selon mes besoins (rubans, dispositon du menu et des articles, etc.)
Typographie
Ayant travaillé sur la typographie de manière approfondie pour le logo, je souhaitais pousser la réflexion typographique aussi loin sur le site. L’Egyptienne F n’étant pas utilisable sur le web, il m’a fallu lui trouver une alternative. Google propose une jolie bibliothèque de typographies libres et donc utilisables sur le web.
La Merriweather de Eben Sorkin est proche de l’Egyptienne F et est proposée dans un grand nombre de graisses. C’est une typographie que je trouve très harmonieuse et délicate pour une mécane.
Pour le corps de texte, une typographie serif ne me plaisait pas pour une lecture à l’écran. Je ne voulais pas non plus utiliser une typo “standard” du web (Helvetica, Arial, Verdana, etc.) et ai cherché une fonte avec plus de caractère et une excellente lisibilité à l’écran. J’ai donc choisi la Droid Sans, une humaniste sans sérif travaillée dans l’optique d’une utilisation sur écrans dans des interfaces web ou mobiles. C’est l’une des fontes de base des OS mobiles Android et son usage est donc parfait à l’écran.
Le site utilise donc un mélange de Droid Sans et Merryweather, deux typo dans la même harmonie:
- La Merryweather est utilisée dans les titres, les meta données (date, catégorie, affichage des commentaires, etc.) ainsi que dans la navigation.
- La Droid Sans est utilisée pour le corps de texte et la sidebar. Elle est donc travaillée de manière à rendre la lecture la plus aisée possible. Sa couleur est un gris foncé plutôt qu’un noir afin d’adoucir les contrastes et l’interlignage a été pensé dans le but d’apporter un plus grand confort de lecture.
Navigation
Toujours dans la même idée que Zexee, l’intention était d’une navigation de côté et fixe. La barre latérale de gauche (qui est en fait le header du site puisqu’elle contient le logo et la navigation principale) est en effet fixe même si l’on scroll en bas de page.
Le menu avait la volonté de rappeler les panneaux d’affichages à volets que l’on trouvait dans les gares ou les aéroports. Là aussi, le détail a été porté sur la sensation de textures. Dans la partie inférieure du menu, les liens Twitter et Facebook deviennent lumineux au survol.
Articles
L’idée de ruban, particulièrement à la mode sur le web en ce moment, a été gardée et revue d’une manière plus sobre que celle de Zexee. Je voulais conserver aussi l’idée que chaque article ait son propre périmètre posé sur le fond et non pas une liste d’articles dans un seul conteneur.
De cette manière, que l’article soit composé d’une simple photo ou de longs contenus, il est mis en exergue sans se perdre dans le reste de la masse.
Un élément qui me tenait particulièrement à cœur était la disposition du contenu avec une grande marge gauche. Le texte est bien plus étroit que son conteneur mais les images horizontales dépassent sur toute la largeur. Cette disposition a été conçue pour s’éloigner d’un modèle web et se rapprocher d’un imprimé ou l’on est moins confiné dans des blocs et ou il ne subsiste aucune limitation technique.
Il a fallu organiser mes CSS d’une manière très propre de manière à ce que ce système ne pose pas de problèmes une fois intégrés dans WordPress mais une fois le processus terminé, le résultat est transparent pour l’utilisateur comme pour la rédaction de nouveaux articles.
Liens
Il y a plusieurs manières de mettre en exergue les liens sur une page web. Ici c’est une option sobre qui a été choisie: les liens sont signalés dans une couleur plus foncée. Au survol, un soulignement apparaît et au clic, le lien descend de 1 pixel de hauteur afin de simuler une sensation de clic.
De cette manière ce sont bien trois étapes qui sont rendues: affichage, survol et clic. C’est une manière efficace pour aider le visiteur à savoir ou il il est et lui permettre d’avoir un retour d’interaction.
Sidebar
La sidebar fait la particularité de ce blog et est là totalement ancrée dans le sujet: une liste de trains de ma collection personnelle avec, pour chacun, un article, une sorte de revue, associé. Cette idée vient d’un autre blog de modélisme qui m’a beaucoup inspiré dans la structure de son contenu: Quinntopia. Pour chaque modèle de train que je possède, un article détaillé est associé. Ces articles apparaissent dans le blog comme n’importe quel autre mais ils ont un accès privilégié dans la sidebar.
Afin de donner plus d’interactivité ainsi que de mettre une image sur des noms de trains parfois abstraits (même pour moi…), j’ai joué avec les images des trains et… les ai mis en mouvement. Au passage de la souris, le texte disparait pour laisser place aux trains. Détail de geek: chaque train apparait à une vitesse proportionnelle à sa vitesse réelle; les trains les plus rapides arrivent en place plus vite que les modèles plus lents.
Le menu est réalisé en CSS3, pas de Javascript ni de plugin. Il est donc parfaitement respectueux des standards.
Evolutions dans la navigation
Le blog ayant bien grandi depuis sa mise en ligne, je me rend compte qu’il faudra ajouter un menu de catégories. La communauté dont fait partie Tecchan étant petite, je souhaitais aussi afficher un blogroll des blogs “cousins”. Cela fait partie des nouvelles modifications à ajouter au fil du temps. C’est aussi ce qui fait le charme du web par rapport au print: un site web n’est jamais 100% terminé et on le met à jour quand on le souhaite.
Développement web et WordPress
Il était clair dès le début que le site utiliserait des technologies modernes: HTML5 et CSS3 sans trop se soucier du rendu sur les navigateurs les plus anciens. C’est une volonté claire et nette pour ce blog perso mais j’utilise le même principe pour les autres sites que je réalise: se focuser sur les technologies récentes et simplement vérifier que le site n’ait pas l’air “cassé” sur les vieux navigateurs. A notre époque, il s’agit de pousser le web en avant. La compatibilité doit être assurée mais le nivellement doit se faire par le haut et non pas en fonction de technologies obsolètes.
L’utilisation du CSS3 dans Tecchan est simple: tout ce qui pouvait être construit avec du CSS au lieu d’images a été fait. Cela vaut pour les effets simples comme des ombres ou des angles arrondis, mais aussi pour des doubles filets ou les animations. De cette manière la page est plus légère, plus simple et la dégradation ne nuit pas au contenu pour les utilisateurs de navigateurs plus anciens.
Le menu des trains est un exemple typique de ce que l’on peut créer en CSS3. Tous les effets sont gérés en animation CSS. Voici ce que ça donne pour une élément du menu par exemple:
#shinkansen0{
background: url(img/trains.png) no-repeat 250px 0;
transition: background .45s ease-out, color .3s ease-in-out; /*standard CSS3*/
-webkit-transition: background .45s ease-out, color .3s ease-in-out; /*pour Webkit (Safari et Chrome)*/
-moz-transition: background .45s ease-out, color .3s ease-in-out; /*pour FireFox*/
-o-transition: background .45s ease-out, color .3s ease-in-out; /*pour Opera*/
}
#shinkansen0:hover{
color: transparent;
background: url(img/trains.png) no-repeat 60px 0;
}
En ce qui concerne Internet Explorer 6, plutôt que de passer de longues heures à corriger les erreurs d’affichage, j’ai employé la technique de feuille de style universelle qui consiste à servir une feuille de style simplifiée au maximum pour IE6 afin de se concentrer sur la lecture uniquement. Le rendu est minimaliste, mais le visiteur accèdera au contenu sans souci avec le conteneur.
A vrai dire, j’hésite même à pousser cette technique pour Internet Explorer 7 qui est pire que la version 6 sur certains aspects.
Sprites
J’avais fait un article sur les sprites CSS il y a quelques temps, voici à quoi ressemblent les sprites sur Tecchan. Il y en a plusieurs mais les trois principaux sont les suivants:
Eléments principaux d’interface
Menu trains
Background des menus
De cette manière je limite le nombre de fichiers chargés (améliorant la vitesse de chargement des pages) et supprime le délai de chargement pour les rollover. Pour plus de détails sur les sprites CSS, je vous invite à lire mon article.
Responsive
La dernière mise à jour de Tecchan lui a valu ni plus ni moins qu’un design adaptatif. Le site étant très large, dès l’origine le site s’adaptait à un écran jusqu’à 1024 pixels de large mais la disposition du header de côté rendait la navigation un peu complexe sur un iPad et carrément impossible sur un smartphone. La réflexion a alors été posée sur les tailles “étapes” à concevoir ainsi que la navigation et lisibilité, en particulier sur les terminaux mobiles.
Ce sont donc pas moins de 6 tailles étapes qui ont été prévues afin de servir le design le plus adapté à chaque taille d’écran et d’appareils:
- Format d’écran de bureau large (1150px et plus)
- Ecran de laptop (1149px à 1125px)
- Netbook et iPad format horizontal (1024px à 800px)
- Netbook, tablettes et iPad format vertical ( 799px à 720px)
- Tablettes et smartphones (719px à 500px)
- Smartphones, iPhone vertical et horizontal, grille fluide (moins de 500px)
Entretien et évolution
Lancé en mai 2011, le site fait son petit bonhomme de chemin. Sur les sujets qu’il traite, le ranking est plutôt satisfaisant sur Google et les visiteurs sont fidèles. Avec une moyenne de plus de deux commentaires par article, je dois bien avouer que le site engendre une interraction assez surprenante pour le sujet dont il traite. C’est un petit milieu, les gens visitent les blogs cousins et le tout rend ce petit univers assez convial.
Alors le site n’explose pas le plafond avec ses visites mais le lectorat est fidèle et commente volontiers, tant sur le blog que sur Facebook. Il n’avait aucun objectif à son lancement et de savoir qu’aujourd’hui je navigue entre 20 et 30 visiteurs quotidiens (même les jours ou il n’y a pas de publications) est quelque chose de plutôt… cool!
