[amateur] Liste Salsa d'Olivier

Bonjour,
Je maintiens un site qui recense pas mal de soirées salsa en France.

C'est un peu mon labo pour tout ce qui est code et design web (et même plus...).
En fait, je viens surtout pour un retour sur le design, mais toute remarque code est également bienvenue.

La page d'accueil : http://salsa.faurax.fr/

Mais la plupart des visiteurs arrivent sur une page de département :
-http://salsa.faurax.fr/index.php/dpt/13

Et ces temps-ci, c'est particulier, j'ai un thème Hiver2012-13, d'habitude c'est plutôt comme ça :
-http://salsa.faurax.fr/index.php/dpt/13?theme=yolanda

À noter également, le site a une feuille de style pour les écrans de petite largeur (c'est-à-dire les téléphones), qui élague le contenu et fait apparaître le bouton de géolocalisation.

En fait, j'essaye d'ajouter un peu de design, tout en gardant un site qui s'affiche à toute vitesse.
Merci d'avance pour vos remarques
Modifié par Laurie-Anne (04 Jan 2013 - 19:14)

Quelques remarques :

- Le resize pour petits écrans est trop radical, non? Sur un écran de 800px de large, la boite de texte fait moins de 350 px!

- Le rendu manque de piquant je trouve, non? Les menus sont pauvres et les polices fades. La liste de département est efficace mais peu attirante.

- La sémantique est assez sous-estimée (divite ) mais l'usage du microformat hcalendar est bien vue (à moins que les microdatas vaillent plus le coup aujourd'hui, non?)

- Il me semble qu'il y a beaucoup trop d'informations chargées en une page. Sur mobile, ça doit être très lourd, non? En outre, il y a de nombreuses optimisations possibles.

- L'iframe pour Facebook me semble laborieuse. Un bouton "j'aime" suffisait, non?

- Les stats d'activité du site, on s'en fiche, non?

- … non?

Merci d'avoir pris le temps de me repondre

Muchos a écrit :
Quelques remarques :
- Le resize pour petits écrans est trop radical, non? Sur un écran de 800px de large, la boite de texte fait moins de 350 px!

Oui, j'ai pris une base de grid 960px, et j'ai adapté pour que ça passe automatiquement en 320px.
L'objectif premier était d'avoir une version standard et une version mobile, mais je n'ai pas pensé par exemple au netbook, même si ça reste utilisable.
Je pourrai être en responsive, mais c'est du boulot, ça n'apporte pas grand chose, et c'est plus difficile à tester.
Ou alors une version intermédiaire, comme 640px.

Muchos a écrit :

- Le rendu manque de piquant je trouve, non? Les menus sont pauvres et les polices fades. La liste de département est efficace mais peu attirante.

C'est justement pour des trucs comme ça que je suis ici.
J'aurai aimé également un avis sur le fond "damier flocons" que j'ai bricolé pour rendre le site moins austère...

Muchos a écrit :

- La sémantique est assez sous-estimée (divite ) mais l'usage du microformat hcalendar est bien vue (à moins que les microdatas vaillent plus le coup aujourd'hui, non?)

Quand j'ai eu l'idée d'ajouter ça, je suis tomber sur les microformats, j'ai fait avec, mais ça m'a rajouté quelques balises.
Ça marche bien, Google m'affiche des infos complémentaires dans les résultats de recherche.

Par contre, pour la divite, je veux bien des exemples et pistes d'améliorations.

Muchos a écrit :

- Il me semble qu'il y a beaucoup trop d'informations chargées en une page. Sur mobile, ça doit être très lourd, non? En outre, il y a de nombreuses optimisations possibles.

Pour les optimisations, une grande partie vient de l'iframe facebook.

Pour les informations, la page fait 31Ko et c'est vrai que j'aimerai qu'elle fasse moins, mais la 1ère page a toujours fait apparaître toutes les soirées salsa de la semaine et les visiteurs sont habitués à ça (je regarde parfois certaines personnes utiliser mon site).
Je pourrai être radical, n'afficher que les soirées du jour, et forcer les gens à choisir dans le menu.

Muchos a écrit :

- L'iframe pour Facebook me semble laborieuse. Un bouton "j'aime" suffisait, non?

La population "salsa" est très présente sur facebook, donc je compte sur l'effet de mimétisme "Ha tiens, mon pote aime ça aussi", pour inciter au clic.

Muchos a écrit :

- Les stats d'activité du site, on s'en fiche, non?

Au départ, c'était juste pour savoir en combien de temps la page était générée (il n'y a pas de BdD), puis j'ai ajouté le nombre de soirées, puis la boutade sur le fait que je n'ai que les infos qu'on me donne.
C'est vrai que c'est pas vital comme info, mais ça montre aussi le succès du site (je ne crois pas qu'il y ait d'autre site français qui recense plus de 200 soirées salsa à jour).

Muchos a écrit :

- … non?

Si.
Merci d'avoir pris le temps de me faire un commentaire, au plaisir de pouvoir te rendre la pareil

Bonjour,

Pour la divite il y a ça : lien

Concernant le fond "effet flocon" : ça passe pas du tout. Du coup l'oeil est constamment attiré par ce dernier. Un fond sobre payera toujours avec ou sans texture.

Par contre l'habillage du texte peut être embelli en donnant un style aux astérisques (ça fait un peu saisie "à la va vite"), aux flèches (type player) en trop grand nombre d'ailleurs rendant la lecture peu aisée.

Faire ressortir des éléments récurrents du texte par des couleurs ou un style.
Mettre en gras des parties importante (en stylant la balise strong).

