ZEP-04 : Nouvelle page d'accueil !

Parce que celle en place est très brouillon

a marqué ce sujet comme résolu.

Petite update, j'ai rajouté les tags sur les topics et les articles, et rajouté le "0" dans les bulles sur les articles sans réactions

Le résultat live toujours dispo ici

Le gros du boulot qu'il reste a faire, c'est toute l'adaptation mobile, qui est juste… Pas faite pour le moment :-°

EDIT: pour la date au survol, je peux éventuellement l'afficher en tooltip sur les méta (le texte orange), en plus de la rajouter à la suite quand il y a la place (donc sur le premier élément, et sur tous les éléments sur mobile)

+4 -0

Hep, MaxRoyo, il y aurai moyen que tu refasse une image de Clem' avec le "elle, c'est clem'" un peu plus grand ? Je pense que ça donnerais mieux :)

pierre_24

+1

J'aime aussi beaucoup. Bon boulot Sandhose ! :)

+1 -0

Aww, vous allez me faire rougir :honte:

C'est vrai, tu pourrait mettre des vignettes de tutos et d'articles s'il te plaît Sandhose ?

C'est fait ! Au passage, vous pouvez un peu jouer avec les tutos/articles, puisque vous avez un accès staff sur mon instance avec les identifiants admin/admin :)

D'ailleurs, le fait d'avoir re-publié les tutoriels leur a donné une date de publication correcte, qui du coup s'affiche sur le premier élément :)

+1 -0

Bonjour! Je voudrais faire une petite proposition concernant le design, j’espère être au bon endroit :) Que pensez vous d'inverser la place dans le menu du header les liens "articles" et "forums" ? Voici mes arguments:

  • on utilise en général plus la page forum que la page articles. Une fois qu'on à lu la majorité partie des articles qui y sont on n'a moins besoin d'y retourner vu que les nouveaux articles seront présentés sur la page d'accueil. Alors que parcourir le forum est probablement plus régulier.

  • l'onglet "forums" pour l'instant est à droite du centre de l'écran

  • or pour la majorité des gens qui sont droitiers il est plus facile à partir d'une position de curseur au centre de l'écran de déplacer sa souris vers la gauche que vers la droite. Simplement car le geste de rammener la souris vers son corps est plus naturel et facile à faire que celui qui consiste à l'éloigner. Essayer :)

  • naturellement on à tendance à cliquer sur la fléche déroulante d'un menu quand il y en à une comme sur Forum. Or pour cliquer dessus dans la position actuelle il faut parcourir plus de chemin depuis le centre de la page! Si les onglets étaient inversés l’accès à la fléche serait bien plus naturelle.

=>L'onglet le plus utilisé, Forum devrait être à la place de "articles" pour une meilleure ergonomie.

Argument contraire: le fait d'avoir "Articles" à gauche offre une meilleure cohérence avec les cours juste à coté. A part ça je ne vois pas trop d'argument ergonomique pour expliquer ce choix.

Que pensez vous de cette proposition? Je suis le seul à trouver l'onglet forum peu pratique à atteindre? Peut-être que cette impression change selon les tailles d'écran…

+2 -5

Oups je n'avais pas vu le sujet "les petits pixels", au temps pour moi!Je vais poster là bas! Si un modo le veux bien, on peut supprimer mes posts histoire de garder ce sujet plus propre!

+0 -0

Petite update, j'ai rajouté les tags sur les topics et les articles, et rajouté le "0" dans les bulles sur les articles sans réactions

Le résultat live toujours dispo ici

Sandhose

C'est du beau travail, mais personnellement je suis un peu perdu : est-ce qu'il n'y a pas trop de texte en haut pour quelqu'un qui vient d'arriver ? Est-ce que ça ne manque pas d'un lien "Qu'est-ce que c'est que ce site ?" vers un article détaillé sur le site, l'association, etc. (disons 5 minutes de lecture)¹ ? Qu'est-ce que c'est, la "une" ? Des tutoriels et des articles ? Ceux qui sont listés en-dessous, ou justement ceux qui sont plus récents ?

Enfin, c'est un design qui est beau, mais qui se base beaucoup sur le fait que les images utilisées comme vignettes pour les cours et les articles seront belles aussi. Or ça n'est pas toujours le cas, et parfois les auteurs ne savent pas quoi mettre comme image dans ces cases, et mettent un truc moche, voire rien du tout. Quelle est la solution envisagée ?

¹ je sais ça semble paradoxal : d'un côté je dis qu'il y a trop de texte, de l'autre je propose de mettre un lien vers un article complet sur ZdS. Tout simplement je pense que le texte qui est en haut, sur ta page, ne sera pas lu par la plupart des gens (dont l'attention sera captée par le reste), mais que certaines personnes pourraient, par la suite, avoir envie d'en savoir plus.

+1 -1

Perso sur la version desktop je trouve que le texte n'est pas trop important. Par contre sur la version mobile, si beaucoup trop gros, on prend trop de temps à trouver le contenu. Sur mobile je ne mettrait qu'une phrase avec un liens pour faire apparaitre la description détaillé.

A noter que le texte disparaît une fois connecté

Sinon, j'ai mis "Publié le XXX" en title du texte orange. Ca apparaît donc au survol

