L’enjeu est simple : si votre site est trop lent le visiteur ne restera pas. Nous pensons clairement chez Kiwano que le critère de performance du site côté client est un critère encore trop sous estimé par les créateurs de sites. Si vous avez aujourd’hui un investissement à faire sur votre site : faîtes le pour améliorer la vitesse ressentie par les utilisateurs. Vous gagnerez des visiteurs fidèles et des places dans les résultats de recherche Google.

Nous vous proposons donc de revoir les techniques pour améliorer la performance de votre site au travers d’un cas concret pour partager avec vous ce qui a été fait sur un autre site.
N’hésitez pas à donner votre avis et partagez votre expérience.

Présentation du sujet d’étude : le site de location de camping-car CampiLoc

CampiLoc est un site de location de camping-cars de particulier à particulier. Il propose aux propriétaires de camping-cars de mettre gratuitement une annonce de location sur le site et aux amateurs de locations de camping-car de trouver un camping-car dans la région qu’ils souhaitent.

CampiLoc est un site utilisant une technologie serveur moderne avec un code créé sur mesure ce qui est un vrai atout pour intégrer facilement des optimisations.

Performance côté client

Quand nous parlons de performance d’un site web il est important de rappeler que nous voulons mesurer et améliorer la performance ressentie par le visiteur. Nous ne mesurons donc pas le temps mis par le serveur pour générer la page mais le temps total d’affichage de la page dans le navigateur client (temps serveur + temps total de téléchargement des éléments).

Premier réflexe : vérifier le code serveur

Alors oui, nous allons beaucoup parler de techniques côté client mais il faut également vérifier que le serveur n’est pas lent. Sur le site CampiLoc, l’hébergement est en France sur un serveur dédié suffisamment puissant. Des techniques de cache applicatif serveur des informations ont été employées pour avoir des pages qui répondent au plus vite.

News en page d’accueil

Concernant la page d’accueil, un extrait des dernières news du blog est affiché en bas de page. Cette information n’est pas essentielle pour l’utilisateur (et pour Google) car elle reprend un contenu déjà présent sur le blog. Par contre charger un flux RSS externe augmente le temps de génération de la page côté serveur. Il a donc été décidé de charger ce contenu en asynchrone via une requête Ajax.

Réduire le poids des éléments

L’étape suivante consiste à réduire au maximum le poids de tous les éléments renvoyés au client. Selon le site HTTP Archive, pour le top 1000 actuel des sites web, le poids total d’une page fait en moyenne 1137 Ko dont 204 Ko pour le JavaScript, 36 Ko pour le code CSS, 46 Ko pour le code HTML et 614 Ko pour les images.

Concernant le code HTML, CSS et JavaScript, le site n’utilise pas de progiciel ou de thème. Seule la librairie Telerik (basée sur jQuery) est utilisé pour les composants d’interfaces comme les grilles, les calendriers, les sélecteurs de dates, les onglets…
Nous avons donc un code HTML, CSS et JavaScript réduit naturellement car écrit spécifiquement pour les besoins du site.

Minify & GZip CSS

Le code CSS est minifié, c’est à dire que l’ensemble des commentaires ont été supprimés ainsi que les éléments non nécessaires comme les espaces, les points-virgules, les retours à la ligne…

L’outil en ligne YUI Compressor permet de réduire facilement le code CSS tout en garantissant les mêmes fonctionnalités.

Ensuite le code est gzippé automatiquement par le serveur et renvoyé au navigateur qui le décompressera.

Ces techniques ont permis de réduire le code CSS de 99,4 Ko à 79,1 Ko une fois minifié puis enfin à 25,3 Ko une fois compressé soit un gain de 74,1 Ko !

Minify & GZip JavaScript

Côté JavaScript, nous passons de 595,7 Ko à 259,6 Ko une fois minifié puis enfin à 83,6 Ko une fois compressé soit un gain de 512,1 Ko !

Minify HTML et réduction du code HTML

La minification du code HTML n’est pas une opération facile car un retour chariot ou un espace est interprété et affiché par le navigateur. Supprimer un espace ou un retour chariot peut donc avoir des conséquences sur votre affichage.
Une petite optimisation a cependant été faite en supprimant les tabulations et espaces en début de ligne ainsi que les lignes vides.

Le site n’utilise pas HTML5 pour des questions de rétrocompatibilité (et pour éviter de charger un script en plus) mais charge quand même le doctype HTML5 car les navigateurs récents utilisent un moteur HTML5 plus rapide que le moteur HTML4.

Le code HTML est sémantique avec peu de code de structure. Ceci a permis de réduire le poids de l’HTML tout en ayant un bon ratio contenu/structure.

Enfin, le code HTML final est renvoyé compressé au navigateur client.

Réduire le poids des images

Toutes les images utilisées sur le site ont été générées à la bonne taille. Nous voyons encore trop souvent, pendant nos audits de sites, des images trop grandes et réduites dans le code HTML ou CSS. Nous avons donc vérifié que toutes les images étaient fournies à leur taille d’affichage (et ne nous parlez pas d’écran retina svp).

Ensuite, toutes les images ont fait un tour dans un outil d’optimisation en ligne pour réduire leurs poids au maximum sans impacter leur qualité.

Nous vous conseillons l’excellent outil Kraken Image Optimizer pour optimiser vos images en ligne.

Images des camping-cars

Le site CampiLoc, comme tout site d’annonces en ligne, propose aux propriétaires d’uploader des images pour agrémenter leurs annonces.
Les images chargées par les propriétaires sont des images lourdes et non optimisées pour le web.

Plutôt que rajouter des contraintes de taille et de poids aux propriétaires, l’idée a été de garder les originaux chargés par les propriétaires et de régénérer à la demande, selon la page du site, des images optimisées à la bonne taille pour qu’elles soient les plus légères possibles.

Réduire le nombre de requêtes HTTP

