Suggestion sur ton design

[Romarain]

Salut Korben,

Je viens de découvrir la nouvelle version de ton site, et je voudrais te faire part de mes sentiments.

Je n’ai rien contre le design en lui-même, j’adore l’esprit cartoon, et je pense que revenir à un peu de fantaisie ne fait pas de mal. Donc la charte graphique, les couleurs, la volonté de faire des aplats, ne me dérangent pas.

Par contre, un gros soucis sur mon écran en 1366 px est que tout est GRAAAAND !
La page en elle-même est comprimée sur la gauche, et à droite, un espace accueille les side-infos (mot que je viens d’inventer, n’en ayant pas d’autre ><) : sauf que ça rend la lecture complètement étrange.

Alors je sais qu’on est parfois obligé d’asymétriser les choses, et que par exemple là il aurait fallut, pour recentrer la page, créer des side-bars/side-panels de chaque côté. Je peux comprendre la volonté de n’avoir qu’une sidebar, mais pas de pousser ainsi la page contre un bord.

Ensuite, et c’est la continuité du problème, tout est aéré au maximum, jusqu’au paroxysme. Ca, c’est un gros problème du flat-design qui m’a fait réagir il y a 8 ans quand ça a déboulé en masse, et que tout le monde s’est amusé à violer les normes de l’imprimerie, de la mise en page et de la lisibilité qu’on avait mis des centaines d’années à perfectionner.
Et de perfectionnement des pages webs en perfectionnement, qui ont pris environs une vingtaine d’année avec une évolution intéressante pour caser un maximum de choses dans un espace réduit sans que ça soit nawak, on est reparti dans le sens inverse et on en est arrivé à ce genre de déboires dont plus personne ne semble se soucier.

Je pense qu’il y a moyen de faire aéré, sans atteindre le paroxysme. Encore une fois, je suis sur un écran 1366 : je peux comprendre que je sois le fautif (quoi que…), mais bon, éprouver l’impression d’être sur une TV 50 pouces réduite dans un mouchoir de poche, c’est la twilight zone ! Scroller dans la page me montre bien cet effet “über-large” amené par la mode du flat-design, avec des bandeau de 250px de haut, etc. Le genre de truc que je fuis, en temps normal. Mais là j’suis sur un des meilleurs sites de la toile : pas possible de fuir. Même le footer est fat, il prend tout la hauteur ! Mais là par contre on peut approuver l’idée, car elle créé un effet cool : le footer devient une sorte de page en lui-même, un énorme panneau publicitaire. Je suis pas contre. En revanche, pour le reste, la page, il faudrait voir à affiner en hauteur.

Aérer, pourquoi pas dans le contexte d’un “flat-design” ; mais il va être temps que ce flat-design reprenne un peu ses esprits et ne soit plus du “fat” ^^. Alors est-ce que c’est moi qui fait mon grincheux parce que j’ai un laptop de merde ? Ou est-ce que j’ai un début de raison ?

J’apprécie ton contenu, et j’espère que tu apprécies la critique.

Un korbenaute.

_Edit : _
Juste une note pour dire qu’en dézoomant à 67% la page, je réobtiens un truc potable niveau bandeaux/images, même si le texte mérite d’être ré-agrandi. Donc il y a peut-être un truc à creuser dans ce sens !

[Romarain]

Ok, un pote à moi qui est un ninja du CSS m’a conseillé de changer un truc dans l’inspecteur de DOM de mon navigateur.

Et après quelques tests persos, j’ai réussi à obtenir un truc potable avec Stylish (une extension Chrome qui permet d’overlay le CSS d’un site). Essaie ça sur une media-query adaptée aux 1366 (ou inférieur à 1440) :

.blog .app-main, .single .app-main {
    max-width: 65%;
    position: relative;
    left: 10%;
} 
.app-container > .app-aside {
   max-width: 252px;
   position: relative;
   left: auto;
   right: -65px;
}
.entry-container {
    max-width: 82%;
}
.widget-discover * {
	font-size: 125%;
}
.widget-action .lead {
    width: 90%;
}

