One page design, côté intégration

Matthieu Schneider ~ 5 minutes

Commentaires (11)

Lundi, à peine arrivé au bureau : « Matthieu, on va faire un site One page design en parallaxe basé sur du HTML/CSS à la one again a bistoufly. Tu verras c’est super, je t’envoie les maquettes ! »

Ma première réaction a été de vouloir courir dans le bureau en clamant ma reconnaissance envers le chef de projet pour la confiance qu’il m’accorde. Ce à quoi j’ai juste répondu : « Ok, je vois les maquettes et je te dis ce qu’on fait ». Évitons de nous emballer avant d’avoir vraiment pris connaissance des enjeux et des contraintes de ce projet.

One page design : quésaco ?

En dehors des termes barbares utilisés pour le désigner ou le vendre, le One page design est un concept facile à appréhender : il s’agit d’afficher toutes les informations du site sur une seule et unique page en proposant à l’utilisateur une navigation soit verticale soit horizontale ou les deux.
Ce nouveau mode de diffusion de l’information n’est pas exclusif à un seul secteur d’activité, comme le montrent ces quatre exemples :

Pourquoi faire ?

On peut commencer à penser One page design quand l’environnement graphique joue un rôle plus important que les habitudes des internautes. Là où on privilégiait la facilité d’accès aux informations, maintenant on va plutôt chercher à bousculer l’utilisateur, à rentrer chez lui avec nos chaussures dégueulasses, se servir une bière dans son réfrigérateur et repartir en lui faisant croire que c’est normal et qu’il faut qu’il s’y habitue, au risque de le dégoûter.
Cet effet peut être plus ou moins bien accepté par l’utilisateur. C’est donc bien à nous, intégrateurs, de faire la différence entre une bonne et une mauvaise utilisation de ce concept et de ne pas sortir un site One page design à tout prix. Un article pour vous aider dans cette tâche : One page design : effet de mode ou réel intérêt pour les marques ?

Comment faire ?

Avant de commencer à développer un site One page design, il faut orienter le développement vers un type de site qui sera choisi en fonction du cahier des charges. Le choix du type va définir le coût réel de la réalisation du site. Selon les objectifs du client, le coût d’intégration peut varier du simple au triple.
Cet article n’a pas pour but de généraliser le développement d’un site One page design avec telles ou telles technologies. L’étude se fera donc sur le projet que j’ai réalisé :

  • Type de site : évènementiel
  • Durée de vie : 3–4 mois
  • Mise à jour de contenus : minime
  • Affichage multilingue : oui

J’ai choisi de créer un site statique HTML/CSS avec du PHP pour la gestion des langues ainsi que la mise à jour des contenus.

Les contraintes

Avant de me lancer, j’ai énuméré les contraintes et les obstacles que je risquais de rencontrer pendant l’intégration :

  • optimiser le temps de chargement de la page ;
  • penser au référencement par les moteurs de recherche
  • gérer l’historique de navigation des utilisateurs ;
  • créer des ancres « dynamiques » au sein de la page ;
  • … et surtout faire en sorte qu’en sortie, le site envoie du poney en barre !

Et j’ai respectivement trouvé des solutions :

  • prévoir un pré-chargement des images si nécessaire ;
  • optimiser un maximum les termes à référencer grâce aux attributs HTML en allant jusqu’au nom physique des images : <img src=« le-chocolat-selon-mes-dires.jpg » alt=« Vous donner plus de chocolat à ma façon ! » /> ;
  • pour la gestion de l’historique de navigation avec les boutons « revenir en arrière » et « avancer » des navigateurs, j’ai penché pour un plugin jQuery : BBQ – Back Button & Query Library ;
  • afin de créer des ancres « dynamiques » qui changent le titre de ma page en allant jusqu’à modifier l’URL aux yeux de l’utilisateur, jQuery BBQ est encore de mise !
  • pour ce qui est du « poney », c’est à chaque intégrateur de proposer des solutions innovantes à l’utilisateur pour faire de sa navigation un moment « magique » ! Dans mon cas, j’ai décidé de modifier le défilement vertical de ma page en proposant une scrollbar redessinée avec un défilement plus fluide.

L’analyse des contraintes est un moment incontournable. C’est toujours très frustrant d’être au milieu de la phase de développement et de se rendre compte qu’il faut revoir le nom de toutes les images afin de favoriser le référencement. On devra prêter plus d’attention à l’intégration lors de la phase de conception d’un site One page design que pour un site « classique ».

