Infowebmaster et son design V3

Publié le 27/12/2011 √† 17h05

Le site infowebmaster viens tout juste de revêtir un nouveau design, c'est le 3ème depuis le lancement du site. Celui-ci à pour objectif de réduire le bruit visuel afin de mieux se concentrer sur le contenu. Petite rétrospective des nouveautés qui arrivent avec ce nouveau webdesign.

Aperçu avant/après

Le site InfoWebMaster est né en 2007 avec un premier design qui s'avère maintenant un peu vieux et mal adapté aux contraintes du site. Voici à quoi ressemblait le premier design:

Design V1 de InfoWebMaster (2007)

Design V1 de InfoWebMaster (2007)

Les principaux problème de ce design était le manque d'élégance et des problèmes de contraste vis-à-vis du mauvais choix des couleurs. C'est pour ces raisons que 2 ans après le lancement du site, un deuxième design a été mis en place. Ce nouveau design avait l'avantage de mieux intégrer la barre de recherche et de mieux priorisé l'information (la publicité étant placé dans une sidebar de droite).

Design V2 de InfoWebMaster (2009)

Design V2 de InfoWebMaster (2009)

Avec un peu plus de recul, il s'avère que ce design comportait quelques défauts:

  • Il comporte trop de bruit visuel (grosses bordures fonc√©es, gros blocs un peu partout ...)
  • Il est mal adapt√© √† certaines r√©solution d'√©cran. Si l'√©cran est trop petit le design se casse et si l'√©cran est trop grand les lignes devient tr√®s longue (ce qui n'est pas adapt√© √† la lecture).

Afin de réparé ces deux principaux problèmes, un troisième design viens d'être mis en place:

Design de la V3 de InfoWebMaster (2011)

Design de la V3 de InfoWebMaster (2011)

L'ergonomie d'utilisation a été pensée dans ce nouveau webdesign. Voici les principales nouveautés qui font sa force:

  • Il s'agit d'un "responsive design". Cela signifie qu'il s'adapte automatiquement √† des tailles d'√©crans vari√©es (ordinateur, tablette, smartphone ...). Si l'√©cran est un peu petit il n'y qu'une seule sidebar au lieu de deux. Si l'√©cran est encore plus petit la sidebar dispara√ģt totalement.
  • Le blog et le glossaire ont √©t√© mis en avant pour faire parti d'un "tout". Dor√©navant l'ensemble forme v√©ritablement un portail "InfoWebMaster".
  • Le code est optimis√© pour r√©duire le nom de requ√™tes HTTP. A titre d'exemple, les trois sous-domaine (cf. www.infowebmaster.fr, blog.infowebmaster.fr et glossaire.infowebmaster.fr) utilise la m√™me feuille de style CSS. Ca √©vite √† l'utilisateur de re-t√©l√©charger une feuille de style similaire pour chacun des trois sites.
  • Une ligne de contenu textuel fait en g√©n√©ral 12 mots. C'est ce qui est recommand√© pour une lecture facile sur √©cran.
  • Le contenu textuel n'est plus justifi√©, mais align√© √† gauche. Ce choix est volontaire car il est prouv√© que c'est plus difficile de lire un contenu justifi√© et mal adapt√© en terme d'accessibilit√© pour ceux qui ont des d√©faillances cognitives.
  • Le premier paragraphe de chaque contenu est en gras pour mettre en valeur le chapeau. Pour en savoir plus, n'h√©sitez pas √† consulter l'article sur la pyramide invers√©e.

Il y a également de nombreuses petites modifications trop longues pour être toutes citées ici. J'espère que ce nouveau confort de lecture vous plaira.

Auteur: Tony Archambeau

Développeur web passionné par le référencement et l'ergonomie d'utilisation des sites et applications web, j'édite plusieurs sites web dont infowebmaster.fr.

No comments yet.

Leave a comment