Oui le design d’un site influe beaucoup sur le comportement du lecteur quand il tombe dessus, et donc sur la façon dont votre site sera vu et référencé par la suite. On a tendance à l’oublier à notre époque où l’on entend de toutes parts que « seul le contenu compte ». Il faut bien entendu que ce que vous dîtes vaille le coup. Mais j’ai aussi tendance à penser en ce moment que si vous ne faîtes jamais évoluer le design de votre site, tôt ou tard il apparaîtra comme étant has-been par les lecteurs.
Ce qui m’attire, c’est les sites avec de grandes images / vidéos qui prennent tout l’écran et à l’intérieur desquelles se trouve le texte. Avec des titres énormes qui prennent toute la surface. Et des écrans qui défilent presque tout seul. Je ne sais pas si Google me pénaliserait pour lenteur de site si j’utilisais ce genre de thème sur un petit hébergement mutualisé… Il faut certainement que l’hébergement et le débit internet suive. Quoi qu’il en soit, voilà un aperçu de ce qui me plairait. En dernier lieu, je parle d’un thème Wordrepss qui se rapproche un peu de ce dont je parle.
1/ The Gardian
http://interactive.guim.co.uk/australia/2013/july/australia-vs-england-rivalry/ – Cette page montre rapidement les atouts que je viens d’évoquer : un site qui vous tape à l’oeil dès que vous l’ouvrez, un menu minimaliste qui fait descendre rapidement l’écran, un thème responsive adaptable aux petits écrans, la possibilité d’intégrer des images, des vidéos et du texte, et un footer là encore minimaliste et pratique.
Parfait. on doit cette page à l’entreprise Shorthand qui explique dans cet article comment elle est parvenue à créer ce site.
2/ NYtimes
http://www.nytimes.com/newsgraphics/2013/10/13/russia/ – Cette page du New York Times est excellente aussi. Le concept de base est similaire, mais à gauche de l’écran s’affiche une carte. L’article rapportant un voyage en Russie, le parcours effectué s’affiche sur la carte en temps réel au fur et à mesure qu’on déroule l’écran. A noter aussi une intégration parfaite de la vidéo, ce qui me paraît être aussi une nécessité pour un site au design moderne.
Ajoutons des images qui défilent à volonté dans un slider, de l’espace, des images plein écran et une publicité discrète dans le footer : que du bon.
3/ Un thème WordPress qui s’en rapproche ? Le rêve !
Dommage que ce thème soit si cher (79 dollars pour un nom de domaine unique…), parce que je trouve qu’il se rapproche pas mal de ces objetifs. Il se nomme Full Frame et est développé par Graph Paper Press :
http://demo.graphpaperpress.com/full-frame/
Ses caractéristiques :
- responsive design
- l’image de l’article qui s’intègre en fond d’écran sur la page d’accueil et les archives
- facilité pour changer les polices et couleurs, logo, etc.
- choix de polices customisées
Personnellement j’ai investi beaucoup de temps et d’argent dans la customisation du thème Thesis que j’utilise, il me faudrait pas mal d’investissement pour changer de fusil d’épaule. Il n’empêche que ce thème tape dans l’oeil.
kowalsky says
C’est sympa en effet mais dans les deux premier cas, si l’on désactive le JavaScript ça fait pschitt 🙂 (avec des images recouvrant du texte entre autre) ce qui fait qu’en terme d’accessibilité, ce n’est pas le top. C’est perdre inutilement des lecteurs alors qu’en utilisant judicieusement du HTML5 et du CSS3 il devrait être possible de faire un thème s’en rapprochant.
Le 3ème cas fonctionne correctement sans JavaScript. Mais le prix est un élevé. Tu trouveras sans doute ton bonheur dans les thèmes WordPress dédiés au photoblogging pour moins cher, voir gratuitement. Comme par exemple AutoFocus. A pondérer en effet avec l’investissement personnel que tu veux y apporter.
En ce qui concerne la lenteur d’affichage, les exemples proposés s’ouvrent en 2s à 4s, ce que je ne trouve pas si lent que cela compte tenu de toutes les images s’y trouvant. Tu as aussi la possibilité de jouer sur les tailles, résolutions et compressions des images pour en réduire le poids au téléchargement. Rien qui ne devrait t’empêcher d’installer cela sur du mutualisé.
Greg says
Merci de ta réponse. Tu me rassures en me disant que c’est jouable sur du mutualisé, ça me donne presque envie de tester. J’avais envie de tester Ghost dont j’ai parlé hier, mais sur du mutu c’est mort pour l’instant (il faut la technologie nodes.js).
Pour le JavaScript, c’est bizarre que des gros sites comme the Gardian ou NYtimes prennent ce risque si vraiment tu dis qu’on perd des lecteurs. Quel pourcentage utilise le javascript ? Des chiffres seraient intéressants.
Mimie says
Désactiver JavaScript d’un navigateur c’est un peu comme avoir un ordinateur sans Internet, on est coupé du monde, on loupe des choses à cause de notre paranoïa au niveau sécurité ou à cause de sites web mal fichus (clic droit bloqué, refresh automatique, lenteur …).
Pour moi JavaScript est devenu incontournable voire indispensable (en même temps je suis développeur front-end ^^), donc ceux qui le désactivent tanpis pour eux, et à mon avis ils ne sont pas nombreux …
A lire : http://www.alsacreations.com/actu/lire/305-pourquoi-certains-nactivent-pas-javascript.html
Greg says
Ouais c’est bien ce qu’il me semblait.
kowalsky says
Mimie,
le problème n’étant pas de « désactiver » JavaScript mais d’accéder au site lorsque l’on n’a pas JavaScript 😉 et le cas est beaucoup plus fréquent que l’on peut le croire. Parce que je suppose que tu prends l’exemple d’une personne (sans handicap) qui consulte le site depuis un ordinateur (récent, avec un navigateur récent de surcroit). Mais qu’en sera-t-il avec une tablette ou un téléphone ? Pour une personne malvoyante utilisant un navigateur vocal ? Pour un vieux pc ? Il est dommage alors que le site ne soit pas consultable juste parce que l’on a décidé qu’il était plus simple de coder la navigation avec du JavaScript plutôt qu’en utilisant a bon escient HTML (et CSS).
Je te renvoie sur cet article d’Alsacréations qui ne parle absolument pas de JavaScript mais qui pose la même problématique que j’évoque : http://www.alsacreations.com/article/lire/571-accessibilite-des-menus-de-navigation-deroulants.html
Greg,
en suivant les recommandations du WCAG.
(un peu de lecture)
http://www.alsacreations.com/article/lire/270-insaisissable-accessibilite.html
http://openweb.eu.org/articles/intro_accessibilite/
https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_Web
Dans les exemples donnés, le NYTime offre une lecture différente en fonction du médium, je suppose que le site est optimisé WAI. Pour le Gardian, c’est moins bien fait, il n’y a qu’un mode « 1024×768 », en dessous faut utiliser l’ascenseur horizontal.
Tu peux constater cela de visu si tu utilises l’extension « web developer » sous Firefox, en utilisant la fonctionnalité « fenêtre/voir les modèles adaptatifs » (la balise meta « viewport » change dans le code source du site consulté).
(Et même y désactiver le JavaScript si ça t’amuses, c’est comme ça que j’ai fait) 😉
Pour revenir à l’article, je ne dis pas qu’utiliser JavaScript c’est mal, mais que dans les exemples donnés ne pas l’utiliser ne permet pas une navigation correcte du site. Ce qui revient pour moi à se couper d’une partie de ses lecteurs.
Mimie says
Je comprends ce que tu dis mais perso j’en ai assez de devoir développer pour les gens qui utilisent IE6 par exemple, je pense qu’il faut suivre le mouvement et ne pas se soucier des gens qui désactives JavaScript, oui sans JS ils auront une navigation moins bonne voire inutilisable et bien tanpis pour eux, c’est leur choix.
Travaillant dans une startup, je peux t’assurer que les gens ne souhaitant pas utiliser le JavaScript ne sont même pas considérés étant donné que les technos tournent autour de GWT, Backbone et Angular sans aucune alternative, perso ce mouvement me plait.
PS : concernant les personnes handicapés je suis d’accord il faut faire un effort, mais j’ai plus l’impression qu’il leur faudrait un site vraiment à part, exclusif