Des sites au design moderne

Photo of author
Écrit par Grégory Hénique

Auteur sur mes 2 blogs depuis 2009/2010.

 

L'écriture est ma passion mais l'optimisation SEO / IA fut un passage obligé pour gagner ma visibilité.

 

Présentation

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.

shorthand

Si vous hésitez entre deux VPN, tout dépend de ce que vous voulez en faire. Pour la vie privée et la transparence, difficile de faire mieux que ProtonVPN : code open source audité, basé en Suisse, et une version gratuite illimitée (pas de carte bancaire, pas de limite de data).

Pour le streaming et le débit, NordVPN reste la référence : plus de 8 000 serveurs dans 224 emplacements, protocole NordLynx (WireGuard optimisé), et il débloque les catalogues Netflix étrangers sans prise de tête. Les deux proposent une garantie « satisfait ou remboursé » de 30 jours, vous ne prenez donc aucun risque à tester celui qui correspond le mieux à votre usage.

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 :

ProtonVPN vs NordVPN — lequel choisir ?

CritèreProtonVPNNordVPN
Idéal pourVie privée, éthiqueStreaming, vitesse
Serveursplus de 20 000 dans plus de 140 pays8 000+ dans 224 emplacements
Version gratuite✅ Illimitée (pas de CB)❌ Pas de version gratuite
Open source✅ Code audité publiquement❌ Code propriétaire
Streaming✅ Netflix, Prime Video (certains serveurs)✅ Tous les catalogues Netflix + 20+ plateformes
DébitBon (VPN Accelerator)Excellent (NordLynx, +30% vs OpenVPN)
Garantie30 jours remboursé30 jours remboursé
PrixDès 2,99 €/moisDès 3,49 €/mois
Essayer ProtonVPN (gratuit) Essayer NordVPN
Transparence : les liens ci-dessus sont des liens affiliés. Je touche une commission si vous vous abonnez (cela ne change rien pour vous).
  • 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.

EDIT 2017 : Thesis était bien jusqu’à sa version 1.8, depuis sa version il est devenu une usine à gaz, d’où mon changement de fusil d’épaule à l’heure actuelle. Cf. mes nouvelles vues dans cet article. 

6 réflexions au sujet de “Des sites au design moderne”

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

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

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

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

  5. 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é.

Laisser un commentaire