Réflexions sur le webdesign, les nouvelles technologies, la vie ...

10 choses qu’un Webdesigner doit savoir

1247001022_notebook_acceptLes « 10 choses que chaque Webdesigner (débutant) doit savoir » est un article à l’origine de John Urban librement traduit et adapté par mes soins.
J’ai plusieurs autres choses à rajouter, mais je le ferai plus tard, dans un autre article lié à celui là … en avant !

Dans les nombreux aspects de création d’un site, le Webdesigner joue des rôles multiples, et doit avoir une connaissance approfondie sur la structuration de site.
La plupart des choses que l’on apprend viennent de ses propres expériences dans le travail. Apprendre est un processus graduel, il n’y a pas meilleur école que de commettre des erreurs et d’en tirer des leçons. Dans cet article, nous allons voir un exemple de 10 conseils essentiels pour tout bon Webdesigner.

1/ Optimiser le graphisme pour un chargement plus rapide :

Comment optimiser les images en sélectionnant le bon format de compression, et faire en sorte qu’elles soient aussi légères que possible ? Même si les connexions internet sont de plus en plus rapides, il faut penser aux internautes qui ne sont pas dans les grandes villes, qui ont encore une connexion lente et/ou de vieux modems. Avec l’émergence des technologies mobiles, il faut aussi penser aux utilisateurs qui n’ont pas forcément une large bande (3G), dont les terminaux ne chargeront même pas des images trop lourdes.
Une règle générale est de choisir le bon format de fichier : les images avec des couleurs pleines (en aplat) sont souvent meilleures (poids + qualité) en formats PNG ou GIF, alors que les images type photo, sont meilleures en format JGP. Il y a une petite exception pour les images contenant un dégradé, là il faut faire des tests, entre GIF , PNG et JPG, en mixant qualité d’image et poids du fichier, le résultat peut être meilleur dans tel ou tel format selon l’image, là il n’y a pas de règle, c’est le jugement personnel.

En limitant le nombre d’images sur votre site au strict minimum, vous réduirez manière significative le temps de chargement de vos pages et améliorerez ses performances. Par exemple : est-ce que cette couleur peut être faite en CSS au lieu d’utiliser une image ?

2/ Faire clair et simple :

Un bon design web n’est pas seulement une maquette attrayante, mais celle qui est la plus convivial, qu’il faut allier avec une facilité d’utilisation.
En disposant trop de fonctionnalité sur une seule page, vous risquez de distraire l’internaute de l’objet de sa visite et de l’objectif du site. Assurez vous que chaque éléments de la page à un but et poser vous les bonnes questions :

  • est ce que le design a vraiment besoin de ça ? (éléments superflus, fioritures qui n’apportent rien, etc.)
  • qu’est ce que fait cet élément et comment cela va-t-il aider l’utilisateur ?
  • si je supprime cet élément d’un coup, cela gênera-t-il les internautes ?
  • est ce que cet élément se rattache à l’objectif, au message et au but du site ?

En outre, même si c’est excitant de travailler sur un nouveau concept ou faire un nouveau design, assurez vous que cela reste accessible et intuitif. Les internautes sont habitués à certaines interactions avec les sites, et si votre design est trop « unique » assurez-vous qu’il n’est pas trop obscur ou incompréhensible. On peut être créatif tout en restant simple, sans artifice.

3/ La navigation est la chose la plus importante à designer :

L’essentiel d’un site est la navigation, sans une bonne navigation, les internautes seront perdus. Il faut donc considérer avec attention l’étape de la construction du schéma de la navigation.
En premier, ne pas négliger cet aspect et y consacrer suffisamment de temps. Structurer la navigation est une question de bon sens, mais il est surprenant de voir combien de site néglige ce paramètre.
Réfléchir à la technologie à adopter (JavaScript, CSS, Ajax), la facilité d’utilisation, l’accessibilité, sont des choses à prendre en compte lors de cette réflexion.
Votre navigation devra fonctionner sans la CSS, pensé aux navigateurs en mode texte. Si vous oubliez cette option, vous vous coupez des navigateurs de mobiles. Encore plus important, l’accessibilité pour les handicapés et les navigateurs pour non-voyant qui lisent les textes des pages web. Oubliez donc les menus en Flash et en images, ou qui ne fonctionnent qu’avec JavaScript.
Votre système de navigation doit être visible, décelable dès le chargement de la page sans avoir la faire défiler la page. C’est là qu’avoir un code propre et clair joue un rôle important, une navigation complexe et/ou non conventionnelle peut perdre les internautes.
L’internaute ne doit jamais se demander « mais OU est la navigation ? ». Pour les navigations à multi-niveaux, il faut s’assurer qu’il est facile de naviguer entre rubriques et sous-rubriques, qu’il est facile de passer de l’un à l’autre et que l’internaute sait toujours ou il se trouve. La mise en place d’un « fil d’ariane » peut être une bonne solution (breadcrumbs) ramasse-miettes en anglais.
L’objectif principal de votre site est de permettre aux utilisateurs d’accéder au contenu sans effort, avec le minimum d’actions possible.

4/ Utiliser méthodiquement et judicieusement les Polices :

Bien qu’il existe des milliards de Polices, vous ne pouvez en utiliser que quelques- unes sur le web (au moins jusqu’à ce que tous les navigateurs supportent CSS3), sinon vous prenez le risque que l’internaute n’est pas la Police installer sur son PC et donc ne voit pas votre texte comme voulu.
De base nous pouvons utiliser :
- Arial
- Helvetica
- Verdana
- Times New Roman
- Georgia
- Tahoma
- Courrier
Pensez toujours à mettre une Font alternative à la première. Articles sur les Fonts web :
http://www.alsacreations.com
http://www.codestyle.org

