Note importante : Article original (en anglais) disponible sur le blog Hongkiat.com.

Au cours de la dernière année, il est apparu que le taux de croissance moyen de Facebook était d’environ 20 millions nouveaux utilisateurs par mois, en avril dernier il était de 13,9 millions (-30,5%) et 11,8 millions en mai (-41%). Il semble donc qu’il y ait une nette tendance à la  baisse.

Se dirige-t-on vers le début d’un déclin du géant Facebook ou est-ce juste une mauvaise passe ? Les utilisateurs sont-ils lassés ? Dans cet article, nous allons étudiez 5 raisons qui pourrait amener les utilisateurs de Facebook à déserter leur réseau social préféré.

1. La politique de confidentialité

Dans un article intitulé « The Evolution of Privacy on Facebook« ,  Matt McKeon montre très bien les changements qui ont été opérés dans la politique de confidentialité de Facebook. Années après années, de 2005 à 2010, on peut voir que l’évolution des paramètres de confidentialité par défaut des comptes Facebook tendent très nettement vers une large publication des données personnelles.

Un autre point qui a pu rendre le problème encore plus troublant pour les utilisateurs est le fait de voir fleurir de plus en plus de publicités extrêmement ciblées sur leur réseau social favori. Annonces publicitaires qui correspondent exactement à ce qu’ils aiment, à ce qu’ils recherchent, à ce dont ils discutaient il y à 2 jours avec leurs amis ! En vu de leur nombre, pas de hasard possible…

Certains utilisateurs peuvent se poser des questions, comment savoir réellement quelles informations Facebook utilise, partage, (vend) ? Comment être certain que Facebook respecte bien gentiment ma vie privée ? N’arrangeant rien au problème, le fait que Facebook modifie sa politique de confidentialité si souvent, risque bien de faire naître de plus en plus d’usagers méfiants, voire mécontents.

2. Les changements fréquents dans l’interface

Vous l’avez probablement déjà vécu, à chaque changement d’interface de Facebook, les statuts de personnes pestant contre ledit relooking et réclamant un retour à la version précédente se mettent très rapidement à fuser, comme si ce changement avait eu un effet négatif sur leur expérience utilisateur. Certains membres sont désorientés, voire frustrés, ayant la profonde conviction que Facebook n’est plus du tout à leur l’écoute.

Résultat des courses, certains ferment leur compte, d’autres le laissent sombrer dans l’inactivité. Dans les deux cas ce n’est pas bon pour Facebook, car la quantité globale d’interactions dans leur réseau social en pâtit fortement.

L’inactivité au sein d’un réseau social se traduisant essentiellement par un manque d’interaction de vos amis sur le site, cela peut vite se transformer en cercle vicieux, un manque d’enthousiasme pour partager sur Facebook aspirant à être rapidement contagieux : si vos amis ne partage pas, vous n’avez plus l’envi de partager non plus.

3. De «Nouveau» à «Dépassé»

Lorsque Friendster est arrivé pour la première fois sur internet, en 2002, tout le monde était excité par les nouvelles fonctionnalités que le site pourrait offrir et le réseau social a très vite attiré énormément de personne. En 2004, il a été dépassé par MySpace, qui lui-même a depuis perdu son marché face à Facebook.

Il  semble que chaque plate-forme « progressive » offre à ses utilisateurs quelque chose de plus que le précédent. Pour contrer Friendster, MySpace axe son réseau sur la musique et le divertissement, alors que Facebook, lui, offre aux développeurs tiers la possibilité de créer de nouvelles applications plutôt que de compter sur leurs ressources internes, comme l’a fait MySpace.

Facebook pourrait avoir atteint un stade de sa vie où les utilisateurs s’attendent à quelque chose de nouveau, que ce soit sur Facebook ou sur un nouveau réseau social. Il existe comme un besoin de se réinventer, d’innover dans l’expérimentation de nouvelles fonctionnalités à explorer pour l’utilisateur. En résumé, il apparait que l’utilisateur a constamment besoin d’idées neuves.

A contrario, il y aura toujours un risque de rendre Facebook trop complexe pour les habitués en y ajoutant sans cesse de nouvelles fonctionnalités. Peut-être que la solution serait d’être subtil lors de l’importation de changements au site, les grands changements soudains ayant parfois tendance à prendre les utilisateurs au dépourvu et les rendre las de devoir ré-apprendre à utiliser leur nouvel outil. Quoi qu’il en soit, il serait bon que Facebook prennent conscience de l’équilibre entre l’expérimentation  de nouvelle fonctions et le maintien des fonctionnalités bien connues de ses utilisateurs.

4. Complexité : Fonctionnalités contre facilité d’utilisation

Si le choix vous est donné d’opter entre une télécommande de télévision qui propose les fonctions les plus élémentaires (changer de chaines, régler le volume…), et une autre qui vous permettrait d’ajuster les paramètres les plus obscures de votre téléviseur, grâce à une vingtaine de boutons supplémentaires, laquelle seriez-vous le plus enclin à prendre ?

Pour dire vrai, cela dépend vraiment des préférences de chacun. Mais en général, la plupart des gens ne veulent pas que les choses soient trop compliquées, surtout quand ils n’ont pas le temps de s’informer sur les fonctionnalités additionnelles. Le problème étant que Facebook semble tendre à devenir de plus en plus sophistiqué à chaque changement.

Il fut un temps où n’importe qui pouvait instinctivement se servir de Facebook dans sa totalité : Mettre à jour son statut, télécharger des photos, poster sur un mur… Maintenant, lorsque l’on se connecte, on est assez loin des fondamentaux, avec une panoplie d’invitations en tout genre (jeux, tests, questionnaires…) accompagnée d’une ribambelle de pages plus farfelues les unes que les autres.

Les spams ont également commencé à faire leur apparition, incitations malhonnêtes à aimer une page et autres boutons « j’aime » cachés sur les vidéos… Autant de déviations qui présentent un moyen supplémentaire de dérouter les utilisateurs de Facebook.

5. La montée de Google +?

Sommes-nous dans une période où le monde est fatigué de Facebook et a besoin de quelque chose de nouveau et de différent ? Si c’est le cas, alors Google + arrive au meilleur des moments pour attirer la foule loin de Facebook.

Comme vous le savez probablement déjà, Google + est le nouveau réseau social mit en place par Google qui offre un niveau encore plus profond dans le partage et l’interactivité entre les utilisateurs. L’une des caractéristiques phare réside dans la possibilité d’ouvrir une bulle, autrement dit une conversation multiple par webcam entre les amis de votre choix, chose que Facebook ne propose actuellement pas, fait qui pourrait bien s’avérer être son talon d’Achille.

Alors que le réseau social de Google n’est encore qu’en période d’essai, on entend déjà dire que Google + va à coup sûr remplacer le géant actuel Facebook. D’autres prétendent qu’au contraire, G+ ne serait qu’une pâle copie de Facebook. Le fait est que Google+ a quand même réussi à atteindre le chiffre des 10 millions d’inscrits, en 10 jours, une statistique d’autant plus impressionnante que l’inscription était réservée à ceux qui avait reçu une invitation au préalable.

Quoi qu’il en soit, les internautes ont désormais la possibilité, s’ils le désirent, de s’immerger dans quelque chose de nouveau, similaire mais totalement différent à la fois. Selon vous, que va faire Facebook ? Il faudra certainement plus que quelques modifications et ajouts de fonctionnalités à la plateforme existante pour restaurer et maintenir sa suprématie. Google+ est-il le nouvel Eldorado des utilisateurs mécontents de Facebook ?

Dans le Recap’ de cette semaine : un iPhone qui filme de l’intérieur, deux photographes et un comics consultable en ligne. Bon visionnage et à la semaine prochaine !

Un iPhone et une guitare

Vous avez sûrement déjà eu l’impression que les jantes des voitures tournent à l’envers ? Simple effet d’optique dû à l’œil qui n’arrive pas a capté assez d’image. C’est cette illusion que l’américain Kyle Jones s’est amusé à reproduire en déposant un iPhone 4 à l’intérieur de sa guitare et de le laisser filmer pendant qu’il jouait. L’iPhone ne capturant pas assez d’images à la seconde, on peut voir les cordes vibrer, l’effet est inattendu et assez sympa !

Andrew Brooks

Andrew Brooks est un photographe et réalisateur anglais fortement attiré par les univers urbains contemporains. Ses réalisations sont souvent des montages de plusieurs photographies, lui permettant ainsi de créer des environnements innovants, originaux et parfois fantastiques. Si ses travaux vous plaisent, je vous invite à consulter son portfolio afin de découvrir ses autres créations.

Patrick Joust

Patrick Joust, photographe américain basé à Baltimore, aime immortaliser avec son appareil le monde qui l’entoure. Si vous aimez son travail, n’hésitez pas à aller faire un tour sur sa page tumblr ou sur sa page flickr.

Tron Legacy

En partenariat avec Microsoft, l’agence Vectoform a réalisé un comics en ligne qui, grâce au dernière techniques HTML 5, CSS3, et Javascript et une excellente utilisation du parallax scrolling, réussi à immerger totalement le visiteur son univers. La navigation est simple, on se déplace avec la souris ou le clavier, et la lecture très agréable. Je vous laisse découvrir ce projet en cliquant sur l’image. Pensez à mettre à jour votre navigateur !

Comme de nombreuses personnes, et je suppose que vous en faîtes partie, nous utilisons très fréquemment Firebug à l’agence, notamment pour modifier « en direct » les feuilles CSS de nos sites internet. Plus aucun doute à ce sujet, c’est une technique vraiment pratique et surtout terriblement rapide.

Le seul point négatif qui venait un peu entacher l’aspect productif de la chose était l’impossibilité de pouvoir sauvegarder les modifications effectuées dans Firebug directement sur les fichiers .css  présents sur le serveur, et bien avec FireFile, c’est désormais possible !

FireFile, qu’est-ce-que c’est ?

Éditée par Tobias Strebitzer, FireFile est une extension Firebug qui va vous permettre d’enregistrer vos fichiers CSS édités avec Firebug directement sur votre serveur. Pour nous, cette extension représente un chouette coup de pouce pour la productivité, je ne comprends d’ailleurs pas pourquoi cette extension n’ai pas réellement percée et soit si difficile à dénicher sur Google (même en tapant directement « FireFile » !), nous sommes tombés dessus totalement par hasard, pour notre plus grand plaisir !

Comment le faire fonctionner ?

1 Installez le plugin FireFile pour FireBug (Je sais, ça commence à faire beaucoup de fire !).

2 Uploadez sur votre serveur le script firefile.php (à télécharger ici) dans le répertoire de votre choix, par exemple /www/firefile/firefile.php.

3 Ouvrez Firefox et rendez vous sur la page du script (ex : http://www.mon-site.com/firefile/firefile.php).

4 Choisissez un nom d’utilisateur et un mot de passe et cliquez sur « Apply ».

5 En ouvrant Firebug, un message de confirmation apparait, vous demandant d’ajouter le site courant dans les sites enregistrés par votre FireFile, acceptez.

Hop, ça y est ! Vous pouvez maintenant essayer de modifier une ligne de CSS dans Firebug et vous verrez apparaître une petite flèche bleue dans le coin supérieur droit, cliquez dessus et votre nouveau CSS sera envoyé sur le serveur, n’est-ce pas magique ?

Vous pouvez maintenant éditer les CSS de votre site internet directement dans Firebug et ce depuis n’importe quelle page. Mais FireFile ne s’arrête pas là, il propose également quelques options assez sympathiques.

Comment configurer FireFile ?

Un petit clic sur la flèche à droite de l’onglet FireFile affichera la liste des options activables de l’extension, elles sont peu nombreuses mais peuvent être assez pratiques.

• Enable notifications affiche les notifications de réussite ou d’échec lors de l’envoi des CSS vers votre serveur.
• Switch to CSS on inspect affiche automatiquement l’onglet d’édition du CSS lorsque vous utilisez la fonction « Inspection » de Firebug.
• Display CSS Comments affiche les commentaires contenus dans vos feuilles de styles directement dans l’onglet CSS de Firebug.
• Remove empty CSS styles supprimera toutes les propriétés CSS vides lors de l’envoi sur le serveur.
• Autocomplete CSS3 active la fonctionnalité d’auto-complétion du CSS3, j’y reviendrai plus précisément ensuite.
• Compress CSS compressera le fichier CSS avant l’envoi. Attention, cette fonctionnalité est utile pour alléger le poids de vos feuilles de style mais rendra la modification de votre CSS extrêmement difficile en dehors de Firebug puisque votre fichier sera compressé en une seule ligne, sans aucun espace. Prévoyez donc d’activer cette fonctionnalité une fois le site terminé et la copie des CSS « propres » effectuée.
• Enable debug mode qui, vous l’aurez compris, active le mode débogage du plugin.
• Activable dans la liste des sites enregistrés dans Firefile, il existe également une option de sauvegarde automatique à chaque changement dans vos CSS mais je vous déconseille de l’activer, elle peut vite semer le chaos.

Compatibilité CSS3

Pour ceux qui ont l’habitude de faire un peu de CSS3, vous savez à quel point il est fastidieux de devoir dupliquer chacune de ses propriétés sur les différents des navigateurs prenant en charge le CSS3. Sachez que FireFile apporte une solution à cette contrainte en se proposant de convertir automatiquement vos lignes de CSS3 grâce à l’option Autocomplete CSS3.

Prenons l’exemple d’un box-shadow, vous ajoutez une ligne de CSS via Firebug semblable à celle-ci :

#test {-moz-box-shadow:10px}

Si l’option Autocomplete CSS3 de FireFile est activée, lors de l’envoi du fichier, la ligne sera automatiquement convertie en la portion de code suivante. Rendez vous compte du temps que cela peut vous faire gagner.

#test {
box-shadow:10px;
-moz-box-shadow:10px;
-webkit-box-shadow:10px;
-khtml-box-shadow:10px;
}

Avertissement : Depuis les versions 4 et 5 de Firefox (et les versions de Firebug qui vont avec) les propriétés CSS3 -moz sont automatiquement converties en propriété CSS3 standards (à savoir, suppression du préfixe -moz) ce qui semble poser problème à FireFile pour la détection des CSS3. J’ai contacté récemment le créateur de l’extension pour lui faire part de ce problème, il m’a affirmé qu’il allait créer un fix corrigeant ce problème avant la fin juillet. En attendant, la fonction d’auto-complétion du CSS3 ne fonctionnera qu’avec les versions de Firefox inférieures ou égales à Firefox 3.6. Vous êtes avertis !

À vous de jouer maintenant !

Voilà, j’en ai fini pour cet article « découverte » ! J’espère que comme nous vous apprécierez ce plugin à sa juste valeur et qu’il vous fera gagner du temps à vous aussi. Si vous avez un avis à donner, n’hésitez pas !

Grâce à ce petit guide, vous allez apprendre la marche à suivre pour customiser l’apparence de votre Like Box en lui injectant directement votre CSS, puis à intégrer votre module dans vos sidebars WordPress.

I. Intégrer la Like Box

1 Tout d’abord, nous allons récupérer l’ID de notre page Facebook. Nous nous rendons sur notre page fan et on clique sur le bouton « modifier la page » en haut à droite.

Une fois dans la panneau d’administration de la page, nous récupérons son ID dans la barre d’adresse du navigateur et on le garde au chaud pour l’instant.

2 Maintenant nous ajoutons le code suivant

xmlns:fb="http://www.facebook.com/2008/fbml" 

dans la balise <html> de notre header, ce qui devrait donner à peu près ceci :

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR"xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="fr-FR">

3 Collons ensuite le script d’initialisation de l’API Facebook, ceci juste après la balise <body>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'ID DE LA PAGE', //que l'on a mis de côté en I. 1.
      status : true,
      cookie : true,
      xfbml  : true
    });
  };
  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

4 Nous retournons maintenant dans l’interface d’administration de notre page fan et cliquons sur « Ressources ».

Puis sur « Use social plugins » ce qui nous amène sur la plateforme Facebook Developpers.

C’est ici que nous obtenons le code permettant d’intégrer le module Like Box de Facebook.

5 Personnalisons ensuite les paramètres comme bon nous semble (largeur, images de profil, etc…). Une fois satisfait de nos réglages, on clique sur « Get Code ».

Puis copions uniquement le contenu de la balise <fb:like-box> du code XFBML.

6 Nous collons ce que nous venons de copier à l’endroit où nous voulons faire apparaître notre module. Pour les WordPresseurs, vous pouvez ajouter le code dans un widget « Texte » et le faire glisser dans l’espace widgetisé de votre choix. Pour les non-Wordpresseurs, collez le code dans votre page à l’endroit où vous voulez faire apparaître votre module Facebook.

7 Maintenant, remplaçons la balise <fb:like-box> par <fb:fan> car la Like Box standard de Facebook ne semble pas pouvoir prendre de CSS en paramètre, ou en tout cas pas chez nous, ne me demandez pas pourquoi je l’ignore.

<fb:fan profile_id="128713787149530" stream="0" connections="8"  logobar="0" height="200px" width="250px"></fb:fan>

8 Une fois cela fait, nous pouvons placer l’adresse de notre CSS.

<fb:fan profile_id="128713787149530" stream="0" connections="8" css="http://monsite.com/style.css?1" logobar="0" height="200px" width="250px"></fb:fan>

II. Personnaliser sa Like Box grâce au CSS

