Sites responsive et largeur d'écran
Bonjour à tous,
Je viens de remarquer un fait qui m'intrigue.
Tous les grands sites d'e-commerce ou d'actualités de France sont "responsive" : très bien.
Ces sites s'adaptent aux différentes résolutions d'écran, et leur seuil de déclenchement entre les modes desktop/mode mobile (seuil où en général le menu hamburger apparaît en remplacement de la barre de navigation horizontale) est entre 800 et 1.000 pixels environ.
Ce qui m'intrigue est que la très grande majorité de ces sites permettent à leur en-tête (20% de la hauteur de l'écran, là où il y a souvent des carousels d'image ou de produits) d'occuper toute la largeur de l'écran, alors que le tronc du site (80% de la hauteur de l'écran) reste limité souvent à 800 pixels en largeur.
En conséquence, sur un modeste portable 13.3" de résolution HD 1366x768 pixels, ou sur les écrans 17" full HD 1920x1080 (et je ne parle pas de résolutions encore plus élevées telles que QHD ou 4K...), il y a toujours 2 colonnes blanches à gauche et à droite du tronc de la page.
Question : pourquoi un tel comportement ? J'aurais pensé et préféré qu'avec le responsive, ces sites vont profiter des résolutions élevées, et donc de largeur d'écran importante pour utiliser toute l'espace disponible, au lieu restreindre leur tronc à 800 pixels, et garder les colonnes gauche et droite inoccupées, toute blanches. C'est comme si ces sites veulent être compatibles avec la résolution SVGA 800x600
des années 90 !
D'ailleurs c'est exactement le même cas que ce forum Alsacréations ! Y a-t-il une explication ? Peut-être qu'une ligne du texte sur largeur de 1920 pixels serait-elle plus difficile à lire (mouvement de l'oeil ?). D'autres forums ne semblent pas choisir cette restriction, par exemple http://forum.hardware.fr/ .
Merci d'avance pour vos lumières sur le sujet.
aime ça
La largeur du texte est un élément prépondérant, une longueur de ligne optimale est aux alentours de 70 caractères par ligne pour du texte (en certaine quantité). Des lignes trop longues rendent difficile à l'oeil de crocher la ligne suivante, voir dans l'excès se perdre au fil de la lecture de la ligne. Trop court et la lecture devient hachée. en plain écran sur mon écran le forum hardware.fr est complètement illisible.
Du coup que met-on à droite et/ou à gauche? Cela demanderait une grosse réorganisation du document voir de la conception même du site. La quantité de visite de personnes usant un grand écran en plein-écran est assez faible, et ne vaut pas de développer des versions nécessitant tant de travail (et de problèmes). C'est pour ça qu'on bloque à une limite supérieure en général.
Par contre la plupart des sites responsive actuels travaillent sur une taille maximum entre 1200 et 1500. Ce qui permet de profiter du confort d'un grand écran. Ceux se limitant à 800, ne sont pas responsive, enfin ne le sont que pour les périphériques mobiles, la version desktop étant en effet statique. Les habitudes ont parfois la vie longue, particulièrement au sein des grands groupes.
aime ça
En complément du commentaire précédent, la largeur maxi recommandée dans la plupart des articles est effectivement autour de 66 / 70 caractères ou bien 33 EM pour raisonner en relatif.
Il me semble avoir lu quelque part que la lecture d'un article sur écran entraîne environ 30% de déperdition dans l'attention de l'utilisateur par rapport à sa version papier. Des lignes dont la largeur excède une quinzaine de mots accentuent ce phénomène du fait du va et vient induit au niveau de la tête / des yeux du lecteur.
En entreprise, la version "desktop" est bien souvent privilégiée, notamment parce que le parc de moniteurs est bien souvent standardisé avec une taille bien définie.
Je me suis posé la question des écrans extra larges au niveau de mon générateur HTML car je dispose, justement, d'un écran de ce type au boulot, mon poste de travail ayant été adapté à ma vue là où mes collègues disposaient jusqu'à présent de deux moniteurs 19" en standard (configuration en cours de modification toutefois).
La conclusion à laquelle je suis arrivé n'a rien de bien original : sur écran extra large soit on conserve une seule colonne max 33 EM (plutôt esthétique pour des récits de voyage par ex.), soit on passe sur deux colonnes dans un souci d'optimisation de l'espace occupé. La seconde solution induit toutefois de concevoir un nouveau modèle de document adapté à cette configuration niveau CSS.
aime ça
Merci pour vos réponses.
En prenant quelques mesures, ce forum utilise environ 120 caractères, ce qui n'est donc pas optimal. Avec d'autres sites d'actualité, j'obtiens pour la largeur des lignes de texte (affichage normal = zoom à 100%).
Desktop:
Le Point : 85 caractères (espaces compris)
Le Monde : 84
Le Figaro : 80-85
L'Express : 70
Le Journal du net : 88
Nice-Matin : 90
Mobile:
m.elle.fr sur Android : 44
Les sites de presse semblent donc suivre une règle.
Effectivement, après quelques recherches sur le Net, 45-75 semblent être ce qui est recommandé :
http://designmodo.com/web-typography/
"As suggested by Robert Bringhurst, the most ideal measure or line-length is around 45 to 75 characters per line."
J'ai découvert qu'en fait qu'il s'agit de la "typographie responsive", sujet souvent négligé mais qui a son importance. D'autres facteurs entrent en jeu : l'interlignage (line-height), la taille de la police....
Pour garder le nombre de caractères par ligne constant quelle que soit la résolution, il faudrait utiliser les media queries en jouant sur la taille des caractères et/ou sur la taille du conteneur (en augmentant le padding gauche/droit). Des exemples de code ont été proposés.
@media
screen and (min-width:1200px) {
body { font-size:110%; } /*
Increase the font size */
}
@media screen and
(min-width:1400px) {
html { padding:0 15%; } /* Reduce the
container width */
}
@media screen and (min-width:1600px)
{
body { font-size:125%; } /* Increase the font size */
}
@media
screen and (min-width:1800px) {
html { padding:0 20%; } /* Reduce
the container width */
Quelques articles intéressants sur le sujet :
http://baymard.com/blog/line-length-readability
Responsive typography: 9 top tips
http://www.creativebloq.com/rwd/expert-responsive-typography-tips-101517572
https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
http://ux.stackexchange.com/questions/45761/responsive-design-for-big-resolutions
https://www.grafikart.fr/tutoriels/html-css/typography-298
aime ça
a écrit :
En prenant quelques mesures, ce forum utilise environ 120 caractères, ce qui n'est donc pas optimal.
Effectivement mais ça reste dans la limite (supérieure). Par contre sur Alsa, les articles tiennent sur une colonne plus réduite et correspondent plus à cet «idéal».
Plus le texte est long, et contient d'importants paragraphes, plus c'est important. Une légende qui tient sur 3 caractères ce n'est pas rare, ça convient pour 1, 2 ou s lignes de textes. Se lire un article de fond sur la crise du choux de Bruxelles en Papouasie ça serait plus délicat.
Ce forum contient souvent des exemples de code qui nécessitent parfois une certaine place pour être lisibles (avec l'indentation). Donc forcer un peu la longueur de ligne alors que la plupart des interventions sont courtes et lapidaires ce n'est pas forcément dramatique.
La typographie a plein de règles pour une bonne lisibilité. Plus le texte est long et important, plus il est nécessaire d'y prendre garde.
Collé à partir de <https://forum.alsacreations.com/topic-27-79619-1-Sites-responsive-et-largeur-decran.html>