Mais pourquoi du jQuery ? Effectivement, le choix des solutions va forcément influer sur les performances d’affichage de la page. Certains diront que l’utilisation de plugins jQuery est une (très) mauvaise idée et va à l’encontre même des principes qui fondent l’optimisation des performances. Mais des fois, pour satisfaire les demandes du client tout en respectant les délais, on se permet de dériver vers ce type de solutions.

Une des solutions à éviter !

Je pense qu’une des solutions à proscrire par-dessus tout, et ce pour des raisons de survie, est la solution CMS quelle que soit le système de gestion de contenu. À vouloir s’acharner à rendre un site compatible sur un CMS, on perd l’avantage de l’outil. Par analogie, on pourrait comparer cette façon de faire à une lampe dépourvue d’alimentation électrique : le jour la lampe fait effet, elle est posée sur le bureau à sa place, rien d’anormal. Par contre, la nuit, lorsque l’on voudra l’allumer et que rien ne se passera, on se demandera ce que cette foutue lampe fait là, à encombrer l’espace.

En conclusion

Intégrateur, intégratrice, je te conseille d’être méfiant quand on te propose de développer un site One page design. Il te faudra bien délimiter le projet et prendre connaissance des risques liés à l’utilisation d’une solution par rapport à une autre. Peut-être que ce concept n’est pas voué à perdurer, au final le temps que tous les intégrateurs soient au point sur ce type de projet, les clients auront décidé de vouloir autre chose.

À propos de Matthieu Schneider

Après 3 ans d'expérience dans l’intégration et le développement web, Matthieu cherche aujourd’hui à valoriser ses compétences à travers des projets innovants et ambitieux où partage de connaissances et accompagnement au changement rythment ses journées. Vous pouvez suivre Matthieu sur Twitter.

