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 utilisez 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.

Présentation rapide de Google Wave

Google propose avec Google Wave un nouveau mode de conversation en temps réel où chaque conversation est appelée Wave. Une Wave ressemble à un message (comme un email) mais va plus loin car les informations sont partagées en temps réel entre l’ensemble des contacts associés à la Wave. De plus la plateforme est ouverte à des extensions qui proposent de rajouter des fonctionnalités comme les flux RSS, des jeux, du Chat vidéo, la méteo, des cartes, des formulaires, etc.

Modalités du concours

15 invitations Google Wave sont à gagner dès maintenant. Pour gagner, il suffit de faire un tweet depuis votre compte Twitter.
Ce tweet doit contenir un texte et un lien vers votre article favoris de Kiwano. A la fin du tweet, ajoutez simplement le tag #kiwano pour que nous puissions retrouver votre tweet. Vous n’êtes pas obligés de suivre (follow) le compte twitter de Kiwano @kiwanoweb.
Les gagnants seront tirés au sort vendredi 27 novembre au soir par notre jury totalement vénal sur des critères hautement subjectifs, voire sadiques et aléatoires. Soyez assurés que toutes les formes de corruption même primaires seront attentivement prises en considération.

Voici un exemple de tweet pour valider votre participation :

[Mise à jour du 27 novembre 2009] Nous mettons en jeu 10 autres invitations Google Wave. N’hésitez donc pas à faire un tweet vers votre article favoris de Kiwano, référencement Marseille.
Nous avons contacté une partie des gagnants. Pour ceux qui ne nous suivent pas sur @kiwanoweb, merci de nous communiquer votre adresse mail (@baptal et @DotVP).

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.

Ce nouveau produit baptisé Erreur 404 est visiblement une énième version de la fameuse boisson avec zéro sucre encore en cours de conception puisque sa page a été rapidement supprimée du site (voir notre photo).

Nul doute que ce produit sera rapidement suivi d’une version estampillée développement durable qui devrait porter, elle, le nom de Redirect 301.
Bref à suivre…

J’étais en train de me moquer d’un site ridicule, lorsque j’ai balancé une blague sur la balise marquee. A ma grande surprise, alors que j’étais entouré de geeks limite nerds, certains n’avaient pas compris la blague.
Alors quoi !? On lit à nos enfants la lettre de Guy Mocquet mais rien sur la balise marquee ? Ce devoir de mémoire, c’était évidemment une mission pour les experts de Kiwano.
Je vous propose donc de faire rapidement le point sur cette balise obsolète avant d’envisager son futur (si, si, si !!!).

Balise HTML Marquee

A la base, cette balise était la réponse de Microsoft à la balise blink de Netscape… Tout un programme ! Pour la petite histoire, la balise blink permet de faire clignoter du texte (et de déclencher des crises d’épilepsie) alors que la balise marquee permet elle de faire défiler un texte (et d’occasioner seulement des migraines ce qui démontre bien la supériorité de Netscape sur IE).

Je vous propose un petit exemple de marquee.
<marquee>
Communiqué important : Kiwano propose des formules exceptionnelles pour le référencement à Marseille...
</marquee>

Ce qui donne le rendu suivant :
Communiqué important : Kiwano propose des formules exceptionnelles pour le référencement à Marseille…

A ma grande surprise, j’ai découvert récemment que la balise marquee est maintenant supportée par la plupart des navigateurs, même les dernières versions de Safari.

Alors pourquoi la balise marquee c’est le mal ?

Bon je sais que vous connaissez la réponse à cette question. La balise marquee c’est le mal car, si on laisse de côté les considérations ergonomiques, elle ne porte pas de valeur sémantique. C’est pour cela qu’elle est devenue obsolète et qu’il ne faut donc pas l’utiliser.

Malheureusement, il semblerait que son rendu soit apprécié dans certains cas particuliers. Ne me demandez pas d’exemple, je sèche un peu… Votre avis sur le sujet m’intéresse grandement cela va sans dire.

CSS Marquee Module Level 3

La solution élégante (tout est relatif, j’ai de vraies réticences esthétiques) est donc d’utiliser un style CSS pour la mise en page désirée. Le nouveau module CSS 3 Marquee nous donne la solution technique.

Voici donc l’exemple précédent en utilisant une bonne séparation html/css.
HTML
<p>Communiqué important : Kiwano propose des formules exceptionnelles pour le référencement à Marseille...</p>

CSS
p {
overflow-style: marquee;
}

Pour en savoir plus sur la propriété marquee en CSS, vous pouvez consultez la spécification qui est actuellement en Candidate Recommendation.

Netlinking

C’est la création, le positionnement et l’échange de lien. Le netlinking joue un rôle prépondérant dans le référencement naturel mais aussi dans des pratiques plus tordues comme le Google Bombing.
Une bonne pratique de Netlinking consistera par exemple pour un Webmaster à échanger des liens avec des sites complémentaires au sien, ayant un indice de PageRank ou de TrustRank élevé.

Kiwano

Fruit original et singulier, qui ne ressemble à aucun autre.
C’est aussi le nom de notre site spécialisé dans le Web à Marseille. Kiwano propose des audits, des actions pour améliorer la visibilité et le référencement naturel à Marseille (et ailleurs) de votre site Internet.

SEO

Optimisation pour les moteurs de recherche en anglais. On utilise couramment cet acronyme pour parler de référencement ou de positionnement.

Google Bombing

C’est une technique qui utilise le processus d’indexation de Google pour influencer ses résultats de recherche. Google entre autres paramètres de mesure base la pertinence de ses réponses sur le nombre et la présence des expressions recherchées dans des sites et sur des hyperliens.
Pour faire un bon Google bombing il vous faut donc rallier à votre cause un maximum de webmasters qui positionneront sur leur site des liens contenant une même expression vers la même page.
C’est ce qui est arrivé a G.W Bush sur l’expression « Miserable failure » qui menait à sa biographie ou encore à N. Sarkozy pour l’expression « trou du cul du Web ». La recherche « Trouver Chuck Norris » par exemple mène actuellement à un exemple de Google Bombing.
Le Google bombing est donc souvent utilisé par la communauté du Web en signe de protestation ou de dérision.

Black Hat

Ensemble des pratiques douteuses du référencement, (le côté obscur de la force), parmi lesquelles le spamdexing, le cloaking, etc.
Par opposition on qualifie les pratiques éthiques de white hat.
Luke : « le pouvoir du coté obscur est-il le plus fort ? »
Yoda : « noon, nooon …. plus rapide, plus facile, plus séduisant il est… mais pas plus fort. »

White Hat

Ensemble des bonnes pratiques du référencement. Ce sont par exemple les pratiques qui visent à augmenter la visibilité des informations de la page auprès des spiders (ou bot).

PR Sculpting