Sans casser le reste de ton design, ça recentre déjà un peu les choses
(par contre il faut faire les tests nécessaires pour vérifier que ça soit responsive dans les definitions d’écrans inférieures. Là je viens de raccourcir la fenêtre, le position: absolute/relative ne fonctionne plus par exemple.)

[prozacd70]

**Idem…**il y a plus de blanc que de texte sur mon 29 "

[LeoColomb]

Merci pour ces retours @Romarain et @prozacd70 !

Puis-je vous demander des captures d’écran pour visualiser vos remarques ? Thx !

–
J’ai déplacé la discussion dans la catégorie dédiée aux retours.

[Romarain]

Pour les screenshots je vais uploader en pièce jointe, mais sans garantie que ça soit parlant.
Par contre, il suffit d’installer l’extension de navigateur dont j’ai parlé pour visualiser directement le résultat :
Lien vers l’extension dans le WebStore de Chrome

Ensuite il suffit de :

1. Cliquer sur l’icône de l’extension, puis sur les trois points verticaux (menu) du popup qui s’ouvre
2. Cliquer sur « Créer nvo style »
3. Coller dans la zone d’édition le contenu de ce que j’ai mis en code dans mon précédent message.
4. Juste en dessous, choisir « URL sur le domaine » dans le menu déroulant, et indiquer « korben.info ».
5. Donner un nom au style en haut à gauche.
6. Cliquer sur « enregistrer ».
7. Rafraîchir la page.

AVANT :

[Romarain]

APRES :

[LeoColomb]

Merci beaucoup pour ces captures @Romarain !

Malheureusement les modifications proposées ne semblent pas justifiées par rapport au travail de design qui a été réalisé dans cette refonte : l’article est bien placé, la longueur de ligne est correcte et les proportions relatives correspondent à celles attendues.

Une fois les modifications appliquées je constate, qu’en plus de travail du designer compétent, mon travail de développeur est détérioré, avec la perte de certaines marges et le forçage arbitraire de dimensions spécifiques.

Bref, pour faire simple, je ne peux valider ces propositions en tant que telles.
En revanche on en tiendra compte bien sûr dans une éventuelle revue de notre travail sur cette version.

Merci encore pour ces retours !

[Romarain]

Alors, c’est marrant, à partir du moment où j’ai vu que vous demandiez des screenshots au lieu de faire le travail par vous-même d’installer une extension, j’ai compris que vous étiez de mauvaise foi et aviez un problème à avouer que le travail de CSS était un désastre. Mais bon, j’ai joué le jeu.

Avant de continuer, je dois dire que je suis développeur web, que j’ai un ami ayant une douzaine d’année d’expérience dans le milieu, et lui aussi a trouvé qu’il y avait un gros problème de positioning/margin/padding avec le design actuel de korben.info. Mais bon, on est tous des noobs, hein ?

C’est parti pour l’analyse de ce que vous dites avec le plus de flegme possible :

Malheureusement les modifications proposées ne semblent pas justifiées par rapport au travail de design qui a été réalisé dans cette refonte

Vous commencez par vous défendre avec cette conclusion qui indique un manque, une lacune dans ma proposition, sauf que… vous ne critiquez pas ladite proposition que j’ai faite, mais ré-embrayez directement sur la qualité suffisante de VOTRE design :

l’article est bien placé, la longueur de ligne est correcte et les proportions relatives correspondent à celles attendues.

Celà s’appelle du sophisme. Vous répétez ! C’est bien, sauf que quelqu’un vous a dit que non, en vous expliquant des choses par écrit, et qu’on vous a montré des photos, et qu’on vous a donné du code CSS à tester ! Donc pas la peine de répondre “ça n’est pas parce que vous dites non que…”. Faux : je n’ai pas seulement dit non, j’ai apporté des arguments !

Et qu’est-ce que ces trois choses vous montrent ? Elles vous montrent que votre page n’est pas aérée, que tout est casé comme un vulgaire jeu de Tétris dont le seul but est de remplir tout l’espace disponible, en serrant la page à gauche. C’est bien pour de la tablette et du design “masonry”, mais pas pour de l’écran. Or moi, je vous apporte un centrage de la page, c’est à dire une marge à gauche, une marge à droite, et un léger décalage du fil central vers la gauche pour permettre une sidebar à droite !