C’est terminé, notre Like Box est intégrée ! Maintenant, il ne reste plus qu’à écrire notre feuille de style CSS afin de personnaliser un peu tout ça. Je vous mets à disposition le CSS de notre Like Box. Si cela peut vous inspirer / aider.

C’est à vous de jouer, amusez-vous bien, et soyez créatif !

QoQa.fr est un site bien sympathique qui propose chaque jour, à minuit, un produit à prix cassé !

Le concept est ultra simple, et très bien expliqué sur le site :

Aujourd’hui (et ça tombe très bien pour moi parce que j’en cherchai une deuxième) c’est la souris sans-fil d’Apple, la Magic Mouse qui est proposée au prix de 49€ (auxquels viendront s’ajouter 5€ de frais de port) au lieu des 69€ initiaux.

Bon d’accord, j’arrive un peu à la bourre pour vous faire part de cette bonne affaire puisqu’il ne vous reste plus que 14h pour en profiter et que le stock de souris dispo est actuellement de 20%, mais je suis certain que le produit de demain sera aussi très intéressant !

Pour profiter de cette offre, c’est ici !

Le contenu de ce bundle regroupe 12 items payants que vous pouviez déjà trouver sur les marketplaces, à la différence qu’il ne vous faudra débourser que 30 petits malheureux dollars au lieu des 250 initiaux,  soit 220$ économisés. Ne tardez pas trop pour en profiter puisque ce pack n’est disponible à 30$ que pour 7 jours (à l’heure où j’écris cet article, il reste 6 jours, 16 heures et 31 minutes, ça va… Vous êtes larges !). Voici le contenu en détail :

• Thème : Aspire (27 $).
• Thème : PerfectPixel (32 $).
• Thème : Intersect (27 $).
• Thème : Mobility (32 $).
• Thème : PhotonWP (32 $).
• Plugin : WP-Membership (27 $).
• Plugin : uBillboard (22 $).
• Plugin : Relevant Search (14 $).
• Pluging : Extended Google Analytics (14 $).
• eBook : WordPress Designer (29 $).
• Tutoriel : Beginner to Master (6 $).
• Source PSD : BrandMedia (12 $).

Nous avions déjà eu quelques échos en début d’année, et bien cela semble se confirmer ! A priori des tests auraient déjà été effectués sur un NRA (Noeud de Raccordement d’Abonnés) du Nord de la France.

Après avoir dernièrement investi le secteur de la téléphonie sur IP, OVH envisage de déployer d’ici quelques semaines (3 à 4 selon Octave Klaba, Directeur Technique et Fondateur d’OVH) une toute nouvelle offre internet. Cette offre serait exclusivement réservée aux clients professionnels, et viendrait ainsi concurrencer les offres des FAI actuels, à savoir : Orange, SFR, Bouygues, Free, …

Pour le moment aucune information sur les tarifs ! Affaire à suivre !

Au programme des nouveautés on remarque un nouveau design, avec notamment, l’apparition d’onglets pour les mentions, retweets, recherches et listes, et l’arrivée d’un défilement infini pour les tweets. L’un des changements majeurs réside dans la nouvelle barre latérale, qui devient deux fois plus grande et qui affiche les informations supplémentaires lorsque vous cliquez sur un tweet, comme des infos sur l’auteur, une carte pour la géolocalisation, la liste des tweets liés, etc…

Cela risque d’en ravir plus d’un, puisque contrairement à ce que j’ai pouvais penser, la majeure partie des utilisateurs de Twitter l’utilise directement à partir du site, comme le montre ce graphique (source) :

Le contenu média quant à lui sera directement intégré aux tweets et lisible sur le site de Twitter, grâce à des partenariats avec les « grands » du domaine tels que DeviantArt, Flickr, Justin.TV, TwitPic, TwitVid, Vimeo, ou encore YouTube.

Cette nouvelle version du site est lancée aujourd’hui et la sortie des différentes nouveautés se fera progressivement au fil des semaines qui viennent.

Pour l’occasion, l’équipe de Twitter a mis en place une page de présentation ainsi qu’une vidéo assez sympa :

Même s’il est facile d’arriver à ses fins en tâtonnant un peu, le CSS est un langage qui possède des règles bien strictes, à respecter si l’on veut produire un code propre, valide, et obtenir un résultat similaire sur tous les navigateurs.

Dans cette article sous forme de liste (oui, on aime ça en ce moment !) je vous propose de découvrir les 10 erreurs CSS les plus rependues, que vous et moi avons probablement déjà commis et continuons encore à commettre.

1. Ne pas utiliser de Reset CSS

Même si les différents navigateurs (et leurs interprétations parfois totalement différentes du langage CSS) peuvent nous donner des nausées, c’est tout de même grâce à eux que notre site internet va être délivré à nos visiteurs, nous avons donc plutôt intérêt à les caresser dans le sens du poil (même IE6…).

L’une des fonctions de base d’un navigateur est de fournir un style par défaut pour tous les éléments HTML, c’est une sorte de mécanisme de secours. Le problème est qu’il est rare de voir deux navigateurs proposant un style totalement identique pour un même élément HTML. Pour pallier à ce problème et s’assurer que nos feuilles de style soient efficaces, nous pouvons utiliser un reset CSS.

Faire un reset CSS consiste à faire une remise à zéro des styles de tous les éléments HTML, pour que tous les navigateurs puissent partir sur la même base de départ. Ce qui vous permettra ensuite d’appliquer beaucoup plus facilement des styles à vos éléments en ayant un résultat équivalent sur les différents navigateurs.

Beaucoup d’entre nous ont tendance à utiliser uniquement le reset du padding/margin :

* { margin:0; padding:0; }

Bien que cela fonctionne, cette réinitialisation n’est pas assez complète. Il existe de bons exemples de reset CSS que vous pouvez intégrer à vos pages, notamment le populaire CSS Reload d’Eric Meyer ou encore le reset CSS YUI 2. Vous pouvez bien évidement modifier ces reset pour les personnaliser, ou encore coder votre propre reset CSS.

2. Sur-spécifier les sélecteurs

Il n’est pas bon d’être trop spécifique lors de la sélection des éléments en CSS. Prenons ce code en exemple, il a pour but de cibler les liens à l’intérieur de notre menu  :

ul#menu li a {...}

Généralement, la structure d’un menu se compose d’un élément <ul> (souvent avec un ID comme #menu ou #navigation) puis une liste d’items <li> à l’intérieur, chacun avec sa propre balise <a>. Cette structure HTML est parfaitement correcte, mais c’est le sélecteur CSS qui présente un problème, il est trop spécifique.

Voici pourquoi : Un ID est censé être unique, il ne doit donc pas y avoir de raison pour qu’un élément autre que notre <ul> possède le même ID #menu, de plus, les liens <a> de notre liste sont obligatoirement imbriqués dans des items <li>. Il est donc inutile de préciser ul et  a dans notre sélecteur CSS, ce qui donnera le code simplifié suivant :

#menu a {...}

Essayez toujours d’écrire vos sélecteurs CSS avec le niveau minimum de spécificité nécessaire pour que cela fonctionne.

3. Ne pas utiliser les propriétés CSS raccourcies

Regardons ensemble ce code :

#selecteur {
  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left: 0;
}

Le problème saute aux yeux ! Pour un résultat identique, la taille de cette portion de code peut être divisée par 2 à l’aide d’un raccourci CSS :

#selecteur {
  margin: 50px 0;
}

Regardons maintenant ce code, qui traite des styles sur les polices de caractère :

font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;

Il peut être raccourci à une seule ligne :

font: bold 14px/1.5 Helvetica;

Un autre exemple avec la propriété background :

background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;

Le code simplifié :

background: url(background.png) repeat-y center top;

Si vous voulez en savoir plus sur les raccourcis CSS, je vous invite à découvrir cette page qui en traite une bonne partie : CSS Shorthand Properties

4. Utiliser 0px au lieu de 0

Supposons que nous souhaitons ajouter une marge de 20px à gauche d’un élément. Nous pourrions écrire quelque chose comme ça :

#selecteur { margin: 0px 0px 0px 20px; }

Je vais paraitre un peu tatillon mais ce code peut être optimisé, en remplaçant 0px par 0, cela peut sembler un peu excessif, mais lorsque vous travaillez sur des gros fichiers, retirer des caractères superflus peut aider à réduire un peu plus la taille de votre fichier (ce qui ne peut pas être une mauvaise chose).

5. Utilisez les noms de couleurs à la place de leur code Hexadécimal

Lorsque nous utilisons le code color:red; pour définir la couleur rouge, à la place de color:#FF0000, cela revient à laisser le choix au navigateur de notre visiteur de décider d’afficher ce qui pour lui est la couleur rouge.

Même si cela peut paraître inutile pour les couleurs basiques (comme le rouge, le bleu, le vert, le jaune, etc…), prenez la peine de trouver la valeur hexadécimale exacte de la couleur que vous souhaitez utiliser, de façon à vous assurer que cette couleur sera la même dans tous les navigateurs. Pour cela, vous pouvez par exemple utiliser un Color Picker en ligne.

6. Propriétés redondantes

Il n’est pas rare de vouloir appliquer le même style (ou presque) à deux éléments différents, par exemple nous avons ici deux éléments de style identique, à la différence que le  #selecteur1 a un margin-top :

#selecteur1 {
  font-style: italic;
  color: #e7e7e7;
  margin-top: 10px;
}
.selecteur2 {
  font-style: italic;
  color: #e7e7e7;
}

Nous pouvons supprimer cette redondance et simplifier ainsi le code en utilisant la virgule (,) pour combiner nos sélecteurs :

#selecteur1, .selecteur2 {
  font-style: italic;
  color: #e7e7e7;
}
#selecteur1 { margin-top:10px; }

Ici encore ce n’est pas grand chose, mais mises bout à bout, c’est petites améliorations contribueront à l’amélioration et l’allègement de notre fichier.

7. Ne pas indiquer de police de secours

Dans un monde parfait, chaque ordinateur aurait toujours d’installées toutes les polices que vous souhaitez utiliser sur votre site. Malheureusement ce n’est pas le cas. Si l’on met de côté @font-face, nous sommes assez limité en ce qui concerne les polices dites web-safe (Arial, Serif, etc…)

Cependant, grâce à la technique des fonts stacks (ou piles de polices si vous préférez), vous allez pouvoir utiliser les polices de votre choix. Les fonts stacks permettent aux développeurs d’avoir la possibilité de fournir des polices de secours au cas où le navigateur du visiteur ne trouve pas, et donc n’arrive pas à afficher la police principale que nous avons sélectionné.

Par exemple :

#selecteur {
  font-family: Helvetica;
}

Si notre visiteur ne dispose pas de la police Helvetica d’installée sur sa machine, pas de chance, le navigateur affichera la police par défaut à la place. Ce problème peut être contourné en fournissant un fonts stack, c’est à dire en fournissant une série de polices secondaire, s’approchant au maximum de votre police principale, par exemple :

#selecteur {
  font-family: Helvetica, Arial, sans-serif;
}

Désormais, si notre visiteur n’a pas la police Helvetica, le navigateur cherchera alors Arial et si encore une fois la police n’est pas présente, il chargera la police défaut sans-serif.

En définissant des polices de secours vous gagnez une façon supplémentaire de contrôler l’affichage de votre site sur les différents navigateurs.

8. Laisser des espaces vides inutiles

Lorsqu’il s’agit de réduire la taille des vos fichiers CSS, chaque caractère compte, même les espaces ! Lorsque vous êtes dans la phase de développement de votre site internet, vous pouvez formater votre CSS comme bon vous semble, pour une meilleure lecture, vous pouvez sauter des lignes, ajouter des espaces, etc… En revanche, une fois le développement achevé, il n’y a pas de raison de laisser ces espaces vides qui grossissent votre fichier inutilement.

Il existe une technique pour supprimer cet excès de caractère, c’est la « minification« . Si vous avez de gros fichiers CSS, leur « minification » pourra avoir une réelle influence sur le temps de chargement de vos pages. Pour plus d’information vous pouvez vous rendre sur le site Minify CSS.

9. Ne pas organiser logiquement son CSS

Lorsque vous écrivez vos CSS, c’est se rendre service à nous même que d’organiser notre code un maximum. Grâce à des commentaires par exemple, le but étant de ne pas perdre du temps pour les prochaines fois où nous aurons à modifier notre fichier.

Comment organiser votre CSS ? C’est à vous de choisir la façon qui vous semble la plus logique, dans la majorité des cas, le prochain développeur qui retourna mettre les mains dedans ce sera vous. Vous pouvez par exemple séparer votre CSS en différentes parties suivant votre design (header, menu, content, footer…).

10. Ne pas fournir une feuille de style pour l’impression

Pour pouvoir gérer l’apparence de votre site internet lorsqu’il va être imprimé par vos visiteurs, rien de plus simple, vous devez éditer une feuille de style spécifique, et l’inclure de la façon suivante :

<link rel="stylesheet" href="print.css" media="print" />

Utiliser une feuille de style pour l’impression vous permet de cacher les éléments que vous ne voulez pas imprimés (les menus, par exemple), mettre une couleur de fond blanche pour ne pas fusiller les cartouches de vos visiteurs, spécifier des polices qui soient plus adaptées à l’impression.

Conclusion

Nous y sommes, c’est terminé pour cette liste des 10 erreurs CSS les plus rependues ! Si vous avez des commentaires ou des éléments à ajouter à cette liste n’hésitez pas à m’en faire part. Pour finir et pour ceux qui veulent aller plus loin dans l’apprentissage et le perfectionnement du langage CSS, je vous conseille vivement ce livre très bien pensé que nous avons à l’agence Maîtrise des CSS (par Andy Budd) (lien affilié). Merci pour votre lecture !

Son créateur déclare que cette release se veut plus simple et surtout plus fiable, l’objectif majeur étant de rendre le site monétisable, grâce à des bandeaux publicitaires et des habillages complets. Ce qui devrait dans un premier temps subvenir aux coûts des serveurs.

Du côté des nouveautés, rien de bien exceptionnel. On peut voir l’arrivée de fenêtres vidéo extensibles et déplaçables, quant aux champs de texte attribués au chat, ils sont maintenant placés sous la vidéo.

A moins qu’Andrei n’ait trouvé une solution au problème exhibitionniste, il semble que cette tentative de monétisation s’annonce être assez complexe dans la mesure où une bonne partie de la population qui « converse » sur ce site est composée de… pénis ! Qu’en pensez-vous ?

Certains de ces projets ce sont malheureusement transformés en flops mais la plupart font désormais partie du paysage des services web que nous utilisons tous les jours (Gmail, Analytics, AdSense, Youtube, …).

Éléments graphiques

101. Ne perdez pas trop de temps à essayer de rendre votre design parfait au pixel près. De toute façon, celui-ci changera légèrement sur chaque appareil, chaque système exploitation et chaque navigateur.

102. Si vous demandez à vos visiteurs de s’inscrire à un service sur votre site, ne surchargez pas vos pages, maintenez la quantité d’infos au strict minimum et gardez uniquement les informations primordiales.

103. Vos éléments graphiques ne doivent pas être trop lourds, utilisez la compression JPEG. Inutile d’avoir toutes vos images en qualité 100% sur votre site, pensez que cela peut fortement ralentir le temps de chargement de vos pages.

104. Si vous entreprenez de faire une version mobile de votre design, pensez le simple, clair, en une seule colonne.

105. mobiForge propose un excellent guide pour le développement Web sur mobile. (En anglais)

106. Attention à la largeur de votre design, n’oubliez pas que vos visiteurs peuvent avoir des résolutions d’écran différentes, des add-ons latéraux, etc…

Couleurs

107. La couleur peut provoquer un large éventail de sentiments chez les gens. Apprenez à utiliser les couleurs pour mieux communiquer avec votre public.

108. Apprenez quelles couleurs sont associées à quels sentiments, par exemple : rouge pour le chaud, bleu pour le froid, blanc pour la pureté, le jaune le bonheur, etc…

109. Le contraste des couleurs est important. Pour certaines personnes comme les daltoniens, la capacité à distinguer différentes teintes peut être diminuée et ils peuvent avoir du mal à lire le contenu.

110. L’idée des couleurs web-safe est devenue relativement superflue en raison de la façon dont ont évolué les écrans, mais s’assurer que votre site internet soit accessible pour les personnes ayant des difficultés pour distinguer les couleurs est la moindre des choses.

111. L’harmonie globale entre les différentes couleurs de votre design présente un élément très important.

Typographie

112. La typographie est un élément important de votre design. De plus en plus de polices sont utilisables sur le web, mais vous devez garder une chose en tête : la lisibilité est un point essentiel.

113. Construire votre font stack, c’est facile ! Vous pouvez par exemple indiquer votre police principale, puis son parent le plus proche, et enfin le type (ici, sans-serif).

font-family : "Trebuchet MS","Lucida Grande",Tahoma,Helvetica,Sans-Serif;

114. La taille de police est une autre variable que vous devez prendre en compte. Plus la taille est grande, plus le texte est lisible, plus il semble important pour le lecteur.

115. Mettez l’accent sur les éléments importants de votre texte, grâce aux différents styles : souligné, gras, italique…

Organisation des éléments du design

116. Les espaces vides sont une denrée précieuse. Ne surchargez pas votre design ! Laissez respirer votre contenu, cela apportera de la lisibilité à votre site.

