Bonnes pratiques du Web

De Memodev.

Aller à : Navigation, rechercher

Web.png Développer un site internet est devenu très facile à faire, mais en développer un correctement devient de plus en plus compliqué... Cette page est destinée à vous donner les bonnes pratiques pour développer un site internet.

Dans un premier temps il faut maîtriser les langages suivants, ainsi que leurs bonnes pratiques décrites sur les pages suivantes :

Sommaire

Pelle.png Pré-requis

Rss.png Actualités du développement Web

Il y a des ressources à suivre de temps en temps en tant que développeur, pour se tenir informé des nouveautés mais aussi des statistiques d'utilisation. Voici une liste de quelques sites à suivre régulièrement :

Personnes.png Ciblez votre public

Il est important de connaître le profil moyen de vos visiteurs (critères du type âge/sexe/catégorie professionnelle...). Selon le public vous fréquentant, vous pourrez adapter la taille du site, les contenus, la compatibilité avec les navigateurs, etc...

Idee.png Bonnes pratiques pour la navigation de l'utilisateur

Sur le site d'Opquast on peut voir la liste de toutes les recommandation pour la création d'un site Web qui corresponde aux attentes des internautes, aussi bien en terme d'utilisabilité que d'accessibilité. L'accessibilité ne doit pas être négligée, elle est utile pour beaucoup de gens mais aussi pour le référencement (source).

Liste non exhaustives des bonnes pratiques :

TextLettre.png L'encodage

Vous ne savez pas quel encodage choisir ? Vous en avez marre de rencontrer des problèmes d'encodage ? Alors allez voir la page sur l'encodage et les charsets, vous allez apprendre à vous débarrasser définitivement des problèmes d'encodage. Il est impératif de bien choisir son encodage sous peine d'être confronté à de nombreux problèmes.

Palette.png Design

Le design est très important sur un site web, il agit directement sur le premier ressenti de vos visiteurs. Il faut donc choisir un design cohérent avec votre site.

Liste de sites proposant des designs gratuits et payants de sites web (les mots clés généralement utilisé sont "Free html template" ou "Free design template" ou "Free web template" pour les sites de templates gratuits) :


Il existe aussi des templates pour des mails au format HTML :


Certains outils pourront vous aider pour les choix de vos couleurs. Voici des colorPicker qui proposent une sélection de couleurs complémentaires :

Illustration.png Illustration

Quel format d'images choisir ?

 Conclusion sur le choix des extensions 
  • Utilisez des jpeg pour les photos et les illustrations compliquées.
  • Utilisez des gif pour les animations.
  • Utilisez des png 24 bits pour tout le reste. Si vous n'avez pas besoin de beaucoup de couleurs sur votre image, alors utilisez le png 8 bits afin d'avoir des images plus légères.

Utilisez les formats adaptés à vos besoins (sources : google page speed     , théorie des format, choisir son format. Comparatifs de formats : 1, 2) :

Photos

Site proposant une liste de sites de photos gratuites et libres de droits pour illustrer vos sites :

D'autres listes de sites de photos sur :

Icônes

Il ne faut pas hésiter à illustrer les boutons, liens ou autres actions avec des icônes design.

Moteurs de recherche proposant des icônes gratuites et libres de droits (source complète : liste de sites d'icônes classées par catégories, liste de sites de packs d'icônes     ) :

Todo.png Les tests

Le développeur doit tester sous une multitude de navigateurs. Il est important de connaître vos visiteurs pour privilégier les tests sur le navigateur qu'ils utilisent le plus. Voici plusieurs outils qui permettent de tester les différents navigateurs :


Pour les tests de validation finaux, ne faites pas tester les fonctionnalités de votre site par celui qui les a développées. Le testeur doit être extérieur et objectif. L'idéal est de choisir un potentiel futur utilisateur, et de lui faire tester le site. Il arrivera certainement à détecter des bugs qu'un développeur n'aurait pas trouvé car ils ne surfent pas de la même manière. Soyez attentif à sa façon d'utiliser votre site, vous en apprendrez beaucoup sur l'intuitivité de votre interface.

True.png Validation des standards

Il est préférable de valider le CSS et le HTML de vos pages avant de publier votre site (pour éviter d'éventuels bugs sur des navigateurs que vous n'avez pas testé). Pour cela, vous pouvez utiliser les validateurs indiqués sur les pages CSS et HTML. L'idéal reste de vérifier régulièrement au cours du développement le code grâce aux plug-in décrits dans la partie pré-requis de cette page.

Lien mort.png Détecter la présence de liens morts

Il est important de vérifier régulièrement l'absence de liens brisés sur votre site (pour vos visiteurs, mais aussi pour le référencement) Les liens morts sont aussi appelés liens brisés, Link rot, broken link, dead link ou dangling link. Pour vérifier que vous n'avez pas de liens morts plusieurs solutions :

Socket.png Référencer un site

Voir l'article sur le référencement d'un site Web.

Chronometre.png Améliorer les performances de chargement du site

Voir l'article sur l' Optimisation d'un site Web.

Affichage sur smartphone et tablette

Il est important de modifier l'affichage pour les différentes tailles d'écran. Voici une d'article qui explique comment modifier l'affichage sur mobiles et tablettes.

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Catégories
Boîte à outils