Alors oui, cette side-bar a désormais un problème de padding dans ses éléments, mais ça, ça se règle : il suffit de modifier ledit padding ! Vous ne croyez quand même pas que je vais faire le boulot à votre place ? Vous pensiez qu’on allait passer une journée à caler une modif CSS ? On est payé ? Non. Donc vous avez l’idée générale, à vous de voir son propos sans chipoter maladroitement sur des détails. Mais de là à parler de “détériorer votre travail”, c’est vraiment abusif.

De plus, réexaminons votre phrase :

l’article est bien placé, la longueur de ligne est correcte et les proportions relatives correspondent à celles attendues.

Oui, c’est évident que les choses dans votre CSS sont celles qui étaient attendues. ^^ Puisque c’est vous qui avez fait le CSS d’origine ! (aaaah, sophisme !)

Une fois les modifications appliquées je constate, qu’en plus de travail du designer compétent, mon travail de développeur est détérioré

Ca respire l’humilité dites-donc ! Donc on a détérioré votre travail compétent, donc on est… incompétent ! Moi je pense surtout que vous êtes incompétent et que vous n’auriez pas envie que je prenne votre place et soit engagé par Korben pour soigner son design et le rendre responsive sur toutes les machines plutôt que seulement à destination de tablettes. N’essayez même pas d’effacer ce fil de discussion, il sera copié ; donc renvoyé à l’intéressé si vous en venez à cette extrémité.

avec la perte de certaines marges et le forçage arbitraire de dimensions spécifiques.

Il n’y avait aucune marge dans votre travail : tout prenait toute la place disponible. Comme des tuiles, prenant toute la largeur de l’écran. Le forçage de dimensions spécifiques ? Oui, on fait ça en CSS, ça s’appelle du sizing. Mais je vois pourquoi vous dites ça : parce que vous croyez qu’il faut mettre du max-width: none (j’ai bien rigolé en voyant ça !) partout afin de rendre responsive ? Ca, c’est de l’incompétence…

Bref, pour faire simple, je ne peux valider ces propositions en tant que telles.

Vous pouvez très bien les améliorer, en commençant déjà par les tester plutôt que de bloquer sur un malheureux screenshot. Je vous avais bien précisé qu’on ne verrait rien sur une image : car il faut pouvoir scroller, et sentir la page.

En revanche on en tiendra compte bien sûr dans une éventuelle revue de notre travail sur cette version.
Merci encore pour ces retours !

Avec le petit smiley rieur, on a de quoi douter de votre honnêteté et de votre intérêt sur la question. Continuez à nier, moi, en tant que développeur et internaute, je ne vais pas m’empêcher d’utiliser STYLISH pour recentrer votre design catastrophique et rattraper de la lisibilité. Maintenant si vous voulez vous voiler la face, sachez que cette extension a été inventé pour ça !

[Romarain]

Si vous souhaitez une vidéo, j’en ai fait une de 3mn (~29mo) avec explications sur les problèmes du design de base sur du 1366, et sur le gain du recentrage que je propose (pas que j’impose ; vous êtes libre de voir des défauts dans ma proposition et de l’améliorer, ou de l’ignorer mais alors n’en parlons plus). https://www.dropbox.com/s/nct8eb29k5x61cm/Vidéo%20sur%20une%20idée%20possible%20de%20recentrage%20du%20design.mp4?dl=0

En ce qui me concerne, le sujet est clos, je n’ai pas que ça à faire.

[Korben]

Hello

j’ai regardé ta vidéo et ton point de vue est intéressant. Le site a été conçu en responsive, donc adapté aux tablettes, mobiles et écran. Je suis sur un grand écran aussi donc oui j’ai aussi le même rendu que toi à l’origine mais ça ne me choque pas. Après tu vas me dire, les goûts et les couleurs…etc