117. Si votre site est clair et aéré, le lecteur n’aura aucun mal à parcourir vos pages des yeux rapidement afin de trouver l’information qu’il y cherche.

118. Faîtes attention à la typographie, vous ne pouvez pas savoir si vos utilisateurs finaux auront la ou les polices que votre site utilise. Néanmoins, si vous voulez utiliser des polices un peu « exotiques », sachez qu’il existe des solutions.

119. Disposer correctement vos informations peut être une tâche délicate. L’utilisation des conventions et des modes actuelles, comme par exemple le logo placé sur le côté supérieur gauche, peut apporter un confort supplémentaire à vos visiteurs.

120. Savoir comment présenter votre contenu et organiser votre design est une chose difficile. Sans tomber dans la copie, pourquoi ne pas s’inspirer de ce qui fonctionne déjà ? Grâce au site Pattern Tap vous allez pouvoir observer de nombreux exemples de réalisations, classés en catégories (Header, Footer, page de contact, page 404…), idéal pour trouver de l’inspiration et voir ce qu’il se fait de mieux dans les standards actuels.

121. Rappelez-vous que la plupart des gens regarderons votre contenu en commençant par le haut-gauche de leur écran. Par conséquent, assurez-vous d’y placer les informations les plus importantes de votre site.

Expérience utilisateur

122. Votre site doit refléter directement les besoins de l’utilisateur final. N’ajouter pas de fonctionnalités inutiles comme des widgets en tout genre (horloge, météo, etc…). Donnez à vos visiteurs uniquement ce dont ils ont besoin.

123. Régulièrement, examinez les statistiques de votre site pour voir comment les gens naviguent à l’intérieur.

124. Essayez de comprendre comment les internautes perçoivent votre site, le point de vue de vos visiteurs doit toujours être plus important que le vôtre.

125. Mettez votre site souvent à jour ! Beaucoup de gens jugent la qualité des sites en prenant en compte ce critère. Ne laissez pas votre site mourir à petit feu…

126. Si vous avez du temps, n’hésitez pas à vous lancer dans la lecture d’ouvrage sur la psychologie et la sociologie. Même s’ils ne sont pas tous strictement en rapport avec le web, le lien n’est souvent pas bien difficile à faire.

127. Ne concevez pas votre site pour vous-même, vos visiteurs sont ceux qui vont le faire vivre, alors prenez-les en considération.

128. Concevez votre site de manière à ce que le visiteur sortant garde un bon souvenir de sa visite. Si vous donnez satisfaction à vos lecteurs, ils reviendront !

129. La satisfaction d’un utilisateur est liée à la façon dont vous lui livrez l’information qu’il recherche. Si l’utilisateur a du mal à trouver son chemin, vous n’allez pas le mettre de bonne humeur…

130. L’interactivité est une bonne chose, bien que le contenu statique soit plus adapté à certains sites, elle donne à l’utilisateur une autre façon, plus amusante, d’explorer votre site ; qui se traduira forcement par un bon souvenir.

131. Attention cependant, l’interactivité n’est appréciée que lorsqu’elle est utile. Éliminez d’emblée les interactions inutiles.

132. Encore une fois, la structuration claire et logique de votre contenu est un des points les plus important de l’expérience utilisateur.

133. Si vous développez des applications pour téléphones mobiles. Il peut s’avérer utile de mettre en place une version hors ligne de votre apply. Pour que l’utilisateur puisse tout de même accéder à quelque chose sans accès internet.

Accessibilité

134. L’accessibilité est un aspect très important. Si certaines personnes ne peuvent pas accéder à votre site ou à son contenu, c’est autant de visiteurs (ou clients) perdus.

135. Vous pourrez croire que ces visiteurs ne représentent qu’une infime partie, détrompez-vous. Souvent les gens ne pensent qu’aux personnes handicapées, mais c’est loin d’être tout. Pensez aussi à tout ceux qui ont besoin de lunettes pour lire, par exemple.

136. Les déficiences peuvent se présenter sous beaucoup de formes différentes : elles peuvent être d’ordre physique, intellectuel, affectif, social, voire technologiques (par exemple les personnes sans connexions haut débit ou des personnes utilisant uniquement des appareils mobiles pour naviguer sur internet).

137. L’ampleur et la durée des handicaps diffèrent: une personne peut être paralysée (long terme) ou avoir un bras cassé (court terme).

138. Il y a beaucoup de spécifications et de lois relatives à l’accessibilité. Vous pouvez notamment lire les recommandations du W3C concernant l’accessibilité : Web Content Accessibility Guidelines (WCAG) 2.0

139. Fournissez toujours un contenu alternatif pour les images ou autres médias.

140. Vous pouvez observer comment votre site sera interprété par les lecteurs d’écran grâce à des outils libres qui émulent leur fonctionnement : le plugin Firefox Fangs Screen Reader Emulator, par exemple.

141. Ne vous fiez pas trop aux outils tels que Cynthia, ces validateurs d’accessibilité ne sont pas des solutions idéales pour vérifier l’accessibilité de votre site. Pour la simple raison qu’il examine votre site avec un œil de « machine », ignorant la structure sémantique, l’organisation du contenu, et des éléments visuels, etc…

Utilisabilité

142. Le site Usability.gov propose une sélection de recommandations au format PDF qui pourront vous aider à améliorer votre site.

143. Il existe de très bons livres traitants de ce sujet, si l’anglais ne vous effraie pas vous pouvez jeter un œil du côté de Steve Krug et Jakob Nielsen (avec l’excellent Designing Web Usability), qui sont deux spécialistes hautement respectés dans le domaine de l’ergonomie et de l’utilisabilité. Vous pouvez également consulter cet article qui résume les 30 concepts-clés de l’utilisabilité (en français).

144. L’utilisabilité consiste à construire un site aussi fluide et fonctionnel que possible. Faites de votre mieux pour aider les utilisateurs à trouver ce qu’ils cherchent ou à accomplir ce qu’ils avaient prévu de faire.

145. Avant de lancer votre site internet, prenez le temps de réunir un petit groupe de personne pour le tester, c’est un excellent moyen pour lister d’éventuels bugs. Profitez-en aussi pour leur demander leur avis, leurs impressions, etc…

146. La réalisation d’une étude d’utilisabilité peut être très simple. Sollicitez un groupe de personnes (des amis à vous, par exemple) pour effectuer une tâche spécifique sur votre site et demandez leur s’ils ont eu des difficultés, si oui, lesquelles, et quels sont les points qui mériteraient d’être améliorés selon eux.

147. Votre design doit inspirer la simplicité d’utilisation, sans pour autant paraître vide et non recherché, à vous de trouver le bon équilibre.

148. L’amélioration progressive doit être votre objectif. Autrement dit : Vous devez d’abord vous assurer que votre site fonctionne correctement à un niveau « de base », et ajouter ensuite des fonctionnalités pour les « périphériques » qui le permettre. Par exemple : Lorsque vous utilisez du CSS3 dans votre site internet ou blog, assurez-vous que votre site fonctionne toujours bien sur les navigateurs qui ne supportent pas encore cette technologie.

149. Encourager les gens à s’impliquer pour vous aider à améliorer votre site web. Demandez leur des feedbacks, qui pourront à coup sûr vous donner des idées pour l’évolution de votre site internet ou blog.

150. Ce n’est probablement pas possible d’avoir le site internet parfait, mais si vous visez toujours la perfection, vous vous en rapprocherez forcement plus.

Développement

151. Les standards du Web sont importants. Vous devriez être capable de fournir le code sémantique exacte qui décri votre contenu avec précision.

152. La sémantique ne doit pas se limiter uniquement à « utiliser le bon élément au bon endroit ». Par exemple, en donnant à vos classes et ID des noms efficaces (comme les microformats, par exemple) peut améliorer la valeur contextuelle du site.

Les oiseaux se sont perchés à
   <span class="geo">
     <span class="latitude">52.48</span>
     <span class="longitude">-1.89</span>
   </span>

153. Des spécifications existent pour chaque langage web que vous rencontrerez (même les plus obscurs…). Si elles peuvent parfois être très techniques, soyez patient, il vaut souvent la peine de les lire.

154. Validez la syntaxe de votre site internet en utilisant les outils de validation du W3C. Utilisez-les pour vous aider à trouver et à corriger des bugs dans le code.

155. Dans l’ordre, je recommande l’apprentissage des technologies suivantes : HTML, CSS et JavaScript. Vous comprendrez ainsi facilement comment ces 3 langages sont étroitement liés.

Débogage et test

156. Lorsque vous débuggez votre code, la solution simple est de retirer (en les commentant) temporairement des portions de code suspectes et de voir si le problème se résout. C’est une façon relativement rapide de trouver qui est le coupable, pour ensuite corriger le problème.

157. Des outils comme Firebug peuvent être particulièrement utiles pour regarder « en live » la façon dont votre site est interprété par le navigateur Mozilla Firefox.

158. Il existe des services qui vous permettent de visualiser le rendu de votre design sur différents navigateurs et différents systèmes d’exploitation. L’un des plus connu est BrowserShots, loin d’être parfait, il a néanmoins l’avantage d’être gratuit.

159. Si vous souhaitez tester votre site sur notre bien-aimé Internet Explorer 6, vous pouvez utiliser IETester (sous Windows).

160. Internet Explorer 6 est peut être le fléau de notre vie (surement…), mais je vous recommande vivement de tester votre site sur chacun des navigateurs qui représente plus de 1% de votre volume totale de visite (même si IE6 en fait partie…!).

161. Pour faciliter la phase de debugging, je vous conseille d’utiliser des dossiers distincts pour vos fichiers sources (HTML, PHP), vos style (CSS), et vos scripts (JavaScript).

Navigateurs et User-Agents

162. Votre site doit au moins être compatible avec ces cinq navigateurs : Internet Explorer, Firefox, Chrome, Safari et Opera.

163. Les hacks CSS ne sont pas toujours une bonne idée, parce qu’on ne peut pas réellement savoir s’ils seront encore supportés dans le futur. Si vous rencontrez des problèmes avec IE particulièrement, sachez que les commentaires conditionnels sont une bonne solution pour gagner du temps.

164. Chaque appareil mobile peut afficher votre site différemment. Une rapide vérification s’impose sur les plates-formes les plus répandues, comme l’iPhone, par exemple.

165. Le langage Jscript a son propre ensemble de commentaires conditionnels appelé compilation conditionnelle, ce qui signifie que vous pouvez facilement cibler un script JavaScript avec un code spécifique à IE, de la même façon que vous le faites avec vos feuilles de styles CSS destinée à Internet Explorer.

166. C’est surprenant mais Google Chrome ne prend pas en charge nativement les flux RSS et Atom, donc, comme beaucoup de choses (le Flash, par exemple), cela doit être vu comme un élément complémentaire. Je vous conseille d’utiliser FeedBurner si vous souhaitez délivrer des flux RSS, et d’activer la fonction BrowserFriendly qui permettra à vos visiteurs de visualiser votre flux et de s’y inscrire, dans une jolie page HTML (bien plus conviviale qu’un fichier XML)

167. Sachez que les appareils mobiles ne disposent pas tous des mêmes capacités à lire les différents médias (Flash, vidéo, images…).

168. Le WML est un langage mort. Ne l’utilisez pas si vous concevez un site internet mobile-friendly.

169. Outre les unités de mesures fixes CSS (px, cm, mm, etc…), vous pouvez utiliser les mesures élastiques (em), liquides (%), fluides (min/max-width) ou même un mixe de tout cela pour que la taille de votre design s’adapte parfaitement sur le navigateur ou l’appareil du visiteur.

Comportement

170. Les frameworks JavaScript comme jQuery et MooTools ont été développés pour vous faire gagner du temps lorsque vous développez en JS, ils sont également utiles si vous voulez manipuler aisément le DOM, utiliser l’AJAX, ou créer facilement des petites animations… Veillez cependant à ne pas abuser de leur utilisation, vous ne devez surtout pas gêner la navigation du visiteur.

171. Les scripts intrusifs comme les scripts empêchant le clic droit ou forçant l’affichage des pop-ups sont préjudiciables à l’utilisateur. Même si vous pensez que ces scripts peuvent améliorent votre site, bien souvent ils ne pourront que faire fuir vos visiteurs.

172. N’utilisez pas de frames HTML ou autres éléments comme <marquee> ou <blink>. Il est devenu une règle tacite de ne pas utiliser ces balises qui ne font que dégrader l’expérience utilisateur.

173. Répliquer les fonctionnalités existantes du navigateur est parfois inutile. Inutile d’ajouter un bouton pour imprimer, changer la taille des polices, mettre la page en favoris (etc…) sur chacune de vos pages…

174. La protection de votre code est impossible. N’utilisez pas de script pour protéger le protéger, si vous voulez vous assurer que les gens ne puissent pas regarder le code que vous avez créé, alors ne le mettez pas sur internet !

Markup

175. N’oubliez pas d’inclure la déclaration du DOCTYPE en début de vos fichiers (x)HTML. Vous seriez surpris de connaître le nombre de bugs qui peuvent apparaitre en raison de l’omission du DOCTYPE.

176. Je me répète probablement mais il est important de définir vos balises ALT pour vos images <img>.

177. N’incluez pas d’éléments block au sein des éléments inline. Les éléments <div> ne sont pas destinés à être utilisé de façon générique dans les paragraphes ou des listes. Vous risquez de briser la sémantique, si vous ne faites pas les choses proprement.

178. Les éléments obsolètes (deprecated) ne doivent pas être utilisés, sauf si vous avez une très bonne raison de le faire. En général, les élément deprecated ont des remplaçants, utilisez-les à la place.

179. L’HTML5 peut être un complément utile aux langages que nous pouvons utiliser actuellement sur le web, mais gardez toujours à l’esprit que la compatibilité avec les navigateurs restent le plus important.

Si vous voulez en savoir plus sur les « best pratices » de l’HTML, je vous conseille de lire l’article des 20 Pratiques HTML de base, rédigé par Johan.

Styles

180. Le CSS3 offre plusieurs fonctionnalités utiles. Prenez le temps d’apprendre comment les choses évoluent, vous serez prêt pour la prochaine génération.

181. L’optimisation de vos CSS peut être atteinte en faisant bon usage de l’héritage, des sélecteurs, en évitant les déclarations répétées, et en groupant intelligemment vos styles.

182. N’oubliez pas de créer vos feuilles de style destinées à l’impression. Avoir un CSS prévu pour l’impression aidera à limiter le gaspillage d’encre et de papier et donnera de la valeur à votre contenu, même une fois imprimé.

Diverses technologies du web

183. Si vous avez besoin d’afficher des documents volumineux, un gros document Word par exemple, pensez à utiliser un fichier PDF ou XPS à la place, ces formats sont adaptés pour le web.

184. Même si les technologies telles que les Canvas et les éléments SVG ou VML ont beaucoup de potentiel en matière de dessin vectoriel sur le web, sachez qu’elles provoquent de nombreux problèmes de compatibilité selon le navigateur.

185. Si vous devez faire des animations avancées, le Flash reste pour le moment la meilleure solution, comparée au HTML5 qui n’a pas encore un fort taux de pénétration.

186. La clé de la mise en place de contenus Flash est de toujours créer un contenu alternatif au cas où votre visiteur ne disposerait pas de lecteur Flash.

187. Flash est une excellente plate-forme si vous voulez fournir du contenu dynamique (vidéo et audio), mais, pour reprendre le point 186, ne créez pas de site full-Flash sans créer un contenu HTML de « secours ».

188. Silverlight et Java sont deux bonnes alternatives à Flash, mais prenez en compte que ces technologies ont un moins bon taux de pénétration.

JavaScript

189. Le JavaScript peut être pratique pour la validation des formulaires, il aide à améliorer l’expérience utilisateur. Pour autant, n’oubliez pas d’utiliser des scripts côté serveur en supplément au cas où le navigateur du visiteur ne prenne pas en charge JavaScript, ou s’il est désactivé.

190. Le JS c’est génial mais vous ne devez l’utiliser que lorsque que cela en vaut la peine, lorsque cela apporte vraiment un plus pour votre site internet. Ne surchargez pas vos pages de scripts en tout genre, ils pourraient ralentir ces dernières.

Divers

191. Il existe quelques bookmarklets qui pourront vous aider dans le développement de votre site sur les différents navigateurs. Par exemple : Firebug Lite, Aardvark, Quix…

192. Une des meilleures façons d’améliorer la vitesse de chargement d’un site est d’exploiter la mise en cache. Séparez bien la structure de votre site en fichiers spécifiques, les styles (CSS), le comportement (JS), et enfin le contenu (HTML).

193. Ne créer pas votre design en utilisant des tableaux (<table>), leur utilisation est à proscrire, utilisez-les uniquement pour mettre en forme vos e-mail HTML. Les tableaux sont pauvres de sémantique et affectent l’accessibilité pour les screen-reader.

194. Choisir le bon langage côté serveur est une chose importante. Vous avez l’embarras du choix : PHP, ASP, ASP.NET, JSP, Ruby, Perl, ColdFusion et Python. Faîtes des recherches avant de vous lancer tête baissée dans le développement.

195. Votre environnement serveur pourra généralement vous dicter quels langages vous pourrez utiliser pour coder. Selon la configuration, vous pouvez constater que certains langages (comme ColdFusion, par exemple) bénéficient d’un support limité.

196. Si vous voulez utiliser des systèmes de gestion de contenu (comme WordPress), vous pourrez avoir besoin de connaître un langage spécifique. Prenez cela en compte lorsque vous faîtes le choix de votre langage côté-serveur.