L’étape suivante est de réduire le nombre de requêtes effectuées par le navigateur. Selon le navigateur le nombre de requêtes maximum effectuées en parallèles est variable mais ce nombre n’est jamais important. De plus le délai peut être long (surtout avec une connexion mobile) entre la demande de téléchargement d’un nouvel élément et le début du téléchargement de cet élément. Il est donc recommandé de combiner les requêtes pour réduire au maximum leur nombre nécessaires à l’affichage de la page.

Combiner le code CSS & JavaScript

L’ensemble du code CSS est combiné côté serveur et renvoyé côté client avec dans le nom du fichier combiné avec un hash des noms de fichiers CSS originaux (nous verrons plus loin pourquoi ce hash est important).
La même technique est utilisée pour combiner le code JavaScript.

Nous avons donc réduit le nombre de fichiers pour passer de 10 fichiers CSS à un seul fichier et de 13 fichiers JavaScript à un seul fichier !

Utilisation de sprites pour les images

Les images utilisées par le code CSS doivent être regroupées dans un sprite, c’est à dire une seule grosse image combinant toutes les petites images. Avec un sprite CSS il suffit simplement de modifier la propriété background-position de l’image combinée pour déplacer la zone visible pour avoir l’image finale souhaitée (il faut voir le bloc HTML comme une fenêtre qui ne rend visible qu’une partie du sprite qui est déplacé comme on le souhaite).

Les composants Telerik utilisent déjà un sprite CSS.
Nous avons donc créé un sprite supplémentaire pour l’ensemble des images spécifiques au site CampiLoc. Nous vous recommandons de construire vos sprites « à la main » car l’utilisation d’un outil automatique créera des zones vides qui augmentent légèrement le poids du sprite.
Ce sprite est ensuite passé entre les mains de Kraken pour réduire son poid au maximum .

Cas particulier de la carte de France

Le site CampiLoc propose une carte de France pour faire une recherche rapide des camping-cars disponibles pour une région de France. L’utilisation de la balise Map et Area permet facilement d’avoir des urls différentes (et donc des recherches différentes) en fonction de la zone cliquée sur la carte. Par contre il est important d’avoir un retour utilisateur au survol de la carte pour comprendre quelle recherche va être lancée en fonction de la zone activée.

La méthode habituelle pour changer une image en fonction du survol est de le faire au hover en CSS. Par contre en CSS impossible de récupérer l’Area survolée pour modifier l’image en conséquence. Pour garder cette information, on passe donc par du code JavaScript.

La solution en JavaScript est de modifier l’image en fonction de la zone survolée mais pour éviter le chargement de la nouvelle image il faut précharger l’ensemble des images pour chaque région (c’est la technique employée par leboncoin par exemple).

Comme évoqué précédemment, nous voulons éviter de charger trop d’objets. Nous avons donc créé un sprite contenant l’ensemble des survols (et ne contenant que les survols en orange) que nous positionnons au-dessus de la carte normale. Au survol de la carte, un code JavaScript modifie le background-position pour avoir la bonne image au survol.

Voici un extrait du code JavaScript :

$('area[id^="Map"]').hover(
	function () {
		var nb = ($(this).attr('id').substr(3, 5));
		$("#RealMap").css("background-position", "0 -" + 274 * nb + "px");
	},
	function () {
		$("#RealMap").css("background-position", "0 0");
	}
);

Définir un cache client pour l’ensemble des objets

L’ensemble des éléments CSS, JavaScript et images du site CampiLoc ont un cache client positionné pour 1 an. Ceci permet au visiteur de n’avoir à charger que le code HTML une fois la première page chargée.

Pour invalider le cache client d’un élément, il suffit de renommer le fichier source, dans le cas d’un fichier CSS ou JavaScript le hash calculé par le serveur change et le navigateur chargera le nouveau CSS ou JavaScript combiné dans son cache.

Quelques optimisations complémentaires et statistiques finales

En vrac, voici quelques optimisations supplémentaires appliquées sur le site :

• Plus de redirection DNS.
• Le chargement du fichier CSS combiné a été placé dans le <head> de la page et le fichier JavaScript juste avant la balise fermante </body>.
• Le fichier favicon a été optimisé et peut-être mis en cache par le navigateur.
• Les tailles des images de contenu ont été définies dans le code HTML.

Avec le code JavaScript Google Analytics, le chargement de la page d’accueil complète représente au total 406,2 Ko pour 19 requêtes HTTP.

Le site obtient donc le grade A (92/100) sur YSlow et la note de 96/100 sur Page Speed.

Conclusion

L’ensemble de ces optimisations permet au site CampiLoc d’avoir un poids assez faible et un chargement rapide des ses pages. Nous pensons que ces optimisations améliorent l’expérience utilisateur et contribueront ainsi à améliorer le positionnement du site sur Google.

Vous pouvez analyser votre propre site pour regarder le poids des éléments, le nombre de requêtes HTTP et le cache client. Vous pouvez aussi consulter les conseils de Yahoo et les conseils de Google.
Si vous souhaitez vous aussi un audit complet de votre site n’hésitez pas à nous contacter.

L’amélioration des performances d’un site est un travail quotidien. Il reste bien sûr des optimisations possibles, si vous voyez un point qui pourrait être corrigé n’hésitez pas à le partager dans les commentaires.

Il n’y a pas forcement de critère numéro 1 à prendre en compte pour améliorer le référencement de votre site. Il y a un ensemble de critères à travailler dont certains sont plus importants.

Mais si vous venez de lancer votre site, vous n’avez pas le temps de tout faire. Il vous faut donc définir correctement les priorités pour votre site.

Kiwano vous révèle ce que l’on ne vous dira peut-être pas ailleurs : la priorité n’est pas d’avoir des backlinks ou des partages sur les réseaux sociaux. La priorité est d’améliorer la qualité de votre site.