11 commentaires sur cet article

  1. NerOcrO, le 16 décembre 2012 à 12:43

    Salut,
    Je voudrai juste préciser que le nommage des images n'a strictement aucun effet sur le référencement naturel. C'est le contenu autour qui influe sur ce dernier ;)
    Pour s'en rendre compte, il suffit d'aller sur google image et de voir le nom des images comparé à la recherche effectuée.
    Merci pour la lecture en tout cas.

  2. Schneider, le 16 décembre 2012 à 13:35

    Hello NerOcrO !

    Merci pour cette remarque, malheureusement elle n'est pas complètement justifiée. Le nom physique des images à sa part d'influence sur le référencement naturel. Mieux vaut un fichier comportant quelques mots-clés décrivant le contenu de l’image que dsc43567.jpg.
    En complément :
    http://www.seopob.com/optimiser-ses-images-pour-le-referencement/
    http://blog.ramenos.net/referencement/gestion-et-optimisation-des-images-pour-le-seo-le-guide-complet-en-5-points/
    http://question-marketing.over-blog.com/pages/Referencement_Les_images-2494621.html

    Je reste bien entendu à ta disposition pour d'éventuels contre-exemples :)

  3. Nico, le 16 décembre 2012 à 14:05

    Ah, il me semblait avoir entendu le contraire, même si l'influence est limitée. Quid ?

  4. Schneider, le 16 décembre 2012 à 16:05

    Hello Nico !

    Effectivement, l'influence de cette action est très limitée. D'autant plus que l'on considère que l'intégration et le développement technique participe seulement à 10% du référencement naturel. Le contenu à 30% et enfin la popularité du site compte pour 60% du référencement naturel.
    Source : http://www.fingerprint.fr/referencement-naturel.html

    On est rarement très populaire lors du lancement d'un site internet, c'est pourquoi il faut maximiser toutes les chances du client afin qu'il prenne une bonne position dans les moteurs de recherche dès la mise en ligne.

  5. Valéry, le 16 décembre 2012 à 21:50

    Je ne vois pas bien en quoi le CMS est une limite dès lors qu'il est souple il peut faciliter au besoin la mise à jour des textes. Si certains CMS imposent des contraintes à la mise en forme d'autres sont beaucoup plus permissifs.

  6. NerOcrO, le 17 décembre 2012 à 9:05

    Salut Matthieu,
    En fait, j'ai appris ça lors de ma formation SEO fait par les très grands de http://www.webrankinfo.com/ :)
    Pour l'anecdote, une dame était là et racontait qu'elle avait renomé avec une collègue quelques millier d'images pour leur site, demandé par leur consultant SEO et ils ont répondu en se marrant : "mais ça ne sert strictement à rien !"
    Tout ça pour dire que l'url (site, image, pdf, ...) en elle même ne sert strictement à rien au niveau référencement naturel. Seul le contenu est important.
    Après, au niveau du taux de clique quand on fait une recherche, peut être que les yeux vont vers une url dite compréhensible mais ce n'est pas mon cas, je suis plus sensibilisé au titre ou à la description.
    Je finirai par dire que si tu regardes des sites comme facebook ou twitter, tu verras que leur photos sont toutes renommées et ne veulent strictement rien dire et je pense qu'ils n'ont pas les derniers de la classe en terme de SEO ;)
    Cette histoire de nommage d'url fait parti d'un grand nombre de légende urbaine sur le SEO relayé par pas mal de site qui ne savent pas de quoi ils parlent malheureusement :(
    N'oublions pas que le SEO évolue aussi vite que les versions de Pinguin/Panda ...

  7. Naouak, le 17 décembre 2012 à 9:44

    Par expérience personelle, le nommage des urls à une importance dans le référencement ou permet au moins au moteur de recherche de bien reconnaitre le contenu dans certains cas.

    Le nom des images semble importer peu mais l'url de la page lui semble être influant.

  8. Schneider, le 17 décembre 2012 à 10:07

    @Valéry : Certes, certains CMS sont plus permissifs et surtout, ils facilitent la mise à jour de contenu (c'est le but). Je ne sais pas si tu as un exemple de CMS précis en tête. Mais dans tous les cas tu seras obligé d'aller chercher tout le contenu de ta BDD pour l'afficher sur ta page d'accueil : Pages éditoriales, Actualités, Évènements, etc ... Ce qui fait pas mal de requêtes. En général tout CMS possède sont architecture avec une hiérarchisation des templates : Accueil > Catégories > Archives > Recherche > Détail de l'article. Rien que le fait de bypasser cette structure propre à chaque CMS me fait dire qu'on est pas sur la bonne voie. LA solution à mon avis serait d'utiliser un framework comme Symfony2 ou Ruby on Rails, mais c'est une toute autre approche. Si jamais tu as une solution CMS pratique, je reste ouvert à d'éventuelles propositions. :)

    @NerOcrO : Je suis d'accord, l'impact est vraiment faible (voir inutile pour certains) c'est bien pour ça que dans mon article je dis : "... en allant jusqu’au nom physique des images ..." et comme tu le dis, c'est plus sexy pour l'utilisateur de toute manière. :) Pour ton exemple, c'est vrai que modifier le nom de centaines d'images me paraît inutile, mais quand nous avons une gestion d'image minime autant ne pas se priver et c'est sûrement pas WebRankInfo dans son article datant du 12 mai 2012 qui dira le contraire :D http://www.webrankinfo.com/dossiers/google-images/referencement-images
    En conclusion : impact vraiment faible = influence quasi-inexistante mais si le volume d'image le permet autant ne pas sauter cette étape.

  9. RomSoul, le 18 décembre 2012 à 9:23

    Merci pour ce bel article :
    Au milieu des innombrables tutoriels très techniques, ça fait du bien un peu de recul et une dose de bon sens !
    Concernant les CMS je ne suis pas d'accord :la plupart des CMS modernes proposent des mécanismes paramétrables de mise en "mémoire cache", qui font qu'une même page n'est pas recalculée pour chaque visiteur : si elle a été générée à partir de la BdD il y a moins de 24 heures par exemple, tous les internautes se voient servir instantanément la page HTML dont une copie a été conservée. (En cas de modif qui presse, cette mémoire peut être vidée pour forcer la mise-à-jour.)

    Le client a ainsi les avantages d'un CMS, sans latence côté serveur liée au temps de calcul des pages. Il faut juste que l'intervenant web connaisse son outil :)

    Idem pour la propreté du code : sans vouloir faire de la pub, Drupal peut tout à fait générer du code propre si on sait lui parler gentimment ... Spip aussi, et bien d'autres je suppose, si on a l'expertise suffisante.

  10. Alexis DURST, le 14 mai 2013 à 16:44

    Bonjour, ton article est très intéressant et j'essaie d'utiliser le plugin que tu as utilisé (BBQ plugin) sur mon site one page. Seulement je ne comprend pas bien comment celui-ci fonctionne.
    J'ai bien inclue la bibliotheque mais après comment je fais pour changer l'url ?
    j'ai une balise nav et des ancres et j'aimerais que lorsque l'on clique sur un lien de la balise nav l'url change.
    merci beaucoup.

  11. mulopwe, le 6 mars 2015 à 2:02

    bien que datant, je me suis retrouver car je travail sur un projet pareil, merci pour l'article...

Il n’est plus possible de laisser un commentaire sur les articles mais la discussion continue sur les réseaux sociaux :