Le graphisme et la mise en page

Deux objectifs: vitesse et efficacité

1. 10 à 15 Secondes pour convaincre !

Selon les sources, le temps " acceptable " de chargement d'une page se situe entre 8 et 15 secondes pour un utilisateur connecté à 33.6 Kbps. Un rapide calcul montre que la page ne devrait pas dépasser 30 ko, textes et images compris.
En étant plus tolérant, on peut admettre 45 ko MAXIMUM... avec un idéal à 20 ko.
Ceci laisse peu de place aux débauches graphiques, d'ailleurs fortement limitées dans les sites les plus visités (annuaires, moteurs, grands sites de vente en ligne). Chaque élément graphique de la page doit être "pesé" avec la plus grande attention et être absolument nécessaire
* en terme d'impact (accroche globale de la page)
* pour renforcer la lisibilité des éléments textuels
* pour faciliter une navigation intuitive

Chaque élément graphique doit être optimisé (taille, qualité graphique, transparence, répétitivité...)

2. Optimisez les images

* N'utilisez jamais une image redimensionnée, créez des images au bon format.
* Utilisez des images de la plus petite taille possible (adaptez la mise en page)
* Compressez ( optimisez) les images avec un logiciel spécialisé (voir liens utiles)
* Choisissez le bon format (GIF ou JPEG)
* Renseignez les balises champs Width et Height de la balise IMG pour permettre a la page de se charger avant les images.
* Réutilisez si possible des images déjà chargées (en cache) pour les pages intérieures.

UNE IMAGE SERT UN OBJECTIF ... ne l'oubliez pas!

* PRESENTER UN PRODUIT: L'image est ici incontournable et vaut mille mots... mais point trop n'en faut. Utilisez une image de taille réduite mais clicable, permettant d'accéder à une image plus grande.
* FACILITER LA NAVIGATION: L'image n'est justifiée que si elle remplace efficacement un texte sauf dans le cas des "image map" qui sont à manier avec une extrême prudence. Les images avec des effets de "roll over" sont longues à charger si de taille significative (deux images au lieu d'une). Les images animées gifs ne servent généralement à rien et peuvent être remplacées par des images fixes !
* FAIRE BEAU: Oui, si la taille de la page reste en dessous de 40 ko. non si au dessus. Les utilisateurs n'aiment pas les images animées (études de Jared Spool et d'Axance entre autres)

3. Respect des standards

Votre site doit pouvoir être visualisé sans dégradation visible sur les principaux navigateurs, Internet Explorer et Netscape au minimum et dans différentes résolutions, de 800x600 à 1024 x 768 au minimum.
ATTENTION: Internet explorer est tolérant avec les erreurs d'écriture HTML.
Netscape ne l'est absolument pas ! Testez systématiquement vos pages sur les deux navigateurs et utilisez des outils de test (en ligne ou hors ligne).

LIENS UTILES :

Un site exemplaire (même si déjà ancien) examinant tous les aspects de la conception d'une page WEB: colonage, graphique, tableaux, polices, images etc. http://www.starlingweb.com/acc/actoc-f.htm
Optimisation de la taille des éléments graphiques : http://www.ulead.com (Smart Saver Pro) le meilleur logiciel de compactage
http://www.gifwizard.com : compactage d'images en ligne
Outils de test des pages avant publication: http://www.webmasterplan.com/fr : les principaux utilitaires on-line
http://watson.addy.com : utile collection complète d'outils de test on-line
http://www2.imagiware.com/RxHTML/ : test pur et dur de votre code HTML
Note: un bon logiciel de création de pages Web doit inclure un minimum des utilitaires de contrôle du poids des pages et d'optimisation du code HTML.

4. La mise en page

Afin de tenir compte des différents équipements utilisés par les internautes, beaucoup de sites (la majorité des "grands" sites), ont adopté une mise en page standard:
* largeur 600 pixels environ (maxi 700)
* barre de navigation gauche de 100 à 150 pixels
* logo avec fonction "home" dans le coin haut-gauche de la page La largeur de 600 pixels permet d'une part de préserver l'affichage en mode VGA (s'il en existe encore) mais surtout de concentrer l'attention du lecteur Les grands principes a respecter (si le contenu du site s'y prête):
* centrer la partie utile dans la page et non la positionner à gauche (désagréable en 1024 ou plus)
* privilégier la lecture verticale (en colonnes) plutôt qu'horizontale
* renforcer l'impact du centre de la page par le "cadrage" (fond ou pourtour)

La tendance actuelle (hors sites d'information) :
- une page de largeur variable (contenu auto adapté), assez difficile à réaliser
- la disparition du bandeau de gauche
- les liens principaux dans la partie centrale de la page

La mise en page et l'aspect général doivent être constants pour toutes les pages du site afin de ne pas dérouter le visiteur et faciliter une navigation intuitive.
- Barres ou éléments de navigation à emplacement constant
- Cohérence de la couleur et des fonds de page
- Polices de caractères limités

Page suivante: Référencement