Kevin : Mais il est fou lui ? Le backlink c’est le graal !
Kiwano : Assis-toi Kevin, on t’explique…

Un site qui apporte quelque chose à l’utilisateur

C’est un peu la même idée que le fameux « contenu de qualité » que l’on vous conseille sur tous les sites parlant de SEO… Mais L’idée est plus vaste que ça : si votre site ne sert à rien vous pouvez faire les optimisations que vous voulez mais les internautes ne resteront pas dessus (à vous les high scores en taux de rebond). Si votre site n’apporte rien de nouveau, même punition : les internautes n’y reviendront pas …
Bref, on travaille son produit (solutions, contenus) pour avoir le meilleur produit possible : le plus original, le plus pertinent, le plus apprécié.

La vitesse de votre site web

Si vous avez 2000 euros à dépenser aujourd’hui dans votre site web, dépensez les pour améliorer la vitesse de votre site. La vitesse c’est LE critère à travailler pour fidéliser vos internautes. Cerise sur le gâteau : Google aime bien les sites rapides.

Arrêtez vos plans sur la comète et vos longues campagnes de linkbaiting ! Démarrez plutôt une campagne d’amélioration de la vitesse de votre site. Quand nous parlons de vitesse nous faisons allusion au temps total perçu par le visiteur de votre site, de la fameuse « expérience utilisateur ».

Nous reviendrons dessus dans un futur article mais si on regarde les recommandations Google et Yahoo, il faut optimiser le poids des éléments (c’est quoi cette image de 1 Mo ?) et le nombre d’éléments nécessaires pour l’affichage de votre page.

L’ergonomie et le graphisme de votre site

Améliorer le référencement de votre site en réduisant le nombre de boutons de partage sur votre site ça parait fou. Ces 50 boutons de partage qui prennent toute la place sur votre site ne pousse pas votre visiteur à partager votre page, tout au contraire.
A quoi sert de faire un travail pour améliorer le nombre de visiteurs qui arrivent sur votre site si l’ergonomie et le graphisme le chasse immédiatement ?

Alors on commence par les basiques, on missionne un graphiste/ergonome sur son site. On définit et met en avant l’objectif principal de chaque page du site. On travaille sur le design et l’ergonomie pour avoir la meilleur transformation possible des visites.

Avez-vous vérifier avant de truffer de mots clés vos menus et contenu que tout cela reste le plus clair possible pour votre visiteur ?

Accessibilité web

L’accessibilité web et le référencement forment un vieux couple. Alors oui, bien sûr vous allez vérifier que les images de contenu possèdent toutes un attribut alt correctement renseigné. Vous allez aussi vérifier que votre site fonctionne sans JavaScript.

Ne vous arrêtez pas en si bon chemin. Vérifiez aussi l’utilisation des couleurs, vérifiez également que votre site fonctionne sur IE6 (oui j’ai bien écrit IE6), vérifiez encore que l’ensemble de votre contenu est présent dans le code HTML (et pas chargé en JavaScript), vérifiez enfin que votre site fonctionne correctement depuis un smartphone (avec des liens qui fonctionnent même avec des gros doigts) en Responsive Design…

Conclusion

Imaginez un internaute surfant depuis une plage de Marseille sur votre site. Avec sa connexion 3G et le soleil sur son SmartPhone, si vous n’avez pas mis en avant l’objectif de votre site, avec un design moderne, des couleurs correctement contrastées, un site compatible, rapide et accessible depuis un smartphone, vous risquez de vous mettre à dos cet internaute. Et là c’est le drame, votre contenu est intéressant mais l’internaute ne peut pas le partager avec ses amis. Pire il risque de commenter négativement votre super site !

Alors oui Kevin, on le répète, le plus important n’est pas les liens depuis les annuaires, les signatures sur les forums, les commentaires de blog, les CP, l’optimisation des liens en footer, le choix de répéter le mot clé ou pas dans le titre… Il faut construire la solution web de la meilleur qualité possible (contenu, vitesse, ergonomie, design, accessibilité, maintenabilité..). Ainsi, tu auras des internautes satisfaits qui créeront des liens tout seul comme des grands vers ton site. Tu pourras ensuite t’occuper sereinement des autres critères de référencement.

Vous utilisez donc une grille flexible, des images flexibles et du code CSS3 Media Queries pour adapter l’emplacement des éléments dans vos pages.

Et là c’est le drame ! Vous devez afficher un tableau de données de 12 colonnes dans vos site Responsive. Comment faire ? Les tableaux, ça ne se linéarise pas très bien (pas du tout même) et en l’affichant partiellement, vous risquez de masquer tout votre contenu optimisé et de limiter votre précieux référencement.

Je vous propose donc deux solutions utilisables pour vos projets sans nuire à l’accessibilité et l’indexation des données de votre tableau.

Première solution (ma préférée) : filament group propose des colonnes qui s’affichent en fonction de la place disponible

C’est tout bête, vous indiquez le niveau d’importance de votre colonne (persist, essential ou optional) et le script affiche/cache cette colonne en fonction de son importance. Par exemple dans un mode smartphone, on affiche seulement les colonnes persist et les colonnes essential.
La liste des colonnes est affichée à l’utilisateur s’il veut surcharger les choix qui ont été fait pour lui. Au niveau du référencement, pas de problème car le contenu est embarqué dans la page.

Exemple de votre tableau responsive sur PC

Exemple de votre tableau responsive sur iPhone

Fonctionnalité de surcharge des colonnes affichées / masquées

Explications complètes et guide d’implémentation du responsive table de filament group
ou retrouvez directement la démo du tableau responsive.

Deuxième solution : Zurb propose des tableaux qui scrollent

La solution de Zurb est différente : la première colonne (identifiant votre ligne) reste fixe et les autres colonnes sont toujours visibles avec un scroll à l’intérieur du tableau.

