Alhomepage

Alexandre Venet

Alhomepage / Articles / Présentation générale

Présentation générale

Le site Alhomepage.com

Présentation générale de la nouvelle version du site Alhomepage.com : identité, orientation graphique, partis-pris techniques...

Image

Préambule

La dernière version du site Alhomepage.com est sortie. Avec sa note littéraire, elle reflète davantage ma personnalité et mon activité. Je suis très heureux du résultat : sobriété, clarté, confort... J'espère que cette version vous donnera entière satisfaction.

Identité

Je m'oriente vers l'écriture. Le site devait suivre ce changement et rompre avec l'image informatique. C'est pourquoi j'ai créé cette nouvelle identité visuelle. Je voulais que le site évoque immédiatement l'expression littéraire.

J'ai choisi de n'utiliser que deux couleurs : le blanc en fond de page et le bleu foncé pour symboliser l'encre. Pas de couleur active qui détournerait le regard.

La Garamond s'est très vite imposée pour le texte courant. Sa finesse et la longueur de ses jambages permettent une lecture fluide et agréable. Son style ancien nous éloigne par exemple du Times et des bruyantes actualités.J'utilise la version libre, l'EB Garamond, réalisée par Georg Duffner.
Pour les titres, j'ai choisi la Playfair, une création de Claus Eggers Sørensen. Son italique souple adoucit sa modernité et forme avec l'EB Garamond un couple discret.
Enfin, la Montserrat, de Julieta Ulanovsky, est utilisée pour les éléments techniques du site, les appels à l'action et autres indications spécifiques (boutons, éléments de formulaire...). Avec sa connotation urbaine, elle nous rappelle le support, la technologie elle-même.
EB Garamond, Playfair, Montserrat : en réunissant des époques différentes, ces trois typographies inscrivent Alhomepage.com dans une évolution, une continuité. Je ne remercierai jamais assez les différents typographes pour leur formidable travail.

Plus d'informations sur ces typographies chez leur auteur respectif :

Le troisième et dernier ingrédient qui complète l'identité graphique est le montage photo de l'océan. Plusieurs clichés le composent, à grand renfort d'effets et d'ajout de matière. Plus vraiment tranquille, pas encore tempête... cet instant d'indécision nous transporte à mon sens dans un romantisme plein de mélancolie. La Playfair italique souligne l'impression liquide.

La signalétique du site ne repose que sur le texte : pas de pictogramme, pas de fioritures, le texte par-dessus les images. Même les liens ne sont plus soulignés mais seulement grisés, précédés d'une simple flèche, pour ne plus se manifester à la vue. La barre de menu est masquée sur le côté gauche de l'écran. Voilà, du texte, et rien d'autre. J'avoue avoir longtemps hésité à supprimer même le fil d'Ariane dans le bandeau de titre.

Responsive design

Comme pour la version précédente, j'utilise les media queries CSS pour afficher le site selon les dimensions du terminal d'accès. Pour les écrans de largeur inférieure à 800 pixels, la barre de menu est placée en haut de page. De même l'océan hugolien ne s'étend que dans un ou deux blocs – contraintes logicielles et d'ergonomie.

Parti-pris

Je considère qu'un site Internet doit être « intègre », c'est-à-dire qu'il doit s'afficher correctement sur tous terminaux et navigateurs, sans préférence pour une technique ou un fabriquant. Cela étant, il peut se concevoir selon deux optiques : la compatibilité en amont ou « à date ».

La compatibilité en amont, c'est faire en sorte que le site s'affiche correctement sur d'anciennes versions du navigateur et/ou système d'exploitation. Ainsi, l'audience se trouve d'autant plus large que les anciens terminaux d'accès peuvent toujours afficher le site. Inversement, ce principe peut considérablement alourdir le développement et freiner la nouveauté puisque le moindre bout de code doit aussi être traité selon des normes dépassées ou spécifiques. Qu'en est-il du bloc d'instructions de 2014 inconnu en 1995 ?

Exemple : faire en sorte que le site s'affiche au moins avec CSS 1.0 et sans (trop) de dégradation.

La compatibilité « à date » – terme personnel – signifie s'affranchir des contraintes de versions et orienter le développement à partir de la technologie d'aujourd'hui. Le site est conçu selon les normes en vigueur et suit les évolutions de la technique ; la cible est l'audience future, les précédents terminaux disparaîtront et seront au mieux recyclés. Cette approche, que je pourrais qualifier de « naturelle », tire profit des améliorations du moment et s'inscrit dans une logique de progrès.