Même si je ne l’utiliserai pas, bravo pour ton style Stylish, ça pourra servir à d’autres qui sont aussi sur grand écran et qui pensent la même chose que toi.
Je vais quand même transmettre ta vidéo à mon frangin qui a fait le design pour voir ce qu’il en pense.

Passe une excellente soirée et encore merci pour ton retour et d’avoir pris le temps de faire une vidéo explicative.

K.

[Romarain]

Merci à vous messire, à toi Korben, pour ta gentillesse et ton esprit.

[Seagram]

Bonsoir,

Perso je viens de débarquer sur le nouveau forum, et la mise en page ne m’a pas choqué. Peut-être parce que les remarques ont déjà été prises en compte ?

Mais le débat ci-dessus m’a fait penser à ma première utilisation de outlook.com, où j’ai trouvé effectivement que M$ avait abusé de l’aération, avec toutes les fonctions assurées par des icônes aux couleurs acidulés et des libellés très lisibles … perdus dans de grands rectangles blancs.

Au final, dans la partie dédiée à l’affichage des messages présents dans la BAL, il y avait 5-6 messages au maximum, sur un écran de belle taille. Comparé à mon Thunderbird, certes un peu compact et tassé, mais qui utilise efficacement l’espace disponible, quel gaspillage !

Moi qui ai démarré il y a plus de 30 ans sur des écrans cathodiques 12" en vert/noir ou ambre/noir avec 25 lignes de 80 caractères, et qui ai bien apprécié de passer à de grandes résolutions avec du graphisme et 16 millions de couleurs, quand je vois comment le style de mise en page à la mode ne tire PAS parti de mon écran plat 24", ça me fait mal au porte-monnaie ! Finalement, on pourrait afficher pareil avec un écran CGA (pour ceux qui connaissent - et oui, j’exagère un peu).

Et comme disait Romarain pour commencer, c’est tout le travail d’experts en mise en page accumulé depuis 6 siècles d’imprimerie qui part à la benne avec le “flat design”. Les prétendus “ergonomes” supposés experts en “user experience” sont en fait des bousilleurs de première.

Quand Microsoft a annoncé Windows 10 et que ce serait le même OS pour tous les dispositifs, je trouvais ça malin. Mais je ne m’attendais pas à avoir sur mon PC de bureau un affichage de tablette pour Mamie-la-newbie, ni de me voir proposer des fonctions d’écran tactile sur mon écran normal, ou des notifications pour activer les fonctions téléphoniques de la ligne 4G qui n’y est pas … Le délire ultime en matière d’affichage “One size fits all”, c’est quand j’ai vu dans un salon un écran de 4m de diagonale où Windows 10 affichait glorieusement 8 tuiles en tout et pour tout ! Ca m’a rappelé ma déception la première fois que j’ai installé Windows 1.0 sur mon 8086, et que tout ce que j’ai réussi à faire c’était afficher Notepad sur la moitié supérieure de l’écran et Clock sur la moitié inférieure. L’écran des Macintosh de l’époque était 4 fois moins grand, mais les fenêtres pouvaient se superposer, se déplacer ou se réduire, et c’était utilisable.

Une autre manie récente exaspérante consiste à cacher les éléments graphiques nécessaires aux interactions. Typiquement dans Windows 10, dans les écrans de “Paramètres”, les ascenseurs souvent présents à droite de la fenêtre sont invisibles tant qu’on ne les a pas survolé. Moi, depuis le temps, je suis habitué à m’adapter à tous les revirements et changements de mode en matière de conception d’IHM graphique, mais quand je dois expliquer à ma mère au téléphone comment procéder, je m’arrache les cheveux. Déjà, quand les objets graphiques étaient toujours visibles et à la même place, il fallait expliquer trois fois, maintenant il faut l’encourager à essayer d’aller faire apparaître les bidules cachés, et non Maman, tu ne vas rien casser …

Je rapproche ces nouvelles tendances horripilantes de l’arrivée sur le marché de jQuery et consorts, qui ont permis aux “Web designers” de se lâcher et de réaliser toutes les c…neries que le marketing leur demandait de faire, des boutons qui font “pouet”, des zones qui apparaissent ou disparaissent en accordéon après 3 saltos, et des vidéos de pub qui s’imposent un peu partout sans qu’on ait rien demandé. Perso j’ai arrêté de lire la presse en ligne : dès que je commence à lire un paragraphe, il se fend en deux pour me proposer d’acheter ma 57ème berline “Deutsche qualität” de la semaine, et je perds le fil. Ca ne m’arrive pas avec du papier !

Il paraît que c’est “innovant” et “disruptif”, mais ça met surtout l’utilisateur de base dans une situation de panique totale, car plus rien n’est jamais à la même place. Alors que IBM avait fait un super travail avec la norme CUA (Common User Interface), qui assurait (et assure encore) des IHM graphiques structurées, organisées et stables ! Dans le domaine des applications professionnelles, la plupart des acteurs sont compétents et responsables et ne jouent pas avec ça. Mais pour le grand public, pas de limite ! Sous prétexte d’être “créatif”, “fun” ou de vous attirer pour “être votre ami”, yolo !!!

De toute façon, l’objectif ultime, c’est une mise en page “flat design” hyper épurée avec un seul gros bouton jaune au milieu de l’écran, vous savez, vous le connaissez tous : “Buy in one click” ! Achetez, n’importe quoi, n’importe quand, mais le plus vite possible et sans réfléchir … Le marketing a pris le pouvoir …

Allez, bonne nuit à tout le monde !

[Romarain]

Merci Seagram pour cette analyse que j’ai énormément appréciée pour tout ses petits détails. L’anecdote de la TV de 4m, de Windows 1.0, ou des interfaces fantômes à pousser mamie dans les orties m’a fait plaisir à lire, car c’est bien ce que je ressens. Et effectivement, les technos telles que le javascript ou le FLASH ont apporté pas mal de saloperies, quoi que ça se soit calmé depuis quelques temps quand même. Aujourd’hui, Javascript/AJAX est d’une utilité absolue (quoi qu’un bon vieux HTML/CSS déboite toujours bien), et un CMS comme GRAV, que j’adore par dessus tout pour son ergonomie aux petits oignons et ses fonctionnalités GUI dynamiques (je ne suis pas assez vieux pour dire “IHM” ), ne pourrait pas exister sans cette évolution. Mais clairement, tout ce que tu dis sur la vieille période du web est vrai, et la relation entre cette tyrannie du “nouveau pour faire du nouveau” et l’état actuel du Flat-design est réelle.
En somme, c’est du bon lâchage. ^^. Le “buy in one click” m’a bien fait marrer, et merci pour la norme CUA, je connaissais pas ! Ca peut faire une bonne base pour calmer les petits marioles qui nous prennent pour des vieux cons.

[Romarain]

Il paraît que c’est “innovant” et “disruptif”, mais ça met surtout l’utilisateur de base dans une situation de panique totale

Ca, clairement, c’est du poison neurotoxique. Faut plus s’étonner que tout le monde ait un problème d’attention aujourd’hui, et que les débats à l’Assemblée Nationales soient du niveau d’un plateau de télévision. J’suis pas pour un “retour au papier” (c’est un choix personnel), mais pour des normes niveau numérique afin de rétablir un niveau de confort visuel sur des sites importants et publics. Cependant des applis comme Google Kiosque jouent le jeu et respectent l’oeil de l’utilisateur ; d’ailleurs dans l’ensemble, les journaux en version mobile sont moins bombardés, et les pubs (ndr : affreuses, soit dit en passant) sont ramenées en bas de page.

[artemia]

+1 :Sur une tablette , ça doit être genial, mais sur un PC desktop, ça rend en mode loupe. as tu la possibilité de retrouver la densité de l’ancien site pour les nav de desktop?

[LeoColomb]

Merci beaucoup pour vos retours !
La discussion est intéressante et vos remarques pertinentes, et le tout a été transmis par @Korben au designer de cette nouvelle version.

Nous allons discuter ensemble pour voir ce qui est réalisable de ce côté.
Merci encore pour vos commentaires !