L’avantage de la solution est qu’il est facile de comparer la première colonne avec une des autres colonnes du tableau et les positionnant à côté.
Là encore c’est bonheur pour ton Google bot puisqu’au niveau du référencement, le contenu est visible car il est présent dans le code de la page.

Exemple de votre tableau responsive sur PC

Exemple de votre tableau responsive sur iPhone

Explications complètes et guide d’implémentation du responsive table de Zurb
ou retrouvez directement la démo du tableau responsive.

Et vous ? Connaissez vous d’autres solutions responsive pour les tableaux de données ?

Au début on fait des copier coller et en bidouillant un peu le code et on arrive, sans tout comprendre, à faire fonctionner la page. Et puis on apprend que les tableaux de présentation c’est le mal et enfin on essaye de ne pas attraper la maladie de la divite aigüe.
Bref, on arrive à créer de petits sites mais on a toujours l’impression de faire du bricolage.

Vient enfin l’instant fatidique où l’on vous demande de travailler sur un gros site web d’entreprise. Un site comportant un nombre important de pages. Un site professionnel avec beaucoup de fonctionnalités métiers. Vous vous dîtes qu’il va falloir partir sur une architecture solide et arrêter le bricolage !

Côté serveur, pas de problème : vous maîtrisez votre technologie et vous savez déjà comment industrialiser votre code.
Côté client, c’est une autre affaire !
Vous avez lu pas mal d’articles expliquant comment écrire du code HTML sémantique, comment positionner vos éléments avec du CSS mais vous ne savez pas comment démarrer votre site pro. En même temps, vous avez entendu parler de framework CSS, de responsive design, de CSS orienté objet et de grille.

Pas de panique, Kiwano vous propose un tour rapide des éléments à prendre en compte si vous démarrer un gros site web.
Ensuite nous verrons comment batir une architecture HTML et CSS solide avec une bonne base HTML et un bon découpage des styles avec en cadeau une archive d’un template de base HTML5 CSS3 par Kiwano.
Enfin nous terminerons avec une liste de conseils.

Framework CSS et grilles CSS

Un framework CSS est un ensemble de styles CSS réutilisables prêts à être appliqués sur votre code HTML. Les frameworks CSS sont découpés en composants. La plupart du temps il vous suffira d’indiquer une ou plusieurs classes à votre code HTML pour utiliser les styles dans votre code et les appliquer à votre site.

Le meilleur framework actuel est le Bootstrap de Twitter.
Par exemple, avoir ce framework, si vous voulez que votre élément ressemble à un bouton : il suffit de lui appliquer le style btn. Si vous voulez en plus lui appliquer le style d’un bouton d’alerte vous lui indiquez le style supplémentaire btn-danger.

Exemple de code :
<a class="btn btn-danger" href="">Link</a>

Rendu :

Le framework bootstrap de Twitter est basé sur une grille CSS. Qu’est ce qu’une grille CSS ?

Grille CSS

Une grille CSS est un ensemble de styles vous permettant de positionner vos éléments dans une grille verticale (colonnes).
Pour faire simple, vous indiquez à l’aide d’une classe CSS combien de colonnes doit prendre votre bloc de contenu.
Les grilles CSS sont découpées soit en 12 colonnes soit en 16 colonnes, ce qui vous donne le maximum de flexibilité. De plus ces grilles fonctionnent souvent en mode Responsive pour s’adapter à la largeur de votre écran.

Exemple avec la grille 12 colonnes de Twitter :

Si vous avez deux éléments et vous souhaitez que le premier possède une largeur de 4 colonnes et le deuxième une largeur de 8 colonnes, vous devez indiquer les classes row, span4 et span8 dans votre code HTML. Le chiffre à côté de span indique ce nombre de colonne :

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

Une autre grille utilisable est la 1140 CSS Grid de 12 colonnes fonctionnant jusqu’en 1280 pixels.

Skeleton est un autre framework CSS qui comporte aussi une grille CSS.

Doit-on obligatoirement utiliser un framework CSS ?

Démarrer un projet avec un framework CSS comme le bootstrap de Twitter vous fera certainement gagner du temps. Cependant, si le design que vous souhaitez est différent de celui de base du framework, cela vous posera rapidement des problèmes.
Deux solutions sont alors possibles : soit vous customisez le code du framework pour avoir un style graphique personnalisé, soit vous partez de zéro pour construire votre propre style graphique.
Dans le deuxième cas, prenez le temps de regarder comment est construit le code du framework, il y a beaucoup d’astuces et de solutions à reprendre (et à copier) pour recréer efficacement un style propre.

Constuire une base HTML + CSS : j’ai besoin de quoi ?

Il vous faut d’abord une base HTML solide et une feuille de style initiale pour vos éléments HTML. Plutôt qu’utiliser un Reset CSS, on utilise de plus en plus des styles d’initialisation pour l’ensemble des navigateurs. Il est en effet plus logique d’indiquer la bonne valeur dès le départ plutôt que de passer par une étape de mise à zéro.

Pour cela, le plus simple est de partir avec le code HTML5 boilerplate. Cependant, le conseil avisé de Kiwano est le suivant : vous pouvez plutôt utiliser l’outil Initializr qui vous aidera à construire cette base.

En sortie, vous aurez :

• Un code HTML5 de base avez de bons commentaires conditionnels pour gérer les surcharges IE
• La librairie Modernizr pour la compatibilité des nouveaux éléments HTML5 avec les anciennes versions de Internet Explorer et la possibilité de tester le support d’un certain nombre de fonctionnalités
• Une feuille de style de base pour vos éléments
• Un ensemble de styles d’aide comme le fameux clearfix
• Une feuille de style de base pour l’impression.

Une grille CSS et un premier zoning HTML5

Il vous reste à ajouter une grille pour la gestion de vos styles et à découper votre layout de page HTML5.

