J’ai remarqué ça, j’utilise le thème Wikipedia (readable, hyphenation) depuis des années, et dernièrement, il fait un peu la gueule.

Dans ce thème au passage, je trouve que l’idée du menu à gauche qui se cache est assez bonne, même si assez limité.

Suaf que si tu regarde bien les livre, quelque soit sa taille, le nombre de caractère par ligne dépasse rarement 80. Quand tu prend un gros bouquin, la police de caractère est généralement plus grande ainsi que les marges.

Dans certain gros livre où la police de caractère reste petite va être mise en page sur 2 colonnes correspondant alors à pratiquement une ligne de livre de poche.

Et sinon il y a de la marge sur les livres, même sur un livre de poche, tu as au moins 1cm sur le flanc extérieur et 2cm en haut et en bas.

Certain site, comme gmail ou youtube, sont parfaitement adapté pour exploiter toute la largeur d’un écran de 24” 2k (j’ai pas d’autre ecran sous la main), ton site doit toujours bien s’afficher quelque soit la largeur, Ce n’est pas au client de changer la taille de l’affichage, c’est totalement contre ergonomique. Et de toute façon ce n’est pas considéré comme disponible pour le client, le client peut être bloqué sur un navigateur en plein écran par exemple. Ainsi lorsque tu fait le CSS de ton site, tu dois déterminer comment il doit s’afficher selon les différente largeur de l’écran. Il doit donc être agréable quelque soit la largeur. Et oui, le design, c’est faire des choix, tu sais que tu va forcément avoir des personnes qui vont raler mais le but et de satisfaire au mieux.

Sinon, si tu veux quand même une solution simple, tu installes Stylus sur ton navigateur et tu personnalise le CSS de ton coté. Généralement, pour une largeur c’est très simple, une valeur à changer pour une classe, et le reste de la mise en page devrait suivre.

C’est évidemment a cause des smartphones que les journaux papier met en page avec des colonne depuis des siècles.

(reply:1826602:Syrius Märx)

Le problème, ce n’est pas les smartphone, les télé ou autre. Non, c’est des écran en ¹⁶⁄₉ paysage de plus en plus grand pour lequel on a de plus en plus de mal à adapter l’affichage de contenu que l’on peut pas étirer à l’infini en largeur. Le ¹⁶⁄₉ paysage est nul pour afficher un document.

Un document va nécessité plus un format portrait, et si tu as un bon pied à ton écran, met le en portrait et tout tes problème seront réglé (sauf que tu en créera d’autre). Je vois de temps en temps des personne avec un double ecran faire ça sur l’un des écran.

Un format ¹⁶⁄₉ paysage va cependant être plus adapté pour afficher 2 document cote à cote. Et là c’est même bien pour une activité nécessitant 2 fenêtres, par exemple un document word d’un coté, et une fenêtre internet de l’autre.

Même au cinéma, on cette question de ratio, un ratio dans la largeur ne raconte pas la même chose qu’un ratio carré voir en hauteur. Certain réalisateur vont même jouer avec différents ratio dans le même film.

Certain site, il est assez simple d’organiser le contenu sur toutes la largeur en utilisant des colonnes comme par exemple une boite mail va avoir et un menu laterale (des différentes boites) et 2 colonnes (la boite, et 1 ouvert mail). Dans le cas de Wikipédia, on pourrait imaginer mettre par exemple le sommaire dans une colonne, mais il n’existe pas tout le temps,et est très souvent ridiculement petit, ce qui serait donc totalement inesthétique, tu est donc bloquer dans quoi afficher sur la largeur.

Mettre le contenu de l’article sur 2 colonne est aussi totalement à proscrire car ne marche pas avec le scrolling verticale. Ca marche seulement si le “scrolling” fonctionne par page (comme un mode “liseuse”).

Enfin, la comparaison avec les livre : les livre sont écrit au format paysage. Et les éditeurs se démerde là aussi pour limité la largeur d’une ligne en nombre de caractère. Et certain bouquin sont même écrit en colonne. De même Un livre possède des marges, et ces marge, en plus d’être pratique (laisser une placer pour ses doigts, ne pas être géner par la reliure) sont aussi esthétiques. Je t’invite à regarder des documents Latex pour voir à quel point les marges de base y sont larges (pratiquement 50% de la pages c’est de la marge).

oui et comment tu gères le scrolling continu sur plusieurs colonne ? Ça serait par exemple adapté si tu gère parfaitement la quantité de contenu pour entrer dans 1 écran sans avoir à scroller.

(reply:1826635:Syrius Märx)

Wikiwand est par exemple un site/extension qui réalise une mise en page de wikipédia, et justement dans les modification, il y a se format moins large. Personnellement, j’utilisais déjà un style stylus qui faisait déjà le taf. C’est que le besoin existait déjà (wikiwand, ça fait quelques années que ça existe)

Ensuite, la longueur d’une ligne en nombre de caractère et même en angle semble avoir été longuement discuté et étudié (avec des études sur les zones qui sont regardé par un lecteur) par des pro, et la largeur prise par wikipédia était totalement en dehors des clous. Tu verras aussi que le mode “reader” (f9) de ton navigateur fait pareil (même pire).

Il y a un gros consensus des pro (designers, ergonomistes…) sur une largeur limite d’un bloc de texte. Et la très grande majorité des sites sont comme ça (je me suis même amusé à regarder quelques autre encyclopédie en ligne, c’est déjà comme ça).