197. Si vous souhaitez stocker temporairement des données concernant vos visiteurs, préférez le stockage dans des cookies plutôt que dans votre base de données côté serveur.

198. Les types de base de données sont assez variés, mais la plupart d’entre eux utilisent le format SQL.

199. Avez-vous déjà envisagé de développer une application web exécutable hors connexion ? Sachez qu’il existe des solutions, telles que Adobe Air, Titanium et Mozilla Prism, qui vous permettent de créer rapidement des solutions packagées.

Marketing

Une fois le développement de votre site internet achevé, vous voudrez surement vous assurer que les moteurs de recherche et les visiteurs le trouve… Et vous avez bien raison !

200. Réfléchissez bien si vous voulez faire de votre nom ou/et prénom votre marque ou le titre de votre site internet, cela peut comporter certains risques. Par exemple : Se faire coller une étiquette et être associé à un thème unique et précis, mettre en danger sa vie privée, de plus, votre nom n’est peut être pas « adapté » au marché visé. Vous n’avez qu’un seul nom, il ne faudrait pas que certains internautes / clients mécontents propagent une image négative de vous, vous pourrez difficilement faire machine arrière et faire table rase du passé.

Moteurs de recherche et classement

201. Donnez à votre site un nom original et créatif. Il doit être court, accrocheur et facile à retenir (et à prononcer, si possible dans les langues les plus parlées). Vos visiteurs doivent être en mesure de se rappeler de vous quand ils auront besoin de vos produits.

202. N’essayez pas de tromper les moteurs de recherche. Le keyword-stuffing et autres techniques obscures visant à améliorer frauduleusement votre classement, pourraient vous valoir un blâme de la part des moteurs de recherche.

203. Rédigez vos pages de façon naturelle, n’essayez pas de vous mettre à la place des robots de Google. Contentez vous d’écrire du contenu de haute qualité.

204. Pensez à nettoyer votre code, corriger les erreurs, et organiser votre contenu correctement (les bonnes balises, aux bons endroits). Si vous prenez la peine de le faire, vous vous assurez que les moteurs de recherche trouveront votre contenu, et cela améliorera également son indexation.

205. Rappelez-vous que le contenu brut aura une plus grande importance aux yeux des moteurs de recherche, comparé au contenu non-indexable comme le Flash ou les fichiers PDF par exemple.

206. Votre classement Alexa n’est pas important. Les classements d’Alexa ne sont pas objectifs et sont fournis grâce une petite élite qui a installé la toolbar. Ce n’est franchement pas la peine d’y accorder autant d’importance que certaines personnes lui donnent.

207. Les moteurs de recherche ignorent la balise <meta> keyword. Même si beaucoup de personnes continuent à penser le contraire.

208. Les spécifications du DCMI (Dublin Core Metadata Initiative) sont un excellent moyen de donner du sens à votre site et une certaine valeur ajoutée. Lorsque vous rédigerez vos métadonnées, je vous recommande de vérifier les spécifications DCMI ici.

209. Ajouter un fichier robots.txt peut vous être utile pour aider les moteurs de recherche à savoir ce qu’il ne faut pas indexer sur votre site. Les robots.txt sont très faciles à éditer et sont largement reconnus.

210. Même si le fichier robots.txt vous permettra d’interdire l’accès à certaines de vos pages par les robots. Rappelez-vous qu’il n’empêchera pas les gens de voler votre contenu…

211. OpenSearch est une spécification XML grâce à laquelle vous pourrez créer un moteur de recherche propre à votre site et permettre à vos visiteurs de l’ajouter à leurs moteurs de recherche « favoris » directement dans leur navigateur (compatible avec Firefox 2+, Google Chrome et Internet Explorer 7+). Pour plus d’information sur la marche à suivre, ça se passe chez nos confrères d’alsacréations.

Bonnes pratiques

212. Chaque site doit avoir un Sitemap XML, il permet de lister les pages que propose votre site web et d’indiquer à Google à quelle fréquence elles sont mises à jour.

213. Les balises <title> doivent être uniques sur chaque page de votre site.

Publicité

214. Faire de la publicité via Google AdWords peut vous apporter beaucoup de trafic qualifié, à condition de faire une étude sérieuse sur les mots clés que vous souhaitez cibler. Les prix au clic étant fixés par un système d’enchères, être affiché (et cliqué) en première place peut parfois coûter très cher, trop cher…

215. Si vous trouvez que Google AdWords ne vous apporte pas assez de trafic, vous pouvez toujours vous tourner vers la location d’espaces publicitaires sur des sites connexes, en rapport avec votre activité.

216. Le partenariat est une façon efficace et économique de gagner de nouveaux prospects.

217. Il existe de nombreuses techniques pour monétiser votre site. Comme par exemple : la publicité, le support payant, l’accès payant à des contenus exclusifs, l’affiliation ou encore les systèmes de donations

218. Monétiser son site internet n’est pas une tâche facile, méfiez-vous des offres trop alléchantes qui fleurissent sur le web en ce moment.

Branding, réputation, networking

219. Si vous avez l’intention de faire de l’argent grâce à votre projet, vous devez vous assurer d’avoir tous les documents nécessaire. Et n’oubliez pas, vous devez déclarer vos revenus, si si !

220. Ne voyez pas votre projet comme un simple projet cantonné au web mais percevez le plutôt comme une vraie entreprise ! Faîtes des cartes de visite, dépliants, flyer, à donner lorsque vous prospectez ou simplement lors d’une soirée entre amis (le bouche à oreille est bien plus puissant que ce que l’on croit !).

221. L’extension que vous choisirez pour votre nom de domaine n’aura pas d’incidence sur le classement dans les moteurs de recherche.

222. La confiance est un élément clé pour chaque entreprise. Si vous inspirez la confiance, vous attirez les clients, si vos clients vous font confiance, ce seront des clients fidèles !

223. Lorsque vous créez un lien pointant vers votre propre site Web, faites-le seulement sur les sites où il est « bien vu » de le faire. Vous ne voulez pas que l’on vous considère comme un spammeur…

224. Fréquenter les forums, chat ou autre lieux d’échanges entre personnes de votre activité peut être un excellent moyen de se faire connaître mais également d’apprendre de nouvelles choses et d’étendre son domaine de compétences.

225. Être présent (j’entends par là : avoir un lien) sur des sites en rapport avec le votre est un bon moyen pour acquérir de nouveaux visiteurs, améliorer votre réputation en ligne et aussi perfectionner votre classement dans les moteurs de recherche (si le lien est en dofollow).

226. Si vous voulez vous faire connaître des professionnels de votre secteur, n’hésitez pas à vous rendre à des conférences pour parler avec eux en face-à-face et pourquoi pas échanger ensuite vos cartes de visites.

227. Ne sous-estimez pas le marketing papier, certes moins efficace et plus couteux que certaines autres méthodes, il n’est pour autant pas obsolète.

228. Si vous êtes « tout nouveau », préférez la publicité dans les journaux locaux, ou même dans les pages jaunes, plutôt que d’essayer d’être affiché chez les plus grands, cela ne vous ruinera pas et vous apportera quand même quelques clients.

229. Les réseaux sociaux présentent une des façons les plus simple pour vous construire une réputation en ligne, et bâtir une communauté autour de votre site / marque.

Vente

230. Si vous vendez des articles physiques, envisagez de les rendre disponible chez les marchands connus sur le web (comme Amazon, par exemple).

231. Vous voulez montrez vos compétences au monde ? Pensez à écrire un e-book !

232. Les DRM et les clés d’activation de produit sont des méthodes que je vous recommande d’éviter… Il y aura toujours des personnes pour confectionner un crack, et au final ce seront les clients légitimes qui finiront par en pâtir.

233. La vente en ligne est devenue assez simple grâce aux plateformes comme PayPal, Google Checkout et Amazon FPS. N’abandonnez pas cette idée à cause d’un apriori.

234. De temps en temps, proposer des choses gratuitement (services, e-book, ou autres) peut engendrer beaucoup d’intérêt pour votre site auprès de nombreux internautes et vous aider à fidéliser vous client plus facilement.

235. Si vous proposez un logiciel ou toute autre chose de téléchargeable, pensez à le soumettre aux portails de téléchargement tel que 01net, CNET, etc…

Les médias sociaux, réseaux sociaux et blogs

236. La mise en place d’un blog peut être un excellent moyen d’obtenir un peu de trafic supplémentaire. Si vous pensez pouvoir écrire régulièrement, vous pourriez très bien arriver à convertir les visiteurs de votre blog en clients.

237. Si vous estimez ne pas avoir assez de temps pour tenir un blog en plus de votre site internet, Twitter est une bonne méthode pour (micro)blogger sans perte de temps et en toute simplicité.

238. Si vous êtes à l’aise devant la caméra et/ou derrière un micro, la création de podcast peut donner à votre site une valeur ajoutée.

239. Joignez-vous à des communautés, associations (etc…) qui font la promotion des meilleures pratiques dans votre secteur d’activité. Être associé à ce genre de groupes vous donnera souvent une touche de professionnalisme.

240. Facebook est utilisé par une enorme proportion de la population mondiale, par conséquent, il peut être très intéressant de vous créer une page, pour partager avec vos « fans » et créer une relation privilégiée.

241. StumbleUpon, même si principalement anglophone, représente une petite source de trafic pour votre site internet qui n’est pas négligeable.

242. Créer son profil professionnel (ou une copie de votre CV) sur des sites comme LinkedIn et Google profile donne un endroit supplémentaire aux gens pour vous trouver.

243. Quels que soit les réseaux sociaux que vous décidez d’utiliser, n’abusez pas de l’auto-promotion, utilisez les services conformément à leurs utilisations initiales et focalisez-vous sur la création et le partage de contenu de haute qualité.

244. Vous ne devez pas considérer les réseaux sociaux comme des simples services de promotion gratuite ! Essayez plutôt de les voir comme des endroits incontournables pour garder le contact avec vos clients / visiteurs / abonnés, recueillir leurs avis, leurs attentes, etc…

Divers

245. Ne vous précitipez pas, prenez le temps de reflechir avant de faire un choix, surtout si il concerne le marketing. Une mauvaise réputation est très facile à obtenir et parfois impossible à annihiler.

246. Avoir beaucoup de visiteurs ou un PageRank élevé ne signifie pas forcement que votre site fonctionne. Le seul gage de réussite est le nombre de visiteurs « passants » que vous avez réussi à fidéliser.

247. Essayez d’être unique. Ne recherchez pas votre inspiration uniquement sur internet et cherchez à vous démarquer de vos concurrents.

248. Avoir plusieurs projets en tâche de fond, que ce soit pour le plaisir ou pour développer votre entreprise, ne pourra que vous servir. Facilitant l’établissement de nouvelles connexions, etc…

249. Ne soyez pas trop critique. Si vous considérez ne pas ou mal répondre à vos attentes personnelles, vos clients le remarqueront et vous risquerez de perdre leur confiance.

250. Prenez du plaisir dans ce que vous faites, tout simplement…

Conclusion

Ouf, ça y est, c’est terminé ! Vous êtes arrivé à la fin de cette liste de 250 conseils : toutes mes félicitations !

J’espère que vous avez apprécié cette lecture et que ces conseils vous seront utiles, si c’est le cas, n’hésitez pas à les partager avec vos amis !

Merci à tous et à très bientôt.

1. Déclarez toujours votre doctype

La déclaration du doctype doit être la première chose présente dans tous vos documents HTML. Elle indique au navigateur quelle norme HTML votre page utilise et lui permet de lire et d’interpréter vos balises correctement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Je vous conseille d’utiliser le doctype XHTML 1.0 Strict. Certains développeurs considèrent ce doctype comme compliqué du fait que cette norme soit moins tolérante que l’XHTML Transitional, mais d’un autre côté sachez qu’il garantit le respect des standards les plus récents !

2. Utilisez la balise <title> pour donner du sens à vos pages

La balise <title> est très importante aux yeux des moteurs de recherche car elle caractérise l’information que le visiteur va pouvoir trouver sur votre page. C’est aussi une balise très importante pour vos visiteurs parce qu’elle sera visible dans les résultats des moteurs. Par exemple le titre suivant :

<title>Australian Immigration | Australian Visa</title>

Apparaitra comme ceci dans les résultats d’un moteur de recherche (ici, Google.fr) :

3. Utilisez les tags <meta>

Bien que leur prise en compte soit minime (voire nulle pour certains moteurs de recherche), ces balises contribuent tout de même à donner du sens à vos pages.

La balise meta « description »

La balise meta « description » décrit le sujet de votre page. Pour chacune de vos pages, placez dans cette balise un résumé pertinent de votre page web, qui donnera au visiteur l’envie d’entrer dans votre site. Par exemple :

<meta name="description" content="Recherchez des commerces et des services
de proximité, affichez des plans et calculez des itinéraires routiers." />

Inutile de spammer des mots ou phrases clés. Essayez plutôt de faire simple en expliquant clairement le but de votre page.

La balise meta « keywords »

La plupart des experts SEO s’accordent à dire que cette balise n’est plus prise en compte par Google depuis longtemps, la remplir ne doit pas vous prendre plus de quelques secondes. La balise meta « keywords » contient une liste de mots et expressions clés se rapportant à votre page web. Ces mots clés doivent être séparés par des virgules. Encore une fois, il est inutile de répéter plusieurs fois les mêmes mots clés : une occurrence par keywords suffit.

4. Utilisez les balises <div> pour découper votre design

Les balises <div> doivent vous servir à scinder votre design en plusieurs divisions logiques. Il ne s’agit pas de parsemer votre site d’un nombre incalculable de <div>, mais au moins de séparer les grandes parties (haute de page, contenu, barre latérale, pied de page,…). Vous ne devez pas utiliser <div> pour englober des éléments de contenu seuls, d’autres balises seront surement mieux adaptées (<span>, <p>, <li>, par exemple).

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Les <div> doivent vous aider à organiser votre design, si vous les utilisez correctement, vous verrez qu’elles vous verrons gagner de précieuses minutes lors de la création de vos sites internet.

5. Séparez le contenu et la présentation

Le code HTML représente votre contenu. Le CSS est uniquement là pour vous permettre de mettre en forme ce contenu. Il ne faut jamais mélanger les deux !

Vous ne devez pas utiliser les styles directement dans votre code HTML, mais préférer plutôt l’utilisation d’un fichier CSS externe. Pourquoi ? Pour plusieurs raisons. La première est la simplicité de maintenance du code et la seconde raison est que cela ne pourra faire qu’améliorer le ratio contenu/code de votre page, favorisant grandement le référencement de vos pages par les moteurs.

6. Utilisez Minify et fusionnez vos CSS

Chacun des fichiers CSS contenus dans votre page nécessite une requête HTTP. Qui dit « requête HTTP », dit augmentation du temps de chargement de votre site internet.

Une des solutions à ce problème consiste à Minify-er votre code (supprimer les caractères inutiles tels que les espaces, retours à la ligne, …) puis d’essayer de fusionner les fichiers qui peuvent l’être, en un seul fichier.

Cependant, un problème persiste avec cette approche. Vous devrez désassembler, puis re-fusionner, à chaque fois que vous voudrez mettre à jour votre code. Vous avez donc tout intérêt à fusionner vos CSS qu’une fois votre processus de production terminé.

Vous trouverez en ligne de nombreux outils qui vous permettront de d’optimiser vos CSS (Comme par exemple : CSS Optimizer, Clean CSS, CSS Compressor, …)

7. Minify-iez, fusionnez, et regroupez vos JavaScript en fin de fichier

Je ne vais pas m’attarder sur ce point que j’ai déjà abordé dans mon article sur l’optimisation du temps de chargement de votre site internet.

Le principe est quasiment le même que pour vos CSS. Néanmoins un point diffère : Dans la mesure du possible, il est toujours mieux d’inclure ses fichiers JavaScript en fin de fichier. En effet, les navigateurs ne permettent pas de télécharger plusieurs fichiers en parallèle. Autrement dit, pendant que votre navigateur télécharge un fichier JavaScript, le chargement de votre page est bloqué. La meilleure stratégie est donc de charger l’intégralité de ses scripts en fin de page, juste avant de fermer son <body>.

8. Utilisez correctement les balises de titres

Prenez l’habitude d’utiliser ces balises pour hiérarchiser votre contenu. Lorsque vous écrivez du contenu (pas forcément pour le web), il est d’usage d’utiliser un titre pour la page, un sous titre pour un paragraphe, et pourquoi pas des sous-titres de second niveau pour des paragraphes qui seraient un peu long. Vous verrez que votre contenu gagnera fortement en lisibilité. Le lecteur cherchant une information pourra s’y retrouver en un coup d’œil.

Sachez également que les robots des moteurs de recherche attribuent une grande importance à ces balises, que ce soit pour les moteurs ou pour vos visiteurs, ne les négligez pas.

9. Utilisez la bonne balise HTML, au bon endroit

Apprenez la signification des différentes balises, leur rôle, leur emploi, et utilisez-les correctement.

On utilise par exemple <em> ou <strong>pour insister sur un point, plutôt que les balises <i> ou <b> qui sont désormais obsolètes.

Utilisez la balise <p> pour vos paragraphes. Évitez d’utiliser les <br/> pour sauter des lignes. Préférez plutôt les propriétés CSS margin et padding.

Pour les ensembles d’éléments, utilisez :