Exemple de découpage de la page avec les nouveaux éléments HTML5 :

Découpage des CSS

Pour le découpage des CSS, en plus des styles de base, il vous faut d’abord une feuille de style décrivant les layouts dont vous avez besoin pour positionner vos principaux éléments.
Kiwano vous conseille ensuite de construire des modules réutilisables pour vos éléments, par exemple un module pour vos boutons, un module pour vos formulaires, un module pour vos tableaux, un module pour vos icones, etc.

Media Queries

Les styles media queries de surcharge servent à faire fonctionner votre site quelle que soit la largeur de l’écran. Ils doivent être insérés au même endroit que le style de base surchargé.
Par exemple pour le code media queries de vos formulaires il faut l’insérer dans la même feuille CSS que le code de vos formulaires.

Le découpage conseillé est donc le suivant pour vos feuilles de style :

Téléchargement

En suivant le lien de téléchargement ci-dessous, vous trouverez un template HTML5+CSS3 pour bien démarrer vos projets Web. Ce template contient un code HTML de base, une feuille de style d’initialisation des éléments principaux, une grille CSS responsive (extrait du bootstrap de Twitter), quelques classes helper et enfin une feuille de style de base pour l’impression.
N’hésitez pas à modifier/adapter pour vos projets et à nous faire part de vos remarques/suggestions en commentaire.

Télécharger le kit de démarrage HTML5 CSS3 de Kiwano

Conseils, astuces et pièges à éviter

Pour finir Kiwano vous propose quelques conseils et erreurs à éviter pour le développement HTML et CSS.

HTML : les erreurs à éviter

– Faire de la mise en page avec HTML
– Utiliser des noms de classes et d’id en rapport avec l’aspect visuel
– Ecrire de l’HTML non sémantique (pour la mise en forme)
– Ecrire du code HTML uniquement pour le fonctionnement de scripts

CSS : les erreurs à éviter

– Utiliser des syntaxes complexes pour sélectionner votre élément à styler (il manque peut-être une classe non ?)
– Etre trop spécifique vous compliquera la tâche pour faire évoluer votre code
– Utiliser des hacks CSS

Recommandations HTML

– Utiliser des noms en minuscule séparés par des tirets
– Utiliser des doubles quotes pour vos valeurs d’attributs HTML à la place de la simple quote que vous utiliserez pour votre code JavaScript
– Utiliser une convention de nommage pour vos classes, images

Recommandations CSS

– Aller du générique au spécifique dans le code et respecter l’ordre HTML
– Mettre un style par ligne pour suivre plus facilement les changements de code
– Ordonner les propriétés par pertinence et non par ordre alphabétique
– Essayer d’avoir les sélecteurs le plus court possible et idéalement d’utiliser un nom de classe le plus à droite possible dans la définition du sélecteur
– Utiliser les sélecteurs d’enfants pour limiter la zone d’application du style

N’hésitez pas à partager votre expérience dans les commentaires.

Mais HTML5 c’est quoi au juste ? HTML5 est un nouveau jeu de standards, d’objets sémantiques et de règles pour le développement de site web exploitant des nouvelles fonctionnalités dans vos navigateurs comme le mode offline, le lecteur vidéo et de nouveaux éléments pour l’interaction de vos sites.

Un nouvel article intitulé « 7 Facts and Myths of HTML5 » écrit par Vail Joy sur le site Just Creative a attiré notre attention.

Voici donc une traduction partielle des 7 mythes à connaitre proposée par Vail Joy avec le bonus Kiwano.

Mythe n°1 : HTML5 fut inventé car Apple a stoppé le support de Flash

Apple semble être coupable de beaucoup de choses mais, même si HTML5 apporte des solutions innovantes pour les mobiles, la norme n’a pas été créée pour les besoins de l’iPhone.
En fait, c’est en 2004 que Opera et Mozilla se sont remis au travail pour définir les nouveaux principes du web avec comme idée principale de proposer une nouvelle roadmap pour de meilleurs standards et des pages plus rapides. Ces nouveaux principes couvraient des aspects comme la compatibilité descendante, la gestion des erreurs et un web ouvert pour éviter les spécificités de certains devices. Ce n’est qu’en 2006 que la proposition a été acceptée, et un nouveau document de travail de la spécification a vu le jour en 3 semaines, prêt à être utilisé.

Mythe n°2 : HTML5 ne sera pas prêt avant 2022

On ne sait pas comment ce mythe s’est répandu, mais le document de travail de la spécification HTML5 est clôt, ce qui signifie qu’aucune nouvelle fonctionnalité ne pourra être ajoutée. Comme cette spécification a été conduite par Opera et Mozilla depuis le début et que la plupart des éléments de la spécification sont déjà supportés par les principaux navigateurs, elle a de forte chance de passer en Candidate Recognition cette année. De plus, vous pouvez utiliser HTML5 dès aujourd’hui car tous les navigateurs actuels supportent HTML5.
Ce à quoi vous devez faire attention n’est pas le code HTML5 mais plutôt les éléments CSS que vous emploierez. Même en utilisant un Reset CSS, un design utilisant les nouveautés CSS3 peut provoquer des problèmes sur les anciens navigateurs.

Mythe n°3 : HTML5 requiert CSS3

Cela a du sens d’utiliser les classes sémantiques et déclarations CSS3 si vous construisez un site basé sur HTML5 mais ce n’est pas une nécessité. HTML5 n’est que du balisage, vous pouvez donc très bien n’utiliser que du CSS2 pour la mise en forme de vos éléments mais il faut penser à styler tous vos éléments. En d’autres termes, la spécification HTML5 supprime tous les éléments et attributs qui contrôlent le look de vos pages web. Le navigateur utilisant HTML5 vous impose donc un code juste et sans erreurs mais utiliser CSS3 n’est pas une obligation.

Mythe n°4 : HTML5 n’est pas accessible

