Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l’idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l’intégration. Francis Chouquet (fran6art) parle de « maquettes interactives« .

Le sujet fait un peu de bruit depuis quelques mois, certains voient les avantages de cette manière de travailler, d’autres ne sont pas prêt d’abandonner Photoshop de ci-tôt. Et bien sûr il y a ceux qui se situent au milieu.

Pourquoi une idée aussi farfelue ?

Tout Designer Web soucieux des meilleures pratiques en matière d’ergonomie, de référencement et d’accessibilité, saura que le contenu d’un site est primordial. Alors pourquoi ne pas structurer le contenu d’une page avant de passer à la couche design ? Voilà d’où est née l’idée du « designing in the browser », ou en français, du design dans le navigateur.

Cette manière de travailler n’est pas nouvelle, mais la naissance de CSS3 lui donne un intérêt nouveau. En effet, il est maintenant possible de créer de nombreux effet tels que des ombres, des rotations, des transparences et des dégradés, avec CSS3.

Vous me direz, CSS3 ne marchera pas dans de nombreux navigateurs populaires, alors pourquoi compter dessus ? Il y a plusieurs réponses possibles à cette question ;

1. On pourrait dire que justement, cette méthode va permettre de concevoir un site avec les principes de « dégradation gracieuse » en tête. Peut-être que IE n’aura pas de coins arrondis ni d’ombre, mais on peut faire en sorte que la page reste visuellement intéressante et ergonomique sans ces éléments de design.
2. Travailler dans le navigateur dès le début peut permettre d’éduquer son client de manière plus efficace : il verra tout de suite les différences d’un navigateur à l’autre au lieu de s’étonner qu’au final, son site n’est pas tout à fait le même que la maquette sous Photoshop.
3. On peut choisir cet outil de travail comme point de départ, mais rien ne nous empêche d’altérer le code et de rajouter des images par la suite pour que certains effets soient visibles sur tous les navigateurs. Avant tout l’intérêt est de ne pas travailler dans un format statique. On peut même faire des captures écran et les envoyer au client si on veut mais ça perd un peu de son intérêt.

Photoshop vs. le navigateur

Alors bien entendu chaque méthode a ses avantages et ses inconvénients. Dans Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus longue que dans Photoshop mais au final on gagne du temps sur le développement et donc sur la totalité du projet.

Je pense que les deux méthodes sont valables ; qu’on travaille dans Photoshop ou dans le navigateur, il s’agit de choisir un outil de création graphique qui sera le plus adapté à un projet et à un Designer Web.

Dan coupe la poire en deux en suggérant que le design d’une ou deux pages soit fait dans Photoshop, et le reste du site dans le navigateur. Ça me parait assez raisonnable comme approche, mais je ne suis pas sûre que ce soit très novateur.

Au moins, si on est le genre de Designer Web qui sait coder, on a le choix des outils. Mais ça c’est un autre débat qui fait du bruit depuis plusieurs années…

Quelques liens

• sxsw.beercamp.com : voici un site qui a été réalisé non seulement dans le navigateur, mais surtout avec aucune image – que du code !
• 24ways.org (en anglais) : Meagan Fisher exprime son dégoût pour Photoshop et son approche du design qui consiste à commencer par le contenu.
• Design Shack (en anglais) : voici une liste d’astuces et d’outils pour aider à concevoir un site dans le navigateur.

Avoir un bon référencement dans les moteurs de recherche est devenu une problématique centrale dans la gestion de son site Internet. Être contextuel, avoir des pages de contenu de qualité et une bonne répartition de ses mots clés est essentiel. Voici un récapitulatif, fait à partir d’un audit d’un site de vente en ligne de chaussures, des points qui vous aideront à bien positionner votre site.

L’importance du contenu dans le référencement de son site

Un moteur de recherche a pour but d’offrir les résultats les plus cohérents avec la requête faite par l’internaute. Il doit donc être en mesure de « classer » votre site en fonction de sa thématique. Par exemple dans la catégorie « site de chaussures » ou « site sur l’automobile », etc. Il est donc indispensable d’avoir du contenu. Et à fortiori sur un site de vente en ligne, dont le but est d’attirer des visiteurs intéressés par les articles du magasin. N’hésitez donc pas à rajouter des pages supplémentaires qui vous permettront de présenter votre métier, votre activité ou vos services plus en détail.