C’est l’optimisation du « ranking juice ». Un des paramètres principaux qui intervient dans le calcul du ranking d’une page est la présence de liens et de leur pertinence, d’où l’idée d’en favoriser certains au détriment des autres. Pour cela on peut jouer sur la présence de liens en JavaScript (et vlan dans l’accessibilité) ou l’utilisation de l’attribut « nofollow » (mais patatra… Google les prend maintenant en compte dans son calcul).

ROI

Acronyme anglais signifiant Return On Investment. Quand on parle de ROI, on parle donc de Retour sur Investissement. Il s’agit du taux de rendement d’une action en général et vous lirez peut être ça et là des remarques du genre : « Cela ne sert à rien de s’attarder sur ce mot clé, le ROI sera trop faible. »
En clair : l’investissement ne sera pas rentable.

Taux de transformation

C’est la proportion de visites qui conduisent à un objectif de votre site. Avoir un bon taux de transformation signifie donc que votre site est efficace. On l’utilise pour quantifier par exemple la proportion de visiteurs qui ont un comportement d’achat ou encore la proportion de visiteurs qui effectuent une demande de renseignement, etc.

Longue traîne

(ou encore Long Tail) est une notion statistique qui apparait dans les distributions. La traîne symbolise l’amortissement de la courbe de Gauss (ou courbe en cloche) des répartitions statistiques.
Appliquée au référencement elle met par exemple en évidence qu’il ne faut pas négliger de nombreux mots clés générant chacun une seule visite au détriment d’un seul générant beaucoup de visites. La somme des mots faibles étant supérieure à un mot fort.
On cite ainsi le fait que les articles vedettes du site Amazon représentent beaucoup moins de ventes que la somme de tous les articles de faibles ventes.

Taux de rebond

Le taux de rebond d’une page mesure le fait qu’elle est à la fois page d’entrée et de sortie du visiteur.
En clair si votre page a un taux de rebond élevé alors c’est une page qui a fait fuir votre visiteur.
Cette notion est toutefois à nuancer : par exemple dans le cas d’un blog un grand nombre d’informations du site est présent sur une seule page. La durée de visite est donc un critère complémentaire intéressant.

Bot, GoogleBot, Spider

Un Bot est un robot au sens informatique du terme, c’est à dire un programme développé pour analyser le contenu des pages Web, les classer, les répertorier et les noter.
Ce sont les bots qui renseignent les bases de données des moteurs de recherche. A l’inverse les annuaires eux se basent uniquement sur des inscriptions manuelles. Les bots sont capables de suivrent les liens d’une page et donc d’indexer du contenu qui n’a pas été soumis par son créateur.

Google Dance

On qualifie ainsi le changement de position périodique des sites dans les SERP qui faisait « danser » les sites d’une position à une autre. Le positionnement était autrefois mensuel mais il est maintenant quasiment en temps réel. Il ne reste de cette danse que le classement de pagerank.

SERP

Acronyme de l’anglais « Search Engine Result Page ». Ce sont les pages des résultats sur un moteur de recherche. Mieux vaut donc y figurer dans les premières positions !

Google Analytics

Solution proposée par Google pour mesurer les statistiques de fréquentation d’un site et mesurer son audience. Google Analytics fonctionne par ajout d’un javascript en pied des pages que l’on souhaite auditer. Il permet notamment de connaître les mots clés utilisés pour accéder à vos pages, le nombre de visites, la géolocalisation des internautes, etc.

Backlink

Lien retour en anglais. Les backlinks sont les hyperliens externes qui conduisent à votre site. Leur rôle, leur position et leurs contenus sont prépondérant dans le positionnement et la notoriété de votre site.

Keyword

(Mots clés) Les keywords sont les expressions et les mots clés qui permettent aux internautes de trouver votre site via une recherche (SERP). Le choix et le positionnement de ces mots clés est donc l’élément majeur de la mise en place de votre stratégie de communication et de visibilité sur internet.

Duplicate Content

Ou contenu dupliqué. On parle de Duplicate Content quand deux URL distinctes mènent au même contenu. Cette pratique est pénalisée par les moteurs de recherche qui voient là une façon de truquer et d’exagérer l’exposition de l’information et donc de gonfler artificiellement son importance.

Adwords

C’est la solution publicitaire proposée par Google. Pour faire bref, Adwords vous permet d’acheter une visibilité sur certains mots clés. Lors d’une recherche sur Google, en fonction du contexte de recherche Adwords ajoute des liens vers votre site aux résultats de recherche. Ces liens publicitaires sont signalés par la mention « Liens commercaux » dans les SERP. La facturation se fait au nombre de clics effectués par les internautes. Le prix du clic est mis aux enchères (en moyenne de 0.10€ à 1€ mais ce tarif varie suivant la demande du mot).

Annuaire

Comme les moteurs de recherche, les annuaires sont utilisés pour vous donner accès à de l’information.
Cependant les annuaires ne sont alimentés que par des actions manuelles d’inscription. Cela permet donc un contrôle précis de l’information publiée mais ne permet pas une investigation sur le web comme le font les bot des moteurs.
Citons le fameux annuaire DMoz qui sert de base référentielle à Google en complément de ses spiders.

Blacklist

Signifie en anglais liste noire. Si Google vous « blackliste », cela signifie que suite à des actions de type « black hat« , vos pages ont été retirées des résultats de recherche.

Spamming

C’est l’action d’envoyer en masse de mails non désirés par leurs destinataires. Le monde du spam se divise donc en deux catégories, les spammeurs (les expéditeurs) et les spammés (les destinataires). On parle aussi de « pourriel », contraction des mots courrier et poubelle.

Spamdexing

Littéralement spam d’indexation, le spamdexing correspond à un ensemble de techniques Black Hat ayant pour but de tromper les moteurs de recherche en vue d’obtenir un bon positionnement de façon abusive. On peut citer entre autres le cloaking, l’utilisation abusive de pages satellites, etc.

Cloaking

Signifiant dissimulation en anglais, le cloaking est une technique qui consiste à présenter un contenu de page différent en fonction du client. Cette technique de type Black Hat est souvent utilisée pour proposer un contenu optimiser aux robots des moteurs de recherche (identification du User-agent ou de l’adresse IP).

Spoofing

Usurpation d’adresse IP.

Voici donc, en vrac, quelques conseils et erreurs à éviter pour se perfectionner en développement CSS. Bien sûr cette liste n’est pas exhaustive et l’on compte sur vous pour nous aider à la compléter dans les commentaires.

Vérifier la compatibilité multi-navigateur

Il faut vérifier souvent, même très souvent, voire trop souvent, la compatibilité de votre développement sur l’ensemble des navigateurs que vous ciblez. N’attendez pas d’avoir fini le développement de votre CSS pour vérifier qu’il marche sur les autres navigateurs. Il est en effet beaucoup plus facile de corriger au fur et à mesure les problèmes de compatibilité multi-navigateurs.
Voici une liste d’outils pour vous aidez à rendre compatible votre site pour l’ensemble des navigateurs.

Anciennes versions de Firefox

Pour tester votre site sur les anciennes versions de Firefox, le plus simple est de télécharger ces anciennes versions de Firefox au format portable sur le site Portableapps.com.

