Un responsive design à l’ancienne
Le responsive design*, à quoi ça sert ? Ça sert à optimiser la lecture et la navigation quelle que soit la taille de l’écran utilisé. C’est donc très en rapport avec la notion de contenu.
Des menus lisibles sur smartphone
Le responsive design, ça ne sert pas le « design », justement. Ça sert le contenu.
Prenez un joli design avec des animations, des belles couleurs, une belle composition graphique… L’œil s’adapte et on en prend connaissance à peu près de la même façon que l’écran soit petit, moyen ou grand. En revanche, si un site propose des images informatives, du contenu à lire, une interactivité — c’est à dire un vrai contenu riche et varié — on a besoin de l’adapter, de modifier sa présentation en fonction de la taille de l’écran. Ne serait-ce que la taille des caractères, pour simplement pouvoir lire le texte.
Je suis assez satisfait de constater que des sites que nous avons réalisés il y a bien longtemps, bien avant que l’on se préoccupe de savoir si ça pouvait être lisible sur un écran d’iphone — ces sites-là, eh bien ils tiennent la route. Ils sont assez facilement consultables sur un téléphone.
Pourquoi ? Parce que nous avions, dans ces sites, donné la priorité au contenu, à la lisibilité. Il y a quelques secrets pour ça : on divise la largeur de l’écran, un menu à gauche, le texte principal au milieu et une information complémentaire sur la colonne de droite.
Des textes aisément consultables sur smartphone
Résultat : en agrandissant d’un glissement de doigt, on arrive à naviguer, à voir l’ensemble des menus, à cadrer un texte bien lisible et à consulter si on le souhaite le contenu complémentaire.
L’information est hiérarchisée, la longueur de ligne est correcte, la taille de caractère est fonction de cette longueur de ligne. Sur le plan typographique, c’est étudié pour une bonne lisibilité. Sur le plan de l’ergonomie, c’est étudié pour une compréhension facile et une navigation intuitive.
Ce n’est pas du responsive design, c’est du design adapté à l’information.
Un vrai responsive design sera bien évidemment plus agréable : les menus seront adaptés, on ne sera pas obligé de redimensionner à chaque changement de page…
Pour autant, faut-il faire réaliser son site en responsive design ? Ce sera l’objet d’un prochain article.
Quelques exemples de sites bien lisibles sur smartphone quoiqu’anciens :
sicastpol.fr
guiclan.fr
treflevenez.fr
biosem.fr
plougar.fr
* Voir notre article présentant un exemple « La belle régate, un site en responsive design »
Pierre Réguer