Juste pour dire : c'est une très mauvaise pratique en terme d'accessibilité. L'attribut title n'a pas pour vocation à produire une infobulle mais bien à décrire plus correctement le lien.

Par exemple, la bulle "1" pour les commentaires devrait avoir un title "1 commentaire". Ainsi un aveugle avec un outillage bien configuré aura le retour audio/braille correct.

Sinon GG c'est beau :)

Y a juste pas mal de soucis sur les boucles des auteurs (des virgules qui se baladent, etc). Il n'y a pas les liens vers les profils des auteurs tantôt et ils sont présents à d'autres endroits : ça fait bizarre je trouve.

Y a un moment du texte centré verticalement selon la longueur du titre : je ne suis vraiment pas fan. Ca casse l'alignement je trouve :/ Mais ça reste du détail.

Faudra faire attention aux pages articles et tutoriels qui sont un peu cassées suite à ce changement.

Il manque un hover+focus absolument partout : n'oubliez pas ça :) Perso je vois bien une petite box-shadow sur le bloc + souligné sur le lien en question.

Il faudra mettre un tabindex -1 sur la description des items si le lien est déjà présent sur le titre : sinon à la navigation au clavier ou au lecteur d'écran on se retrouve avec des doublons partout.

Il faut rajouter un background sur le gros bloc de présentation sinon sans image ou pendant le chargement c'est illisible sur le fond gris.

Fixez la hauteur de l'image de Clem ou des blocs autours car si l'image de se charge pas pour X raison (notamment si on les désactive) on a tout le contenu qui remonte. Illustration

En tous les cas ça avance ! Bon courage :)

Sinon, j'ai mis "Publié le XXX" en title du texte orange. Ca apparaît donc au survol

Juste pour dire : c'est une très mauvaise pratique en terme d'accessibilité. L'attribut title n'a pas pour vocation à produire une infobulle mais bien à décrire plus correctement le lien.

J'ai corrigé en mettant "Publié XXX dans YYY par ZZZ". Ca donnerait par exemple "Publié il y a 11 heures dans ZdS par Andr0, Spacefox, Eskimon, Situphen et gustavi". (J'ai pris la dernière news en exemple)

Par exemple, la bulle "1" pour les commentaires devrait avoir un title "1 commentaire". Ainsi un aveugle avec un outillage bien configuré aura le retour audio/braille correct.

C'est fait, il y a maintenant "Aucune/X réaction(s)" en title :)

Sinon GG c'est beau :)

Venant de toi, je suis flatté :p

Y a juste pas mal de soucis sur les boucles des auteurs (des virgules qui se baladent, etc). Il n'y a pas les liens vers les profils des auteurs tantôt et ils sont présents à d'autres endroits : ça fait bizarre je trouve.

Pour les virgules, c'est fixé, par contre pour les liens, je sais pas exactement s'il faut les mettre ou non à certains endroit… Par exemple, dans les textes de méta, la zone de click est tellement petite qu'a mon avis, ca va plus ennuyer les gens qui cliquent à côté par inadvertance que ceux qui veulent effectivement accéder au profil de l'auteur…

Y a un moment du texte centré verticalement selon la longueur du titre : je ne suis vraiment pas fan. Ca casse l'alignement je trouve :/ Mais ça reste du détail.

Problème est que je ne sais pas comment me débrouiller autrement… Si je colle le texte en haut, trop d'espace entre le titre et les métas, et si j'augmente le line-height, non seulement c'est relou à faire sans JS, et en plus c'est bizarre niveau espacement…

Faudra faire attention aux pages articles et tutoriels qui sont un peu cassées suite à ce changement.

Elles vont être adapté, c'est prévu :)

Il manque un hover+focus absolument partout : n'oubliez pas ça :) Perso je vois bien une petite box-shadow sur le bloc + souligné sur le lien en question.

Dans ma todo list aussi !

Il faudra mettre un tabindex -1 sur la description des items si le lien est déjà présent sur le titre : sinon à la navigation au clavier ou au lecteur d'écran on se retrouve avec des doublons partout.

Effectivement, j'y avait pas pensé, je corrigerais !

Il faut rajouter un background sur le gros bloc de présentation sinon sans image ou pendant le chargement c'est illisible sur le fond gris.

Bien vu

Fixez la hauteur de l'image de Clem ou des blocs autours car si l'image de se charge pas pour X raison (notamment si on les désactive) on a tout le contenu qui remonte. Illustration

C'est prévu quand je ferais le reponsive de cette partie

En tous les cas ça avance ! Bon courage :)

Alex-D

\o/


Sinon, j'ai commencé l'adaptation mobile (screen sur mon LG G3), en intégrant la proposition Kje, c'est à dire en mettant seulement un petit slogan, avec un lien "En savoir plus". Je sais pas si c'est ce que tu avais en tête (la phrase est tout à fait modifiable si elle vous convient pas), mais moi j'aime bien l'idée :)

Niveau adaptation mobile, il reste en gros les unes ; je pense les mettre sur 2 voir 3 lignes (sur les très petits écrans), et ne pas les faire "déborder" sur le header sur mobile et tablette

Aussi, y'a la p'tite clem qui m'embête un peu sur mobile, elle a tendance à tout cacher avec ses feuilles, faut que je réfléchisse à comment la caser correctement :euh:

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte