1. Organiser le code CSS : regrouper intelligemment les différentes règles, hiérarchiser (indentation pour indiquer la profondeur des éléments), commenter.

2. Faire des scripts non intrusifs : lorsque le Javascript est désactivé, les éléments doivent rester lisibles et utilisables.

3. Utiliser au maximum des unités dynamiques pour les tailles (polices, marges), telles que 1,5em ou 50%. Elles permettent plus de souplesse que les unités fixes (12pts, 20px).

4. Utiliser la balise <label> pour le texte accompagnant les champs de formulaire, et spécifier l’attribut for=« id-du-champ ». Il permet, au clic sur le label, de mettre le focus sur le champ associé.

5. Insérer les images à la taille qu’elles doivent avoir sur le site, 1/ pour ne pas charger une plus grosse image qui rendrait la page moins optimisée, 2/ pour éviter l’affichage de mauvaise qualité (sous les vieux navigateurs comme IE 7) du au redimensionnement CSS.

6. Toujours spécifier un texte alternatif aux images qui contiennent de l’information textuelle.

7. Éviter les majuscules et caractères spéciaux dans les noms des fichiers. Séparer les différents mots par un tiret cadratin « - » et non par un tiret bas « _ ».

8. Spécifier une couleur de fond pour les éléments de formulaire input[text], textarea, select, ainsi que la police d’écriture. Selon le navigateur, le fond par défaut n’est pas toujours blanc et les propriétés font n’héritent pas du body. Spécifier une couleur de fond pour le body.

9. Spécifier un style pour tous les titres (h1, h2, h3…) en respectant leur degré d’importance (le h1 est plus gros que le h2, qui lui-même est plus gros que le h3, etc.).

10. Spécifier un style différent pour chaque état d’un lien (soulignement, changement de couleur…), comme le survol (hover), le focus (focus), le lien déjà visité (visited)…

11. Utiliser des sprites à petit niveau pour réduire le poids de la page et éliminer le chargement des images à la volée (lors du survol d’un lien par exemple).

12. Insérer le code Google Analytics dans l’en-tête du site (conseillé depuis la dernière version de Google Analytics).

14. Créer un favicon pour le site.

13. Indiquer la langue, la section, etc. en tant que class sur la balise body ; indiquer l’identifiant de la page en tant qu’id.

15. Identifier les liens externes des liens internes au site, en leur attribuant par exemple un icône indiquant le lien sortant.

On sait que de nombreuses solutions existent en matière de développement web pour ne pas se limiter aux web safe fonts lorsqu’on veut styler du texte HTML. Une nouvelle a fait son apparition il y a quelques temps déjà : Google Font API.

Comment ça fonctionne ?

On choisit une police parmi celles de la bibliothèque disponible en ligne, qui s’enrichit régulièrement de nouveautés dans différents styles. Pour pouvoir l’utiliser, il faut insérer dans le <header> de son site web le lien vers cette police afin de la rendre disponible en CSS :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine">

On remarque que l’appel se fait via une variable passée dans l’URL. De cette façon, il va être possible d’insérer plusieurs polices en même temps, ou plusieurs versions de la même police. Par exemple :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine|Inconsolata|Droid+Sans">

permet d’insérer les polices Tangerine, Inconsolata et Droid Sans ;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine:bold,bolditalic">

permet de disposer de la police Tangerine en version Bold et Bold Italic. (Attention : la police par défaut, sans ses versions Bold, Italic, etc. ne pourra en effet pas s’afficher avec les effets CSS tels que font-weight. Si on souhaite appliquer des mises en forme, mieux vaut insérer la police voulue avec toutes ses variations)

Lire la suite

L’article de Webdesigner Depot m’avait vraiment beaucoup plu, et je ne résiste pas à l’envie d’en faire ici un petit copycat traduit en français. L’original s’adressait surtout aux designers, mais il se trouve que ces « péchés » s’adaptent très bien à la conception web en général !

Un projet web demande en effet le suivi d’un certain nombre de règles. Il s’agit ici d’associer à chacun des 7 péchés capitaux connus une mauvaise pratique en matière de création, et de trouver des solutions simples pour les éviter. Soyons vigilants !

Lire la suite

Le web social n’a pas fini de conquérir le web, et il lui reste sans doute encore beaucoup de contrées à parcourir. Qu’en est-il du 7e art ?

Partager… sur Allociné

Pour les amateurs de cinéma, il existe Allocine.fr (et son jumeau Allocine.ca), un site web francophone plus développé que la version française de IMDB (the Internet Movie Database), le site de référence pour les anglophones en matière d’actualité, de critiques cinéma et de référencement de salles.

Très bon site de ressources en la matière, il offre lui aussi la possibilité de se créer un compte utilisateur pour partager des informations sur les forums, se créer un blog, évaluer des films et rencontrer d’autres membres.

Lire la suite

Bienvenue dans le monde merveilleux du cinéma : aujourd’hui j’ai eu envie de faire un article sur les multiples petits détails comiques que l’on peut trouver dans un film quand on s’y connaît un peu en informatique.

Vous êtes libres d’en ajouter dans les commentaires, je pense qu’il doit en exister encore beaucoup d’autres !

Lire la suite