Exemple : utiliser les nouvelles balises HTML 5.0 sans se soucier de leur (éventuel mauvais) affichage dans les navigateurs plus anciens.

C'est l'optique « à date » que j'ai choisie pour Alhomepage.com. HTML 5.0, CSS 3.0, Javascript, pseudo-sélecteurs, épuration des noms de classe... autant de pratiques qui ont cours en 2014 et qui dureront encore longtemps. J'ai tout de même limité ce parti-pris en préservant certains usages antérieurs.

Contenus

De nouvelles pages ont été ajoutées, surtout les sas des différentes rubriques. J'utilisais déjà la classification « jeux-vidéo » et « divers » mais sans indexer le contenu. C'est arrangé.

La rubrique « articles » fait son entrée dans le site. Vous y trouverez, eh bien, des articles sur différents sujets – et pas forcément en lien avec l'informatique, le multimédia ou le jeu-vidéo. Les textes seront mis en ligne au fur et à mesure mais je ne garantis aucune régularité.
Pour cette rubrique, vous remarquerez que la pagination est particulière : elle suit un déroulement « chrono-logique ». En général, l'usage sur les blogs est de démarrer la pagination à la page la plus récente : la page 1 est donc la première page affichée mais également la dernière page actualisée ou publiée. D'où une légère confusion : nous remontons le temps à mesure que les numéros de page augmentent. J'ai préféré suivre la logique des suites chronologiques et l'usage traditionnel : le temps qui avance est symbolisé par un chiffre qui augmente – principe du calendrier qui ajoute 1 chaque année – et inversement, nous remontons donc le temps à mesure que le numéro de page diminue. Cependant, par souci de confort, la dernière page publiée sera affichée en premier.
(La pagination inversée a-t-elle un impact sur le référencement ? Je n'en sais rien. Je présume que les moteurs de recherche se soucient avant tout de la date de publication. Dans tous les cas, il est pourtant possible de traiter l'affichage des données sans influencer leur position dans une base mais cela relève d'un parti-pris technique : le dernier article peut être ajouté automatiquement en premier ou en dernier de la liste.)

Toutes les entrées principales sont désormais dans le menu de navigation, lui-même situé à gauche ou en haut de l'écran selon la largeur de votre terminal.

Commentaires

Vous avez maintenant la possibilité de laisser vos commentaires. J'utilise pour cela le service Disqus qui centralise les messages et permet de s'identifier avec Facebook, Twitter ou Google. Vous pouvez également laisser vos commentaires en tant qu'invité, c'est-à-dire sans obligation d'inscription ou de connexion. Le module de commentaires se trouve sous le corps de la page.

Astuce : cliquez sur le bouton « voir les commentaires » pour ouvrir le bloc afférent.

Sachez que je n'ai pas sélectionné le module Discovery qui affiche des blocs publicitaires renvoyant à d'autres pages.

Social

Outre les commentaires, la plupart des pages du site possèdent un encart de « partage ». Vous y trouverez le nécessaire pour relayer l'information à partir de votre plateforme sociale préférée ou simplement par courriel.

Astuce : cliquez sur « partager la page » pour afficher le bloc afférent.

RSS

Commentaires, réseaux sociaux… Alhomepage.com se dote également d'un petit flux RSS. Normalement, votre navigateur a dû vous afficher une icône d'information à ce sujet. Sinon, voici l'adresse à mettre en marque-page : http://www.alhomepage.com/rss.xml

Retours d'expérience

Si vous rencontrez des erreurs, si certaines pages ou blocs d'informations semblent ne pas s'afficher correctement, n'hésitez pas à m'en avertir via le formulaire de contact. Aides et conseils restent également les bienvenus. Pensez à m'indiquer votre système d'exploitation, le navigateur Internet utilisé avec son numéro de version.

Pour terminer

Je me suis longtemps cherché. Avec cette nouvelle version du site, je m'inscris dans une optique de renouveau. J'espère que cette énième trajectoire m'ouvrira de plus durables horizons.

http://www.alhomepage.com/articles/2014-08-17-presentation-generale

par Alexandre Venet, le 17-08-2014
Commentaires