Le Hollandais VolantConseils aux débutants qui commencent un site web
Hier
En webmastering, je n’ai jamais cessé d’apprendre, depuis le début, et de corriger mes erreurs du passé. Voici une petite liste de choses qu’il faut ou ne faut pas faire. Ça n’a rien d’officiel, mais croyez-moi, vous me remercierez un jour.
Ces astuces permettront une mise à jour facile de votre site, une bonne capacité à évoluer et un code propre.
Notez que je code mes pages statiques dans un éditeur de texte et que mon site ne contient pas uniquement un blog. Certaines astuces ne s’appliquent donc pas à tout le monde ou seront dur à appliquer dans certains cas.
Ajoutez que je ne parle pas des bases des langages eux-mêmes (par exemple de toujours utiliser une police générique à la fin de font-family en css), que je considère comme acquis.
Dans tous les cas, évitez les trucs listés ici.
Ces astuces permettront une mise à jour facile de votre site, une bonne capacité à évoluer et un code propre.
Notez que je code mes pages statiques dans un éditeur de texte et que mon site ne contient pas uniquement un blog. Certaines astuces ne s’appliquent donc pas à tout le monde ou seront dur à appliquer dans certains cas.
Ajoutez que je ne parle pas des bases des langages eux-mêmes (par exemple de toujours utiliser une police générique à la fin de font-family en css), que je considère comme acquis.
Les fichiers HTML, l’organisation des dossiers
- Gardez les noms de fichiers courts, sans majuscules ni espaces. Donnez leurs des noms clairs et explicites.
- Utilisez seulement des lettres minuscules, des chiffres, et favorisez les tirets « - » au lieu de l’underscore « _ » à la place des espaces.
- Si vous avez plusieurs pages : utilisez des dossiers au lieux de pages (ex /a-propos/index.html et /contact/index.html au lieu de a-propos.html et contact.html) : c’est plus pratique, surtout quand vous voudrez ajouter des images pour chaque page.
- utilisez des URL relatives partout : liens, images, styles, scripts… (très pratique si vous changez de nom de domaine ou qu’un dossier dois être déplacé).
- Placez un fichier favicon.ico à la racine du site.
- Si une page devient obsolète, indiquez le sur la page. Ne supprimez jamais une page, au pire déplacez-la.
Pour le codage des pages
- Préparez vous un modèle de fichier HTML (voici le mien).
- Donnez des extensions .php à vos fichiers : perso j’ai débuté avec des fichiers .html qu’il a tous fallu renommer en .php quand j’ai commencé à utiliser du PHP.
- Avec PHP : préparez un fichier head.php (contenant les <head> avec les balises classiques) et foot.php (avec un nom de l’auteur, une licence par exemple) et utilisez ensuite un include() ou un readfile() : plus pratique pour changer le header ou le footer sur toutes les pages en une seule fois.
- Utilisez un encodage de caractère dans la page (ça évitera au navigateur d’en choisir un au hasard).
- Utilisez l’encodage de caractère UTF-8 au lieu de tout le reste : c’est le plus puissant, le plus universel et le plus pratique (et simple à retenir, en plus de ça), même si ce n’est pas l’ASCII que le W3C recommande.
- Donnez des versions à vos scripts et à vos pages. Ajoutez (au moins en commentaires) la date de création et la date de dernière mise à jour.
- N’utilisez jamais des liens raccourcis (dans le genre de tinyurl.com ou de bit.ly) : ils ne sont pas pérennes dans le temps.
- Prenez le temps de faire un code valide W3C : c’est pas compliqué à faire. Codez un site web correctement ou pas du tout.
Pour les scripts, images, fichiers liés
- Hébergez tout vous même. Ne liez rien sur les sites externes (même pas les polices d’écritures de Google Font, où les images-bouton « like » de Facebook ou Flattr). Idéalement il faut que votre site fonctionne et s’affiche à 100%, même si tous les autres sites au monde sont HS.
- N’utilisez que des formats standards pour les fichiers : png et jpg au lieu de bmp et gif dans le cas des images, par exemple.
- Pour les PDF, si vous utilisez l’intégration de Scribd, proposez un lien de téléchargement direct (des chatons meurent tous les jours à cause de liens directs qui manquent)…
- Mettez des balises alt aux images (obligatoire et important pour la SEO) et des dimensions qui s’adaptent !.
Pour le CSS
- Utilisez du CSS pour le design et le JavaScript pour les évènements sur la page. Le JS ne doit pas être utilisé pour la mise en page.
- Utilisez un fichier CSS externe pour plusieurs pages. Si vous le modifiez, ce seront toutes les pages qui seront mises à jour d’un coup !
- Dans le CSS aussi, mettez tous vos fichiers en local, pas vers des @import sur des sites externes.
- Bannissez les @imports : c’est très mauvais pour la vitesse de chargement des pages (ça aussi, ça tue des chatons et même des poussins !).
- Si vous ajoutez des propriétés spécifiques pour un navigateur, ajoutez aussi ceux pour les autres navigateurs (-webkit-, -o-, -ms-, -moz-, -khtml-).
- Ajoutez une feuille de style pour l’impression.
- Restez au courant des nouvelles propriétés CSS, ainsi que leur support dans les navigateurs.
Dans tous les cas, évitez les trucs listés ici.
Non Monsieur, l’Internet n’est pas 