• <ul> lorsque l’ordre des items de la liste n’est pas important
• <ol> lorsque l’ordre des items de la liste est important
• <dl> lorsque vous souhaitez mettre un item suivi de sa définition (en utilisant <dt> et <dd>)

Utilisez <blockquote> uniquement pour faire des citations, et non pas pour indenter votre texte.

10. N’utilisez pas des <div> pour tout et n’importe quoi

Souvent les développeurs ont tendance à entourer des <div> par d’autres <div>, contenants elles-mêmes d’autres <div>, ce qui à pour conséquence de créer de véritables montagnes de <div>.

Dans le cadre du dernier projet de spécification HTML (W3C), il s’est dit qu’une <div> doit être utilisée, je cite : « comme un élément de dernier recours, seulement lorsqu’aucun autre élément est susceptible de convenir ».

Autrement dit : n’utilisez pas les <div> juste pour transformer vos éléments inline en élément block : il existe la propriété CSS display: block; pour cela.

11. Utilisez des listes non-ordonnées (ul) pour vos menus

La navigation est un aspect très important dans la conception d’un site web. Et les <ul> combinés au CSS ajoutent une fois de plus de la sémantique à votre page. Car après tout, une menu n’est rien de plus qu’une liste de liens organisée ! Un exemple :

<ul id="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

12. N’oubliez pas de fermer vos balises

La fermeture de toutes les balises HTML est une des spécifications du W3C. Certains navigateurs peuvent afficher vos pages correctement même si vos balises ne sont pas correctement fermées, mais ne pas fermer ses balises ce n’est pas « W3C Valid ».

13. Écrivez vos balises en minuscule

Tout comme fermer ses balises, écrire ses balises en minuscule fait partie des standards. Les écrire en majuscule n’affectera pas le fonctionnement du site, mais il affectera la lisibilité de votre code.

14. Utilisez l’attribut « alt » sur vos images

L’utilisation de l’attribut alt pour vos images <img> fait aussi partie des spécifications W3C. L’utilisation de cet attribut est indispensable pour une bonne sémantique.

Vos attributs alt doivent avoir du sens. Voici ce qu’il ne faut pas faire :

<img id="logo" src="images/logo.gif"/>
<!-- pas d'attribut alt, donc pas valide -->
<img id="logo" src="images/logo.gif" alt="logo.gif" />
<!-- valide, mais l'attribut alt n'a aucun sens... -->

Ce qu’il faut faire :

<img id="logo" src="images/logo.gif" alt="Logo du blog de l'agence web mikii.fr" />

15. Utilisez l’attribut « title » sur vos liens (si nécessaire)

L’utilisation de l’attribut title améliore l’accessibilité (WCAG), à condition qu’il soit utilisé correctement. Il est important de comprendre que l’attribut title doit être utilisé pour ajouter du sens à l’ancre du lien.

Ce qu’il ne faut pas faire :

<a href="http://www.mon-site.com/categories.php" title="Voir tout">
Voir tout</a>

Dans cet exemple, lorsqu’un lecteur d’écran (pour déficient visuel) lit votre balise <a>, l’auditeur entendra successivement deux fois la même information alors que l’attribut title était censé lui fournir un complément d’information sur le lien pointé.

Ce qu’il faut faire :

<a href="http://www.mon-site.com/categories.php" title="La liste des catégories">Voir tout</a>

16. Utilisez des <fieldset> et des <label> dans vos formulaires

Utilisez des <label> pour qualifier vos champs de saisies (<input>) et divisez vos champs de saisie en ensembles logiques, en utilisant <fieldset>. Si vous avez besoin de nommer un <fieldset>, vous pouvez utiliser la balise <legend>.

Exemple :

<fieldset>
    <legend>Informations personnelles</legend>
    <label for="nom">Nom</label><input type="text" id="nom" name="nom" />
    <label for="email">E-mail</label><input type="text" id="email" name="email" />
    <label for="sujet">Sujet</label><input type="text" id="sujet" name="sujet" />
    <label for="message" >Message</label><textarea id="message" name="message" ></textarea>
</fieldset>

17. Utilisez les commentaires conditionnels

Lorsque vous rencontrez un problème d’affichage sur Internet Explorer, vous avez la possibilité d’utiliser les commentaires conditionnels pour régler cela. Ces commentaires permettent de faire en sorte qu’une partie de votre code ne soit interprétée que par Internet Explorer, voire même que par une version particulière de ce navigateur.

Exemple :

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie.css" media="all">
<![endif]-->

Ici, la feuille de style ie.css ne sera chargée uniquement si le navigateur du visiteur est Internet Explorer 7.

Pour plus d’informations sur ces commentaires conditionnels, vous pouvez vous référerez à cet article rédigé chez alsacréations : Les commentaires conditionnels pour Internet Explorer.

18. Utilisez le Validateur W3C

La validation de votre code n’est pas le test ultime qui décidera si votre page est correctement codée ou non. Tout simplement parce qu’une page valide, n’est pas forcément une page bien codée, et inversement. Un site bien conçu ne respecte pas toujours à 100% les normes du W3C, si vous en voulez la preuve, passez au validateur les pages d’accueil de Google et Yahoo par exemple.

Mais la validation de votre page grâce à des services comme le W3C Makup validation) peut vous être utile pour identifier des erreurs d’affichage, par exemple.

Lorsque vous concevez votre site, prenez l’habitude de le passer au validateur assez régulièrement, cela vous évitera de tout déboguer en une seule fois lorsqu’il sera terminé.

19. Mettez votre code en forme

Un code propre et bien indenté montre, en un sens, votre professionnalisme ainsi que votre considération pour les personnes qui pourraient être amenées à modifier votre code.

Écrire un code source propre dès le début augmentera la lisibilité de votre travail et la productivité de ceux qui seront amenés à le relire ou à lui apporter des modifications (c’est à dire surement vous !).

20. Évitez les commentaires trop long

Le but des commentaires est de documenter votre code. C’est une très bonne chose pour les langages évoluées comme PHP, C# ou Java. Mais en HTML, les balises sont déjà très explicites. Commenter chaque ligne de code n’a donc pas beaucoup de sens.

Conclusion

Si vous voulez aller plus loin dans les sujets que nous avons abordés dans cet article je vous conseille ces deux ouvrages disponibles sur internet :

• Maîtrise des CSS de Andy Budd (février 2010) – Un très bon ouvrage avec de nombreux exemples pour connaître le CSS sur le bout des doigts.
• Réussir son site web avec XHTML et CSS de Mathieu Nebra (janvier 2010) – Le livre indispensable, autant pour les débutants que pour les plus confirmés d’entre vous.

Voilà, c’est terminé pour cette liste des 20 pratiques de base en HTML ! Merci pour votre lecture, n’hésitez pas à poser vos questions ou faire vos remarques en commentant cet article, à très bientôt !

Proposée par wordstream.com, cette infographie résume en une image quelques-uns des échecs les plus cuisants de la firme californienne. A noter tout en bas de l’image la prédiction de la mort imminente du réseau social Google Buzz (pourtant relativement récent), êtes-vous de cet avis ?

via

Cette mise à jour mineure de l’OS d’Apple pour l’iPhone n’apporte aucune fonctionnalité en soit, sauf bien sûr la correction de cette faille mémorable de Safari et de sa lecture des PDF qui permettait à JailbreakMe de modifier en toute quiétude les fichiers de votre appareil.

Même si cette update risque de faire le malheur des adeptes du Jailbreak, elle tranquillisera tous les autres utilisateurs qui étaient (et on les comprend…) inquiets de connaître l’existence ce cette faille qui rendait leur téléphone plus que vulnérable.

Nul doute que certains acharnés se sont déjà mis en tête d’assaillir ce nouvel iOS. Alors, il ne me reste plus qu’à vous dire à bientôt pour de nouvelles aventures…

Le fonctionnement de Spotify est similaire à celui de Deezer à la différence que Spotify nécessite l’installation d’une application sur votre ordinateur.

Aujourd’hui Spotify étend encore un peu son offre, en proposant depuis peu une extension pour Chrome, le célèbre navigateur de Google. Grâce à cette extension vous pourrez écouter un titre, un album, ou un artiste que vous croiserez sur le web simplement en sélectionnant un contenu dans la page.

Exemple :

Vous vous baladez sur le blog de l’agence web mikii.fr (sous Google Chrome bien sûr..). Au milieu d’une page fort intéressante sur une nouvelle extension Chrome, vous tombez sur un nom d’artiste : « Michael Jackson ». Il vous suffit alors de sélectionner le nom de l’artiste et de cliquez sur l’icône de l’extension Spotify pour avoir directement accès aux titres les plus populaires de l’artiste. Essayez par vous-même ! Vous verrez c’est très simple.

Télécharger l’extension Spotify | Télécharger Spotify | Télécharger Google Chrome

On peut y découvrir tous les services qui composent le géant du microblogging désormais mondialement connu. Ils ont l’air de bien s’amuser les petits gars…

Certains vont sûrement juger la plaisanterie de mauvais goût, quoi qu’il en soit, ici nous avons bien ri ! Prenez ça au second degrés…

Cliquez sur l’image pour l’agrandir (via)

Un exploit réalisé par le Dev-Team, qui ne s’arrête pas là puisqu’elle propose depuis hier son nouvel outil de déblocage (ou désimlockage) d’iPhone.

Grâce à UltraSn0w vous allez maintenant pouvoir  désimlocker votre iPhone, la grande nouveauté que tout le monde attendait est bien évidement la prise en charge de toutes les versions de l’iOS (y compris le dernier iOS 4).

Comment débloquer votre iPhone OS 4 ?

Rien de plus simple, je vous propose de découvrir la méthode à travers ce tutoriel en vidéo proposé par le site Mac Hack PC.

Via

Pour ceux qui ne sauraient pas encore à quoi sert le jailbreak, pour faire simple cela équivaut au « déblocage » de l’appareil, permettant d’accéder à des portails autres que l’App Store autorisant le téléchargement d’applications non-validées par Apple et l’installation gratuite d’applications normalement payantes sur le store officiel.

La Dev-Team réussie là un coup de maître puisque cette nouvelle méthode, comparée à toutes les précédentes méthodes de jailbreak, se résume à un vrai jeu d’enfant. Terminée l’époque où vous deviez brancher votre appareil en USB, télécharger la bonne version d’iTunes, downgrader, passer en mode DFU, etc… Dorénavant vous n’aurez plus qu’une chose à faire, vous connecter au site de jailbreak en tapant l’URL dans Safari à partir de votre appareil, et… c’est tout !

La marche à suivre : Comment jailbreaker son iPhone OS 4 ?

Note : Sachez que le jailbreak fonctionne actuellement sur les terminaux disposant des mises à jour iOS 4.0.1 et inférieures. JailbreakMe 2.0 est une méthode de jailbreak extrêmement simple :

• Connectez-vous à l’adresse http://www.jailbreakme.com via votre appareil.
• La page d’accueil JailbreakMe apparaît.
• Lancez la procédure de jailbreak par le slide « Slide to jailbreak ».
• Le téléchargement commence.
• Après quelques secondes, le téléchargement s’achève et vous pouvez quitter Safari.
• Cydia est maintenant installé sur votre terminal.

Nous concernant, nous avons rencontré un léger problème (sur deux iPhone 3GS sous iPhone 4.0.1). Une fois le jailbreak lancé, nous restions bloqués et plus rien ne se passait. Il est inutile de rester des heures sur cette page, voici la méthode à suivre pour résoudre le problème :

Les problèmes connus

Pour ceux qui resteraient bloqués après avoir activer le slide. Voici la marche à suivre, qui a fonctionné chez nous :

• Fermez complétement Safari (appuyez deux fois sur le bouton ‘Home’)
• Dans Réglages -> Safari videz votre cache et effacez vos cookies.
• Relancez Safari.
• Tapez l’URL suivante : http://jailbreakme.modmyi.com/
• Lancez le jailbreak.

Disponible à un prix de 499€ sans forfait, ce n’est pas sans nous rappeler le prix d’un certain iPad. Il faut dire qu’à part les tablettes Archos, il n’y a pas vraiment foule pour tenter de concurrencer le dernier joujou de Steve Jobs.

Dell profite donc de cette opportunité pour essayer de s’encrer dans le secteur des hybrides smartphone/tablette, en sortant sa mini-tablette Dell Streak disposant d’une connectivité 3G + Wifi + Bluetooth 2.1.

Mini-tablette pourquoi ? Tout simplement parce que la taille de l’écran est de seulement de 5 » (800 x 480 pixels) ! Une petite taille qui ne lui empêche pas pour autant d’embarquer un processeur Qualcomm SnapDragon 1 GHz, un APN 5 megapixels et un espace de stockage interne de 2 Go, extensible par un port microSDHC. Le tout tournant sous Android 1.6 ( Android 2.2 ready) avec une compatibilité Flash 10.1.

La Streak embarque aussi les applications mobiles Google et dispose d’un accès au portail Android Market (avec plus 65 000 applications).

Disponible dès aujourd’hui en France, vous pourrez uniquement vous la procurer chez The Phone House à partir de 99 € avec un abonnement Orange, SFR ou Bouygues Telecom, ou 499 € nue.

Sans plus attendre je vous propose de découvrir une petite vidéo pour voir la bête en action :

Nous verrons bien ces prochaines semaines si la Dell Streak aura séduit ou non le public français, qu’en pensez-vous ?

Le moins que l’on puisse dire est que cette galerie d’extensions s’est beaucoup fait attendre. Cette fonctionnalité étant présente depuis maintenant plusieurs années sur Firefox, et de manière native sur Chrome, il était vraiment temps que Safari se mette à niveau.

Pour l’instant une centaine d’extensions sont disponibles sur la galerie, réparties dans 16 catégories (Actualités, Réseau sociaux, Shopping, …). On peut d’ores et déjà y trouver des extensions telles que Twitter, Ebay, ou Bing.

Pour pouvoir les installer, il vous faudra d’abord mettre à jour votre Safari vers la version 5.0.1.

Pour parler un peu technique : Les extensions sont codées en HTML5, CSS3, et Javascript. Chacune d’entre elles dispose d’un certificat numérique qui permettra de vérifier leur authenticité, notamment lors des mises à jour. A priori il devrait y avoir deux façons d’obtenir des extensions Safari : la galerie disponible sur le site d’Apple, et directement via le site des développeurs.

C’est parti ! Sachez tout d’abord qu’un des aspects les plus fondamentaux de la création d’un site web est l’étape de planification. Elle inclut par exemples des choses comme la recherche d’un nom de domaine, d’un hébergeur, d’inspiration pour votre design, la construction de l’architecture du site, etc…

Noms de domaine

1. Beaucoup de gens sont habitués à voir les www en début d’URL (www.mikii.fr, par exemple). Assurer-vous que l’accès à votre site fonctionne avec et sans ces www.

2. La réservation d’un sous-domaine en m (exemple : m.google.com) destiné aux appareils mobiles est devenue une convention. C’est moins cher et maintenant plus répandu que le .mobi.

3. La majorité des internautes ont tendance à ne reconnaître que le .com, .net et .org. Prenez le temps de vérifier que ces extensions soient disponibles avant de lancer votre site.

4. Évitez d’utiliser des tirets dans votre nom de domaine.

5. Les domain hacks comme del.icio.us sont devenus très populaires, et même s’ils peuvent parfois être difficiles à épeler, ils peuvent vous donner des alternatives à une géniale mais indisponible adresse en .com.

6. Si vous souhaitez cibler un public local, n’hésitez pas à réserver un nom de domaine avec extension de pays (ccTLD) comme le .fr par exemple.

7. N’oubliez pas que certains domaines ccTLD exigent que vous soyez résident du pays donné.

8. Si vous permettez à votre registraire de mettre ses coordonnées à la place des votres dans le WHOIS. Vous courez le risque de perdre votre domaine si un conflit se produit.

9. Les sites de ventes aux enchères de noms de domaine comme Sedo peuvent être des endroits idéaux pour trouver un domaine déjà réservé.

Hébergement

10. Lorsque vous recherchez un hébergeur, regardez en détail l’étendue des prestations en fonction du prix. L’espace disque, la bande passante, et tous les autres éléments spécifiés avant de vous décider.

11. Méfiez-vous des hébergeurs proclamant une bande passante illimitée à un prix défiant toute concurrence. Lisez les petites lignes !

12. Si vous lancez un site web ou un service à votre compte, il vaut mieux commencer avec un serveur mutualisé plutôt qu’un VPS ou un dédié, vous ne saurez pas combien de visiteurs vous aurez au début…

13. Héberger votre site chez un hébergeur gratuit n’est (vraiment) pas une bonne idée.

Plate-forme de développement

14. Si vous voulez avoir un bon environnement de test PHP et MySQL sur votre propre ordinateur, installez WAMP (PC) ou MAMP (Mac). C’est rapide, facile, et cela vous aidera à faire vos tests avant de mettre en ligne.

15. Sauf si vous savez vraiment ce que vous faites et que vous avez assez d’argent pour financer l’infrastructure, héberger votre site par vos propres moyens n’est pas du tout un bon plan (aussi amusant que cela puisse paraître).

16. Choisissez bien votre plate-forme de développement, préférez des éditeurs classiques plutôt que des WYSIWYG (ex : Dreamweaver) qui mal utilisés ne feront que vous pondre un code dégueulasse, il faut le dire. (Ici à l’agence nous utilisons NetBeans sur PC et Espresso sur Mac)