Si vous ne voulez pas du tout utiliser les Polices système, il existe des solutions ;
- en Flash : SIFR
Ici le texte est appelé dans un SWF qui contient la Police choisi par le webdesigner
- en JQuery : CUFON
Ici le JavaScript va cherche la bonne Police sur le serveur et l’affiche

Il faut garder une utilisation cohérente des Polices. Utiliser une même Police pour les titres, pour les différencier du texte, grâce aux attributs line-heigt, font size, letter-spaccing, etc. autant de propriétés qui rend le contenu agréable à lire sans effort.

La chose avec laquelle les webdesigners débutants on le plus de mal, est la bonne taille de Police. Parce que nous voulons que le texte s’adapte au design, on choisit souvent une taille trop petite. Il faut garder à l’esprit que 12px est la taille minimum acceptable pour une Police lisible. La majorité des internautes n’ont aucun souci de lecture, mais il faut penser aux séniors et aux personnes malvoyantes qui surfent elles aussi sur le web (ou celles qui ne savent pas que l’on peut agrandir la taille d’affichage dans le navigateur).

5/ Comprendre les couleurs d’accessibilité :

Après avoir parlé des Polices, nous avons besoin des souligner l’importance d’utiliser les bonnes couleurs.
Il faut prendre en considération le contraste entre la couleur du fond et la couleur du texte, pour une lecture optimale. Par exemple, un texte noir su fond blanc est hautement contrasté, alors qu’un texte rouge sur fond orange est illisible (et fait saigner les yeux !).
Certaines combinaisons de couleurs ne fonctionnent que dans un sens, c’est-à-dire qu’une couleur de texte peut passer sur une couleur de fond mais l’inverse ne marche pas. Par exemple, avec du texte bleu foncé sur rose, ou le contraire, nous n’avons pas le même confort visuel sur les 2 exemples. Il est important d’avoir la bonne combinaison, mais aussi de l’appliquer au bon élément.

6/ Vous devez savoir écrire le code vous-même :

Il existe sur le marché de nombreux éditeurs WYSIWYG, il devient aussi simple de designer un site que de compter jusqu’à 3. Toutefois, la plus part de ces éditeurs produits du code inutile, ce qui alourdi le code HTML et il devient difficile à modifier et à mettre à jour. En écrivant votre propre code, net, propre, concis et commenter, il devient facile à lire et à modifier, et dont vous pouvez être fier.

Utiliser un éditeur WYSIWYG en mode code + visuel (type Dreamweaver) ne vous dispense pas de l’apprentissage du HTML et des CSS. Vous devez savoir ce qui se passe afin de créer un code efficace, optimisé et sémantique (valide W3C).

7/ Ne négliger pas l’optimisation pour les moteurs de recherche :

Un bon Webdesigner doit toujours garder à l’esprit les bases du référencement, lors de la conception d’un site. Par exemple : structurer les contenus, mettre en avant des textes, le logo, alimenter les titres des pages, nommer correctement et pertinemment les images. C’est là que la connaissance en CSS est importante. Coder correctement, sémantiquement et en respectant les standards, est nécessaire non seulement pour une représentation exact du contenu du site, mais aussi pour les moteurs de recherche référenceront le site.

8/ Comprendre l’impatience des internautes :

Les internautes n’accordent en moyenne que 30 secondes à un site, pour trouver une information et décider de rester ici ou d’aller voir ailleurs. Par conséquent, en tant que Webdesigner vous devez les inciter à rester sur le site et facilité leur recherche, pour gagner de précieuses secondes.

Sachez que peu de visiteurs vont descendre dans le bas de la page pour voir l’intégralité du contenu, si ce qu’ils voient en haut ne les intéressent pas. Rappelez-vous que les éléments importants doivent être en haut et visible, mais ne pas surcharger, soyez vendeur, utiliser la partie haute du site pour inciter l’internaute à voir le reste.

9/ Apprendre à faire avec les caprices des navigateurs :

Une des choses les plus importantes à savoir est que le Webdesigner évolue dans un environnement imprévisible : les navigateurs web ! Il ne suffit pas que votre site marche et s’affiche correctement sur votre PC, il faut qu’il soit optimisé pour le plus grand nombre de navigateurs, d’affichage et de type d’ordinateurs. Avant le lancement, il faut absolument tester votre site, il existe des outils comme http://browsershots.org/

10/ Faire un design et une structure facilement modifiables :

Un bon Webdesigner doit penser à l’avenir et aux mise à jour / modifications futures. Concevoir des sites facilement modifiables et faciles à mettre à jour est un signe de professionnalisme. Faites que votre travail soit aussi modulaire que possible, en séparant le fond de la forme, le design de la structure.

Sachez que le secteur du web est encore jeune et très dynamique, que les choses changent très vite, tout le temps. Gardez toujours à l’esprit, tout au long du processus de création, que votre site doit être le plus flexible possible.

Cette liste n’est pas exhaustive, et ne demande qu’à être compléter, utiliser les commentaires.

Pas de commentaire pour “10 choses qu’un Webdesigner doit savoir”

Ajouter un commentaire

Combien font 8 + 2 ?
Please leave these two fields as-is: