Cette page traite de l’expérience utilisateur. Faire un site c’est top, le faire avec une bonne navigation et un visuel optimisé pour le rendre agréable aux visiteurs, c’est mieux !
L’UI/UX regroupent 240 règles. Voici quelques bases fondamentales sur lesquelles tu vas pouvoir te pencher lors de la création de ton projet.
Tu trouveras sur cette page :
Les bonnes pratiques de programmation améliorent le référencement, donc la visibilité d’un site dans les moteurs de recherche.
Retiens les 3 primordiaux :
<!DOCTYPE html> <html lang=« fr »> <head> <meta charset=« UTF-8 »> <title>Titre dans l’onglet</title> </head> <body> <header> <h1>Titre du site</h1> </header> |
Nos textes doivent être lisibles. Cela passe par la couleur de celui-ci, qui doit avoir un contraste suffisant avec son arrière-plan.
Utilise avec prudence les dégradés, la transparence et les images en arrière-plan.
On peut mettre en place un menu, avec un onglet “accueil”, ou encore rendre le logo du site cliquable et redirigeant sur l’accueil.
<!– Menu –> |
Les balises <header>…</header> et <footer>…</footer> seront toujours posées de la même façon sur toutes les pages, comporteront toujours le même design et les mêmes informations.
On réfléchit toujours à ce que toutes les pages du site soient trouvables facilement.
La taille des éléments cliquables est suffisante.
Exemple : Les liens du menu ne doivent pas être plus petits que le curseur de la souris.
<header> |
Le contenu de chaque page est organisé selon une structure de titres et sous-titres hiérarchisés.
Les styles CSS ne suffisent pas pour justifier l’importance d’un texte.
Les icônes doivent être accompagnés de leur intitulé.
<section> |
Chaque image, même décorative, est dotée d’une alternative textuelle appropriée.
<div class=« flex justify-center »> |
<a href=« index.html »> |
Chaque image-lien est dotée d’un texte décrivant l’information apportée.
Chaque lien est doté d’un intitulé dans le code source.
<li> <a href=« index.html » title=« Retour à l’accueil »>Accueil</a> </li> |
<nav> |
Les liens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.
Dans cet exemple, tous les liens sont écrits en noir, ont la même taille, la même texture de gras. Et ils passent tous en vert au passage de la souris.
Le site n’applique pas le même style aux liens visités et non visités.
Pour cela, utilise la pseudo-classe css :visited
a:visited {
|