Je vous rappelle quand même cet article sur l’ergonomie qui parle également des formulaires et incite à placer les étiquettes des champs à remplir au-dessus de ceux-ci.

25 Ultimate Useful Form Tutorials Using CSS and Javascript | Smashing Buzz.

10 Common CSS Browser Compatibility Issues/Bugs You Must Know | TutorialFeed.

Zen Coding: A Speedy Way To Write HTML/CSS Code – Smashing Magazine.

Avoir un code valide permet au navigateur de ne pas devoir manipuler, gérer ou fusionner des bouts de code pour tout faire fonctionner.

Une page avec un DOCTYPE correct et une structure va être rendue plus rapidement par le navigateur, et la compatibilité en sera améliorée.

Les outils de validation XHTML et HTML sont à trouver sur http://validator.w3.org/ et ceux pour le css sont à trouver sur http://jigsaw.w3.org/css-validator/

Réduire la quantité de requêtes HTTP

Cela nécessite du temps de télécharger les pages, mais cela prend également du temps d’exécuter toutes les requêtes qu’elles contiennent. Au moins de requêtes il y aura, au plus rapidement votre page se chargera.

Vous pouvez vous aider en suivant le guide trouvable sur http://www.dailyblogtips.com/speed-up-your-site-reduce-the-http-requests/

Compressez les images, les css et les JavaScripts

Les images, le Javascript et les feuilles de style peuvent toutes êtres réduites en termes de taille sans perdre des fonctionnalités. Le site Smush.it compresse les images bien plus et mieux que Photoshop.

Pour compresser les css, il y a des sites comme Clean CSS et CSS Drive Compressor. Ces sites vont supprimer les espaces, les points virgules et les marques de paragraphe, réduisant ainsi la taille du fichier d’un peu plus de 10%.

Placer le JavaScript le plus bas possible

C’est simple, et efficace. Il y a quelques années, le javascript faisait partie du début de la page. Il a été réalisé qu’il est mieux de l’ajouter en bas de page, parce qu’il est souvent tout à fait inutile. Par exemple, Google recommande de placer le code de suivi pour Google Analytics en bas de page.

Les extensions pour Firefox

Utiliser des extensions comme Firebug et la barre d’outils Web Developper peut vous aider sérieusement vous aider quand vous essayez d’optimiser le code. Firebug vous à aide à vérifier à quelle vitesse une page se télécharge et se charge. La barre d’outils Web Developper vous permet de ne pas afficher les images, d’éviter de charger les feuilles de style CSS ou les javascript pour voir comment votre site fonctionne sans tout cela.

La syntaxe de base du CSS

Il y a trois parties à un élément de code css : le sélecteur, la propriété et la valeur

p { color: #333333; }

Raccourcir le sélecteur Background

Le sélecteur background a cinq propriétés : la couleur (color), une image de fond (images), la possibilité de répéter cette image horizontalement et/ou verticalement (repeat), positionner cette image (position) ou même l’attacher (attachment).

Admettons qu’on utilise les cinq propriétés en les codant séparément.

#exemple {
background-color: #F0F0F0;
background-image:  url(logo.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-attachment: scroll;
}

Cela paraitra sans doute plus propre à la plupart d’entre vous, car pour les plus analytiques, une propriété = une ligne, c’est quelque chose de logique. Mais d’un point de vue optimisation, cela n’est pas idéal. Il vaut mieux tout coder en une ligne, qui contiendrait les 5 éléments les uns derrière les autres.

#exemple { background: #F0F0F0 url(logo.png) no-repeat 10px 10px scroll;}

Raccourcir le sélecteur Border

Selon le même principe, border contient les propriétés width (largeur), style (le style de bord, solid, dotted, etc) et la couleur. Ce qui peut donner :

#exemple  { border: 1px solid #c3c3c3;}

Raccourcir les sélecteurs Margin et Padding

Les sélecteurs margin et padding acceptent quatre propriétés (top, right, bottom et left – dans l’ordre des aiguilles d’une montre quoi) et il y a moyen de raccourcir en les mettant sur la même ligne :

#exemple { margin: 5px 10px 5px 10px;}

Si vous voulez, vous pouvez même penser à réduire de 4 à 2 valeurs en utilisant la même valeur pour top et bottom, et pour left et right. Ca donnerait donc :

#exemple (margin: 10px 20px;}

Ce qui voudrait dire que vous auriez une marge de 10px en haut et en bas, et 20px à gauche et à droite.

Raccourcir les codes hexa des couleurs

Les couleurs codées en code hexadécimal possèdent 3 x 2 lettres ou chiffres. Si les paires sont équivalentes, vous pouvez raccourcir :

color: #44DD66; peut devenir color: #4D6;

HOW TO: Elegant CSS Message Boxes for Blogs | cheth Studios.

10 Top-Notch CSS Editors.

Test Your Website in Different Screen Resolutions.

Kiwano – Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3.