Il existe aussi un soft pour les utilisateurs Mac : le logiciel MultiFirefox.

Anciennes versions de Safari

Il est possible d’installer les versions antérieures de Safari uniquement sur Mac en utilisant les versions standalone de Safari fournies par Michel Fortin.

Anciennes versions d’Internet Explorer

Plusieurs solutions existent pour tester sur des versions antérieures d’Internet Explorer.

IETester

IETester est une application qui contient toutes les versions 5.5, 6, 7 et 8 d’Internet Explorer, un onglet correspondant à une version.

Internet Explorer Collection

Internet Explorer Collection contient les version standalone de toutes les versions d’Internet Explorer.

Expression Web SuperPreview

Microsoft propose l’application SuperPreview pour vérifier le rendu dans différentes versions d’Internet Explorer. Cette application permet de superposer le rendu de deux navigateurs afin de pouvoir comparer les différents rendus (c’est l’application dont rêvent tous les « psychopathes de la compatibilité au pixel près »).

Les sites faisant des photos d’écran sur différents navigateurs

Adobe BrowserLab

Adobe propose sa solution BrowserLab qui vous permet d’avoir une photo du rendu d’une url dans différents navigateurs.

Browsershots.org

Browsershots.org est une solution similaire à BrowserLab sauf qu’elle propose plus de navigateurs à tester.

Browsercam

Browsercam ressemble fortement à BrowserShots mais propose des services payants en plus.

float:left n’est pas toujours la bonne solution

Quand on débute en CSS et que l’on vient de découvrir le positionnement à l’aide de float on pense souvent avoir la solution idéale pour tous les cas de figures. Or, positionner les éléments à l’aide d’un float:left ou float:right n’est pas toujours la bonne solution. J’ai même tendance à préférer les autres solutions. Je vous recommande donc de réfléchir d’abord en essayant de positionner à l’aide de la propriété position (avec des calques en relative et absolute) et de garder la propriété float pour les cas que vous maitrisez.

Développer en premier pour les navigateurs conformes

Tout est dit dans le titre du paragraphe. Pour maximiser vos chances de compatibilité multi-navigateur, il faut écrire un code valide qui sera bien interprété par les navigateurs conformes aux standards. Il vous reste ensuite à rajouter quelques styles pour rendre compatible votre page avec les anciens navigateurs non conformes, en gros rajouter des styles spécifiques pour ce superbe navigateur qu’est Internet Explorer 6 sans qui le cyberespace ne serait pas tout à fait le même.

Avoir un code facile à maintenir

C’est une règle assez commune en développement mais elle s’applique d’autant plus que le code CSS n’est pas modulable. Si vous ne faites pas l’effort d’avoir un code propre et commenté, la maintenance va vite devenir problématique car il est difficile plusieurs mois après l’écriture d’une feuille CSS de comprendre pourquoi on avait utilisé tel ou tel style pour le rendu.
Je vous recommande donc de systématiser les espaces dans votre code CSS et le point virgule à la fin, d’utiliser les propriétés raccourcies pour ne pas surcharger les styles, d’utiliser des conventions de nommage, de commenter votre code à chaque fois que vous utilisez une astuce ou quelque chose qui sort de l’ordinaire et enfin de définir vos styles en les classant du générique au spécifique et en respectant l’ordre linéaire de votre HTML (c’est très pénible de devoir chercher le style d’un header et de le retrouver en bas de la feuille de style).

Avoir une bonne base pour commencer

Il est important quand on débute en développement HTML/CSS d’avoir une base HTML/CSS solide. Je vous recommande la lecture de l’article 12 points essentiels pour construire une base HTML solide qui reprend en détail les points importants qu’il ne faut pas oublier.

Faire de la veille grâce aux blogs et réseaux sociaux

Nous conseillons très souvent aux débutants en développement Web de s’abonner aux blogs et réseaux sociaux des sites faisant référence dans le domaine. La majeure partie de la veille des experts Kiwano s’effectue via RSS et Twitter. Nous vous conseillons donc de vous abonner au flux RSS de Kiwano ou mieux, pour être informé en temps réél de l’actualité sur le développement HTML CSS, de suivre Kiwano sur Twitter.

Ne pas hésiter à poser des questions sur les blogs et forums

Si vous bloquez sur un problème, demandez de l’aide à la communauté. En expliquant votre problème sur les blogs et forums d’aide au développement CSS, vous serez surpris de la rapidité pour avoir une réponse de qualité. Pour démarrer vous pouvez utiliser les forums de Alsacréations et Developpez.com.

Savoir utiliser les classes et ID

Les débutants en développement CSS ont tendance à ajouter des classes et des ID sur l’ensemble des éléments de leur page. Vous devez essayer de réduire au maximum l’utilisation de ces classes et ID. Un ID sert à cibler un élément unique dans votre page comme un élément de navigation. Une classe permet elle d’appliquer un style pour plusieurs éléments dans votre page, elle est donc réutilisable. Par exemple vous pouvez définir une classe pour afficher vos éléments dans un mode erreur avec une classe « .error ».
Exemple de code superflus:

<div id="sidenav" class="left">
    <p class="nav-heading">
        <strong class="green">Menu</strong>
    </p>
    <p class="nav-menu1">
        <a href="#" class="blue-link">Accueil</a>
    </p>
    <p class="nav-menu2">
        <a href="#" class="blue-link">A propos</a>
    </p>
    <p class="nav-menu3">
        <a href="#" class="blue-link">Services</a>
    </p>
    <p class="nav-menu5">
        <a href="#" class="blue-link">Contact</a>
    </p>
</div>

Le même code allégé :

<div id="sidenav">
    <h2>Menu</h2>
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Distinguer le contenu de la mise en forme

C’est une règle que vous avez déjà lu plusieurs fois sur Kiwano : il est judicieux de séparer le contenu qui doit être dans votre code HTML de sa mise en forme qui doit être dans vos feuilles de styles. Il est également important de réfléchir à la sémantique des éléments HTML que vous manipulez. Plus vous serez précis pour donner du sens à votre code HTML plus la mise en page sera facilitée.
Il est ainsi important de se protéger du fameux virus qui menace les développeurs HTML/CSS. Je ne parle pas de la grippe A (H1N1) mais de la tristement célèbre maladie de la divite aigue dont les symptômes les plus flagrants sont des excès de tags <div> dans le code HTML qui remplacent alors les <td> des tableaux de présentations.
Donc encore une fois, il vaut mieux éviter le code suivant :

<div style="font-size: 24px; font-weight: bold;
 font-family: arial; color: red; padding: 10px;
margin: 10px;">Mon titre</div>

Pour lui préférer le code qui suit.
HTML :

<h1>Mon titre</h1>

CSS :

h1 {
    font: 2em bold arial;
    color: red;
    padding: 10px;
    margin: 10px;
}

Connaitre quelques techniques avancées