Tout au contraire, HTML5 a été construit dans une optique d’accessibilité. La plupart des éléments fonctionnent avec les rôles importants de WIA ARIA. Ces rôles sont des attributs spéciaux qui sont pris en charge par des dispositifs comme les lecteurs d’écrans pour mieux interpréter le contenu du site.
Convertir un site en HTML5 peut ruiner son accessibilité si ces rôles ne sont pas implémentés correctement, mais ce ne sera pas de la faute du balisage HTML5.

Mythe n°5 : HTML5 va tuer Flash

Le fait est que Flash est encore utilisé par des millions de sites et de développeurs dans le monde entier. Même si le support des vidéos de l’audio de HTML5 a rapidement été adopté par sa simplicité de mise en oeuvre, des fonctions importantes manquent toujours par rapport aux lecteurs basés sur des plugin. L’avance prise par Flash n’est clairement pas prête d’être compensé rapidement.
Cependant, concernant le web design, nous verrons heureusement une transition rapide de Flash vers HTML5 dans les prochaines années.

HTML5 est plus simple que Flash à apprendre et à utiliser, même sans connaissance avancée en JavaScript. Il ne nécessite pas l’installation d’un plugin pour fonctionner, se charge plus rapidement et fonctionne très bien sur les mobiles.
HTML5 ne tuera donc pas Flash mais dominera sur les sites mobiles et le marché du développement.

Mythe n°6 : si j’ajoute le nouveau doctype HTML5 à mon site, il est maintenant HTML5

Oui bien sûr en utilisant le doctype HTML5 votre page sera HTML5. Mais HTML5 est plus qu’un simple doctype. C’est un ensemble de bonnes pratiques et d’éléments sémantiques comme header, nav, section, article et footer par exemple.
HTML5 vous permettra d’utiliser les nouvelles capacités des navigateurs. Adopter le nouveau doctype est un premier pas dans la bonne direction mais il est important d’apprendre ce qu’apporte HTML5. Attention aussi à bien prendre en considération les éléments et attributs qui ont été dépréciés par cette nouvelle norme et de le comparer à votre code existant pour maximiser vos chances de compatibilité.

Mythe n°7 : vous gagnerez un meilleur job, plus d’argent ou plus de respect si vous utilisez HTML5

Devenir un gourou HTML5 ne vous ferez certainement pas gagner le concours d’homme le plus sexy (ou femme la plus sexy). Ce ne sera certainement pas suffisant pour rentrer dans une agence web réputée. Par contre, apprendre à maîtriser les nouvelles technologies demande du temps et de la persévérance ce qui vous apportera la reconnaissance de vos pairs.

Mythe n°8 : HTML5 fonctionne aussi sur mon vieux Internet Explorer 6 (bonus Kiwano)

On me pose la question souvent : oui, votre site continuera à fonctionner avec HTML5 même sur des vieux navigateurs comme Internet Explorer 6.
Si vous faites un site qui sera utilisé en Asie, la compatibilité avec IE6 et IE7 est obligatoire pour vous. Soyez rassurés : vous pouvez quand même utiliser HTML5 car son doctype est valide sur les vieux navigateurs.

Il vous faudra aussi inscrire les nouveaux éléments dans le DOM en Javascript pour pouvoir appliquer du style CSS sur IE6 et IE7.
Pour cela, vous pouvez utiliser un script HTML5Shiv ou encore l’excellente librairie Modernizr qui en plus vous apportera les fonctionnalités de tests des nouveautés HTML5 et CSS3 et de leur support.

Pour conclure sur HTML5

HTML5 est lancé ! Vous devez commencer à l’utiliser pour vos projets !
Argument supplémentaire : les navigateurs modernes ont des moteurs HTML5 plus rapides que leur anciennes versions HTML4 : votre site sera plus rapide en plus d’être au goût du jour.

Google Trends et ad planer

L’outil Google Trends (tendances des recherches) permet de connaitre le nombre de recherches pour un mot clé (principe utilisé par Google Fight 2) mais aussi le nombre de visiteurs par jour pour les sites souhaités. Il faut bien sûr que le site reçoive suffisamment de visiteurs pour avoir des informations mais grâce à Google Trends vous connaitrez : le nombre de visiteurs de vos concurrents, leur répartition par pays et les principaux termes de recherche pour ces sites.

Exemple avec le site smashingmagazine.com :

Cerise sur le gateau, si vous cliquez sur le lien en bas de la page Google Trends intitulé « Get more information on smashingmagazine.com with Google Ad Planner » vous avez accès à des informations plus détaillées de type profiling, mots recherchés, sites connexes visités vous permettant de connaitre jusqu’au sexe ou au revenu des visiteurs du site.

Alexa

L’outil « Site Info » du site Alexa est un outil très complet. Il donne sur le site de votre choix des informations sur le traffic, l’audience, le nombre de recherche, les liens, etc.

Avec Alexa, vous pouvez apprendre gratuitement que le top des recherches qui ont le plus d’impact (c’est à dire les recherches populaires et en compétition) pour le site Kiwano est :

1. google fight
2. balise
3. media queries
4. annuaire payant
5. referenceur web debutant paca
6. annuaire payant
7. balise marquee
8. référencement marseille
9. référencement naturel marseille
10. création sites web

On apprend aussi (à notre grand désespoir) qu’il y a plus d’hommes qui visitent Kiwano que de femmes.

Compete

Compete est un outil similaire à Alexa et Google Trends permettant d’avoir des informations sur vos concurrents. Il ne fournit pas d’informations régionales mais propose une version pro et une api.

Exemple de graphique avec le site presse-citron.net :

Autres sites

D’autres sites existent comme la version gratuite de iSpionage, SEMRush (qui prend en charge les petits sites) et Quantcast (plutôt centré sur les Etats-unis).

Exemple de graghique avec le site alsacreations.com :

