Ergonomie du site web

Marc VALLETEAU de MOULLIAC — 2008-03-22T14:26:23Z

L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail. L'ergonomie se caractérise généralement selon deux composantes :

L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur ;
L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en :

confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse,
sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur.

Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.

La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs. Les critères suivants sont généralement déterminants pour un site web :

attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas nécessairement la même information ou n'ont pas nécessairement les mêmes exigences en terme de graphisme.
habitudes de l'utilisateur : elles correspondent à des comportements acquis. Ã¢ge de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation.
équipements : il s'agit d'une des difficultés majeures. En effet, l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage.
niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté.

Comment bien démarrer votre site web ?

Marc VALLETEAU de MOULLIAC — 2008-02-20T16:16:00Z

CSS n'est pas toujours facile à gérer. En fonction de vos compétences et votre expérience, le codage CSS peuvent parfois devenir un véritable cauchemar, surtout si vous n'êtes pas sûr quels sélecteurs sont effectivement appliqués à quels éléments du document. Un bon moyen de minimiser la complexité du code est aussi utile que les attributs et propriétés CSS les moins connues que vous pourriez utiliser pour un balisage sémantiquement correct.

Nous avons soigneusement sélectionné certaines des plus intéressantes et utiles astuces, conseils, idées, méthodes, techniques et solutions de codage CSS et les avons listées ci-dessous. Nous avons également inclus certaines techniques de base, utilisables dans un projet de développement, mais souvent difficiles à trouver quand on en a besoin. Le résultat est un aperçu de plus de 70 conseils-experts susceptibles d'améliorer votre efficacité dans le CSS. Vous trouverez, si vous le souhaitez, à la fin de cet article, la liste des références et des articles liés.

WORKFLOW : GETTING START

Après avoir un design, commencez par une page vide de contenu. "Incluez vos en-têtes, votre navigation, un exemple du contenu, et votre pied de page. Ensuite, commencez à insérer votre balises html dans le code. Enfin commencez à ajouter votre CSS. Cela fonctionnera beaucoup mieux."

Initialisez en premier vos styles CSS. "Il est souvent possible d'éviter d'être obligé de spécifier la valeur d'une propriété, en tirant avantage de cette valeur par défaut. Certaines personnes aiment faire un espace blanc Global réinitialiser en mettant à zéro la valeur du margin et du padding en tête de leurs feuilles de style. Eric Meyer's Global Reset, Christian Montoya initiale de la feuille de style, Mike Rundle initiale de la feuille de style, Ping Mag initiale de la feuille de style. [Roger Johansson]

Utilisez une feuille de style "maître". "Une des erreurs les plus communes des débutants et développeurs intermédiaires est de ne pas supprimer les styles par défaut du navigateur. Cela conduit inévitablement à des incohérences dans l'affichage de vos pages selon les navigateurs, ce qui fait que beaucoup de concepteurs sont amené à critiquer le navigateur. Critique infondée, bien sûr. Avant de faire quoi que ce soit pour coder un site Web, vous devriez réinitialiser les styles. "[Maître de style : La plupart utiles CSS Technique], [Ryan Parr]

1. master.css
 2. @import url("reset.css");
 3. @import url("global.css");
 4. @import url("flash.css");
 5. @import url("structure.css");
 
 1.

Faites-vous une bibliothèque de classes CSS utiles. Utiles pour le débogage, mais il faudrait éviter dans la version (séparé de marquage et de présentation). Puisque vous pouvez utiliser plusieurs noms de classes (par ex.

...), faites-en usage pour mieux debugger votre code. (Mise à jour) [Richard K. Miller]

1. CSS:
 2. .width100 { width: 100%; }
 3. .width75 { width: 75%; }
 4. .width50 { width: 50%; }
 5. .floatLeft { float: left; }
 6. .floatRight { float: right; }
 7. .alignLeft { text-align: left; }
 8. .alignRight { text-align: right; }

ORGANISEZ VOTRE CODE CSS

Organisez votre style CSS, en utilisant des feuilles de style "maîtres". "Organisez votre CSS aide à la maintenance future du site. Commencez par un feuille maître. Dans le cadre de cette feuille de style importez vos reset.css, global.css, flash.css (si nécessaire) et structure.css et à l'occasion une feuille de style typographie. Voici un exemple d'un feuille de style "maître" et comment elle est intégré au document : "

Assfor

Ergonomie du site web

Comment bien démarrer votre site web ?