Il est utile de connaitre quelques techniques avancées qui correspondent à des cas de mise en page couramment utilisé sur le Web. Comme indiqué précédemment dans cet article, en faisant de la veille sur les blogs et sur Twitter, vous découvrirez au quotidien des nouvelles techniques avancées qui viendront enrichir vos connaissances de développeur CSS.

Centrer horizontalement vos éléments

Pour centrer un élément de type inline contenu dans un élément de type bloc, comme par exemple une image dans un paragraphe, vous pouvez utiliser la propriété text-align qui supporte les valeurs left (aligner à gauche), right (aligner à droite), center (centrer), justify (justifier).
Pour centrer un élément de type bloc, il suffit d’appliquer la valeur auto aux propriétés margin-left et margin-right, exemple :

div#menu {
   margin-left: auto;
   margin-right: auto;
}

Centrer verticalement vos éléments

Pour centrer vos éléments de manière verticale, je vous conseille l’article Vertical Centering With CSS (article en anglais).

Utiliser le mode inline-block pour gérer l’alignement dans vos formulaires

Pour aligner vos éléments de formulaires (label et input) et avoir un code qui marche sur tous les navigateurs, la meilleure technique reste d’appliquer la valeur inline-block à la propriété display de vos labels. Ceci vous permet d’avoir un alignement en standard de la baseline des textes contenus dans les labels et les champs de formulaires.
Code HTML :

<label for="prenom">Prénom : </label>
<input type="text" id="prenom" />

Code CSS :

label {
   display: inline-block;
}

Avoir un Sticky Footer

Voici 2 liens vers 2 techniques différentes permettant la mise en place d’un pied de page toujours positionné en bas de la page.
Techniques de Sticky Footer :

• Ryan Fait’s Sticky Footer
• New CSS Sticky Footer

Connaitre les hacks pour implémenter les propriétés CSS non supportés par IE6 mais ne pas en abuser

Il existe un certain nombre de techniques permettant d’utiliser des propriétés CSS bien utiles qui par défaut ne sont pas supportés par IE6. Par exemple, avoir des coins arrondis sur vos boites, pouvoir utiliser des PGN-24 pour utiliser la transparence semi graduelle, gérer l’opacity des éléments, utiliser les min-width et max-width, la gestion du hover sur les éléments qui ne sont pas des liens, etc.
Je vous conseille donc la lecture de l’article 10 CSS properties that ‘were’ impossible to implement in IE6 pour découvrir ces techniques.
Attention, il est déconseillé d’abuser de ces techniques car celles-ci ont un impact significatif sur la performance d’Internet Explorer 6. N’utilisez ces hacks que comme ultime recours.

Connaitre les plugins qui facilitent la vie

Le plugin indispensable pour vous faciliter la vie en développement CSS est le plugin Firebug pour Firefox.

Sous Internet Explorer, le plus abouti est la fonction Developer Tools disponible sur Internet Explorer 8. Sur les anciennes versions d’Internet Explorer, il faut télécharger la barre d’outil IE Developer Toolbar. Malheureusement, même si Microsoft a fait un gros effort pour Internet Explorer 8, les barres d’outils pour Internet Explorer n’arrive pas à la cheville de Firebug pour Firefox.

Il existe aussi d’autres plugins pour Firefox qui sont très utiles comme CodeBurner, CSS Usage et Dust-Me Selectors. Je vous conseille aussi l’article intitulé Top 10 Free Online CSS Editors ainsi que l’article 12 add-ons every Firefox user must have.

Conclusion

Les conseils sur le sujet ne manquent pas, nous avons donné ici ceux qui nous semblent les plus importants. Vous pensez que nous avons oublié une astuce incontournable ? N’hésitez pas à nous laisser votre commentaire afin que nous l’ajoutions à la liste.

Il peut donc être intéressant de demander à vos lecteurs de voter sur Fuzz pour les articles qu’ils ont appréciés.
Voici donc notre méthode, basée sur un hack WordPress, pour faire apparaitre un nouveau paragraphe sur la page de détail de vos articles proposant à vos lecteurs de voter pour vous sur Fuzz.

Description

Pour ajouter le nouveau paragraphe contenant un lien « voter sur Fuzz », nous voulions une solution simple et souple. Il faut pouvoir positionner le lien à l’endroit où l’on veut et uniquement pour les articles dont on veut faire la promotion.
Nous avons décidé d’utiliser un hack WordPress basé sur un champ personnalisé de l’article.

Le code

Le code est extrêmement simple. Dans votre fichier single.php, ajouter à l’endroit qui vous convient le code suivant :

<?php $cf = get_post_meta($post->ID, 'fuzz', true);
if (!empty($cf)) {
echo '<p id="fuzz">Vous avez aimé cet article, <a href="';
echo $cf;
echo '">votez pour lui sur Fuzz</a>.</p>';
} ?>

Ensuite, ajouter simplement un nouveau champ personnalisé nommé « fuzz » contenant l’adresse de la page de détail de votre article sur Fuzz.

Résultat

Ce petit code produit le résultat suivant :

Vous avez donc désormais la possibilité d’ajouter ce champ personnalisé sur les articles que vous souhaitez promouvoir sur Fuzz. Vous pourrez rédiger vos nouveaux articles WordPress, les publier, les ajouter sur Fuzz et ensuite ajouter facilement le lien qui incitera vos lecteurs à les promouvoir.

Google indexe déjà les pages Twitter ainsi que les tweets individuels, ils apparaissent donc dans les pages de résultats des moteurs de recherche.

Voici par exemple le résultat pour la recherche sur le compte Twitter de Kiwano : @kiwanoweb.

Il est encore temps pour espérer figurer en bonne place dans les futures recherches temps réel. Suivez nos conseils et vous pourrez positionner votre compte Twitter et vos messages (tweet) en bonne place dans les pages de résultats.

Cet article est une traduction partielle de l’article The Top 10 Twitter SEO Tips.

Choisissez correctement votre username

Le username doit être choisi avec soin. C’est en effet le username qui apparait dans l’url de Twitter. Il doit refléter au mieux le nom de votre société ou de votre marque. N’attendez pas trop pour réserver votre compte car la demande est forte sur Twitter, nous ne sommes d’ailleurs pas arrivés assez tôt pour réserver @kiwano.

Votre username doit être facile à mémoriser et en rapport avec votre stratégie de communication. Idéalement, il doit être suffisamment court pour être facilement tweetable.

Sélectionnez avec attention votre nom sur Twitter

Le nom (Name dans l’interface de gestion) est affiché à coté de votre profil. Il peut être différent de votre username. C’est le moment de mettre en avant votre marque, votre société ou la variation la plus populaire de votre marque.

Optimisez votre bio

Optimisez votre « bio » (One Line Bio dans l’interface de gestion) pour inclure les mots clés et idées les plus importants pour vous. Utilisez au maximum les 160 caractères autorisés. Pensez que votre bio est indexée par les moteurs de recherche.

Faites la promotion de votre compte Twitter

