Commentons la ZEP-04

Petit bug sur les responsive :

Lorsque l'on resize la fenêtre Chrome le responsive "sucre" deux contenus A la une au lieu de les mettre en colonne avec les autres ("Suivez Zds sur Twitter" et "Concentré de savoir")

Sur iOS (Safari mobile) la parti A la une ne fonctionne pas du tout :

Sur iOS (Safari mobile) la parti A la une ne fonctionne pas du tout :

Sous IE (Win8.1 GDDR2) ça marche impec, et puisqu'Andr0 n'a rien dit, j'ai tendance à penser que sur Android aussi.

Sur mobile c'est encore pire. Les articles ont perdu en visibilité pour le coup (il faut le vouloir pour les voir).

Si on a bidouillé des retouches sur la PA et fait des screens, on met où ces derniers ?

Sur la précédent page, on pouvait voir au premier coup d’œil les derniers articles/derniers tutos. Là pour le coup, il faut en vraiment y prêter attention pour les voir. C'est le seul point négatif que j'aurais à donner sur cette nouvelle page.

PS : Sur Androïd (Chrome), tout est nickel (il y a juste la partie gauche de la tête de Clem qui est coupée).

Sinon, j'apprécie grandement le travail effectué. Merci à tous ceux qui y ont participé !

Ici dans une balise secret pour ne pas que ça prenne trop de place ? Si vous ajoutez des screens de retouches, pouvez-vous dire ce que vous avez changé ?

Résolution : 1300*768 en gros.

+1 pour afficher les tags/catégories de la même façon que les articles !

Je ne trouve pas ça très joli. Par contre, je suis pour renforcer le floutage derrière le texte qui est actuellement un peu trop faible (je dois me concentrer beaucoup trop pour lire le texte) !

J'aime bien l'idée de mettre un lien mais je trouve que superposer les deux liens ça ne le fait pas. Je verrais bien le texte en haut et les deux liens côte à côte en dessous.

Je préfère quand les bordures des Unes sont blanches ! Par contre, je suis pour la petite bordure orange du fond bleu.

Je n'ai pas trop d'avis. C'est vrai qu'actuellement c'est un peu restreint mais comme ça on a plus de tutoriels d'affichés !

Comme haut dessus, je ne sais pas trop.

Je plussoie aussi, car ce n'est pas très utile pour un tutoriel (surtout quand il est dans la liste "Derniers tutoriels" et que les derniers articles/sujets ont des dates).

Comme je l'ai déjà dit, je suis pour la petite bordure orange du fond bleu.

Pour moi, les citation et les Unes sont assez grandes ! Concernant la barre de recherche, tant qu'on améliore le plus qu'on peut la recherche, je pense qu'il faut la laisser. Par contre, je ne suis pas contre diminuer un peu la place qu'elle prend !

1px ce n'est presque pas visible, je préfère 2px.

Comme je l'ai déjà dit, je suis contre car je préfère le blanc actuel !

Je plussoie aussi, car ce n'est pas très utile pour un tutoriel

La date est très importante pour montrer qu'il y a de l'activité récente sur la page d'accueil. Surtout dans les périodes où l'activité des articles n'est pas très importante.

C'est un problème qu'on a déjà eu.

Ouais mais actuellement, ça coince au niveau de la place ! Par contre, si l'on affiche les tags/catégories de la même façon que les articles, on aura plus le problème de place et on pourra alors afficher les dates…

Par contre, si l'on affiche les tags/catégories de la même façon que les articles, on aura plus le problème de place et on pourra alors afficher les dates…

Ha mais ça je suis d'accord depuis le 1er jour

Je rebondis juste vite fait sur les dates:

Les dates qui sont affichées, c'est un bug ! Elles sont la que pour le SEO, tout ça pour une question de place. Si les tags des tutoriels sont pas affichés comme pour le reste, c'est qu'on a pas la place horizontalement. Encore sur le premier tutoriel en full-size, OK, mais pas sur les petits. Maintenant, si c'est juste une question de "On veut montrer qu'on a du contenu récent", on peut l'afficher uniquement sur le premier élément

Bon, maintenant je vais reprendre les points de Vayel:

• Présenter les tutoriels comme les articles: Ils sont présentés comme ça pour plusieurs raisons. D'abord parce qu'on a le bloc en dessous qui bouffe une place, et afficher 3 tutos, c'est pas beaucoup ; ensuite pour que visuellement, on ait pas quelque chose de monotone, avec des listes qui se ressemblent un peu partout. Suffit de constater la tristesse des pages "tous les tutoriels/articles".
• Mettre un fond uni au texte des Unes: Ca, ça peut se faire, mais pas sous cette forme. Je proposerais un truc un de ces quatre, ca reste dans un coin de ma tête (juste pas d'environnement de dev sous la main…)
• Ajouter le lien vers la page d'aide aux auteurs: Question de place, non: ça nique complètement les marges. Mais je réfléchit à éventuellement caser un deuxième bloc du type, et les rendre modifiable/aléatoire par l'équipe de com'. Pareil, ça reste dans un coin de ma tête
• Changer la couleur du cadre des Unes et mettre une bordure en bas du header.: Euuh, non ? Je vois pas ce qui gène avec le cadre actuel, et ce que tu proposes ne rend pas super bien…
• Afficher les tutoriels en grands: cf. premier point
• Deux tutoriels en grands, deux en petits: Visuellement, ça se casse la gueule, encore plus que tous les tutos en grands
• Enlever les dates des tutoriels: Je ne peut que être d'accord avec toi, et comme dit: c'est un bug
• Mettre une bordure de 2px en bas du header: Je comprend vraiment pas l'intérêt de ce point, en plus du fait que je n'aime pas visuellement
• Diminuer les dimensions des éléments du header. Ici, j'ai enlevé la barre de recherche, mais ce n'est pas la question. Plutôt : la citation et les Unes sont-elles assez grandes ?: Y'a effectivement des choses à faire de ce côté la ; je me le note
• Mettre une bordure de 1px en bas du header: Pareil que pour la bordure de 2px
• Changer la couleur du cadre des Unes: Pas compris la différence avec un des point précédent…

C'est ce que je te disais en MP, Vayel: tu cherches à aller trop vite ! C'est mon boulot de proposer des changements visuels ; exprimez clairement vos besoins, voyez si c'est l'avis général ou juste une question de goût, et je ferais de mon mieux. Une remarque type "J'ai besoin d'air, il faut aérer" ou "J'aimerais voir le contenu plus tôt" m'aide 10x plus que des remarques type "il faudrait une bordure à cet endroit".

Pour le moment, ce que j'en tire du sujet (faut que je relise, je suis juste en vacances et pas trop la tête à ça), c'est moins de scroll, et remettre l'ancienne clem' (en plus de quelques bugfix à faire)

Voila, j'espère que je vous ai pas trop refroidi avec ces réponses, je suis vraiment à l'écoute de vos remarques, je vais essayer de les prendre en compte, d'y réfléchir, d'en débattre avec vous, mais je pense qu'exposer des idées en vrac sans énoncer réellement ce que l'on veut, ce n'est pas la bonne solution.

Sandhose

ensuite pour que visuellement, on ait pas quelque chose de monotone, avec des listes qui se ressemblent un peu partout. Suffit de constater la tristesse des pages "tous les tutoriels/articles".

Sauf que AMHA c'est déroutant pour les utilisateurs d'avoir des fois des tags sur le côté avec un fond gris (ou bleu pour le forum) et d'autres fois des tags en orange à côté de la date ! Pour ce qui est de la tristesse visuelle dû aux listes qui se ressemblent partout, je pense que c'est aux icônes des tutoriels/articles de corriger ça.

Je comprend vraiment pas l'intérêt de ce point

Il propose une modification pour rendre la page plus jolie. AMHA, ce genre de point a un intérêt.

C'est mon boulot de proposer des changements visuels

Euh, non ? Même si c'est toi qui a en très grand partie maquetté la nouvelle page d'accueil, pour moi la communauté devrait avoir le droits de proposer des changements visuels (c'est pour cela que la DevZone est ouverte et que l'on accepte les pull requests d'ailleurs) !

• Mettre une bordure de 2px en bas du header: Je comprend vraiment pas l'intérêt de ce point, en plus du fait que je n'aime pas visuellement

Simple expérience. Je préfère personnellement avec une bordure en bas.

C'est ce que je te disais en MP, Vayel: tu cherches à aller trop vite !

Et je n'ai toujours pas compris pourquoi. D'une part parce que si je vais trop vite c'est qu'il me faut attendre : mais quoi ? Et d'autre part parce que je ne fais rien d'autre que proposer des trucs, ce qui me semble avoir un nombre de conséquences néfastes assez limité.

C'est mon boulot de proposer des changements visuels

Autant pour moi. J'avais non seulement cru que c'était possible pour tout le monde, mais aussi que c'était beaucoup de travail pour une seule personne. C'est d'ailleurs pour cette raison qu'on n'a pas pu s'attarder sur les détails lors de la première version de cette ZEP-04 et qu'un tel sujet a été ouvert.

Je double-poste pour dire que je trouve que l'actuelle page d'accueil est bien mieux que la précédente, mon précédent message pourrait en faire douter. Et encore merci à tous ceux qui s'y sont impliqués !

Mon précédent message n'est là que pour essayer de faire encore mieux.

Alors, d'abord par rapport au message de Vayel:

C'est mon boulot de proposer des changements visuels

Autant pour moi. J'avais non seulement cru que c'était possible pour tout le monde, mais aussi que c'était beaucoup de travail pour une seule personne. C'est d'ailleurs pour cette raison qu'on n'a pas pu s'attarder sur les détails lors de la première version de cette ZEP-04 et qu'un tel sujet a été ouvert.

C'est vrai que c'était pas la meilleure formulation pour dire ce que je pensais. Ce que je voulais dire, c'est qu'avec des instructions claires, on est capable de faire des choses sympa ; si j'apprécie ton investissement dans l'amélioration de la page d'accueil, sache qu'il y a une équipe derrière qui est capable de réaliser ce que vous demandez. Il faut juste que vos demandes soient claires.

Et je n'ai toujours pas compris pourquoi. D'une part parce que si je vais trop vite c'est qu'il me faut attendre : mais quoi ? Et d'autre part parce que je ne fais rien d'autre que proposer des trucs, ce qui me semble avoir un nombre de conséquences néfastes assez limité.

Je le dis pour toi. Tu te lances dans de grands travaux, tu construits des murs sans avoir clairement défini les plans. C'est sympa, on a des screen a l'appui pour visualiser les idées, mais je pense réellement qu'il y a d'autres moyens de faire avancer le sujet, et que de discuter et d'essayer des trucs ensemble en live sur IRC une fois que toutes les demandes et idées seront clairement formulées, ça ira mieux. J'ai pas envie, et je pense que je ne suis pas le seul, de revivre le sujet de la ZEP4, où plein de gens (certes, avec de bonnes intentions) balançaient leurs idées en vrac.

Mettre une bordure de 2px en bas du header: Je comprend vraiment pas l'intérêt de ce point, en plus du fait que je n'aime pas visuellement

Simple expérience. Je préfère personnellement avec une bordure en bas.

En fait ce qui me dérange avec ce genre de point, c'est que tu mélanges des détails visuels avec des propositions plus générales et potentiellement intéressantes. J'ai l'impression d'avoir ici des propositions qui sont juste la… pour faire des propositions ! Je le répète encore une fois, c'est cool le temps que tu investis dans cette page, mais tu passes vraiment trop de temps sur des détails que l'on pourra régler en un coup rapidement ensemble sur IRC, plutôt qu'au travers d'une multitude de messages interposés qui ne sont que des expressions d'avis personnels. Les goûts et les couleurs, toussa toussa…

Ensuite, le message de Situphen:

Euh, non ? Même si c'est toi qui a en très grand partie maquetté la nouvelle page d'accueil, pour moi la communauté devrait avoir le droits de proposer des changements visuels (c'est pour cela que la DevZone est ouverte et que l'on accepte les pull requests d'ailleurs) !

Comme dit plus haut, je suis désolé pour la formulation maladroite, je t'ai pas oublié Situphen, et encore moins les autres contributeurs <3

Sauf que AMHA c'est déroutant pour les utilisateurs d'avoir des fois des tags sur le côté avec un fond gris (ou bleu pour le forum) et d'autres fois des tags en orange à côté de la date ! Pour ce qui est de la tristesse visuelle dû aux listes qui se ressemblent partout, je pense que c'est aux icônes des tutoriels/articles de corriger ça.

J'ai du mal avec ce concept de tout uniformiser, simplement parce qu'il ne s'agit pas du même type de contenu. Je veux bien qu'on cherche à uniformiser au niveau visuel, mais le problème est que ces tags ne veulent pas dire la même chose partout. Je pense que lorsque l'on sera capable d'avoir tous les contenus relatifs à l'électronique lorsqu'on clique sur le tag Electronique, qu'il vienne du forum, des tutos ou des articles, avoir quelque chose d'uniforme partout aurait plus de sens, parce qu'en cliquant sur le même élément visuel sur une page, l'utilisateur retrouverait vraiment tout le contenu relatif au tag.

Okaaay, je viens de voir le message de SpaceFox qui est arrivé entre temps, et il m'a l'air intéressant ; voyons voir:

L'ordre pour l'organisation de l'accueil me titille un peu. Je suis d'accord avec les trois premiers points, mais j'aurais tendance à inverser les deux derniers éléments, simplement parce que je pense que le "routage" vers le forum dépend énormément des habitudes de l'utilisateur, et aura du mal a se faire sur la page d'accueil. Je veux dire que bien que les quelques sujets "hot" du moment peuvent éventuellement m'intéresser, si je vais sur le forum, c'est pour aller dans les sections qui m'intéressent. Je pense qu'au moins les derniers articles devraient passer avant le forum.

Le principal problème dans tout ça, c'est qu'on a aucun moyen de retrouver nos contenus facilement.

Je ne peux qu'être d'accords avec toi. Compliqué a régler cependant. Je pense que les unes et la mise en avant de la recherche sont déjà de bonnes amélioration de ce côté la, mais ça reste pas suffisent. Si la ZEP concernant les tags abouti, pourquoi ne pas mettre en avant ces tags plutôt que de mettre en avant le contenu récent ? Avoir un tagcloud, ou une liste des catégories/tags les plus présents sur le site. Je pense par exemple au site de Grafikart, qui propose sous les derniers tutoriels quelques languages avec plusieurs tutoriels, où en cliquant dessus, on a les tutoriels à ce propos, classés par difficulté croissante. Pour moi, je pense que l'on aurait intérêt à supprimer quelques éléments de la liste "derniers tutoriels" pour rajouter à la place un système du genre. Et le clic vers un de ces "tag" n'afficherait pas que les tutoriels à ce propos, mais aussi les articles et les posts de forum.

Ensuite, pour le point sur la ligne de flotaison, j'ai l'impression que c'est ce qu'on a à peu près aujourd'hui. Après, effectivement, on peut essayer de réduire quelques marges comme ça a été réclamé par un certain nombre, histoire d'avoir du contenu plus vite. Mais faut avoir en tête qu'on aura jamais tout le contenu intéressant sans avoir a scroll sur de si petits écrans.

on peut aérer notre page d'accueil en commençant par une astuce ultra-simple : élargir la taille du contenu.

La, c'est plus compliqué. Si l'on augmente juste les marges pour aérer le contenu, on va forcément augmenter globalement la taille en hauteur. Si on augmente la taille des contenus, on va avoir des lignes de 3km, pas agréables à lire. Si on répartie sur plus de colonnes, ça va pas être agréable à lire, puisqu'on ne saura pas "par ou commencer", et ni dans quel sens. En plus, je pense que garder l'attention centré sur la page, et pas éparpillé sur tout l'écran, c'est peut-être mieux comme ça. Après, je n'exclue pas, loin de la, le fait d'élargir la page ; je ferais quelques tests, mais c'est juste pour dire que ça peut pas forcément bien rendre, et que c'est pas aussi facile que ca peut paraitre…

Je passe sur le dernier point, parce que ça serait juste pour dire en gros "je suis d'accord".

PS : Ce que je ferais dans un premier temps pour améliorer la page d'accueil sans se prendre la tête en développements compliqués :

1. Présenter les tutos comme les articles. En particulier parce que sur les articles, il y a un beau lien vers les tags sur les articles, qui manque complètement sur les tutos. PPS et le sous-titre.

J'ai déjà parlé de cette proposition plus haut, mais c'est je pense essentiellement un problème de place.

1. 5 lignes de tutos / 4 articles. Le bloc bleu de rédactions serait légèrement modifié pour afficher le nombre d'articles aussi et un bouton pour rédiger un article en plus du tuto, et irait dans la colonne des articles

Pas sûr d'avoir totalement compris celui la…

1. Simplifier le blabla sur l'accueil déconnecté

Gros +1, avoir comment on présente ça

1. Simplifier les dates, de "Mercredi 01 juillet 2015 à 13h57" en "01 jui. 2015" ou "01/07/2015". Parce qu'on se fout du jour de la semaine ou de l'heure, en réalité.

Oui, et pas compliqué à faire.

Voila, enfin fini mon pavé, j'ai pas totalement relu, je m'excuse pour les éventuelles fautes ; encore une fois désolé de m'être mal exprimé sur le message précédent, j'ai écrit ce message un peu trop rapidement…

Sandhose

Un point de détail dans le paragraphe par ailleurs pertinent sur la difficulté de trouver un tuto :

Avoir un tagcloud

On a arrêté de faire des nuages de tag, parce qu'on s'est aperçu que c'était inutilisable et que donc personne ne cliquait dessus.

Ensuite, pour le point sur la ligne de flotaison, j'ai l'impression que c'est ce qu'on a à peu près aujourd'hui. […] Mais faut avoir en tête qu'on aura jamais tout le contenu intéressant sans avoir a scroll sur de si petits écrans.

Oui, c'était là où je voulais en venir.

Si l'on augmente juste les marges pour aérer le contenu, on va forcément augmenter globalement la taille en hauteur. Si on augmente la taille des contenus, on va avoir des lignes de 3km, pas agréables à lire. Si on répartie sur plus de colonnes, ça va pas être agréable à lire, puisqu'on ne saura pas "par ou commencer", et ni dans quel sens.

Pour commencer, un truc pas clair dans mon message : je ne parle que de la page d'accueil. Le reste du site a un contenu en 960px de large + la colonne latérale, et c'est très bien niveau longueur de ligne.

Ensuite, j'ai fait des tests rapides, si on limite la largeur à ~1300 px, on peut rester avec 2 colonne sur l'accueil mais plus aérées.

J'ai du mal avec ce concept de tout uniformiser, simplement parce qu'il ne s'agit pas du même type de contenu. Je veux bien qu'on cherche à uniformiser au niveau visuel, mais le problème est que ces tags ne veulent pas dire la même chose partout.

D'accord, mais en affichant les tutos comme des articles sur l'accueil (modulo le nombre de commentaires de mon point de vue), on peut avoir des liens vers les tags des tutos sur les blocs des tutos. Et rien que ça de mon point de vue c'est un gros progrès.

5 lignes de tutos / 4 articles. Le bloc bleu de rédactions serait légèrement modifié pour afficher le nombre d'articles aussi et un bouton pour rédiger un article en plus du tuto, et irait dans la colonne des articles

Exemple :

Actuel =

1
2
3
4
5
6
7
8
9

+-------------+-------------+
|    Tuto     |   Article   |
+------+------+-------------+
| Tuto | Tuto |   Article   |
+------+------+-------------+
| Tuto | Tuto |   Article   |
+------+------+-------------+
| Écrire tuto |   Article   |
+-------------+-------------+

Proposition =

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

+-------------+-------------+
|    Tuto     |   Article   |
+-------------+-------------+
|    Tuto     |   Article   |
+-------------+-------------+
|    Tuto     |   Article   |
+-------------+-------------+
|    Tuto     |   Article   |
+-------------+-------------+
|    Tuto     |    Écrire   |
+-------------+-------------+

J'ai du mal avec ce concept de tout uniformiser, simplement parce qu'il ne s'agit pas du même type de contenu. Je veux bien qu'on cherche à uniformiser au niveau visuel, mais le problème est que ces tags ne veulent pas dire la même chose partout.

D'accord, mais en affichant les tutos comme des articles sur l'accueil (modulo le nombre de commentaires de mon point de vue), on peut avoir des liens vers les tags des tutos sur les blocs des tutos. Et rien que ça de mon point de vue c'est un gros progrès.

5 lignes de tutos / 4 articles. Le bloc bleu de rédactions serait légèrement modifié pour afficher le nombre d'articles aussi et un bouton pour rédiger un article en plus du tuto, et irait dans la colonne des articles

Exemple :

Actuel =

1 2 3 4 5 6 7 8 9

+-------------+-------------+ | Tuto | Article | +------+------+-------------+ | Tuto | Tuto | Article | +------+------+-------------+ | Tuto | Tuto | Article | +------+------+-------------+ | Écrire tuto | Article | +-------------+-------------+

Proposition =

1 2 3 4 5 6 7 8 9 10 11

+-------------+-------------+ | Tuto | Article | +-------------+-------------+ | Tuto | Article | +-------------+-------------+ | Tuto | Article | +-------------+-------------+ | Tuto | Article | +-------------+-------------+ | Tuto | Écrire | +-------------+-------------+

Gros +10000 pour ces deux points !

Pour le dernier point (celui de la representation des listes de tutos) je suis totalement d'accord avec Spacefox -d'un point de vue purement utilisateur( j'ai en aucun cas la capacité de me projeté de maniere plus global). En fait je me suis rendu compte que mon cerveau sautait cette partie (la ou il y a deux tutos à coté). J'ai pas compris si tu voulais garder le ecrire un tuto (j'suis un peu crevé et j'ai pas compris la totalité du lien entre le schema et le texte …) ça me semble important juste pour je bloque de couleur qui permet de fixer l'oeil quelque part (peut etre aussi la faute aux icones de tutos qui se resume à du fond blanc ?) Sinon quitte à splitter, autant le faire sur la derniere ligne au dessus de "ecrire un tuto" en 4 et mettre quatre icones de catégories (aleatoire ou non) (remplacerait judicieusement le tagcloud inexploitable)

La page est mieux que la précédente, mais je pense que l'information importante n'est pas visible au premier coup d’œil pour quelqu'un qui découvre le site. Plus on va à l'essentiel, plus le visiteur sera intéressé.

Voici quelques idées.

Sur Desktop, ajouter un encart à gauche (sous le logo du site) avec la liste des thèmes de tutoriels, voire quelques tutoriels phares. Ça permet tout de suite de connaître le contenu disponible. Le lecteur peut se dire, "tiens, il y a des tutoriels sur tel sujet que je ne connais pas". Il n'y pensera peut-être pas de lui-même avec la barre de recherche. Et ça serait plus clair que la liste interminable de l'onglet Tutoriels en haut (sans forcément s'y substituer).

Ça impliquerait de déplacer un peu vers la droite le contenu actuellement centré, qui n'occupe de toute façon pas tout l'espace. Et ce serait visible sans scroller.

Le texte d'accueil est trop petit et chargé. Les titres "derniers tutoriels et articles" ne sont pas visibles sans scroller, alors qu'ils peuvent inciter à descendre plus bas. Celui qui découvre le site ne voit quasiment pas de contenu au premier coup d’œil, à part le contenu "à la une".

Il faudrait à minima mettre en gras les trois valeurs du site (qui sont moins visibles que leurs descriptions), et le reste pourrait être masqué par un bouton "en savoir plus", ce qui permettrait de gagner de la place en hauteur. Le bouton "en savoir plus" pourrait être un spoiler ou un lien vers une autre page.

Finalement, ça occuperait le même espace que la citation du mode connecté.

La barre de recherche et le "à la une" sont trop gros. Un bon objectif serait d'avoir le "à la une" au milieu de la page en terme de hauteur. Il y a sans doute moyen de rogner aussi sur la barre tout en haut pour gagner de la place.

Pour les tutos/articles, certains contenus sont moins importants et contribuent à charger la page. Notamment pour les dates : peu importe si le 6 juin était un samedi, peu importe si le tuto a été validé à 13h57.

Il serait plus concis de mettre : "il y a <X> secondes/minutes/heures" (ou simplement "Aujourd'hui"), puis "Hier", puis "il y a <X> jours" (ou "Mardi"), puis "<jour> <mois> <année>".

Pour les tutoriels, j'approuve l'idée de présenter les tags comme les articles, ils seront plus visibles (et on supprime au passage le mot "dans").