Les spans avec la date "soirée-date" sont de très bons repères visuels (heureusement qu'ils sont là)
Les dates soulignées en double font très Word (ms).

Conclusion : L'ensemble assez difficile à lire fait penser à du style télégraphique.

Bon courage

rodolpheb a écrit :

Pour la divite il y a ça : lien

Ok, je suis bien conscient de ça.
Mais je vois pas vraiment où est-ce que je pourrai utiliser un tableau.
La liste des dates ? Ça a du sens de la mettre en tableau... mais également en liste comme maintenant.

Je sais qu'il y a les nouvelles balises html5 pour le header/footer/menu/article, mais je ne sais pas si cela ne risque pas de créer des effets non-voulus sur les navigateurs les plus anciens.

rodolpheb a écrit :

Concernant le fond "effet flocon" : ça passe pas du tout. Du coup l'oeil est constamment attiré par ce dernier. Un fond sobre payera toujours avec ou sans texture.

OK, donc finalement, j'ai remis ce que j'avais l'année dernière : de la neige !
http://salsa.faurax.fr/index.php/dpt/13

rodolpheb a écrit :

Par contre l'habillage du texte peut être embelli en donnant un style aux astérisques (ça fait un peu saisie "à la va vite"), aux flèches (type player) en trop grand nombre d'ailleurs rendant la lecture peu aisée.

Faire ressortir des éléments récurrents du texte par des couleurs ou un style.
Mettre en gras des parties importante (en stylant la balise strong).

Alors là, c'est compliqué, parce que c'est du texte saisi par les organisateurs de soirées.
Et la plupart du temps, ils font copier/coller de leur évènement facebook
Et là, tu es tombé sur un gros fan de caractères UTF-8... Je me demande si je ne devrais pas les filtrer directement.

Je viens de faire une petite modification en mettant leur texte en gris foncé, ce qui estompe un peu l'effet de gros paquet de texte.

rodolpheb a écrit :

Les spans avec la date "soirée-date" sont de très bons repères visuels (heureusement qu'ils sont là)

Oui, c'est bien fait pour, avec une alternance rouge/orange pour repérer quand on change de jour. Comme ça, on peut faire défiler rapidement et voir quand on a dépassé le jour courant.

rodolpheb a écrit :

Les dates soulignées en double font très Word (ms).

J'en sais rien, j'utilise pas Word, et je fais jamais de double souligné ailleurs.
En fait, c'est difficile de trouver quelque chose qui mette un peu en valeur la date, sans trop couper la suite des évènements. Les petits points ou les tirets, c'est encore pire.
Je pourrai aussi carrément virer la date, vu qu'elle est aussi devant chaque évènement.

rodolpheb a écrit :

Conclusion : L'ensemble assez difficile à lire fait penser à du style télégraphique.

Pour le style d'écriture, il n'est pas de moi. Je ne pourrais pas avoir toute cette masse d'infos, si c'était moi qui rédigeait...

Voilà où j'en suis :
http://salsa.faurax.fr/index.php/dpt/13

Une autre question que je me pose, c'est la taille des caractères.
Quand je vois la taille microscopique sur facebook, je me dis que je devrais peut être baisser la mienne d'1 ou 2 point....

POur la taille de la fonte ça me paraît bien pour l'instant. A voir...

Le background "beige" est presque pire, essayez un fond plus neutre.

rodolpheb a écrit :
POur la taille de la fonte ça me paraît bien pour l'instant. A voir...

Le background "beige" est presque pire, essayez un fond plus neutre.

Ben au départ, j'avais ça : http://salsa.faurax.fr/index.php/dpt/13?theme=yolanda
Sinon, j'ai aussi le fond tout gris, mais bof....

Je vais essayer de trouver quelques idée pour un fond un peu coloré, mais beaucoup plus clair.
Le plus dur en design, c'est de ne même pas se rendre compte quand on fait des trucs moches...

Bonjour,
Pour ma part, j'ai une sensation générale d'étouffement.

Déjà pour moi, le texte est (beaucoup) trop gros d'une manière générale.

Si on prend l'exemple des villes en haut de page :
"Villes : Aix-en-Provence (6) Allauch (2) Aubagne (1) Gémenos (1) Istres (4) La Ciotat (1) Les Pennes-Mirabeau (3)........"
On a un combo intéressant :
Texte trop gros, tout sur une ligne (pourquoi pas faire une liste?), soulignement pas forcément nécessaire, le tout entrecoupé de parenthèse et aucune ponctuation (un tiret ou un | aurait pu aider).

Le surlignement des liens n'est pas terrible.
Des petites bordures entre les différentes manifestations seraient pas forcément un mal pour bien les délimiter les uns des autres.

Les boutons en fin de page (xiti, counter, etc...) ça fait site année 2000.

La page pour s'inscrire à une adresse qui donne pas forcément confiance. Et le design est ... absent, ça donne pas vraiment envie (jaune terne en autre).

Le site parle de Salsa, mais y a aucune image ne serait-ce meme que d'un danseur, je trouve ça dommage et un peu étrange.

L'utilisation des balises em/strong n'est pas forcément très (sémantiquement) correct...

Y a du CSS qui se ballade un peu dans le code html... ainsi que des style="" vide...?

Voilà mes quelques remarques, pas forcément dans l'ordre...

ofaurax a écrit :
Le plus dur en design, c'est de ne même pas se rendre compte quand on fait des trucs moches...

d'où l'intérêt de passer par ici.

Sinon il y a pléthore de sites pour s'inspirer sur le web.

Sylverdragon a écrit :
Déjà pour moi, le texte est (beaucoup) trop gros d'une manière générale.

Je ne trouve pas. C'est peut-être la hauteur de ligne qui n'est pas assez élevée et qui rend ce sentiment d'«étouffement».