Pensez à mettre en avant votre compte Twitter dans votre site Web. Ajoutez une icône sur votre site pour indiquer à vos visiteurs qu’ils peuvent vous suivre (follow) sur Twitter. Vous pouvez aussi ajouter un bouton pour partager votre article sur Twitter.

Voici un exemple d’icône que vous pouvez ajouter sur votre site Web pour faire la promotion de votre compte Twitter.

Ajoutez l’url de votre site

Dans les paramètres de votre compte Twitter, pensez à ajouter l’url de votre site web. Ceci permet de ramener une partie du trafic de votre compte Twitter sur votre site. Le lien vers votre site dans Twitter ne sera pas considéré comme un lien entrant par les moteurs de recherche car le lien est en nofollow.

Choisissez avec attention les premiers mots pour chaque tweet

Le début des tweets semble être le plus important pour votre référencement car c’est ce qui est sélectionné par Google comme titre dans les pages de résultats. 42 caractères environ sont sélectionnés, y compris le nom de votre compte, pour créer ce titre. Gardez en tête que l’ensemble du contenu de vos tweets sont aussi indexés.

Utilisez des mots clés

Comme pour le contenu des pages de votre site ou le contenu de vos articles, essayez d’utiliser les bons mots clés pour le contenu de vos tweets. Prenez un peu de temps pour sélectionner au mieux les mots clés que vous utilisez pour le texte de vos messages.

Essayez d’être retweetable

Quand vous écrivez le contenu de vos messages sur Twitter, essayez de ne pas utiliser l’ensemble des 140 caractères autorisés pour que d’autres personnes puissent les retweeter.

Essayez de rester en dessous des 120 caractères pour que vos followers puissent facilement ajouter RT @votrecompte au début des retweets. Vous pouvez penser aussi au retweet de retweet…

Ajoutez un lien vers votre contenu

Ajoutez un lien qui pointe vers votre contenu dans le texte de vos tweets. Utilisez des raccourcisseurs d’url comme TinyUrl ou Bit.ly. Bit.ly propose des analyses sur les clics effectués.

Le contenu est roi

Comme toujours quand on parle de référencement, il faut garder en tête que le plus important est le contenu. Les liens de vos tweets doivent pointer sur du contenu riche et original. Vos followers vous suivent pour le contenu que vous publiez, quand ils cliquent sur l’url d’un de vos tweets ils doivent être redirigés sur le contenu final et non pas sur une page intermédiaire.

Derniers conseils avant de tweeter

N’hésitez pas à faire la promotion de votre compte Twitter. Focalisez vous sur du contenu de qualité, tweetez de manière régulière et suivez les bonnes pratiques de Twitter (comme le remerciement pour les RT). Retweetez les contenus que vous jugez de qualité. Personnalisez le design de votre compte et créez des conversations avec les gens qui vous suivent. Vous augmenterez ainsi votre nombre de followers et donc vos possibilités d’être retweeté. Pour vos followers, évitez de vouloir augmenter votre nombre à tout prix et recherchez plutôt à augmenter le nombre de freefollowers (ceux qui vous suivent sans que vous ayez besoin de les suivre en retour).

Si vous avez apprécié cet article, n’hésitez pas à le retweeter.
Vous pouvez aussi suivre @kiwanoweb pour être informer en temps réel de l’actualité sur le référencement naturel et la qualité Web (HTML, CSS, accessibilité, ergonomie, performance, etc.).

Transformer votre recherche Bing en flux RSS

C’est facile et très pratique. Voici comment faire :

1. Effectuer une recherche sur Bing par exemple : « Kiwano référencement marseille« 
2. Récupérer l’URL générée : http://www.bing.com/search?q=Kiwano+référencement+marseille&go=&form=QBRE&filt=all
3. Ajouter le paramètre &format=rss comme ceci : http://www.bing.com/search?q=Kiwano+référencement+marseille&go=&form=QBRE&filt=all&format=rss

Et voilà le tour est joué !

Chercher des papiers peints pour votre écran

Bing vous permet de trouver facilement des papiers peints adaptés à la résolution de votre écran.
Faites simplement une recherche par image en sélectionnant size > papier peint dans le menu de gauche. Bing vous propose les images qui ont la même résolution que votre écran. Le résultat est donc différent suivant les configurations utilisateur.

Surfer par images et non plus par mots clés

Faites une recherche par image et survolez en une, vous voyez apparaître alors l’option « images similaires ». Vous pouvez donc désormais changer votre façon de parcourir le web en surfant par image et non plus par mots clés.

Chercher des vidéos

Faites simplement une recherche en sélectionnant vidéo dans le menu supérieur, les nouveautés résident dans la prévisualisation des vignettes et les options de sélection du menu latéral gauche.

Chercher des cartes et des itinéraires

Façon Google Map, recherchez des cartes et itinéraires en sélectionnant le mode dédié.

Bing et Encarta

Bing remonte des données de Encarta, pourquoi se gêner !
Essayez par exemple de taper « population à marseille ». Un lien Encarta est systématiquement positionné en première postion.

Bing et Twitter

Microsoft cultive la différence et mise sur Twitter pour faire progresser son moteur de recherche. Un compte Bing a même été créé sur le fameux site de micro-blogging.
ll est ainsi possible de retrouver par exemple les tweets de Al Gore … mais uniquement sur la version américaine de Bing en tapant par exemple @algore.
Pour savoir comment utiliser la version américaine de Bing c’est ici.

Faire du suivi de colis, d’avion, etc.

Suivez votre colis DHL ou UPS en tapant votre numéro sous la forme « DHL 12346546456″ Bing vous propose un lien direct sur le suivi de votre colis chez le transporteur.
Options disponible en version US pour connaitre le statut de votre avion.
Tapez « flight status » !

Lancer une recherche sur la langue de votre choix

Il suffit d’ajouter language:en à votre recherche par exemple pour n’obtenir que les résultats de langue anglaise.

Rechercher une phrase exacte

il suffit de la taper entre guillemets par exemple « référencement naturel à marseille« .

Modifier les filtres des recherches

Par défaut Bing filtre les images et vidéos « à caractère sexuel ».
Utilisez le menu « Autres » > « Préférences » pour accéder aux choix suivants :

1. Strict – filtre le contenu, les images et les vidéos à caractère sexuel dans les résultats de votre recherche.
2. Modéré (par défaut) – filtre les images à caractère sexuel, mais pas le contenu, dans les résultats de votre recherche.
3. Désactivé – ne filtre pas le contenu, les images, ni les vidéos à caractère sexuel dans les résultats de votre recherche.

Adapter certains résultats à votre emplacement géographique

Utilisez le menu « Autres » > « Préférences » pour modifier votre emplacement.
Exemple : « Marseille, Bouches-Du-Rhone ».

Accélerer l’affichage de Bing en supprimant le fond d’écran

Il suffit d’utiliser le paramètre rb en le mettant à 1 (actif, par défaut) ou 0 (inactif).
http://www.bing.com/?rb=0 /*supprime le fond d'écran*/
http://www.bing.com/?rb=1 /*affiche le fond d'écran*/