Outils

17. Vous n’avez pas forcement besoin de vous appuyer sur Adobe ou Microsoft pour créer un bon site. Il y a beaucoup de produits libres qui peuvent servir d’alternatives.

18. Par exemple : GIMP, Inkscape, Dia, FileZilla, IcoFX, Audacity, Paint.NET, Scribus, Eclipse, Skype, KeePass, Foxit Reader et Notepad++ sont de bons produits gratuits pour les concepteurs de site internet.

19. Confectionnez-vous une sélection de listes (comme celle-ci !) sur les techniques de création de site, astuces et autres conseils, cela peut présenter un réel plus pour un jeune concepteur.

Gestion de projet

20. Créez-vous un environnement de travail décent. Moins vous aurez de distractions, plus vous serez productif.

21. Essayez de toujours avoir des attentes réalistes quant à la durée de réalisation d’un projet. Bâcler son travail pour en limiter le coût en temps n’est pas une bonne solution.

22. Installez un logiciel de suivi de projet. Il est beaucoup trop facile d’être distrait et perdre de vue la situation du projet dans son ensemble, surtout si vous avez beaucoup de petites tâches à réaliser.

23. Les To-Do Lists peuvent sembler banales et sans intérêt, mais elles sont en réalité très utiles pour vous fixer des échéances et pour vous aider dans la structuration de l’ensemble de vos tâches.

Apprentissage

24. Ne cessez jamais d’apprendre, il n’y a aucune excuse à se laisser devenir obsolète. Vous pouvez rester à jour grâce aux blogs par exemple ou même en apprenant doucement des nouveaux langages de programmation web.

25. Il existe de nombreux livres sur la conception de sites web sur le marché. Certains n’ont rien à envier aux formations spécialisées.

26. Certains blogs sur Internet sont des ressources idéales pour l’apprentissage de nouvelles techniques. Peut-être pas aussi approfondies que les livres, mais quotidiennement cela peut être intéressant !

27. Cela dit, n’oubliez pas de vérifier la véracité de ce que vous lisez, sur les blogs notamment. Il y a énormément d’informations obsolètes susceptibles de vous faire adopter de mauvaises habitudes.

28. Énormément de sites commencent à proposer des formations en vidéo sur le développement web (un exemple avec l’excellent tuto.com). Cela a parfois un coût, mais ça en vaut souvent la peine.

Spécialisation et analyse de la concurrence

29. Il existe de nombreux secteurs où vous pouvez travailler en tant que professionnel du web (web designer, UX, UI, front-end developer, etc…).

30. Que vous décidiez de devenir multi-casquettes ou spécialiste dans un domaine, sachez qu’il y a suffisamment de boulot actuellement pour répondre à ces deux styles de travail.

31. Enquêtez sur ce que font vos concurrents, vous pouvez apprendre beaucoup de leurs erreurs et de leurs succès.

En savoir plus sur votre public ciblé

32. La recherche est la mère commune à toute invention. Avant de vous lancer tête baissée dans votre projet, assurez-vous que ce que vous vous apprêtez à faire va répondre à la demande du public que vous ciblez.

33. Essayez toujours d’être inventif lorsque vous créez. Il est inutile de cloner un autre site à succès alors que vous pourriez l’améliorer pour ainsi convertir une partie de leurs utilisateurs existants.

34. Si vous prévoyez de produire un blog ou un site web informatif, veillez à bien connaître votre sujet. Essayer de créer un blog médical, sans aucune connaissance en médecine serait absurde. Vous vous devez d’être passionné et incollable sur votre sujet.

35. Cherchez des personnes qui pourraient vouloir utiliser votre service et demandez-leur ce qu’ils aimeraient voir dans un tel site et quels sont les sujets qui seraient dignes d’y figurer.

Inspiration

36. Si vous êtes en panne d’idées concernant le type de site à créer, naviguez sur le web à la recherche de sujets. Vous pouvez par exemple choisir un marché de niche où il y a une vraie demande existante.

37. L’inspiration peut provenir de sources très improbables. Regardez un film, faites une promenade, ou même parlez à vos amis, cela peut vous aider à trouver des idées.

Traitement des données

38. Vous devez savoir si vous aurez besoin d’un certificat SSL. Cela dépend de si vous allez traiter ou non des informations sensibles (tels que des numéros de cartes de crédit, par exemple)

39. Le stockage des données client est un point critique. Ne gardez jamais des mots de passe en clair dans des fichiers, utilisez des méthodes de cryptage et stockez-les dans votre base de données.

Conceptualisation et Architecture de l’information

40. Créez un plan de site avant de commencer la construction, cela ne peut que vous être utile.

41. Certains types de site internet se doivent d’inclure certaines fonctionnalités. Par exemple la plupart des sites type portfolio ont une page de contact. Cherchez d’autres sites du même thème que le votre pour obtenir des idées.

42. En cas de doute, choisissez toujours la méthode qui est censée fonctionner et qui respecte les normes. Il y a une raison pour laquelle certains types de sites réussissent. C’est parce que leurs créateurs ont toujours suivi les pratiques conventionnelles auxquelles les visiteurs peuvent s’adapter rapidement.

43. Les schémas sont utiles pour développer vos idées. Parfois, un morceau de papier ou un post-it avec quelques griffonnages peuvent vous aider à transformer votre idée en quelque chose de vraiment concret.

44. Le web wireframing est une méthode efficace mais malgré cela peu utilisée. Vous pouvez très bien vous en servir pour définir la structure de votre site.

45. Au-delà du wireframing, vous pourriez aussi envisager de créer un prototype, c’est-à-dire créer rapidement une maquette simple de votre site internet pour en éliminer les défauts potentiels.

46. Le brainstorming est une autre méthode géniale pour faire germer vos idées.

47. Certains créateurs de site créent un business-plan pour prévoir l’évolution de leur projet. Il pourrait s’avérer être un document utile à réaliser .

48. Déterminez la façon dont vous utilisez les sites internet. C’est très subjectif, mais cela vous aidera peut-être à vous mettre à la place de vos futurs prospects, et ainsi de créer un produit qui répond à de réelles attentes.

Divers

49. Des produits tels que EverNote ou Microsoft OneNote peuvent vous offrir une excellente plate-forme pour rassembler et stocker vos idées. Voyez-les comme des cahiers de brouillon, que vous pouvez feuilleter pour obtenir de l’inspiration.

50.N’abandonnez jamais. C’est trop facile de penser que son idée est tombée à l’eau, trop de gens ont tendance à baisser les bras beaucoup trop vite. La plupart des idées peuvent arriver à maturation grâce à une bonne dose de travail.

Tout le monde vous le dira, et nous les premiers : « Le contenu est roi ». A croire qu’il faudrait presque entendre cela comme parole d’évangile… Et bien, c’est un peu le cas !

Que votre contenu soit fourni sous forme de texte, d’image, de son ou vidéo, il est primordial de délivrer régulièrement du contenu frais et inédit à vos visiteurs, cela vous aidera à les fidéliser, et qui sait, peut-être à les transformer en clients.

51. Le contenu ne s’arrête pas au simple texte. Mettez à disposition de vos visiteurs des sondages, des infographies, ou des éléments interactifs…

52. Les gens réagirons et participerons plus facilement à la vie de votre site si vous produisez du contenu de qualité.

Droit d’auteur, licences et loi en générale

53. Si vous avez l’intention de construire des sites internet pour des clients, assurez-vous d’avoir un contrat-type solide avant de travailler. Ne vous faîtes pas prendre au dépourvu si jamais le client refuse de répondre à l’une de ses obligations.

54. Créez des documents types : tels que les factures, contrats, reçus, questionnaires préliminaires (pour établir les besoins du clients), etc… Une fois créés, ces documents vous permettrons de réduire considérablement votre charge de travail.

55. Le bouche à oreille constitue un contrat exécutoire. Évitez de crier sur les toits que vous savez faire quelque chose alors que ce n’est pas le cas.

56. Tous vos services doivent avoir de bonnes conditions d’utilisation, une politique de confidentialité et des droits d’auteur. Il est important que vos utilisateurs finaux sachent ce que vous attendez d’eux (et inversement).

57. Vous n’avez pas besoin d’avoir une déclaration de droits d’auteur sur votre site. L’ignorance de la propriété intellectuelle n’est pas considérée comme une excuse valable.

58. Au moment de décider quelle licence adopter, vous pouvez jeter un œil du côté des Creative Commons, elles sont pré-écrites et assez flexible.

59. Un moyen peu coûteux de rédiger vos contrats pour vos sites web est de s’inspirer des autres. Vous pouvez vous épargner beaucoup d’argent en frais juridiques éventuels.

60. Évitez le plus possible d’utiliser le jargon juridique. Vos clients seront plus enclins à lire ce que vous dites si ils peuvent le comprendre.

61. Si vous écrivez vos propres contrats, il peut être bon de les faire relire par un avocat, la vérification est souvent moins chère que de les faire écrire sur-mesure.

62. La déclaration d’accessibilité n’est pas obligatoire.

Formats de contenu

63. Que ce soit en utilisant la compression gzip pour votre contenu, la mise en cache des fichiers externes ou la suppression du surplus d’octets des images et autres médias : Pensez à améliorer au mieux la vitesse de chargement de votre site. (pour optimiser le chargement des scripts JS : voir notre article « JavaScript : Comment optimiser le temps de chargement de vos pages« )

64. Trouvez le format d’image qui s’adapte le mieux à ce que vous voulez faire. Le GIF pour les animations de base, PNG pour la transparence, et son ami JPEG pour les photos, par exemple.

65. Faîtes attention lorsque vous utilisez des images pour illustrer vos propos, l’image ne doit en aucun cas remplacer le texte ! Gardez à l’esprit que les internautes ne peuvent pas tous voir les images (et les moteurs de recherche non plus).

66. Lorsque vous ajoutez de la vidéo, du son, ou autre, assurez-vous qu’un contenu alternatif soit disponible pour ceux qui ne peuvent pas profiter de ces médias en raison de problèmes d’accessibilité.

Images

67. La transparence est un sujet tabou pour Internet Explorer, notamment pour IE6. Mais sachez qu’il existe des solutions, comme des fix en JavaScript par exemple.

68. Votre logo est l’un des éléments les plus importants de votre site, c’est grâce à lui que les gens vous reconnaitront. Par conséquent, il vaut mieux en avoir un qui marque.

69. Alors que le favicon est l’un des plus petits éléments graphique que vous êtes susceptible de rencontrer sur un site internet, il offre un très bon moyen de se faire reconnaître dans les signets, favoris…

70. Construire une icône pour les iPhone, iPad et iPod Touch, ça ne prend pas longtemps et c’est utile !

71. Beaucoup de sites offrent des images gratuites et libres de droit (Flickr, Stockvault, deviantART, stock.xchng…), n’hésitez pas à les utiliser.

Rédaction de contenu

72. Même si vous n’êtes pas un fin écrivain, essayez de faire en sorte qu’une bonne orthographe reste l’une de vos priorités.

73. Si vous êtes à court d’idée, faîtes une pause ou utilisez l’une des nombreuses techniques pour vous aider à éliminer votre angoisse de la page blanche.

74. Relisez vous un minimum pour éviter les coquilles.

75. Rédigez votre contenu avant de commencer la conception de votre site, cela peut vous aider à mieux aborder la phase de design / codage.

76. Encore une fois, le contenu est roi. Ne sacrifiez pas la qualité du contenu pour celle de l’aspect de votre site, par exemple. Sinon vos visiteurs risqueraient de trouver votre site agréable à l’œil mais ne plus jamais y remettre les pieds.

77. La facilité à écrire du contenu de qualité sur le web s’acquiert avec la pratique. N’ayez pas peur de commencer petit, comme sur Twitter, ou même sur les forums. Ne soyez pas pressé de construire votre crédibilité en tant que rédacteur de contenu web.

78. S’investir et rendre son contenu amusant est la clé du succès. N’hésitez pas à être original… Et drôle !

79. N’ayez pas peur de demander de l’aide ou des avis. Bien souvent, un peu de critique vous aidera à devenir meilleur.

80. Lorsque vous faîtes un lien vers un site, assurez-vous d’informer le visiteur sur la nature de ce lien, et ce qu’il va pouvoir y trouver. Afin qu’il ne se retrouve jamais, par votre faute, dans un endroit non désiré.

81. Organisez votre contenu simplement. En utilisant les listes, par exemple, cela peut contribuer à accroître la lisibilité de votre contenu.

82. Évitez de vous étaler et de risquer de perdre vos lecteurs. Allez toujours à l’essentiel et évitez le langage technique redondant. Personne n’aime ça, n’est-ce-pas ?

83. Assurez-vous que ce que vous dites soit exacte. Citer des références donnera de la crédibilité à vos dires.

84. Ne plagiez ou ne volez pas le contenu d’autres personnes.

85. Lorsque vous écrivez votre contenu, sachez que la simplicité est valorisante. Essayez de trouver votre équilibre, ni trop simple, ni trop complexe.

86. Ne faîtes pas des phrases trop longues et évitez les gros pâtés qui risqueraient d’effrayer vos visiteurs.

87. Si vous créez un blog, veillez à prévenir vos lecteurs lorsque vous donnez votre avis sur quelque chose (un produit, par exemple) et que vous avez été payé pour le faire.

88. L’utilisation de CMS (comme WordPress) peut être idéale pour enlever une certaine complexité et accélérer la production de votre contenu.

89. La cohérence est importante, dans tout ce que vous écrivez. Le maintien d’un ensemble de normes et de valeurs permettra d’assurer votre régularité.

90. Essayez toujours de faire passer l’information sur un ton amical et non-agressif. Être trop sarcastique ou grossier peut conduire à dégrader la réelle valeur de votre contenu.

91. Si il y en a, répondez aux commentaires et avis de vos lecteurs.

92. Écrivez votre contenu pour vos lecteurs, pas pour les moteurs de recherche. Vos visiteurs sont plus importants que votre PageRank Google.

93. Si vous prévoyez de produire du contenu traduit pour les utilisateurs internationaux, rien ne vaut un vrai traducteur. Je veux dire par là : un humain.

Contenu multimédia

94. Si vous créez un podcast pour votre site web, un bon rapport de compression est le MP3 96kbits/sec (pour les enregistrements vocaux). Évitez les gros fichiers, ça fera du bien à votre bande passante !

95. Le MP3 est sans nul doute le format le plus répandu et reconnu sur internet. Si vous fournissez d’autres formats comme le FLAC ou l’OGG, assurez-vous de proposer également une version MP3 pour les lecteurs audio plus restrictifs.

96. L’intégration de players  comme Windows Media Player ou Apple QuickTime dans une page peut conduire à des problèmes si les gens n’ont pas installé les lecteurs. Préférez plutôt le Flash, qui a un taux de pénétration beaucoup plus élevé.

97. Pas-De-Lecture-Automatique ! Que ce soit pour un son, une musique, une vidéo… C’est une mauvaise idée, c’est mal, nul, à proscrire. Bref, ne le faîtes pas !

98. Rappelez-vous que les composants Flash-dépendants ne sont pas fiables : Les personnes disposant de trouble de la vision ou autres déficiences sont très limitées quant à l’accès aux contenus basés sur Flash.

99. Si vous prévoyez de fournir du contenu par e-mail, veillez à ce que les adresses e-mail de vos abonnés restent privées ! (N’utilisez pas la fonction CC lors de l’envoi en masse).

100. N’envoyez pas de spam ou d’e-mails lourds. Les gens détestent ça, vous détestez ça, tout le monde déteste ça !

Retrouvez la seconde partie de l’article ici !

Avec quelques outils gratuits vous allez voir qu’en revoyant un peu votre façon d’inclure votre code JavaScript, vous chargerez vos pages 2 à 3 fois plus vite.

Script de chargement asynchrone

Une chose à savoir est que les balises <script> sont bloquantes. En effet, lorsque les navigateurs téléchargent et exécutent un script JS, plus rien ne se passe. Pas de téléchargement d’image, ni de CSS, le chargement est bloqué ! Alors imaginez simplement que vous ayez 10 scripts à charger dans votre <head>, soit l’équivalent d’environ 300ko. Il y a fort à parier que le temps de charger ces 10 scripts et de les exécuter, votre page aurait eut le temps de s’afficher : HTML et CSS compris.

La première chose très facile à réaliser est de charger vos scripts juste avant la fin du <body>.

<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/formvalidator/jquery.validationEngine.js"></script>
</body>
</html>

De cette façon, dans la plupart des cas HTML et CSS seront chargés avant le JavaScript. De plus, avec cette méthode, la déclaration d’un « DOM jQuery ready » devient obsolète puisque votre HTML est déja ready lorsque le JavaScript entre en action.

Franchir une nouvelle étape avec labJS

Avec labJS vous pouvez charger vos fichiers JavaScript de manière totalement asynchrone. La différence avec l’exemple précédent est que même si vous avez pris le soin de mettre vos scripts en fin de page (juste avant le </body>) ils seront tout de même téléchargés un à un.

Avec cet outil, vous pouvez charger vos scripts simultanément et spécifier un ordre d’exécution. Après quelques tests (faits avec dynaTrace), il en est ressorti que le JavaScript se chargeait 3 fois plus rapidement en utilisant labJS et que la page s’affichait 15% plus vite (sous IE8, avec 15 fichiers JS dans la page).

