Comment optimiser la lecture des actualités comme sur Medium.com [Media] ?

logo site web Medium
Le logo de la plateforme Medium.com

 

Medium.com est une des plateformes de blog les plus utilisées. Son approche est axée contenu éditorial, et permet aux utilisateurs de trouver des articles de manière centralisée sur des sujets qui les intéresse.

L’approche de Medium.com pour les images

La force de cette plateforme est d’offrir des publications dans une présentation uniformisée, un style minimaliste pour mettre en avant le contenu propre des articles et faciliter leur lecture, comme dans un journal papier traditionnel.

La mise en page se veut donc minimaliste : titres, paragraphes, gras et italiques, et images.

L’approche pour les images est aussi très simple : une image est positionnable entre deux paragraphes, et zoomable sur un simple clic. Lors du zoom, l’image s’affiche en pleine largeur, au dessus du texte, et un second clic permet de la replacer dans le texte, dans un mouvement d’animation fluide

Cela permet de répondre au besoin de voir les détails de l’image, un schéma par exemple, uniquement au besoin, et de manière la plus simple possible.

Exemple d’utilisation

L’image est ajoutée dans le contenu de la page ou de l’article, et est affichée en taille maximale de l’écran au dessus du contenu lorsque l’utilisateur clique dessus :

DroneExpress / WebExpress - Prise de vue aérienne - Phare des baleines Ile de Ré

Les avantages pour la lecture

Cette approche s’avère plus simple que celle des visualiseurs d’images évolués, qui offrent des fonctionnalités plus avancées (défilement des autres images de la page, déplacement dans l’image, etc.) mais aussi plus intrusives dans la navigation, et du coup elle est plus adaptée à une lecture linéaire d’un article d’actualité.

Cela contribue à faciliter la lecture de vos actualités, et à favoriser l’engagement sur votre site.

NB: On notera cette fonctionnalité n’est pas utile sur les mobiles, vu qu’en général l’image est déjà affichée à sa taille visualisable maximale, limitée par la largeur d’écran disponible.

Comment mettre en place cette approche ?

Grâce à une extension WordPress spécifiquement développée par WebExpress, il est possible de mettre en place la même approche que celle adoptée sur Medium.com.

Les images sont à ajouter dans l’article de la façon habituelle sous WordPress (dans l’éditeur visuel, ou mieux avec nos shortcodes optimisés SEO pour la gestion des images), en ajoutant simplement le texte ‘zoomable’ dans l’attribut ‘class’ de l’image.