Bonnes pratiques du Web
De Memodev.
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 :
- HTML et XHTML
- CSS
- JavaScript
- PHP (ou n'importe quel autre langage utilisable par un serveur web)
- SQL
[modifier] 
Pré-requis
- Apprendre à utiliser les options de recherche de google .
- Vous allez souvent avoir besoin de débugger ou de modifier à la volée du JavaScript, du CSS ou du (X)HTML. Il est donc important d'avoir un bon outil car vous gagnerez beaucoup de temps. Le plug-in Firebug de Firefox est largement utilisé et recommandé.(voir ce tutoriel pour bien utiliser Firebug).
Pensez à laisser Firebug activé en permanence même si vous n'en avez pas besoin. Il pourra ainsi vous signaler d'éventuelles erreurs CSS ou JavaScript. Il est important de les détecter rapidement. En effet, ces erreurs ne se manifestent pas sur toutes les pages, et pourront provoquer des comportements inexplicables sur certaines d'entre elles. - Une autre bonne habitude est d'utiliser le plug-in Firefox XHTML Validator pour vérifier en permanence la validité de votre code HTML et ainsi éviter des bugs (JavaScript par exemple) liés à un non respect des standards HTML.
- Toutes ces extensions peuvent ralentir votre Firefox c'est pour cela qu'il peut être préférable de créer un profil Firefox spécifique pour le développement Web. De plus, cela vous permettra d'isoler vos sites de développements et vos sites de surf internet classique. Si vous souhaitez lancer plusieurs Firefox avec des sessions différentes, il suffit de remplacer la cible du raccourci Firefox par firefox.exe -no-remote -P monProfile
- Utilisez un client FTP comme FileZilla pour l'envoi de vos fichiers sur votre serveur. Avec FileZilla, vous pourrez par exemple utiliser des filtres pour ne pas envoyer sur le serveur vos fichiers liés à CVS, SVN ou encore vos fichiers de préférences d'Eclipse. Pour éditer tous vos fichiers avec un logiciel (par exemple Notepad++) :
Edition -> Paramètres -> Edition des fichiers. Puis sélectionnez "Utiliser l'éditeur personnalisé" avec le chemin "C:\Program Files\Notepad++\notepad++.exe". Sur le même écran, sélectionnez aussi "Toujours utiliser l'éditeur par défaut". - Maitrisez vos raccourcis clavier.
- Vous ne pouvez pas retenir toutes les spécificités de chaque langage, donc pensez à garder sous la main des aide-mémoires pour chaque langage (voir les liens "aide-mémoire" dans la section "Tutoriels" des articles HTML et XHTML, CSS, JavaScript, PHP, SQL de Mémodev).
- Apprendre à contourner les différences d'IE6
[modifier] 
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 :
- Statistiques sur les navigateurs, OS, moteurs de recherche ... (site de Statcounter). Tailles d'écran, versions de navigateurs, systèmes d'exploitation, etc... Cela permet de savoir quand est-ce que, dans un pays donnée, on peut ne plus avoir besoin de tester sur un navigateur ou une résolution d'écran.
- Statistiques sur les langages, outils et frameworks les plus utilisés .
- Statistiques sur le taux d'installation des plugins flash, java et silverlight . Voir aussi les statistiques sur le site d'adobe.
[modifier] 
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...
[modifier] 
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 :
- Code HTML
- Ne faites pas de pages HTML avec un doctype invalide, ni de pages HTML contenant des caractères avant la DTD, ou un DOCTYPE XHTML précédé de la déclaration XML (si on ne respecte pas ces règles, IE6 passera en mode quirks => affichage complètement farfelu de la page.). Voir la liste des doctypes
- Utilisez des balise appropriées à vos contenus (exemple: h1, h2 pour les titres et non des div ou des span)
- Utilisez des textes alternatifs et textes de tooltips pertinents
- Ergonomie générale
- Utilisez un bon système de pagination
- Créez des formulaires efficaces.
- Évitez les liens du type "cliquez ici" [1]
[modifier] 
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.
[modifier] 
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) :
- freelayouts (1200 templates)
- openwebdesign (4000 templates)
- freecsstemplates (500 templates)
- styleshout (30 templates)
- kitgrafik (60 templates gratuits, beaucoup de templates payants)
- templatemonster (templates payants, mais de qualités)
- themeforest (3600 templates pour CMS)
Il existe aussi des templates pour des mails au format HTML :
- noupe (20 templates)
Certains outils pourront vous aider pour les choix de vos couleurs. Voici des colorPicker qui proposent une sélection de couleurs complémentaires :
- Color Scheme (Recommandé)
- Kuler
- Color Blender
[modifier] 
Illustration
[modifier] Quel format d'images choisir ?
- 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) :
- jpg/jpeg (format libre depuis 2006 [2]) : Format idéal pour les photos et les illustrations compliquées. Ne surtout pas utiliser pour du texte, car les pertes de données en altèrent significativement l'aspect.
- gif (format libre depuis 2006 [3]): Convient pour les images et logos très simples. Est limité à 256 couleurs. Permet l'animation et la transparence simple.
- png 24 bits (format libre de base) : Convient pour tout type d’image. Permet la transparence totale et la semi-transparence (l'aspect translucide ou opaque). Il existe le png 8 bits qui permet de diminuer beaucoup la taille de vos images, mais ne permet que la transparence totale et n'est utilisable que pour des images contenant moins de 256 couleurs (logos, icônes, images noir et blanc...). Voir comment enregistrer une image en png 8 bits avec Gimp.
Notez qu'IE6 supporte la transparence totale avec le gif et le png 8bits, mais ne supporte pas la transparence avec des png 24 bits. (il la remplace par du blanc). Ce ne sera bientôt plus un problème puisqu'il commence à ne plus être supporté par de grands acteurs du web (Google, Youtube, Facebook...). - Les autres formats d'images (BMP, TIFF, SVG ...) ne compressent pas les images, ne sont pas supporté par tous les navigateurs et ne sont donc pas recommandés pour le Web.
[modifier] Photos
Site proposant une liste de sites de photos gratuites et libres de droits pour illustrer vos sites :
- everystockphoto : Recherche sur de nombreux sites de photo libre. Conseil : Dans la recherche avancée, décoché la case Flirck pour avoir des photos de meilleur qualité.
- stockvalt
- imageafter
- [4]
- freefoto : Attention, la navigation n'est pas évidente.
- Photo-libre : Pas de recherche possible.
- deviantArt : Photo artistique.
D'autres listes de sites de photos sur :
[modifier] 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 ) :
- Find Icons (un des plus fournis)
- famfamfam
- Icon Finder
- Crystal clear
- Icon Let
- icons Search
- Very Icon
- Icones.pro
- Seek Logo (recherche de logo)
[modifier] 
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 :
- Toutes les versions d'Internet Explorer : Installer IE Collection pour pouvoir tester sur plusieurs versions différentes d'IE (à partir du même pc). Cet outil n'a pas toujours exactement le même rendu que les versions originales d'IE, mais s'en rapproche déjà très bien et permet de détecter les plus gros problèmes d'affichages. IEtester permet également de faire des tests sur plusieurs versions d'IE, mais donne un rendu moins fidèle. Une autre solution est d'installer "Oracle VM VirtualBox" et d'utilisé des machines virtuel avec différente version d'IE téléchargable sur cette page Microsoft
- Les mobiles : voir une liste de sites d'émulateurs de mobiles .
- Les tablettes : tester le rendu d'un site internet sur un émulateur d'Ipad (émulateur Ipad sur internet , émulateur Ipad en local ).
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.
[modifier] 
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.
[modifier] 
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 :
- (Recommandé) L'outil de gestion de site par Google pour les webmasters (tutoriel )
- Le plug-in LinkChecker de Firefox
- L'outil LinkChecker en ligne du W3C
- Un autre outil en ligne
- Le logiciel Xenu's Link Sleuth (tutoriel )
[modifier] 
Référencer un site
Voir l'article sur le référencement d'un site Web.
[modifier] 
Améliorer les performances de chargement du site
Voir l'article sur l' Optimisation d'un site Web.
[modifier] 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.