Un exemple :

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.script("/modules/comment/front/js/comment.js")
.script("/modules/core/commun/js/common.js")
.script("/modules/core/front/js/custom.js")
</script>

</body>
</html>

Toutefois, il faut souligner que ce gain de vitesse est accompagné d’une légère complexification du code. Comme nous l’avons vu plus tôt les scripts sont chargés de manière asynchrone. Par conséquent certains d’entre eux seront exécutés avant d’autres; ce qui peu être mauvais lorsque vous utilisez des bibliothèques comme jQuery qui nécessitent d’être chargés avant le reste.

Deux choix s’offrent à vous : utiliser Wait() à la fin de chaque scripts qui nécessiteraient de préserver l’ordre de chargement, ou utiliser SetOptions ((AlwaysPreserveOrder:true)) qui préservera toujours votre ordre de chargement pour un coût en performance légèrement supérieur.

Voici quelques exemples d’utilisations :

Avec .Wait() :

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.script("js/jquery/jquery-1.4.2.min.js").wait()
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js").wait()
.script("js/jquery/common.js")
</script>
</body>
</html>

Avec AlwaysPreserveOrder :

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.setOptions({AlwaysPreserveOrder:true})
.script("js/jquery/jquery-1.4.2.min.js")
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js")
.script("js/jquery/common.js")
</script>

</body>
</html>

La véritable solution labJS

Pour l’ordre d’exécution nous sommes bons, mais qu’en est il de nos scripts inline ? Il faut savoir que ces bouts de script seront probablement exécutés avant même que vos fichiers JS soient téléchargés ! La solution à ce nouveau problème est efficace mais pour le coup un peu plus « compliquée » à mettre en place.

Nous allons créer une variable globale qui contiendra tous nos scripts inline. Pour ça, la première chose à faire est d’ajouter une variable dans votre <head>.

<script> var _loadingQueue = []; // declare notre tableau</script>
</head>

Maintenant, dans n’importe quelle partie de votre page, vous pouvez ajouter un bloc de script inline, de cette façon :

<script src='/js/LAB.min.js'></script>
<script>
 _loadingQueue.push(function(){
 $("body").html("this is loaded from an inline script block")
 });
</script>

Comme vous pouvez le voir j’utilise jQuery : loadingQueue.push(), qui va ajouter cette fonction anonyme à notre file d’attente de chargement. Vous pouvez en ajouter autant que bon vous semble.

Pour utiliser loadingQueue.push() dans notre séquence de chargement labJS, nous devons bricoler un peu :

<html>
<head>
<script> var _loadingQueue = []; // declare notre tableau</script>
</head>
<body>
<randomHtmlTags...............>
<script>
 _loadingQueue.push(function(){
 $("body").html("this is loaded from an inline script block")
 });
</script>
<randomHtmlTags...............>

<script src='/js/LAB.min.js'></script>
<script>
var $LoadDefer = $LAB
.setOptions({AlwaysPreserveOrder:true})
.script("js/jquery/jquery-1.4.2.min.js")
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js")
.script("js/jquery/common.js");
.wait(function(){
      framework.doSomething();
   });

if( typeof( window[ '_loadingQueue' ]) != "undefined"){
 for(var i=0,len=_loadingQueue.length; i<len; i++){
  $LoadDefer = $LoadDefer.wait(_loadingQueue[i]);
 }
}
</script>
</body>
</html>

Comme vous pouvez le voir, j’ai dû ajouter une belle boucle. Si la variable _loadingQueue existe, je reçois la longueur de _loadingQueue et quand tous les scripts sont chargés et exécutés ($LoadDefer.wait), j’exécute toutes mes fonctions stockées. Pas mal non ?

Voila donc la solution complète pour charger vos scripts de façon asynchrone. Cela devrait couvrir 99% de vos besoins.

Fusionnez et minifiez vos scripts

Lorsque vous développez en local vous ne vous en rendez pas compte, mais les requêtes que fait votre navigateur pour obtenir les fichiers connexes à votre page web, prennent du temps ! Imaginez que vous ayez 10 fichiers JS dans votre page. Si votre navigateur prend 100ms pour charger chaque fichier, vous perdez déjà 1 seconde. Il reste encore à télécharger vos images, vos CSS…

Utilisez Minify

Minify est une bibliothèque PHP qui vous permet de fusionner vos fichiers CSS et JS à la volée et les mettre en cache sur votre serveur. Avec cette bibliothèque vous pourrez récupérer cette précieuse seconde que vous avez perdu.

Minify est très simple à installer. Il suffit de le télécharger, et de le mettre à la racine de votre site. A partir de là, vous pourrez accéder simplement aux fichiers « Minifiés » comme ceci : http://www.exemple.com/min/?f=jquery/jquery-1.4.2.min.js,js/jquery/jquery-sortable-1.7.1.custom.min.js.

Peut-être vous sentirez vous un peu perdu face à la configuration de Minify. En réalité il n’y a que deux variables vraiment importantes : $min_cachPath et $min_documentRoot.

Son intégration avec labjs

Une fois que Minify fonctionne correctement :

<script src='/js/LAB.min.js'></script>
<script>
var $LoadDefer = $LAB
.setOptions({AlwaysPreserveOrder:true})
.script("/min/?f=js/jquery/jquery-1.4.2.min.js,js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/common.js");

if(_loadingQueue){ for(var i=0,len=_loadingQueue.length; i<len; i++){  $LoadDefer = $LoadDefer.wait(_queue[i]) ;}}
</script>

Petite mise en garde si vous utilisez Minify pour fusionner vos fichiers CSS ! Ce dernier peut corrompre les chemins de vos images. Si vous utilisez toujours des chemins absolus dans vos CSS, vous n’aurez pas de problème. Cependant n’oubliez pas que la plupart de vos plugins jQuery utilisent des chemins relatifs dans leur CSS !

Conclusion

Optimiser son code n’est pas toujours simple. L’optimisation ajoute une petite couche de complexité à votre application. Mais le gain en performance apporté par ces solutions justifie largement de perdre quelques minutes à complexifier un peu son code.

Si vous êtes intéressé par l’optimisation de votre JS, je vous recommande de jeter un œil à l’API de labJS et Minify. Vous y trouverez toutes les options, et des instructions plus détaillées.

Il existe d’autres technologies qu’il convient de mentionner, à savoir YUI Compressor qui peut remplacer la bibliothèque Minify, et requireJS qui peut remplacer labJS. L’approche de requireJS est différente de celle de labJS, au lieu de se concentrer sur le chargement asynchrone des fichiers, requireJS se centralise plutôt sur le chargement des fichiers qui sont réellement utilisés par votre page.

Petit rappel pour ceux qui arrivent en route ou qui n’auraient pas lu la première partie de l’article. Sachez qu’il est préférable de penser SEO dans le cadre de votre marketing global. Parfois, il sera plus judicieux de faire quelque chose qui ne contribue pas à améliorer votre référencement, peut-être même à le détériorer, si cela permet d’améliorer votre marketing global. Et n’oubliez pas, vous ne voulez et ne devez pas vous perdre avec des détails.

Gardez également à l’esprit que votre recherche de mots-clés est une étape très importante. Votre choix de mots-clés doit être axée sur ce qui peut apporter le plus à votre entreprise. Ainsi vous vous devez de cibler des mots-clés qui vous apporteront des prospects, plutôt que des mots-clés à fort trafic mais peu qualifiés. C’est la base !

En gardant à l’esprit tout cela, examinons maintenant quelques-unes des choses que vous pouvez et devez faire lors de l’élaboration de votre site Internet. Commençons par faire en sorte que moteurs de recherche puissent trouver vos pages.

Le Développement Web « façon SEO »

Le contenu dupliqué (ou « duplicate content »)

Les moteurs de recherche ne veulent pas que des sites proposant le même contenu jonchent leurs pages de résultats. Cela n’a aucun intérêt pour eux de présenter exactement la même page plusieurs fois pour la même requête. Malheureusement, la plupart des systèmes de gestion de contenu (CMS) créent  plusieurs URL pour accéder à un même contenu. Catégories, tags, résultats de recherche, tout ça vous mène vers le même contenu via différentes URL.

Vous pouvez empêcher l’indexation de ces URL dans votre fichier robots.txt, par l’utilisation de la balise META robots ou bien en mettant en place une redirection permanente (301) des URL dupliquées vers l’URL principale de votre choix. Si vous laissez les moteurs de recherche décider des URL à indexer, vous prenez le risque que vos pages indexées ne soient pas celles que vous souhaitiez. L’attribut canonique sur les liens représente aussi une option pour aider les moteurs de recherche à déterminer quelles URL vous souhaitez indexer.

Vous devez également vous assurer que chaque page de votre site a un contenu unique. Prenons l’exemple de certains sites e-commerce mal conçus, un produit peut être représenté dans plusieurs couleurs et chaque couleur constitue une page. Le contenu de ces pages sera probablement identique à l’exception de la couleur qui va varier. Les moteurs de recherche ne vont en aucun cas classer l’ensemble de ces pages, au contraire ils vont en choisir une. Il serait donc plus intelligent d’avoir une seule page pour ce produit et de permettre le choix de la couleur sur la page. Et s’il est absolument nécessaire que chaque couleur ait sa propre page, vous devrez réécrire une partie du contenu de chaque page pour en augmenter le pourcentage d’unicité.

URL canonique & Contenu dupliqué

Les URL canoniques (différent de l’attribut canonique mentionné plus haut, mais reprenant le même concept de base) sont une façon élégante de dire plusieurs URL peuvent conduire à la même page. L’URL canonique est l’adresse officielle d’une page web, celle que les moteurs doivent utiliser. Votre page d’accueil pourrait être accessible via :

• votre-site.com
• www.votre-site.com
• votre-site.com/index.html
• www.votre-site.com/index.html

Ces 4 pages sont différentes aux yeux des moteurs de recherche et encore une fois : une seule sera indexée ! Mais ce n’est pas tout, prenez par exemple deux sites partenaires du votre qui créent chacun un lien pointant vers votre site. L’un vers votre-site.com et l’autre vers www.votre-site.com. Nous pourrions penser que cela signifie que votre page d’accueil dispose maintenant de 2 liens pointant vers elle. Faux. Du point de vue d’un moteur de recherche cela constitue 2 liens pointant chacun vers 2 pages différentes. Dommage, vous avez réduit de moitié le profit que pouvait vous apporter ces liens.

Rassurez-vous, vous pouvez pallier à ce problème. Si votre serveur exécute Apache avec mod_rewrite activé (c’est très probable), vous pouvez ajouter ce qui suit à votre fichier .htaccess pour corriger le problème canonique entre www et les versions non-www de votre domaine. Si ce n’est pas le cas, ne vous inquiétez pas. Il existe plusieurs façons de réécrire vos URL. Un point important est que la réécriture doit être une redirection permanente (301).

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain.com
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]

Réécriture des URL

Laquelle des adresses suivantes vous en dit le plus sur le contenu que vous trouverez sur la page ?

• www.votre-site.com?id=3648373729&cat=12&type=90
• www.votre-site.com/sports/football/resultats.php

Le premier ne vous dit absolument rien sur le contenu de la page, le second quant à lui vous informe globalement sur le contenu que vous pourrez trouver sur la page, ici, les résultats footballistiques. C’est bien plus pratique pour de vraies personnes ainsi que pour les moteurs de recherche ! Cela permet d’aider les gens et les moteurs à identifier le sujet traité par votre page, n’hésitez pas à utiliser des mots-clés !

Comme vous pouvez le voir dans la seconde URL, les mots-clés sont utilisés comme s’il agissait de dossiers (« dossier/ ») ou de fichiers (« fichier.php »). En les utilisant comme cela vous révélez de nombreuses informations sur votre site et  cela renforce fortement votre keyword theme. Si vos pages « Résultats », « Équipes » et « Matchs à venir » ont toutes un lien de retour vers la page « Football » principale, cela contribue à renforcer le thème « Football » dans l’intégralité de ce groupe de pages. En supposant que vous avez également des sections pour le hockey, le handball et le tennis qui pointent vers votre catégorie « Sports » cela renforcera d’autant plus le mots-clés thème « Sports ».

L’idée est donc de créer ces thèmes-clés pour votre site, c’est un concept connu sous le nom thématisation ou siloing.

5 Autres astuces

Être trouvé.
L’aspect le plus important de la construction d’un site Internet est de vous assurer que votre contenu peut être trouvé et indexé. Si vos pages ne sont pas indexées, elles ne peuvent pas apparaître dans les résultats de recherche. Votre premier objectif doit être d’empêcher les obstacles à l’indexation de vos pages. Les principes que vous suivez pour favoriser l’accessibilité et la facilité d’utilisation de votre site Internet vous aideront à lever ces obstacles.

Évitez Flash, Javascripts.
Les moteurs de recherche sont meilleurs lorsqu’il s’agit d’explorer de texte plutôt toute autre chose. Évitez le Flash, le JavaScript, et les images pour la navigation de votre site. Des progrès ont été réalisés dans l’exploration de chaque, mais le mieux restent encore les bons vieux liens en HTML. Si votre site fait appel au Flash ou au JavaScript pour la navigation principale alors vous devrez fournir un autre système de navigation qui pourra être utilisé par les robots des moteurs de recherche : un plan de site.

Plan du site.
Vous pouvez aussi aider les moteurs de recherche à trouver votre contenu par le biais d’un plan de site HTML. Je précise bien HTML, et non pas XML, les sitemaps XML sont destinés à être un backup au cas où votre site aurait présenté des problèmes lors de son exploration. Créez un plan de site HTML et faîtes un lien vers celui-ci à partir de votre page d’accueil (au moins) et si possible sur toutes les pages sur votre site. Il est assez facile d’ajouter un lien vers votre plan de site dans la barre de navigation secondaire (en bas de page, par exemple).

Être valide.
Vous devez concevoir un code valide et propre. Les moteurs de recherche ne s’intéressent pas vraiment à savoir si votre code est valide ou non, en fait, aucun des 4 principaux moteurs de recherche ont des pages d’accueil valides. Toutefois, sachant que certaines erreurs de codage peuvent empêcher à l’exploration de votre site par les robots, il est dans votre meilleur intérêt d’écrire du code valide. Pour savoir si votre page est valide, il existe l’incontournable validateur W3C. Vous devez également garder en tête que les moteurs de recherche sont principalement intéressés par votre contenu, ne leur posez pas de problème pour trouver votre contenu à l’intérieur d’un amas de code, pour faire clair : moins il y a de code, mieux c’est !

La vitesse compte.
La vitesse est désormais aussi un facteur de classement, du moins pour Google. Utilisez le CSS et non plus les <table>, déplacez vos CSS et JavaScripts dans des fichiers externes et tentez de conserver la taille des fichiers HTML aussi petite que possible. Rapetissez vos fichiers. Même s’il est probablement un facteur mineur, tout ce que vous pourrez faire pour accélérer le chargement votre site améliorera votre classement dans les résultats Google, et probablement dans les autres moteurs dans un avenir proche.

Quelques autres réflexions :

• Les liens en général représentent une partie importante en SEO, cela comprend les liens internes. La plupart des pages de votre site Internet doivent pointer vers d’autres pages de votre site. De plus, vous avez un contrôle complet sur le texte utilisé pour vos liens internes.
• Régulièrement, faîtes des tests pour vous assurez que les liens internes de votre site fonctionnent et corrigez les liens morts si vous en trouvez.
• Utilisez un fil d’Ariane (ou breadcrumb), cela aide les gens et les moteurs de recherche à comprendre l’architecture de votre site.

SEO On-Page

Avant le SEO c’était ça : Les gens bourraient leur contenu de mots-clés et leurs pages se retrouvaient bien classées. Bien sûr, cette méthode a vite été considérée comme du spam et ne fonctionne plus désormais ! Aujourd’hui, l’idée est d’écrire le contenu des pages afin qu’il se lise le plus naturellement possible par des personnes réelles. Vous devez également faire attention à quelques éléments clés.

Les titres des pages : <title> </ title>

Les titres des pages sont peut-être la chose la plus importante pour les moteurs de recherche. Les titres des pages jouent un rôle primordial dans le classement, vous devez avoir des titres courts et incluant le mot clé principale de la page. Pour les expressions clés à faibles concurrence, un bon titre suffit parfois pour obtenir un bon classement !

Assurez-vous que chaque titre de page sur votre site soit unique. Beaucoup trop de sites utilisent des titres identiques pour chaque page (souvent le nom du site), ce qui est extrêmement pénalisant.

N’oubliez pas que le titre de votre page est ce que les gens voient dans les résultats de recherche. Donnez à l’internaute l’envie de cliquer sur votre lien, soyez créatifs !

Les balises titre <h1>, <h2>, <h3>…

Les balises titre de la page ne sont peut être plus aussi importantes qu’elles ont pu l’être par le passé mais elles représentes tout de même un facteur de classement non négligeable. Vous pouvez utiliser ces balises pour créer une hiérarchie dans vos pages, <h1> pour le titre principal, <h2> pour le sous-titre, et ainsi de suite…

Idéalement les titres devraient utiliser des variations de l’expression-clé principale que vous avez utilisé dans le <title> de votre page. De nombreux CMS comme WordPress vont générer un <h1> ayant exactement le même titre que votre <title>. Idéalement, il faudrait qu’il y ai une légère variation, mais ces balises ne présentent pas autant d’importance qu’auparavant, alors ne perdez pas trop de temps avec elles.