Bing en mode calculatrice

Ce n’est pas une révolution pour les nombreux utilisateur de Google mais vous pouvez aussi utiliser Bing comme une calculatrice, posez simplement votre calcul dans le champs de recherche et tapez entrer.

Bing propose déjà en version anglaise beaucoup de fonctionnalités avancées façon Google comme par exemple un convertisseur de devise, d’unité de mesure, etc.

Afficher Bing en version américaine ?

Vous voulez afficher Bing en version native et donc avec l’implémentation des toutes dernières options ? Mais vous ne savez pas comment faire ? Il faut aller sur la page Bing Search Worldwide et sélectionner « United States – English (États-Unis – anglais) ».
Vous pouvez aussi y accéder simplement en utiliser le lien France en haut à droite et en sélectionnant là encore « United States – English ».

L’idée de rédiger cet article nous est venue suite à la lecture de What Beautiful HTML Code Looks Like.

1. Un DOCTYPE correct

Le DOCTYPE est la première balise HTML qui doit apparaitre dans votre code. Elle est importante pour la validation de votre code ainsi que pour indiquer aux moteurs des navigateurs Web comment rendre le site.
Voici le code pour utiliser un DOCTYPE XHTML 1.1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2. Définir le Namespace et le langage par défaut

Les sites web XHTML doivent avoir un namespace et une langue par défaut. Sans la définition de cette langue par défaut, les lecteurs d’écran ne pourront pas savoir quel langage est utilisé dans la page. Ces éléments sont donc requis dans la construction d’un site valide.
Exemple :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

3. Une section HEAD complète

La section HEAD doit contenir dans l’ordre :

• Un charset correctement défini
• Le title doit être rempli (profitez en pour l’optimiser pour le référencement)
• Une balise meta description résumant le contenu de la page
• Un lien vers le favicon
• Enfin, les liens vers les fichiers CSS utilisés par votre page

Il est important de positionner le charset avant le titre de votre page. Vous pourrez ainsi déclarer, par exemple, un charset UTF8 valide et visualiser correctement des titres contenant des accents.

Concernant les fichiers CSS, il est recommandé de lier les feuilles de styles avec la balise link (et ne pas utiliser la commande import) pour parralléliser les téléchargements des fichiers CSS.
Pour la compatibilité multi-navigateur et surtout pour gérer le navigateur Internet Explorer, nous utilisons les commentaires conditionnels pour charger des feuilles de styles qui surchargent les comportements non standards d’IE.
Voici un exemple de code pour le chargement des feuilles de style.

<link rel="stylesheet" href="Themes/Default/Style.css" type="text/css" media="screen" />
<!--[if gte IE 6 & lt IE 8]>
<link rel="stylesheet" href="Themes/Default/IE.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="Themes/Default/IE6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="Themes/Default/IE7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="Themes/Default/IE8.css" type="text/css" media="screen" />
<![endif]-->

4. Un ID sur la balise BODY

Une astuce qui peut vous faciliter la vie. Un ID spécifique pour votre page vous permet de surcharger le style CSS par défaut. Par exemple, vous pouvez vouloir un style différent pour vos titres h2 sur la page d’accueil uniquemet. Dans ce cas le code CSS suivant vous permettra de gagner beaucoup de temps.

#home h2
{
	...
}

5. Un menu sémantique

Il est indispensable d’utiliser une liste non ordonnée pour définir le contenu de votre menu.

<ul id="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="about.php">About</a></li>
	<li><a href="contact.php">Contact</a></li>
</ul>

Vous optimisez ainsi les titres de rubriques dans votre référencement, vous permettez aux lecteurs comme ceux des téléphones portables de pouvoir les afficher dans un espace réduit et vous garantissez une plus grande évolutivité de l’affichage.

6. Un découpage des zones de la page respectant un standard de nommage

En regroupant les zones importantes de votre page dans des divisions (<div>), vous aurez moins recours aux ID et class pour formater votre page. Avec un découpage logique et méthodique des zones importantes, vous arriverez facilement à définir des styles ciblés et la personnalisation et la maintenance seront grandement facilitées.
Il n’existe malheureusement pas de standard de nommage pour les divisions principales mais on retrouve certaines similitudes à travers les pratiques et usages des intégrateurs.
Voici notre recommandation de nommage pour le zoning de la page:

• #container : conteneur principal
• #header : en tête
• #search : recherche principale
• #nav : navigation
• #content : contenu
• #footer : pied de page

7. Le contenu important en premier

Pour améliorer l’accessibilité et le référencement de votre site il est recommandé de placer le contenu important en premier. Si vous avez une colonne latérale qui contient des informations complémentaires à votre page il est préférable de n’avoir cette section qu’après le contenu principal de la page.

8. Utiliser un code standard

Essayez de respecter la norme XHTML en évitant les erreurs de syntaxes. Il faut fermer l’ensemble des balises, mettre une valeur (entre guillemets) pour l’ensemble des propriétés utilisées et coder les balises en minuscules. Vous pouvez valider le code HTML en vous aidant d’outils de validation intégrés comme le plugin Firefox HTML Validator.

9. Avoir une hiérarchie pour les titres

Utilisez les balises titres (balises hn) pour les titres contenus dans votre page. Essayez de respecter la hiérarchie des titres en partant d’un titre h1 jusqu’aux titres h6. Notre recommandation est de n’utiliser qu’un seul titre h1 correspondant au titre de la page.

10. Utiliser un codage sémantique

Utilisez au maximum les éléments HTML pour la sémantique qu’ils apportent. Ainsi vos acronymes et abbréviations devraient être déclarés grâce aux balises acronym et abbr. L’avantage est multiple puisqu’il vous permet un accès au style de tous les éléments de même type, de respecter l’accessibilité et d’optimiser le référencement.

<acronym title="Search Engine Optimization" lang="en">SEO</acronym> /* Cette déclaration permet d'ajouter l'expression Search Engine au contenu */

Pour les mises en exergues de vos textes vous pouvez également utiliser les éléments strong et em.

Pas de tableau de présentation

Il est bien sûr évident qu’il ne faut plus utiliser de tableau de présentation mais utiliser les blocs présents dans votre page pour positionner vos éléments dans la page.
Les tableaux doivent être réservés aux données tabulaires, ils n’ont pas la flexibilité ni l’optimisation des éléments de type bloc ou liste pour le rendu (cf. notre article : Afficher une liste HTML sous forme de tableau par CSS).

Pas de style inline

Il faut séparer le contenu de la mise en forme pour les pages de votre site. Votre HTML ne doit contenir que le contenu de la page, il faut donc réserver l’usage des styles uniquement aux feuilles de styles.
Vous faciliterez ainsi la maintenance du site pour la gestion du rendu et faciliterez le référencement en diminuant la proportion de code par rapport au rédactionnel.

Indiquer les changement de langue

