Futur [Pro] - sentiersdumonde.fr pour accompagnateur en montagne

Bonjour à tous,

Le site : http://sentiersdumonde.fr
Je me crée un site car je suis un accompagnateur en montagne (encore stagiaire ).
J'ai essayé de le faire en HTML5 et CSS3 valide au W3C (seulement les consignes concernant les coins arrondis, les ombres et les rotations qui ne plaisent pas au validateur ).

Je l'ai soumis au site browsershots. J'ai remarquer que sous certains navigateur ma colonne de droite (aside) ne flotte pas à droite (seul problème ).

Pour le moment, seule la page "index.html" existe. Les autres seront créées ensuite et seront incluses à ma page index dans la div "page" avec php.

Je ne suis pas très performant au niveau des idées de design et j'ai repris des idées sur différents sites, notamment celui de Raphaël (http://goetter.fr Merci ) et alsacreations (pour les accesskey).

J'ai également essayé de respecter les recommandations en terme d'accessibilité (taille en % et en em, accesskey, ...)

Pouvez-vous me faire un rendu sur les choses qui ne vont pas bien et me conseiller sur le design?

Merci
Modifié par folvool (10 Oct 2010 - 18:13)

Salut

Quelques petites remarques :

- la navigation clavier est gérée (c'est bien), sauf à l'intérieur du petit widget twitter
- le bouton d'accès rapide qui permet d'aller au contenu devrait être sorti du menu et être un peu moins visible. Généralement les liens d'évitements sont plutôt discrets..
- le logo fait un peu posé a l'arrache et ne s'accorde visuellement pas du tout avec le reste du site..
- des metas inutiles
- le message à destination des utilisateurs d'IE6 est inutile (l'immense majorité n'ont pas le choix)
- ton menu étant une liste de pages, utilise une liste <ul> plutôt qu'une division qui n'apporte aucun sens (en haut de page comme en bas de page)
- les accesskey sont inutiles/dangereuses (bonne lecture )
- les images faisant partie du contenu doivent être intégrées dans le html avec la balise <img />, non dans le css
- tu n'a aucune hiérarchie dans ton document, utilise les titres (même avec du faux-texte, au moins pour préparer leur mise en forme — au passage : bien vu pour le schnapsum^^)

Dans l'ensemble, je pense que le plus gros défaut du document présenté réside dans l'absence de sémantique (alors même que les éléments de structuration de html5 sont utilisés, il n'y a aucune sémantique dans le contenu présenté). Bien sûr il y a aussi des lacunes graphiques, mais je laisse des personnes plus spécialisées en parler

Je pense qu'il aurait été beaucoup plus intéressant de présenter un site fini, ou du moins avec quelques pages de contenu...
Modifié par audrasjb (09 Oct 2010 - 16:49)

@audrasjb Merci pour ta réponse

a écrit :
la navigation clavier est gérée (c'est bien), sauf à l'intérieur du petit widget twitter cligne

Je ne dois pas avoir bien compris car en utilisant la touche TAB pour passer d'un lien à l'autre, je passe également sur les liens du widget.

a écrit :
le bouton d'accès rapide qui permet d'aller au contenu devrait être sorti du menu et être un peu moins visible.

Je l'ai sorti du menu et je l'ai masqué. Le raccourci apparaitra sur la page "accessibilité" et à la lecture vocale de la page.

a écrit :
le logo fait un peu posé a l'arrache et ne s'accorde visuellement pas du tout avec le reste du site..

Glups! C'est mon gros problème, je n'arrive pas à imaginer quelque chose de sympa qui puisse coller avec l'activité. Je pense que j'y reviendrai plus tard.

a écrit :
des metas inutiles cligne

Je pensais qu'elles étaient toutes utiles. J'ai nétoyé.

a écrit :
e message à destination des utilisateurs d'IE6 est inutile (l'immense majorité n'ont pas le choix)

Ah! Ok! Suprimé.

a écrit :
ton menu étant une liste de pages, utilise une liste <ul> plutôt qu'une division qui n'apporte aucun sens (en haut de page comme en bas de page)

J'ai mis des <ul> à la place des <div> mais est-il nécessaire de placer ensuite des <li> alors que les liens du menu sont déjà perçut comme de la navigation (<nav>)?
Pour le pied de page, je n'ai pas de <div> autour de mes liens. Faut-il que je les place dans une liste (<ul>) ou le <nav> suffit?

a écrit :
les accesskey sont inutiles/dangereuses

J'ai lu. Je n'ai pas de lettres dans les raccourcis mis à part le "s" comme ce qui est préconisé. Je pense que ça limite la "casse".

a écrit :
les images faisant partie du contenu doivent être intégrées dans le html avec la balise <img />, non dans le css

Ça y est, j'ai corrigé et placé le texte de remplacement.

a écrit :
tu n'a aucune hiérarchie dans ton document, utilise les titres

J'en ai fait une fictive. Pour le schnapsum, depuis que je l'ai découvert, il me plaît, bien que je sois un vôsgien!

Pour l'absence de sémantique, j'ai également placé des balise de titre hiérarchisant le texte.

Pour le graphisme, je manque d'idées.

Merci pour l'aide sur ces points là.
Si d'autres voient d'autres choses, éventuellement en graphisme, je veux bien être critiqué.
Modifié par folvool (09 Oct 2010 - 17:43)

Re,

Et bien les modifications n'ont pas trainées !

Juste une précision, pour les listes : à partir du moment ou un contenu est une liste, on le place dans une liste, soit ordonnée avec <ol>, soit non-ordonnées avec <ul>. Un menu étant une liste de liens, on va le décrire à l'aide de la balise <ul> permettant de préciser que l'on se trouve dans une liste et de la balise <li> qui permet de décrire un item de cette même liste. De plus, <li> est un élément de type bloc, ce qui facilite son positionnement par rapport à <a>, qui est en ligne

Pour les liens du widget twitter, il manque une pseudo classe :focus pour qu'on puisse avoir une distinction lors du pointage clavier. Il y en a pour les liens de l'entête et du pied de page, mais pas ici.

Ensuite, j'organiserais un peu mieux ton (faux) texte via css :
- padding à droite et à gauche de même valeur pour éloigner les bords du texte du conteneur parent
- préparer la mise en forme des liens hypertextes qui seront dans ton contenu
- un interlignage plus élevé (1.5em au minimum)
Modifié par audrasjb (09 Oct 2010 - 18:01)

OK pour les listes. J'ai lu quelques articles à ce sujet. J'ai donc ajouté des <ul> suivi de <li> dans mon menu et dans mon pied de page, et j'ai ré-ajusté le positionnement.

L'absence de :focus n'était pas unique au widget mais à tout le site. Je l'ai ajouté et défini le styles de mes futurs liens. (J'en ai ajouté un dans le vrai faux texte

Padding et interlignes sont ajustés pour le plus grand bonheur de mes yeux; Je dois le reconnaître.

Je suis également en train de me renseigner afin de proposer un style pour les téléphones mobiles. Mais avant la mise en forme mobile, je veux améliorer le graphisme actuel.

Merci pour l'aide
Modifié par folvool (09 Oct 2010 - 18:56)

Bonjour, juste un commentaire à propos de la couleur du fond et des caractères. La lecture pourrait être difficile pour certaines personnes. Le vert aurait intérêt à être moins foncé.

À lire au sujet des couleurs

Salut,

Je ne connaissais pas la page "À lire au sujet des couleurs". C'est très intéressant.

J'ai modifié l'arrière plan de mes textes afin d'être conforme aux différents seuils préconisés. Le second outil donne une idée qui surprend mais qui permet une bonne représentation de la perception des couleurs.

Merci pour le coup de main.

C'est déjà mieux.

Même pour une personne n'ayant pas de difficultés de vision, c'est moins agressant comme contraste.

Je viens de mettre en place le css pour la version mobile du site.
J'ai testé avec des émulateurs car mon téléphone ne me permet que de téléphoner.
Est-ce que l'un d'entre vous pourrais me décrire ce que cela donne? ou poster une image?

C'est toujours à la même adresse : http://sentiersdumonde.fr

Voila ce que moi j'en attend 'et ce que j'ai par émulation):


Merci
Modifié par folvool (10 Oct 2010 - 18:13)