Vous connaissez un autre outil ? Une astuce de veille concurrentielle ? Partagez l’info, n’hésitez pas à nous en parler en commentaire !

L’Auto-complétion ou saisie semi-automatique

Désormais lors de la saisie de vos mots clés sur la page de recherche, Google peut vous proposer l’auto complétion. En clair, si votre recherche concerne des mots clés souvent utilisés, un petit menu déroulant vous propose au fur et à mesure de votre saisie une réponse pertinente… ou pas !

Comme je le disais, cette recherche se base sur les mots clés les plus souvent utilisés et ce ne sont bien sûr pas forcément ceux auxquels vous pensez.

Exemple : vous cherchiez des graines d’un fruit aussi populaire que le kiwano. Vous allez donc taper graine de ki… et là Google vous proposera tout sauf du kiwano.

Alors la saisie semi-automatique, qu’est ce que ça change ?
.. et bien, pas mal de choses en fait.

• Fini le référencement sur les orthographes volontairement approximatives de mots clés. La pratique commune qui consistait à référencer des expressions avec des fautes d’orthographes courantes en prend un coup !Exemple : envie d’un « cours de dance »… vous réaliserez vite que la bonne orthographe du mot est danse avec un ‘s’
• Exit également le référencement d’expressions trop précises ou de niches.Exemple : vous cherchiez des informations sur les « match de football » ? Désormais, il y a fort à parier que vous taperez désormais « match de foot »

Bref vous l’avez compris cette fonctionnalité n’est pas qu’une simple aide, puisqu’elle guide l’internaute et donc influence directement sa recherche et sa navigation.
Lire la documentation officielle de Google sur la saisie semi-automatique

La prévisualisation

Les réponses de chaques SERP sont maintenant enrichies d’une petite icône représentant une loupe cliquable. Cette fonctionnalité est très pratique car elle permet d’avoir un aperçu de la page du site en question.

Cette prévisualisation des SERP Google, qu’est ce que ca change ?
En terme de référencement peu de choses. Mais un peu plus en terme de communication et de marketing. Pensez que vos futurs visiteurs peuvent désormais avoir une vue de votre page d’accueil… mais une vue dégradée.

Exemple : Malgré toutes les annonces fracassantes de votre moteur de recherche préféré, celui-ci est toujours très myope face aux animations flash, aussi si votre site en contient, souvenez vous que le rendu sera amputé d’autant d’informations.

La différence est de taille, l’indexation correspond au fait d’appartenir à la base de données de Google alors que le positionnement est un « travail » effectué pour être correctement positionné sur certaines requêtes.

Le retour de l’annuaire

D’après les sources américaines plus que fiables, Google va donc lancer très prochainement son nouvel annuaire à destination des professionnels et dont l’inscription sera payante.
Suivant le forfait choisi il sera proposé au client de compléter sa fiche du site avec les informations provenant de Google Buzz, Local Business Center ou encore les informations aggrégées depuis votre flux RSS. Cette fiche permettra donc a terme d’acheter des backlinks en dur vers votre site mais aussi vers vos autres comptes sociaux comme Facebook et Twitter.

Intégration de l’annuaire dans le moteur de recherche et nouvelle option de Google Adwords

L’intégration se fera évidemment par le biais d’un nouvel onglet dans l’outil Google Adwords (notre image) permettant de fusionner les enchères de publicités classiques, les informations provenant de l’annuaire (notamment les mots clés) et un nouveau système annoncé comme « révolutionnaire » qui intégrera certaines annonces dans le flux classique de résultats.
En fonction de vos enchères, Google pourra afficher votre site dans les résultats de l’annuaire mais aussi dans le résultat classique de recherche et tout cela en l’administrant depuis une seule interface…

Nous sommes curieux de voir comment cette révolution s’intégrera dans SERP sans mettre en péril ce qui a fait le succès planétaire de Google : des résultats de recherche rapides, pertinents … et non soumis à des considérations commerciales.

[Mise à jour du 02 avril] Google Exocet, du nom du poisson volant, était la version Kiwano du poisson d’avril 2010. Nous espérons que vous avez apprécié ce « hoax ». A tout ceux qui pensent que nous l’avons publié un jour trop tôt, nous répondons que nous traitons tous nos fidèles lecteurs sur un même pied d’égalité. Ainsi, pour nos lecteurs australiens, le 1er avril commençait quelques heures plus tôt qu’en France (ils étaient tout de même 2 le mois dernier : un d’Adélaïde et l’autre de Brisbane).

Voici donc une sélection des dix crimes les plus courants concernant l’ergonomie et l’accessibilité des sites webs avec la solution pour les éviter.

Crime n°1 : avoir des labels non associés aux champs de saisies dans vos formulaires

Il est indispensable d’utiliser la balise label pour vos labels de formulaires et de renseigner l’attribut « for » pour pointer sur l’ID du champ de saisie. Ainsi quand l’utilisateur cliquera sur le label du formulaire, il aura automatiquement le focus sur le champ de type input qui lui est associé. Ceci est encore plus important pour les champs de type bouton radio ou de type case à cocher car cela augmente sensiblement la zone cliquable minuscule de ces éléments (pensez aux gros doigts de vos utilisateurs quand ils utilisent votre formulaire sur leur smartphone).

Crime n°2 : avoir un logo qui ne contient pas de lien vers la page d’accueil de votre site

Avoir un lien sur le logo de votre site pointant vers la page d’accueil de celui-ci est devenu une pratique courante, si courante que les utilisateurs ont maintenant pris l’habitude de cliquer sur ce logo. C’est même devenu une convention du même ordre qu’avoir le logo en haut à gauche de votre site.
Par contre, selon nous, ce lien ne vous dispense pas du lien Accueil dans votre menu. Vous n’êtes pas à l’abri d’avoir un utilisateur qui cherchera le lien Accueil dans votre menu.

