Www.soleil.info : Tout sur le soleil, exactement - Forum Alsacréations : CSS et Standards Web

Auteur
aspeum	# 17 Mar 2008 - 17:45:29
9 Posts	Bonjour à tous, Je travaille pour l'association Sécurité Solaire, et nous avons récemment mis en ligne une toute nouvelle version de notre site : www.soleil.info Je suis preneur d'avis sur ses qualités et défauts (ergonomique, esthétique, accessibilité, clarté, etc.). Je remercie d'avance toute personne qui aura la gentillesse de visiter le site et de me faire part de son jugement.
9 Posts
Lordzener	# 19 Mar 2008 - 12:47:12
18 Posts	Bonjour aspeum, - Alors premièrement je ne trouve pas de lien de retour vers la page d'accueil (à part en cliquant sur le logo). - Le lien du plan du site est néanmoins très bien placé (sous la moteur de recherche), même s'il pourrait apparaître aussi en bas de la page. - Une seule remarque sur l'esthétique, quand j'ai cliqué sur l'item "UV" du menu principal, j'ai cru qu'il y avait un bug d'affichage avec l'espace "découpé" de la couleur du fond a gauche (violet). C'est seulement en allant voir les autres pages du menu principal que je me suis rendu compte que c'était un espace créé volontairement. - Je trouve aussi que le menu secondaire (dans chaque page du menu principal) n'est pas assez visible. - Je ne comprends pas le lien "Météo solaire : prévisions d'index UV", il redirige vers la même page que l'item "UV" ?! Voilà rapidement ce que je trouve, à bientôt !
18 Posts
CPascal	# 19 Mar 2008 - 13:16:15
ca represente ... ... rien 745 Posts	salut, je ne suis pas spécialiste ergonomie ou design alors je ne te dirais que mon impression des choses. quand tu changes d'un onglets a l'autre ça me produit un effet désagréable. ça tiens d'abord a la lenteur de chargement des images sur le bandeau en dessous de menu et celui verticale qui contient parfois les logos. tu devrais optimiser le poids de ses images voir attribuer un fond de la couleur correspondante et ne mettre que les images significatives. je suis en ADSL 4 mega. c'est peu mais je suis pas en 56k non plus. ensuite mais là ça sort de ma compétence le contraste de couleur est peut-être trop grand? en fait j'en sais trop rien. la petite barre noire en dessous de la partie actualités est-elle nécessaire? ça rajoute un truc qui me fait moins homogène. mais bon pareil pas sur. enfin en gros il faudrait que ça soit plus fluide ce changement de ton de couleur. si ça allait plus vite ça passerais mieux. peut-être mettre en place un cache? Modifié par CPascal (19 Mar 2008 - 13:21) je m'en vais resoudre ce sacré schimliblibli .... schimilili... schmilbl.. hic.
ca represente ... ... rien 745 Posts
aspeum	# 20 Mar 2008 - 12:00:26
9 Posts	@Lordzener : merci pour ton message. Lordzener a écrit : Alors premièrement je ne trouve pas de lien de retour vers la page d'accueil (à part en cliquant sur le logo). Et ça ne suffit pas ? Je croyais que c'était une pratiquement assez unanime sur le web... Tu le placerais où, le lien de retour vers la page d'accueil ? Lordzener a écrit : quand j'ai cliqué sur l'item "UV" du menu principal, j'ai cru qu'il y avait un bug d'affichage avec l'espace "découpé" de la couleur du fond a gauche (violet). C'est seulement en allant voir les autres pages du menu principal que je me suis rendu compte que c'était un espace créé volontairement. D'accord. C'est embêtant, ça... Et après avoir compris que c'était volontaire, tu t'es dit "C'aurait pu être plus clair !" ou "Mais comment ça se fait que je n'ai pas compris ?" Lordzener a écrit : - Je trouve aussi que le menu secondaire (dans chaque page du menu principal) n'est pas assez visible. Et si je supprime la phrase au-dessus, est-ce que ça suffirait à le mettre en avant ? @CPascal : merci pour tes remarques. CPascal a écrit : quand tu changes d'un onglets a l'autre ça me produit un effet désagréable. Aïe, aïe, aïe, ça ne me plait pas, ça... Je vais réfléchir à fluidifier le passage de l'un à l'autre... CPascal a écrit : le contraste de couleur est peut-être trop grand? Intéressant, ça... Tu parles du contraste entre quelles couleurs ? Merci à tous les deux pour vos retours. Si vous ou d'autres personnes ont des remarques complémentaires à faire, je suis toujours preneur
9 Posts
audrasjb	# 24 Mar 2008 - 17:32:13
aka redpeppers 94 Posts	Bonjour, rapidement, j'aime beaucoup le changement de design selon les onglets, surtout que le reste (couleur des titres et des liens) suit le changement. Néanmoins, le jaune de l'onglet famille est vraiment pas top à mon goût.. Tu devrais l'éclaircir un peu (juste assez pour pas être trop flashy. Pour ce qui est du temps de chargement des onglets chez moi c'est correct, mais j'ai une bonne connexion. Donc ça m'a pas choqué du tout. Sinon pense a ajouter les attributs title aux liens et alt aux images.. Bonne continuation, Jb Grenoblogueur de mon état
aka redpeppers 94 Posts
aspeum	# 25 Mar 2008 - 10:05:25
9 Posts	Merci pour ce retour. C'est vrai que sur certains écrans, ce jaune est un peu aveuglant... On va voir comment arranger ça. Et bien vu pour les attributs title et alt !
9 Posts
dominique	# 25 Mar 2008 - 11:02:01
zen Modérateur 3653 Posts	aspeum a écrit : ... Je suis preneur d'avis sur ses qualités et défauts (ergonomique, esthétique, accessibilité, clarté, etc.). Bonjour et bienvenue aspeum Quand tu parles "accessibilité", cela veut-il dire que tu as pris en compte des critères d'accessibilité pour le site ? Pour l'affichage, le site ne passe pas sous ie7 en config 1024x768, il affiche une barre de défilement horizontale. Pourquoi ne pas avoir choisi de faire un site fluide, le site ne s'affiche pas en 800x600 ? Edité : oupsssssss ! j'ai oublié, la page d'accueil ne passe pas la validation W3C :"Failed validation, 26 Errors". Modifié par dominique (25 Mar 2008 - 11:06) De Tchouang Tseu : Savoir ce contre quoi on ne peut rien et l'accepter comme sa destinée, voilà la vertu suprême.
zen Modérateur 3653 Posts
aspeum	# 25 Mar 2008 - 11:44:14
9 Posts	Merci pour l'accueil dominique a écrit : Quand tu parles "accessibilité", cela veut-il dire que tu as pris en compte des critères d'accessibilité pour le site ? J'ai essayé de tenir compte des recommandations que j'ai pu lire... mais je suis pas un expert dans ce domaine. dominique a écrit : Pour l'affichage, le site ne passe pas sous ie7 en config 1024x768, il affiche une barre de défilement horizontale. Pourquoi ne pas avoir choisi de faire un site fluide, le site ne s'affiche pas en 800x600 ? J'avais pourtant fait des tests sous IE7, ça marchait nickel. Pourrais-tu éventuellement m'en dire plus sur ta configuration, ou me faire une capture d'écran ? Je n'ai pas fait un site fluide, parce que c'est quelque chose que je ne maîtrisais pas du tout au moment de travailler sur ce site. Peut-être que c'est une erreur... dominique a écrit : oupsssssss ! j'ai oublié, la page d'accueil ne passe pas la validation W3C :"Failed validation, 26 Errors". Zut, là aussi, j'avais testé ! Mais les modifs faites depuis gâchent un peu la fête... Bon, beaucoup d'erreurs identifiées sont récurrentes, je devrais pouvoir les régler rapidement... Je ne comprends pas bien celle-là, par contre : Line 196, Column 135: document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. …en6"><h2 style="padding-bottom: 2px;">Le Haut patronage de Mme Daquin-Bachelo ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
9 Posts
davidm	# 27 Mar 2008 - 10:23:56
18 Posts	Tout d'abord je précise que j'ai travaillé à la réalisation de ce site, donc me voilà pour receuillir et éventuellement répondre à vos critiques et suggestions Lordzener a écrit : Le lien du plan du site est néanmoins très bien placé (sous la moteur de recherche), même s'il pourrait apparaître aussi en bas de la page. Bonne suggestion, simple à mettre en place qui plus est. Lordzener a écrit : Une seule remarque sur l'esthétique, quand j'ai cliqué sur l'item "UV" du menu principal, j'ai cru qu'il y avait un bug d'affichage avec l'espace "découpé" de la couleur du fond a gauche (violet). C'est seulement en allant voir les autres pages du menu principal que je me suis rendu compte que c'était un espace créé volontairement. Intéressant... évidemment quand on a le nez dessus, on ne voit pas ce genre de chose. Quel genre de présentation aurait permis de distinguer plus clairement les choses : une couleur de fond identique à celle du contenu principal par exemple ? Lordzener a écrit : Je trouve aussi que le menu secondaire (dans chaque page du menu principal) n'est pas assez visible. Effectivement le contraste entre la couleur de fond est le texte est insuffisant (c'est plus vrai pour les univers dont la couleur de fond est plus sombre). Nous en avions parlé mais parmi le nombre d'élément à mettre en oeuvre, celui-ci s'est un peu perdu dans la bataille CPascal a écrit : je ne suis pas spécialiste ergonomie ou design alors je ne te dirais que mon impression des choses. quand tu changes d'un onglets a l'autre ça me produit un effet désagréable. Avec quel navigateur / quel OS ? J'imagine que tu parle d'un clignotement la première fois que tu charges une page ? (tu remarquera qu'une fois que les images sont mises en cache dans ton navigateur, ça ne le fait plus) Je pose la question parceque c'est un problème bien connu sous IE6 (le fameux "flickering background-images") et j'ai appliqué un fix créé par Dean Edwards, dans notre htaccess : (...Ooops, je viens de vérifier et pour une raison qui m'échappe, ces lignes étaient commentées :-\ C 'est désormais rétabli) : ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000 Edit : Hmmm, finalement cela cause des erreurs 500 donc je suis en train de vérifier auprès de l'admin du serveur si le module Apache mod_expires est bien installé... stay tuned ! CPascal a écrit : ça tiens d'abord a la lenteur de chargement des images sur le bandeau en dessous de menu et celui verticale qui contient parfois les logos. tu devrais optimiser le poids de ses images voir attribuer un fond de la couleur correspondante et ne mettre que les images significatives. je suis en ADSL 4 mega. c'est peu mais je suis pas en 56k non plus. Non ça n'est pas un problème de poids des images, elles sont optimisées. Cf ci-dessus la cause du problème. CPascal a écrit : ensuite mais là ça sort de ma compétence le contraste de couleur est peut-être trop grand? en fait j'en sais trop rien. Tu veux dire la saturation des couleurs ? C'est un choix, et en fonction des réglages d'écran, cela va varier. Alexandre qui a travaillé sur la maquette graphique a travaillé sous PhotoShop dans un espace couleur sRVB, que j'ai vérifié sur un écran calibré. CPascal a écrit : enfin en gros il faudrait que ça soit plus fluide ce changement de ton de couleur. si ça allait plus vite ça passerais mieux. peut-être mettre en place un cache? Ce site est animé par un CMS, MODx. Les pages sont mises en cache donc ce n'est pas ça, cf plus haut la cause. dominique a écrit : Pour l'affichage, le site ne passe pas sous ie7 en config 1024x768, il affiche une barre de défilement horizontale. Pourquoi ne pas avoir choisi de faire un site fluide, le site ne s'affiche pas en 800x600 ? Alors je vais répondre puisque je me suis occupé de l'intégration XHTML/CSS pour ce site à partir d'une maquette existante. La maquette du projet était en 1024x768 (ce choix a été effectué au regard des statistiques utilisateurs) et l'idée derrière la structure de page était que même un écran en 800x600 doit être en mesure d'afficher le contenu principal, en sacrifiant la colonne de droite. Pourquoi ne pas faire un design fluide (aussi connu sous le nom de liquid layout) ? Effectivement tout est possible mais étant donné la complexité du design et la structure de la maquette, je pense que cela aurait été un investissement temps significatif pour un retour tout à fait relatif. dominique a écrit : Edité : oupsssssss ! j'ai oublié, la page d'accueil ne passe pas la validation W3C :"Failed validation, 26 Errors". Ok tu peux re-vérifier, 0 erreur maintenant Il manquait des balises alt principalement et un template avait une balise h2 dans une balise a Rien de bien grave, il s'agissait d'erreurs mineures qui se répètent (et oui quand on a un template avec un mauvais code html, il se répète autant de fois qu'il y a d'item... du coup on se retrouve avec 26 erreurs mineures qui prennent 5mn à corriger) dominique a écrit : Quand tu parles "accessibilité", cela veut-il dire que tu as pris en compte des critères d'accessibilité pour le site ? Sur ce site, je n'ai pas fait de validation WAI ou 508 mais comme toujours je tiens compte des bonnes pratiques le site doit déjà passer un certain nombre d'exigences en la matière. Modifié par davidm (27 Mar 2008 - 16:46) La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever (Saint-Exupery)
18 Posts
Merlin	# 29 Mar 2008 - 10:40:01
123 Posts	Une remarque vraiment perso, je trouve que le changement de couleur de fond en phase avec la couleur des onglets, cela fait un peu beaucoup. Un fond uni ou enrichi d'une image permettrait peut-être une meilleure mise en valeur du contenu. Cdlt Modifié par Merlin (30 Mar 2008 - 11:52) Pour l'abolition des "target=_blank"
123 Posts
ghost	# 30 Mar 2008 - 00:39:24
1587 Posts	Salut, Je ne suis pas trop fan des modifications de charte graphique par onglet (mais ça n'engage que moi ) Pour moi la plus réussi c'est l'accueil Il manquerait à priori un <h1> dans ton plan, ton image de fond "tout sur le soleil" en fait le titre du site (h1?) devrait se trouver dans le code avec la balise alt qui va bien car en cas de désactivation des images ... Disparue Les boutons du menu supportent assez mal un agrandissement de la police et ne sont pas réactifs sur toute la surface (assez gênant sous ie6). Les balises alt sont bien renseignées mais assez laconique et plus orienté "codeur" que visiteur... Teste ton site sous Lynx tu y gagneras aussi en référencement. En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
1587 Posts
aspeum	# 31 Mar 2008 - 11:28:16
9 Posts	Merlin a écrit : Une remarque vraiment perso, je trouve que le changement de couleur de fond en phase avec la couleur des onglets, cela fait un peu beaucoup. Un fond uni ou enrichi d'une image permettrait peut-être une meilleure mise en valeur du contenu. Merci pour cette remarque, même si (/ surtout si) elle est personnelle ! En revanche, je ne comprends pas bien votre proposition, pourriez-vous m'en dire plus ? ghost a écrit : Je ne suis pas trop fan des modifications de charte graphique par onglet (mais ça n'engage que moi ) Pour moi la plus réussi c'est l'accueil Et dire que c'est celle que j'aime le moins ! Pourquoi est-elle plus réussie que les autres ? ghost a écrit : Il manquerait à priori un <h1> dans ton plan, ton image de fond "tout sur le soleil" en fait le titre du site (h1?) devrait se trouver dans le code avec la balise alt qui va bien car en cas de désactivation des images ... Effectivement... Merci pour la remarque ! ghost a écrit : Les boutons du menu supportent assez mal un agrandissement de la police et ne sont pas réactifs sur toute la surface (assez gênant sous ie6). Y a-t-il un moyen de régler le problème d'agrandissement ? Pour l'absence de réactivité du bouton sous IE6, c'est exact, je n'avais pas remarqué ghost a écrit : Les balises alt sont bien renseignées mais assez laconique et plus orienté "codeur" que visiteur... Teste ton site sous Lynx tu y gagneras aussi en référencement. J'imagine que Lynx est un navigateur purement textuel... C'est noté, je vais l'essayer pour voir comment améliorer le contenu des balises alt. Modifié par aspeum (31 Mar 2008 - 11:41)
9 Posts
ghost	# 31 Mar 2008 - 15:57:48
1587 Posts	Salut, Concernant l'aspect graphique, je suis loin d'être pro je te donne juste mon sentiment. Dans ma configuration d'écran (22') et à ma résolution le background prend de suite plus d'importance et les couleurs vives on tendance à occuper pas mal d'espace ce qui minimise la mise en valeur et la visibilité du contenu... (il faut presque mettre des lunettes de ... soleil ) Pour ton menu, de la manière dont tu as construit la chose, l'adaptabilité n'est guère possible car l'image de fond est globale, fixe et indépendante totalement des items de tes <li> (tiens au passage ton <ul> est en display: inline et les liens qu'il contient en display: block pas glop ). Il vaudrait mieux peut être reprendre ton menu sous une construction plus classique à la base car de toute manière pour rendre les boutons entièrement réactifs tu seras pratiquement obligé de bidouiller un truc s'en rapprochant... Modifié par ghost (31 Mar 2008 - 15:59) En essayant continuellement, on fini par réussir. Donc: plus ça rate, plus on a de chances que ça marche.
1587 Posts
aspeum	# 02 Apr 2008 - 14:15:21
9 Posts	ghost a écrit : Dans ma configuration d'écran (22') et à ma résolution le background prend de suite plus d'importance et les couleurs vives on tendance à occuper pas mal d'espace ce qui minimise la mise en valeur et la visibilité du contenu... (il faut presque mettre des lunettes de ... soleil ) Effectivement, je travaille sur un 17', pour être le plus proche possible de la configuration moyenne de nos visiteurs... ce qui fait que je n'avais pas du tout imaginé ce problème. Hum, je n'ai pas de réponses immédiates pour le corriger, mais je le note. ghost a écrit : Pour ton menu, de la manière dont tu as construit la chose, l'adaptabilité n'est guère possible car l'image de fond est globale, fixe et indépendante totalement des items de tes <li> (tiens au passage ton <ul> est en display: inline et les liens qu'il contient en display: block pas glop ). Il vaudrait mieux peut être reprendre ton menu sous une construction plus classique à la base car de toute manière pour rendre les boutons entièrement réactifs tu seras pratiquement obligé de bidouiller un truc s'en rapprochant... D'accord, je comprends. Il est for probable qu'on fasse un relifting global du site quand on aura suffisamment d'éléments en main, j'intègre ça dedans. Merci d'avoir pris le temps de détailler ta pensée !
9 Posts
keke	# 02 Apr 2008 - 15:47:48
petit à petit, Magdales grandi 19 Posts	Coucou, j'ai pas vu tout l'historique du site, mais esthétiquement je trouve que tous les éléments du site sont au même pied d'égalité. Un titre, ça devrait ressortir un peu, non ? De même, la lenteur d'affichage du site est un peu problématique. Le changement de couleur de fond tue un peu les yeux. Peut-être des couleurs pastels rappelant ton menu pourrait être suffisant ? Bon courage, le site est chouette ! kéké, qui est peu présent ces temps-ci ^^ Modifié par keke (02 Apr 2008 - 15:50) Kéké, administrateur de Magdales Nouvellement papa
petit à petit, Magdales grandi 19 Posts
aspeum	# 02 Apr 2008 - 15:50:20
9 Posts	keke a écrit : j'ai pas vu tout l'historique du site, mais ergonomiquement je trouve que tous les éléments du site sont au même pied d'égalité. Un titre, ça devrait ressortir un peu, non ? Au sein d'une page de contenu ? (comme ça) ou sur la page d'accueil ?
9 Posts
Merlin	# 09 Apr 2008 - 17:49:27
123 Posts	aspeum a écrit : En revanche, je ne comprends pas bien votre proposition, pourriez-vous m'en dire plus ? Il faudrait voir ce que cela donne avec un fond de la même tonalité mais plus clair (onglet orange, fond jaune etc...) ou bien une couleur unie (jaune pâle) avec une structure style soleil en ébullition. previews/3642-granumini.jpg" alt="upload/3642-granumini.jpg previews/3642-granumini.jpg" /> A+ Pour l'abolition des "target=_blank"
123 Posts
Prévenir un modérateur