Vous devez indiquer dans votre code source HTML les changements de langue par rapport à la langue définie dans l’en-tête de votre code. Ceci permet d’indiquer aux lecteurs d’écrans si ils doivent utiliser un accent différent pour un groupe de mots ou l’ensemble d’un paragraphe de votre page. Pour une meilleure compatibilité avec l’ensemble des lecteurs d’écrans, nous conseillons d’utiliser les attributs lang et xml:lang.
<strong lang="en" xml:lang="en">search engine result page</strong>

De la même manière, il est important d’indiquer clairement la langue d’un document pointé par un lien si cette langue est différente de la langue en cours. Pour ceci, vous devez utiliser l’attribut hreflang.
<a href="#" hreflang="en">un super document sur le référencement</a>

11. Avoir un code complet pour vos tableaux de données

Pour vos tableaux de données, un certain nombre d’éléments sont souvent oubliés. Rappellez vous : vos tableaux doivent contenir un caption, des section thead, tfoot et tbody séparées, utiliser des balises th si besoin et enfin vous devez définir les scope ou headers.
Voici un exemple de tableau correctement codé.

<table summary="Résumé des services proposés par Kiwano">
	<caption>Les services de Kiwano</caption>
	<thead>
	   <tr>
		<th scope="col">Solution</th>
		<th scope="col">Description</th>
	   </tr>
	</thead>
	<tbody>
	   <tr>
	  	<td>Référencement naturel Marseille</td>
		<td>Audit référencement et
                visibilité de votre site</td>
	   </tr>
	   <tr>
		<td>Formation</td>
		<td>HTML CSS ou Référencement</td>
	   </tr>
	</tbody>
</table>

12. Mettre des labels dans vos formulaires

L’élément label créé un lien virtuel entre le label et le champ de saisie associé. Le label permet de donner le focus au champ de saisie quand on clique sur le label. Ceci permet aussi de déclarer de façon explicite aux lecteurs d’écran le lien entre le label et son champ de saisie associé.
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" />

N’hésitez pas à partager vos astuces ou conseils dans les commentaires.

Ressources francophones

• Corrélation entre le temps de rendu et la complexité CSS
• Quelques notes et beaucoup de liens sur HTML5
• Liste complète des paramètres utilisés par Google Search (variables dans l’URL)
• Sortie du livre « Bien rédiger pour le Web et améliorer son référencement
• Paris-Web 2009, les inscriptions pour les conférences sont ouvertes
• Référencement : comment exploiter la barre de pagerank verte
• Référencement et écrit Web : Quels livres mettre dans votre valise ?

Ressources anglophones

• HTML 5 Cheat Sheet (PDF)
• 10 Useful CSS/JS-Coding Solutions For Web-Developers
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
• Line-height in CSS – A presentation about the line-height-property in CSS
• Web Form Validation: Best Practices and Tutorials
• How To Create a WordPress Theme – An ultimate 11-steps-tutorial
• Browser Comparison: Memory Usage, Speed, Acid 3 Test

Il sont de plus en plus nombreux à nous suivre, n’hésitez pas à les rejoindre via @kiwanoweb sur Twitter.

Les listes, vous le savez, sont très efficaces pour hiérarchiser les données. Elles optimisent votre référencement en simplifiant le code HTML superflu. Elles permettent d’augmenter le ratio contenu par rapport au code. C’est un bon cas pratique pour un atelier sur la séparation HTML / CSS.

Cas HTML / CSS pratiques

Liste HTML basique

Voyons quelques exemples de modifications basiques en CSS en prenant comme point de départ une liste de jours (type orderer list <ol>) contenant une liste d’horaires sur le modèle suivant :

<ol>
    <li><span class="Day">Lundi</span>
        <ol>
             <li><span class="Time">10h00-12h30</span>
	     Formation Référencement Marseille Salle 13
	 </li>
	 <li><span class="Time">15h00-17h00</span>
	     Audit accessibilité Marseille 1er Cycle
	 </li>
            <li><span class="Time">17h30-19h00</span>
	     Entretien Kiwano référenceur Aix en Provence
	</li>
        </ol>
     </li>
    <li><span class="Day">Mardi</span>
        <ol>
             <li><span class="Time">10h00-12h30</span>
	    RDV Marseille Plage du Prophète
	</li>
	<li><span class="Time">14h00-17h30</span>
	     Développement XHTML CSS
	</li>
            <li><span class="Time">17h30-19h00</span>
	     Conférence Kiwano référencement
             naturel sur site (Vitrolles)
	</li>
        </ol>
   </li>
</ol>

Ce qui nous donne un affichage du type :

Liste HTML améliorée par CSS

On peut rendre cette liste un peu plus sympa en utilisant une feuille de style « Planning.css ».
Pour cela il suffit de la lier à la page HTML en insérant entre les balises <head> la déclaration de la feuille de style en cascade.

<link href="Planning.css" rel="stylesheet" type="text/css" />

On peut créer ainsi une feuille de style très simple pour colorer et mettre en forme notre exemple.

ol
{
	list-style-type: none;
}
ol ol
{
	border-top: solid 1px #555;
}
ol li li
{
	background-color: #eeefe0;
	color: #000;
	border: solid 1px #555;
	border-top: none;
}
.Day
{
	width: 100%;
	padding: 5px 0px;
	font-weight: bold;
	color: #f16025;
}
.Time
{
	padding: 0 20px;
	background-color: #97be3d;
	border-right: solid 1px #555;
	color: #fff;
}

On obtient alors une liste mise en forme comme sur cette copie d’écran :

Liste HTML sous forme de tableau

Rien n’empêche d’aller plus loin et de représenter maintenant ces données sous forme de tableau.

Pour cela on transforme les éléments de type inline en type block en modifiant la propriété display et on les rend flottants en utilisant la propriété float.

li, ol
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
ol li
{
	width: 10em;
	margin: 0em 1em 0em 0em;
	line-height: 1.5em;
	border: solid 1px #f16025;
}
ol li li
{
	width: 100%;
	height: 7em;
	font-size: 0.8em;
	color: #666;
	border: none;
	background-color: #eeefe0
}
span.Day
{
	display: block;
	width: 8em;
	padding: 0em 1em 0em 1em;
	font-weight: bold;
	color: #f16025;
 }
span.Time
{
	display: block;
	padding: 0em 0em 0em 1em;
	border-bottom: solid 4px #f16025;
	border-top: solid 1px #f16025;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #97be3d;
	color: #fff;
}

Notez que les dimensions de ce tableau sont en valeur « em », qui sont des dimensions relatives. En clair : vous pouvez user et abuser de la modification de la taille d’affichage (même sous IE6) en conservant un rendu cohérent. Très utile pour les utilisateurs mal voyants.

Liste HTML et CSS 3

Voici, en partant de l’exemple précédent, une utilisation des fonctionnalités CSS 3 et CSS étendues sous Mozilla Firefox : sélecteurs, dégradés de couleurs et bordures arrondies.