Mais arrêtez avec votre putain de smartphone. C’est des études qui date de plusieurs dizaine d’année. Si tu va lire cet article, la plupart des études cité date d’avant l’iPhone, et il y en a même de 1929. Si tu vas sur la FAQ de wikipédia à propos du changement, il n’y a aucune référence au smartphone. C’est même quelque chose qui est spécifiquement pensé pour l’affiche “desktop”

Donc le smartphone n’y a rien à voir à cette histoire.

Il faut peut-être juste considérer qu’un grand écran ¹⁶⁄₉ en paysage n’est pas adapté pour afficher un document texte dans toutes sa largeur. Peut-être aurait-on du écrire de verticalement comme les chinois et les japonais, est scroller horizontalement et là ouai les écran ¹⁶⁄₉ aurait été pas trop dégueulasse. Mais bon, on est débile, on a choisi d’écrire horizontalement (et en plus ça aurait pu donner plus de temps à l’encre de sécher pour les gauchers).

Personnellement, je trouvais ça déjà absurde il y a des années (comme je le dis, ça fait longtemps que j’utilise un thème stylus), ça aurait dû être fait dès le début. Après, j’imagine qu’il y a eu de longue discussion et que comme ici, il a fallut convaincre les personnes qui refusait ce changement (la FAQ semble aussi destiné aux membres de Wikipédia). Des rumeurs, dans les membres de wikipédia, il y aurait de sacrés têtes de mule. Le statu quo est alors la seule évolution possible.

Le changement d’interface, ça fait toujours râler les gens, facebook et twitter en font souvent l’exercice. De manière générale, faire changer les habitudes, c’est difficiles au point que parfois le changement ne peut venir que d’un nouveau projet.

(reply:1826698:Idiogène)

Ca existe, j’ai vu ça, soit tu te connectes et tu as une option pour, soit tu ajoutes ?useskin=skinnameà la fin de l’url en remplacer skinname par l’un des skins suivant :

• 0


• 1


• 2


• amethyst


• chick


• cologneblue


• modern


• monobook


• myskin


• nostalgia


• on


• simple


• standard


• vector

Ce que tu explique, c’est le principe de HTML+CSS, HTML, de la séparation de l’information structurée et sa mise en page.

Et dans cet article ?

Mais sinon, dans la FAQ:

wikipedia a dit:

In short, limiting the width of the content allows for better readability, less eye strain, and better retention of the information itself.

Tout d’abord ils expliquent qu’une largeur maximal pour le texte, c’est plus facile à lire, plus reposant, plus facile à retenir.

wikipedia a dit:

But what about all of the white space!?

We have heard from around 30 editors (particularly people with large screens) who are frustrated by all of the white space created on the sides of the page, though some of them agree that the width limitation is better for reading. There seem to be two main causes of this frustration:

The white space feels like wasted space
The white space is bright and distracting

Our goal is to create the best reading experience we can, not to fill every pixel of the screen with content. And in this case less is actually more — people are able to read more easily with shorter line lengths, and focus more easily without the distraction of sidebars or other elements. If the best layout is one that includes white space that is okay — there is nothing inherently wrong with white space.

Donc, en gros : oui, il font de l’espace blanc en toute conscience, c’est normal “il n’y a rien de mal en soi avec les espace blanc” (sic), c’est mieux de laisser du blanc que de mettre des informations distractives.

Additionally, as the project proceeds, we are hoping to begin utilizing some of this space for other functionality. We have started experimenting with making the sidebar sticky to the left side of the page (link to prototype). Further along in the project we plan to experiment with putting a table of contents and/or page tools next to the content. Also, as this contributor constructively suggests, limiting the content width gives us new options for content layout, such as a right-hand column dedicated to infoboxes and images.

Mais à coté, ils ont des idées et des propositions pour réorganiser le reste de la page et essayer d’utiliser cet espace (RDV dans 10ans avant toutes mise en oeuvre officielle).

Sinon l’exemple de la garde robe, ce qu’ils expliquent c’est que quand c’est mieux ranger, c’est vachement plus simple et agréable à utiliser. Il ne parle pas directement d’optimiser l’espace (le point 4 dit qu’il pourront s’adapter à l’espace, ce qu’il n’est pas exactement la même chose).

(reply:1826776:Trit’)

Le CSS présume d’une résolution te ton écran à 96ppp, je sais que des collègue ont des écran 2K en 13”, et que ça pose problème (le texte et illisible).

Mais après, le CSS permet de définir des règles différentes en fonction de la définition de l’écran (c’est la base du responsive design). Mais là a priori, tel que tu le décrit, ça semble plus être basé sur une taille de police défini en “vw” (Relative to 1% of the width of the viewport : en gros la taille de la police est dépendante de la largeur de la fenêtre).

Cependant, j’avais lu que certains considèrent que pour le confort de lecture, il faut éviter d’avoir à tourner la tête, seules les yeux doivent bouger, cette solution a aussi ses limites.

hein?!

Tu me demandais bien un article avec des images qui montre des prototype avec marges ? Cet article est la discussion autour du choix de la largeur du bloc de contenu et montre plein d’image de prototypes avec des marges.

Et si tu veux, en lisant un peu, tu as même une page prototype plus avancé d’un article avec le menu gauche enroulant. De la marge, là tu en as autant que tu veux.