Crime n°3 : ne pas avoir de couleur différente sur les liens qui ont été visités

Il est important de donner à vos utilisateurs un indicateur visuel leur permettant de savoir quel lien ils ont déjà cliqué sur votre site. La méthode la plus simple est de leur donner une couleur différente afin de pouvoir les repérer immédiatement. Nous vous conseillons donc de mettre en oeuvre cette bonne pratique sur tous les liens textuels de votre site web.

Crime n°4 : ne pas avoir d’état actif pour les champs de vos formulaires

Vous pouvez utiliser le sélecteur « :focus » sur beaucoup d’éléments de vos pages mais cela prend tout son sens avec les champs de type input ou textarea. Il faut donc ajouter un peu de code CSS pour vos éléments inputs ou textarea pour mettre en surbrillance la bordure l’élément actif ou changer sa couleur de fond de sorte de pouvoir l’identifier d’un simple coup d’oeil.

Crime n°5 : avoir des images sans attribut alt

Nous avons déjà insisté sur ce point dans plusieurs articles Kiwano : il est indispensable (et obligatoire) de renseigner correctement l’attribut alt pour l’ensemble des images de votre site. Encore une fois, si une image ne contient pas de sens (i.e. si elle est de type icône ou background) vous devez mettre un alt vide (alt= » ») sinon, profitez-en pour mettre des mots clés qui aideront le référencement de votre image.

Crime n°6 : utiliser une image de background sans spécifier de couleur de background

Il est courant d’avoir du texte affiché sur des images de fond. Il ne faut pas oublier que l’utilisateur peut désactiver l’affichage des images. Dans ce cas il faut vérifier que le texte reste visible et que la différence de couleur entre le texte et la couleur de fond est suffisante. Il est donc fortemement conseillé de forcer une couleur de fond proche de celle de l’image qui sera affichée si les images sont désactivées.

Crime n°7 : utiliser de gros blocs de texte ennuyeux

Si vous avez beaucoup de texte à afficher, il faut faire attention à ne pas ennuyer votre lecteur avec de longs textes. Il est conseillé de donner du rythme en cassant ces blocs de texte avec des titres et des images pour faciliter le parcours de votre page.

Crime n°8 : souligner un texte qui n’est pas un lien

Tout le monde sait que le texte d’une page qui est souligné est normalement un lien. Il ne faut donc pas souligner du texte qui n’est pas un lien. Si vous voulez mettre en exergue une partie de votre texte, privilégiez plutôt les éléments strong et em.

Crime n°9 : avoir un lien « cliquez ici »

Avoir un lien de type « cliquez ici » est non seulement un crime pour le référencement de votre site mais en plus il oblige votre utilisateur à lire tout le paragraphe pour pouvoir comprendre ce que fait ce lien. Cette erreur est même double : cela peut paraître évident, mais plus un lien est long et plus il est facile à cliquer pour vos visiteurs.
Alors privilégiez donc les liens explicites décrivant correctement la page cible.

Crime n°10 : utiliser du texte justifié

Le texte justifié peut poser des problèmes à la lecture pour certaines personnes. De plus cela peut s’avérer vraiment hideux sur des paragraphes courts ou quand la longueur de la ligne est trop importante. Pour améliorer l’accessibilité de votre site, évitez donc les textes justifiés.

Vous avez d’autres crimes en tête que vous croisez tous les jours ? N’hésitez pas à les partager avec nous en laissant un commentaire.

Cette optimisation est très intéressante dans le cas de recherches universelles puisqu’elles affichent les premières images directement dans les pages de résultats comme dans l’exemple ci-dessous.

Utilisez un nom de fichier contenant les mots clés

Nous vous conseillons d’utiliser des mots clés séparés par des tirets pour définir le nom du fichier image, par exemple, une image de présentation de l’activité de Kiwano pourrait porter le nom « referencement-marseille.png ».

Donnez une description alternative à votre image

Il est obligatoire pour vos images de contenu de renseigner l’attribut alt de la balise <img>. Cet attribut vous permet de décrire le contenu de l’image sous forme de texte accessible aux moteurs. Essayez d’utiliser les mots clés que vous avez sélectionné pour le nom de votre image.
<img src="referencement-marseille.png" alt="Référencement Marseille" />

Vous pouvez encore donner une information complémentaire sur cette image à l’aide de l’attribut title, c’est lui qui vous permet de gérer l’affichage de la fameuse bulle de description contextuelle.
<img src="referencement-marseille.png" alt="Référencement Marseille" title="Expert en référencement naturel à Marseille" />

Enfin si vous voulez positionner un texte alternatif plus exhaustif, pensez à l’attribut longdesc.

Optimisez le contenu textuel du paragraphe contenant votre image

Google prend en compte le contenu texte avant et après votre image. Dans notre exemple, les mots clés référencement et marseille devront apparaitre dans le paragraphe contenant notre image. La pertinence de l’image est accrue si les mots clés sont aussi présents dans le texte de la page.

Privilégiez les images plus grosses

Les images plus grosses semblent apparaitre plus facilement en première page de résultat des recherches Google Images. Vous pouvez indiquer la taille de votre image dans le code html pour indiquer à Google que la taille de votre image est importante. Par ailleurs les attributs width et height de la balise <img> permettent de gagner du temps dans le rendu du navigateur en réservant l’espace de l’image lors du chargement.
<img src="referencement-marseille.png" alt="Référencement Marseille" title="Expert en référencement naturel à Marseille" width="500" height="500" />

Optimisez le contenu de la page contenant votre image

Google prend en compte l’ensemble du contenu de la page qui contient votre image. Essayez d’utiliser vos mots clés ainsi que des synonymes dans votre page.

Suivez @kiwanoweb sur twitter ou abonnez-vous au flux RSS de Kiwano pour des articles complets sur le référencement naturel (SEO) et la qualité Web (HTML, CSS, Standards) au quotidien.