li, ol
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
ol li
{
	width: 10em;
	margin: 0em 1em 0em 0em;
	line-height: 1.5em;
	border: solid 4px #f16025;
	margin-top: 20px;
        /* Bordures arrondies dans les coins */
	-moz-border-radius: 40px 10px 0 0;
}
ol li li
{
	width: 100%;
	height: 7em;
	font-size: 0.8em;
	color: #666;
	border: none;
	background-color: #eeefe0;
	margin: 0;
	-moz-border-radius: 0;
}
span.Day
{
	display: block;
	width: 8em;
	padding: 0em 1em 0em 1em;
	font-weight: bold;
	color: #f16025;
}
ol li li:last-child
{
	border-bottom-width: 8px;
	border-bottom-style: solid;
	/* Dégradé sur dernier élément liste imbriquée*/
	-moz-border-bottom-colors: #fd5601 #f15f16
        #f17537 #f1905f #f0a782 #efc1a4 #efccb3 #eee0cd
        #eeefe0;
}
span.Time
{
	display: block;
	padding: 0em 0em 0em 1em;
	border-bottom: solid 1px #f16025;
	border-top: dotted 5px #f16025;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #97be3d;
	color: #fff;
}

Qui nous offre le rendu suivant :

Conclusion

Comme le montre ce petit exemple, on a souvent (quand c’est justifié) intérêt à utiliser des listes plutôt que des tableaux.
Si on avait utilisé des balises <table>, les possibilités de modification de style aurait été bien moindres.
Une liste bien conçue est évolutive.
Notre cas permet d’afficher facilement les jours sur plusieurs lignes dans une page redimensionnable ce qui peut s’avérer précieux dans le cas d’une portabilité sur les petits écrans des téléphones mobiles par exemple.
Le référencement enfin est optimisé car le code HTML est plus simple.

Ressources francophones

• 103 conseils pour démarrer une activité sur Internet
• Une approche intéressant pour construire un Framework CSS sémantique
• Une FAQ complète sur référencement (100 réponses à 100 questions)
• Comment le nombre d’or embellit nos créations
• La version finale de Mozilla Firefox 3.5
• Consulter les backlinks de Twitter avec l’outil Backtweets

Ressources anglophones

• 15 Must Read Articles for CSS Beginners
• 20 New, Useful And Promising WordPress Plugins
• The Potential of Web Typography: @font-face and Firefox 3.5
• CSS cascade – a simple step-by-step presentation
• Power Tips For WordPress Template Developers
• Top 10 Firefox 3.5 Features
• Stopping the CSS positioning panic (Part 1)
• 20+ WordPress Recipes (Codes)
• XHTML is dead, long live HTML 5!

Il sont de plus en plus nombreux à nous suivre, n’hésitez pas à les rejoindre via @kiwanoweb sur Twitter.

Sa puissance en a rapidement fait une technique de publicité très efficace. Le buzz en tant que technique marketing consiste à créer un événement nouveau et surprenant voire choquant qui peut créer une polémique ou une discussion.
Le buzz enfin tire son efficacité du fait qu’il utilise les propriétés dont sont friands les vecteurs d’informations : la réactivité, le renouvellement rapide ou encore le désir de scoop.

Comment faire du buzz ?

Le buzz peut s’appuyer sur les modes ou l’actualité

En cette fin juin 2009, un bon vieil article à buzz internet ressemblerait à ça :

• Le premier cas de dopage du tour de France 2009
• Voir les photos nues de Jennifer de Secret Story 2009
• Toute la vérité sur la mort de Michael Jackson

Hé oui, il faut s’appuyer sur les modes et devancer l’actualité souvenez-vous ! On peut aussi bien sûr lancer des controverses ou encore faire appel à l’humour.

• Pour ou contre le port de la burqa
• Le Klingon pour remplacer l’Espéranto

Le buzz peut créer la rumeur

Pour cela une des recette consiste à choisir une information choquante, surprenante et totalement improbable. Plus c’est gros est mieux c’est, alors je vous propose donc du grand n’importe quoi :

• Le PSG rachète l’Olympique de Marseille !
• Arlette Chabot nue !
• Le calendrier érotique de Geneviève de Fontenay !

Le buzz et le référencement ?

L’intérêt du buzz internet comme outil de communication tient évidemment en la rapidité de sa croissance et sa faculté à occuper rapidement tout l’espace de ce gigantesque champ d’information et d’échange qu’est le Web.
Quel est le bénéfice de cette communication virale sur le référencement ?
L’intérêt réside dans la multiplication de l’information. En clair : le résultat c’est la création de nombreux liens et la présence de véritables contenus sémantiques sur de nombreux sites, bref tout ce dont raffole notre ami Google.

Exemple de marketing viral

Le marketing viral se base sur un effet de buzz mais en contrôlant les sources : souvenez vous du transatlantys de voyage-scnf.com en juin 2005.
Le buzz internet est d’abord lancé avec la mise en ligne d’un site présentant le projet Transatlantys. Puis une campagne radio et des affichages 4 par 3 dans le métro parisien prennent le relais. Enfin arrive la conclusion : « Parce qu’on ne peut pas aller partout en train, voyages-sncf.com vous propose aussi de l’avion, des séjours… ».
Et ça marche ! (la preuve on en parle encore !)

Exemples de buzz

Le rôle de Youtube comme vecteur de buzz est notoire, il a rendu célèbre pas mal de nos artistes français parmi lesquels :
Kamini et son rap de Marly-Gomont, le comique Max Boublil et sa balade « ce soir tu vas prendre »., Rémy Gaillard le spécialiste du n’importe quoi … ou encore le virtuose de la guitare MattRach, etc.

Nous ne pouvions enfin pas laisser sous silence le formidable essor de ces dernières années : les « nouveaux » médias sociaux. Facebook, MySpace, Twitter sont évidemment des parfaits moyens de propagation et de générations de liens. Leur force ? Ils reposent à la fois sur les vecteurs et les cibles du buzz internet : les internautes eux mêmes.

Dernier conseil pour la route

Vous l’avez compris une opération de marketing virale peut vous permettre d’avoir une grande quantité de liens entrants ce qui boostera votre référencement. Donc n’oubliez pas de faire des liens depuis les pages de l’opération vers votre site afin de bénéficier de cet afflux de PageRank.

Bon buzz !

Reprenant les articles Kiwano « Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3 » et « Nouveautés CSS 3 : c’est quoi les Media Queries ?« , Letstudio les a résumé façon mémento pour les mettre à notre disposition.

Je vous encourage donc à télécharger gratuitement le mémento des nouveautés CSS3 illustré par Letstudio, de quoi apporter une touche de graphisme marseillais sur vos bureaux.
Cerise sur le gâteau, le format est en couleur, recto verso et pliable.

Encore un grand merci et un grand bravo à letstudio pour cette réalisation, mais nous n’avons pas encore fait le tour des nouveautés CSS 3… à bon entendeur.

Téléchargez le résumé PDF sur les nouveautés CSS3