Les balises META : <meta>

Il y a 3 balises META dont nous allons parler ici :

• La meta keywords est quasi inutile. Elle représente une manière trop facile de spammer et n’est plus considérée comme un véritable critère de classement. Google et Bing ne les lisent même plus, il est très peu probable que les autres moteurs y attachent une grande attention. Vous pouvez tout à fait les ignorer sans risque, mais si vous vous sentez obligé de le faire, n’oubliez pas d’inclure certaines fautes d’orthographe courantes de vos mots clés initiaux. Plus sérieusement, si vous passez plus de 30 secondes pour écrire vos meta keywords, vous perdez votre temps.
• La meta description s’apparente à la balise précédente, elle n’a que peu d’effet sur le classement. En revanche elle est visible dans les résultats des moteurs, ce qui lui donne toute son importance ! Écrivez votre balise meta description de manière à inciter les gens à cliquer sur votre lien. N’hésitez pas à utiliser des appels à l’action.
• La meta robots est utilisée pour indiquer aux moteurs de recherche de ne pas indexer une page ou suivre les liens sur une page. Vous n’avez pas besoin de dire aux moteurs de recherche d’indexer une page puisque c’est leur comportement par défaut. La plupart du temps vous n’aurez pas besoin d’inclure cette balise META, sauf en cas de duplicate content, par exemple.

Attribut alt et les autres…

L’attribut alt et les autres attributs ont également été beaucoup spammés, mais ils peuvent encore être employés. En particulier l’attribut alt qui peut être utilisé sur vos images. Ne surchargez pas cet attribut de mots-clés, c’est inutile, rédigez-le comme s’il était censé être une courte description pour les personnes ne pouvant pas voir l’image.

Si une image présente dans votre design est juste décorative, comme par exemple un dégradé de couleur pour votre barre de navigation, laissez l’attribut alt vide (alt = »"). Qu’y a-t-il à décrire ? Bourrer vos attributs avec des mots clés est plus susceptible de vous faire étiqueter pour spamming que d’améliorer votre classement dans les moteurs de recherche.

C’est aussi vrai pour des choses comme <strong> et <em> et tout autre tag ou attribut. Ce ne sont pas des éléments majeurs qui détermineront votre positionnement, alors utilisez-les comme ils étaient destinés à être utilisés, c’est à dire pour des personnes réelles qui visitent votre site Internet. Utilisez <strong> pour mettre l’accent sur un mot-clé ou une expression-clé si cela a un sens, mais comprenez que plus vous utiliserez ces balises, plus l’impact qu’elles auront sur vos visiteurs sera faible. A vous de peser le pour et le contre.

Je ne veux pas vous laisser sur l’impression que d’ajouter des mots-clés dans ces balises et attributs ne servira strictement à rien. Seulement, le point principal à comprendre est qu’il ne faut pas être obsédé par des petites choses qui auront un impact mineur. Il judicieux de mettre l’accent sur les mots-clés et phrases-clés quand cela est nécessaire, mais ajouter une balise <strong> à chaque mot-clé de vos pages n’a aucun sens.

En fin de compte lors de l’écriture du contenu de vos pages il est beaucoup plus important de réfléchir à la façon dont le contenu sera lu par des personnes réelles plutôt que par les moteurs de recherche. Essayez de penser à pourquoi vous voulez que votre page soit classée en première position. C’est pour qu’un prospect atterrisse sur votre page, soit captivé par votre contenu, et réalise ensuite une action ! A quoi bon avoir une page classée première si lorsqu’un visiteur arrive et commence à lire, il quitte le instantanément site ? Vous ne devez pas penser uniquement SEO.

L’essentiel est là, donnez un bon <title> à vos pages, utilisez les balises <h1>-<h6> afin d’organiser votre contenu et permettre aux gens de comprendre rapidement la hiérarchie de votre page. Et surtout, écrivez votre contenu naturellement, adressez vous à vos lecteurs. N’essayez pas de charger votre contenu de mots-clés, au contraire n’hésitez pas à varier votre langage. Par exemple, écrivez « SEO », tantôt « optimisation de site » ou parfois simplement « référencement ». Un texte qui emploie un vocabulaire varié se lit mieux pour le visiteur et ne fera qu’augmenter le nombre d’expressions-clés pour votre classement. Vous êtes forcément gagnant !

En résumé

L’aspect le plus important de la construction d’un site Internet SEO est de s’assurer que les moteurs de recherche puissent trouver, analyser et indexer vos pages. Vous devez éliminer autant que possible les obstacles potentiels. Chaque fois que vous faites quelque chose pour rendre plus difficile aux moteurs de recherche de trouver et comprendre votre contenu, vous mettez en place un barrage. Placez des barrages sur toutes les avenues menant à votre entreprise, même si vos prospects souhaitent s’y rendre, ils ne seront pas en mesure de le faire !

Vous pouvez également développer des sites de manière à renforcer votre keyword theme et aider les moteurs de recherche à comprendre quels sont les pages importantes de votre site. Cela permettra également à vos visiteurs de mieux comprendre la structure de votre site, ce qui est important. Un site pratique et accessible est généralement un site SEO.

Même si de jour en jour le SEO On-Site perd de sa valeur face au SEO Off-Site (construction de liens externes vers votre site) , il est tout de même préférable de prendre ces bonnes habitudes, cela ne peut que faire du bien à votre référencement.

Dans le prochain (et dernier) article de cette série, nous verrons :

• Création de lien (Link Building) - La construction de lien est une des choses les plus importantes en SEO. Comment et pourquoi faire pointer des sites vers le votre ?
• Analyses – Pour vous aider à déterminer ce qui a et n’a pas fonctionné, pour vous permettre de recentrer vos efforts et améliorer votre site.

Partie 1 : Guide du référencement : Les meilleures pratiques (1/3)

Il est malheureusement souvent difficile de savoir ce qui est vrai ou faux. Cette dernière méthode que vous venez de découvrir fonctionnera-t-elle ? Si oui, est-elle applicable pour tous les sites ? Seulement pour un type de site ? Ou est-ce juste une autre théorie farfelue qui semble sensée mais qui ne contribuera jamais à améliorer le trafic de votre site ?

Les méthodes d’optimisation peuvent parfois paraître confuses. Mais ne vous faîtes pas de soucis, les bases du SEO sont en réalité assez faciles à assimiler et si vous vous donnez une bonne base dans l’apprentissage de l’optimisation de sites, vous serez en mesure de trier le vrai du faux beaucoup plus facilement et vous aurez les outils nécessaires pour vous plonger dans des concepts plus avancés du SEO.

Cette série d’article ne va pas vous apprendre la dernière astuce à la mode qui ne fonctionnera probablement pas de toute façon. L’objectif de ces posts est de vous aider à bâtir une fondation solide en SEO et de vous orienter dans la bonne direction pour que vous puissiez ensuite vous-même approfondir. Tout au long de cette série (3 parties au total) nous nous pencherons sur les 3 aspects principaux du SEO :

1. Approche générale et Recherche. Dans ce premier article nous allons voir comment aborder le SEO, effectuer une recherche de mots clés, etc…
2. SEO On-site. Dans le second article nous examinerons les moyens de construire un site SEO et comment rédiger notre contenu en gardant à l’esprit les méthodes SEO.
3. SEO Off-site. Le dernier article se penchera sur la construction de liens vers votre site ainsi que les outils d’analyse vous permettant de déterminer quelles méthodes ont étés fructueuses, afin de pouvoir améliorer vos efforts de référencement.

Approche générale du SEO

L’optimisation de votre site Internet pour les moteurs de recherche doit constituer une sous-partie de votre stratégie marketing. Elle doit s’inscrire dans votre plan de marketing global mais ne doit pas à elle seule représenter l’intégralité de votre marketing plan. Vous pouvez très bien avoir une stratégie SEO totalement désastreuse, ne jamais recevoir un seul visiteur à partir d’un moteur de recherche, et avoir un site très réussi, qui fonctionne et qui est rentable. Cela peut sembler étrange de lire ça dans un article qui traite du SEO, mais c’est pourtant vrai.

Si vous prenez un peu de recul et que vous avez l’habitude de bien vous vendre, certains des points les plus difficiles du SEO « couleront de source ». Cela ne veut pas dire qu’il faille ignorer le SEO, mais la plupart d’entre nous n’ont pas besoin d’une attention excessive à tous les petits détails. Il y a beaucoup, même énormément de facteurs qui déterminent où une page sera classée dans les résultats de recherche. Se focaliser sur l’un de ces facteurs n’a aucun sens. Essayez plutôt de voir la forêt au lieu de regarder fixement un seul arbre.

Le SEO n’est pas une chose simple, que l’on peut abandonner une fois effectuée. C’est un processus itératif. Vous faites ce que vous pouvez, vous mesurez les résultats, et continuez à améliorer, sans cesse. Vous ne pouvez pas optimiser un site en une journée ou en un mois (ce serait trop beau…). Comme pour le marketing en général, le référencement est sans fin. Il change tous les jours et ce qui fonctionne pour un site peut ne pas fonctionner pour une autre.

Heureusement, les principes de base sont à peu près constants et la construction d’une base solide dans la compréhension du SEO vous apportera beaucoup plus que d’essayer d’exploiter la tactique du jour.

On peut lister 5 différents aspects du SEO :

1. Recherche des mots-clés
2. Développement « Search engine friendly »
3. SEO On-page
4. Création de liens
5. Analyses

Chacun des points précédents est important mais il est essentiel de voir le tout comme un ensemble plutôt que de se focaliser sur un seul de ces points. Parlons un peu de chacun de ces aspects plus en détail.

Recherche des mots-clés

Tout le monde souhaiterait voir leur page au rang n°1, ce qui amène la question suivante : à quoi bon ? Tous les mots clés et expressions-clés ne sont pas égaux. Certains sont tapés plus souvent et certains sont plus susceptibles de conduire à une vente. Vous n’avez pas besoin d’optimiser votre site pour chaque mot clé ou expression imaginable.

Par exemple, disons que vous vendez un bien immobilier à Orléans. Vous pourriez penser qu’il est important de bien se placer pour l’expression «bien immobilier», mais l’est-ce vraiment ? Quelqu’un qui cherche à acheter une propriété à Nantes ou Bordeaux ne va pas être intéressé par une maison que vous vendez à Orléans. Pourquoi dépenser temps et argent à essayer de faire venir ces gens sur votre site ? Vous feriez beaucoup mieux de cibler les phrases qui comprennent la région Centre, le département du Loiret, ou encore mieux, la ville d’Orléans.

En tant que web designer à la recherche d’emploi, vous pourriez vous dire qu’il est important de se classer sur l’expression «web design», mais de nouveau est-ce vraiment utile ? Les personnes recherchant l’expression «web design» cherchent-elles à embaucher un web designer ou sont-elles simplement à la recherche d’informations sur le web design en général, ou peut-être même la simple définition du mot ?

Il y a 3 types de requêtes qu’une personne est susceptible de taper dans un moteur de recherche :

• Requêtes d’information – la recherche d’informations, générale ou spécifique
• Requêtes de navigation – la recherche d’un site ou page
• Requêtes transactionnelles – la recherche avec une intention d’achat

Vous n’avez probablement pas envie de passer du temps à positionner un blog d’informations pour une requête transactionnelle, de la même façon que vous ne voulez pas qu’une personne ayant tapé une requête d’information tombe sur le panier de votre site e-commerce.

Ces trois types de requêtes sont importants et chacun pourrait finalement aboutir à une vente. Quelqu’un qui trouve des informations utiles sur votre site peut très bien revenir plus tard et acheter quelque chose. La chose importante à comprendre est la suivante : Ce que tape une personne dans un moteur de recherche révèle quelque chose sur son intention et c’est en se basant sur ça que vous devez positionner votre site sur différentes requêtes.

Dresser une liste des mots clés à cibler

La première étape dans l’élaboration d’une liste de mots clés est de brainstorming. Prenez du temps et écrivez autant de mots et de phrases que vous pouvez en rapport avec votre site en gardant en tête que ce n’est que le début de votre recherche. Vous devriez être capable de construire une liste de 50 – 100 phrases sans trop de peine.

Je vous l’ai dit, le brainstorming n’était que la première étape, vous allez maintenant élargir votre liste grâce à différents outils. Voici quelques freebies pour vous aider à démarrer :

• Google AdWords Keyword Tool
• SEO Book Keyword Tool
• WordTracker
• Keyword Discovery

Les deux derniers proposent aussi des options payantes qui vous donnerons beaucoup plus d’expressions-clés. Il existe aussi d’autres outils avancés de recherche de mots clés si vous en voulez plus.

Quelques conseils pour la création de votre liste de mots clés :

• Trouver les mots et les phrases de vos clients au lieu d’utiliser le jargon technique – C’est super que vous soyez spécialisé dans développement web avec amélioration progressive. Mais combien de vos clients pensez-vous capables de taper « développement web amélioration progressive » ou bien même de savoir ce que cela signifie ?
• Rechercher des synonymes – Encore une fois mettez-vous à la place de votre client potentiel. Vous dites e-commerce. Vos clients pourraient peut-être taper ecommerce. Web design, ou bien website design ?
• Ajouter des qualificatifs – Notre maison à Orléans pourrait encore une fois servir d’exemple ici. De la même façon, si vous êtes un web designer qui construit des sites pour les professionnels, n’hésitez pas à ajouter à votre liste « conception de site Internet professionnels« , par exemple.
• Regardez les statistiques actuelles de votre site Internet afin de savoir quels sont les mots clés qui vous rapportent le plus de monde. Ceux-ci pourront vous aider à trouver des expressions similaires sur lesquelles vous pourrez tenter de vous positionner.

Ressources

Voici quelques ressources gratuites pour compléter vos connaissances concernant la recherche et la sélection des mots-clés (PDF en anglais)

• Keyword Research and Selection (PDF) – L’un des meilleurs PDF pour comprendre le processus de recherche et sélection de mots clés
• Keyword Research Guide (PDF) – Des experts en référencement offrent des réflexions sur des mots clés pour une entreprise fictive

Résumé

Il est important de se rappeler que l’optimisation de sites pour les moteurs de recherche, tout en permettant de fournir une source précieuse de trafic, restera toujours une façon parmi tant d’autres d’attirer des clients potentiels vers votre site. Pensez SEO dans le cadre de votre stratégie de marketing mais ne pensez pas que la globalité de votre stratégie se résume au SEO : Ne pas perdre de vue la forêt !

Le SEO est un processus itératif qui peut commencer par n’importe quelle étape. La plupart du temps il commencera par la recherche de mots clés, surtout si vous en êtes encore à la phase de construction de votre site ou à la création de son contenu initial. Les mots-clés vont vous aider à définir quelle est votre cible, et ce que cette cible recherche. Ils vont aussi vous ouvrir la voie pour développer votre site, choisir votre contenu, et sélectionner la manière dont vous le rédigerez.

Dans le prochain article (2/3), nous verrons :

• Développement « Search engine friendly » – Comment développer votre site afin que les moteurs de recherche puissent facilement trouver et indexer vos pages ?
• SEO On-page – Comment écrire du contenu adapté aussi bien à vos visiteurs qu’aux moteurs de recherche ? Comment utiliser correctement les mots-clés que vous avez ciblés ?

Partie 2 : Guide du référencement : Les meilleures pratiques (2/3)

Vous allez donc pouvoir commencer à tester les performances de la future version du navigateur qui aura beaucoup fait parler de lui (rarement en bien..).

Bien évidemment, IE9 supportera la plupart des technologies dont on parle beaucoup en ce moment : HTML5, CSS3 (media queries, selectors, borders & background, ..), DOM level 3.

Grosse nouveauté de ce navigateur, un tout nouveau moteur javascript nommé « Chakra » qui serait aussi performant que Chrome, Safari ou Opera. Si vous voulez le tester, Microsoft met à votre disposition une multitude de démos (tests de rapidité, tests graphique, tests de support des standards, tests JS). Je ne pensais pas dire ça un jour, mais j’avoue avoir hâte qu’il sorte !

Pour ceux qui souhaitent télécharger Platform Preview 3, c’est ici.  Et pour les plus feignants d’entre vous, je vous ai trouvé une petite vidéo qui illustre pas trop mal les possibilités de ce nouveau navigateur.

On peut y relever quelques informations intéressantes :

• Une personne consulte en moyenne 2646 pages par mois.
• Les internautes consacrent en moyenne 22% de leur temps aux réseaux sociaux, 42% à la consultation de page, le reste étant attribué aux e-mails, commerce en ligne, recherches…
• Ce sont les brésiliens qui fréquentent le plus les réseaux sociaux (loin devant les français qui occupent la 7ème place).
• Un internaute américain passe en moyenne 60h par mois sur internet, ce qui représente 30 jours par an !

Afin de vous forger votre propre opinion et pour que vous vous rendiez compte des évolutions réelles qu’apporte HTML5 je vous propose de découvrir une liste de 10 demos dans le but de voir de quoi la bête est capable. (Pour ma part j’ai un gros faible pour la box Google en 3d !)

Je pense personnellement que l’HTML5 a effectivement une place à se faire, mais que le Flash restera toujours leader quand il s’agira de créer des applications web riches ou encore des jeux relativement complexes. Qu’en pensez-vous, HTML5 va-t-il remplacer totalement le Flash ?

Voici la vidéo d’un petit chanceux qui a eu le plaisir d’ouvrir la boîte avant tout le monde.