The do’s and don’ts of modern web design regroupe les bonnes pratiques (do’s) et les mauvaises pratiques (don’ts) en web design. A chaque fois, un lien est fourni vers un article expliquant pourquoi c’est une bonne ou mauvaise pratique.
Bonnes pratiques
Dans les do’s on trouve par exemple :
- mettre les scripts en bas de page
- utiliser la bonne Doctype
- utiliser les sprites CSS (j’suis à moitié convaincu par celle-là)
- valider son code (pratique pour le présent et le futur)
- écrire de bons attributs class et id (je déteste les class=”blue” et autres class=”alignleft”)
Il faut dire qu’en l’occurence le conseil “Mix and match Classes” contredit un peu le “Write good class and id names” parce qu’il crée une classe “bordered” (bouh pas bien). Mais dans l’ensemble ça reste cohérent.
Mauvaise pratiques
Dans les don’ts (à éviter donc) on a par exemple :
- souligner ce qui n’est pas un lien (j’en vois encore)
- utiliser @import
- mal écrire son text “alt” pour les images
- forcer l’ouverture d’une fenêtre (laissez moi le choix bordel!)
- utiliser les pixels pour le texte (ça dépend du design je dirais…)
Le site aurait du rajouter “oublier de faire un lien sur le logo du site”!
Bbxdesign a réussi à transcrire en design l'idée que j'avais en tête, chose pas simple du tout !
6 commentaires
Biiru le 5 May à 13:44
Hello,
Deux petites questions, que j’élargisse mon niveau de connaissance
- Quel est l’avantage de mettre les scriptes en bas de page ??
- Qu’est ce qu’un “sprites CSS”
Merci d’avance et bonne suite pour ton blog vraiment sympa !!
Jeremy le 5 May à 14:19
Alors pour les scripts en bas de page, le site dit “Scripts block parallel downloads. You can get your site to load faster by moving your scripts to the bottom.”. En gros, si on mets les scripts en haut, faut attendre qu’ils soient chargés avant que le site commence à charger. Et vu que les scripts peuvent mettre du temps, il vaut mieux les mettre après le contenu.
Pour les sprites CSS, c’est en fait une grande image qui regroupe pleins d’images et on les affiche une à une en background grâce aux CSS. Ca sert notamment aux icônes : au lieu de faire 40 images avec 1 icônes dessus, on fait 1 image avec les 40 icônes et en CSS on choisit laquelle afficher. Je suis à moitié fan des sprites : c’est bien parce que niveau serveur, ça fait 1 seule requête au lieu de 40 (et niveau maintenance, ça peut être pratique d’avoir un seul fichier). Ce que j’aime pas, c’est qu’il faut le prévoir à l’avance, savoir quels fichiers mettre dessus, et puis c’est plus long à mettre en place (surtout niveau CSS). A noter qu’on peut pas mettre d’image qui se répète en sprite.
Exemple du sprite de Youtube : http://s.ytimg.com/yt/img/master-vfl93996.png
WonkaStudio le 6 May à 07:55
Très bon article, cependant je trouve l’article un peu trop court ! De même que “utiliser les pixels pour le texte” est vraiment utile dans des sites qui ont une problématique d’accessibilité. Je n’ai toujours utilisé que les pixels dans mes designs justement pour éviter que l’utilisateur puisse tout casser en augmentant la taille du texte
Merci pour ces quelques conseils.
Alprema le 6 May à 16:34
Assez d’accord dans l’ensemble, et pour vérifier les problèmes de connexions, perfs, etc… Il y a YSlow pour FFox qui est vraiment sympa (http://developer.yahoo.com/yslow/).
Jeremy le 6 May à 17:23
@WinkaStudio
En fait, si l’article est court, c’est parce que je reprends juste les éléments du site en question. Je ne comptais pas tous les reprendre. J’en prenais juste quelques-un en exemple. Il y en a d’autre sur le site si tu veux.
@Alprema
Je me souviens l’avoir installé il y a quelques temps mais c’était trop technique pour ma part.
web design Montreal le 12 Dec à 17:56
parfaitement d’accord avec toi, merci pour l’article