Comment structurer les pages de contenu de son site

La première chose à faire est de donner aux images des noms en rapport avec le thème de l’article, et également de remplir un texte alternatif (balise HTML « alt ») de chacune des images. Mais pour améliorer votre référencement, vous aurez besoin d’avoir des pages de contenu cohérentes avec le thème de votre site. Pour un site de chaussures, par exemple, on pourra choisir de mettre à disposition de nos clients des informations sur 1/ Les différentes marques, 2/ Les différents modèles, enfin 3/ L’histoire du magasin. On pourra avoir cette arborescence :

• Les différentes marques
  • La marque 1
  • La marque 2
  • …
• Les différents modèles
  • Le modèle 1
  • Le modèle 2
  • …
• L’histoire du magasin
  • Sa naissance
  • Son évolution
  • Ses perspectives

Améliorer son positionnement, c’est être contextuel !

Dans chaque page, on essaiera d’être un maximum contextuel en donnant de la valeur ajoutée à son contenu. Concrètement, c’est ne pas hésiter à faire des liens vers d’autres pages du site et surtout vers des sites en rapport direct avec le sujet traité. Dans la page des marques de votre site de vente en ligne, il faudra faire des liens vers les marques que votre magasin distribue. Pour l’article d’un blog sur le positionnement d’un site Internet, il ne faut pas hésiter à pointer vers des ressources sur le référencement.

Quels mots-clés choisir

On peux classer les mots-clés de notre site en deux catégories :

Des mots-clés sur le thème général

Ce sont des mots traitant de notre sujet, mais assez généraux. Dans notre cas, on peut citer « chaussure », « chausson », « pied sensible », « confort », « qualité », « vente en ligne » … ainsi que tous les synonymes. Il faudra répartir ces mots-clés dans toutes les pages du site. Il n’y a pas de nombre limite à ces mots-clés.

Des mots-clés spécifiques à chaque page

Tout en gardant en tête la répartition des mots-clés généraux, on doit également optimiser le référencement page par page, en se concentrant sur 5 à 10 mots par page maximum (ce seront les mots spécifiques à cette page). Pour faire ressortir ces mots-clés dans notre page, on pourra les utiliser dans les balises de titre (en HTML, <h1>mot-clé dans mon titre d'importance 1 </h1>), et faire pointer les autres pages du site vers cette page, avec notre mot-clé dans le libellé du lien. Exemple de lien d’une autre page du site, vers notre page : (N’hésitez pas à consulter tous nos pack de création de site Internet et blogs d’entreprise.)

La circulation entre les pages du site

Il ne faut pas hésiter à faire des renvois entre les pages de notre site. Les liens que vous poserez dans vos pages, auront un double intérêt.

1. Faciliter le parcours de votre site par les moteurs de recherche
2. Comme expliqué précédemment, faire ressortir quelques mots-clés et les optimiser/associer à une page en particulier (la page cible du lien)

Attention aux liens dont la page cible n’existe plus ou a été déplacée !

Note sur les solution de site e-commerce clé en main

On trouve énormément de solutions de e-commerce sur internet, parmi lesquelles des solutions clé en main. Le principal avantage de celles-ci est sans doute leur prix réduit (encore que …). Mais l’inconvénient principal est qu’elles ont été uniquement pensées dans une optique de vente en ligne, et souvent l’aspect référencement n’a pas été pris en compte. C’était notamment le cas pour le site que j’ai été amené à auditer. Dans ce cas, quelles solutions se présentent à nous ?

• il faut mettre en œuvre les optimisations que l’outil nous permet de faire (souvent peu)
• coupler le site de vente en ligne d’un blog/site vitrine pensé dans une optique de référencement
• envisager une autre solution de vente en ligne permettant un positionnement de qualité, car quelle est l’utilité d’un site si on ne le trouve pas ??

A ne pas perdre de vue

Le but des moteurs de recherche est de présenter l’information la plus pertinente pour les internautes. Il s’agit de leur objectif numéro un. Donc plus le contenu de vos pages sera pertinent, contextuel, apportant une vraie valeur ajoutée à vos internautes, meilleur sera votre positionnement !