Pages :
(reprise du message précédent)

Salut Olivier,

Félicitation pour ton site, je n'ai pas répondu à ta réponse ça m'était un peu sorti de la tête, mais il y a une chose sur la quelle je voulais revenir.

Avant tu avais Accueil+, je t'ai dis que je ne comprenais pas pourquoi il y avait se +, après tu l'as rajouté par le mot « plus », et je dois dire que je ne comprend toujours pas ^^.

Maintenant tu remplaces par « Abstract ». Et je ne comprend définitivement pas. La dénomination « Accueil » ne te convient-elle pas ? Pourtant c'est jouer sur la cohérence externe, l'utilisateur sait que généralement, le premier lien d'un menu c'est accueil/home et qu'il permet de revenir sur la première page.

Sinon je voulais surtout réagir à :
Olivier C a écrit :
j'ai opté pour Garamond (en Serif) et Gill-Sans (pour le Sans serif). Deux polices donc, réputées être lisibles, et très utilisées par les maisons d'édition française, toutes deux issues d'un même créateur du XVIème s.

A moins que j'ai mal compris ta phrase; mais ces deux polices n'ont pas le même créateur, Gill sans à été créer par Eric Gill et Garamond par Claude Garamond. Je tenais à le préciser car je suis un adepte de Gill Sans. D'ailleurs je tenais à dire que tes titres en Gill-sans sont fort agressifs. L'utilisation de corps gras avec Gill sans est selon moi (attention c'est du subjectif) à utiliser avec parcimonies, et dans le cadre de ton site je ne pense pas que ce soit adapté. Juste fait un teste, met tes titres en font-weight: 100. Et dis moi ce que t'en penses. Gill sans dans un corps fin est, très classieux, et est plus en corrélation avec ton thème. Un corps gras ça fait plus d'jeunz je trouve. Enfin c'est du subjectif, mais je t'invite à essayer. Car dans l'état, ça nuit un peu à l’homogénéité global.

Et sinon;

Stephanelam a écrit :
dans le corps de texte, tu devrais augmenter la line-height pour améliorer la lisibilité, là c'est vachement serré

Totalement pas d'accord une line height plus élevé que celle ci nuirait grandement au gris typographique. Pour rappel un gris typographique se doit d'être homogène et donne une bonne indication sur la lisibilité d'un texte.

Stephanelam a écrit :
l'utilisation d'Arial est un peu tristounette, à la limite, Verdana, pourquoi pas

Je ne vois pas en quoi Arial est triste, ok on la voit partout c'est la seule chose qu'on peut lui reprocher. Mais dire qu'elle est triste c'est une interprétation totalement personnel. C'est comme quand l'on dit le rouge ça représente l'amour, c'est totalement subjectif, comme chaque interprétation. Je ne pense pas que l'utilisateur lambda se dit, oh tien Arial, qu'il est triste ce site.

Bien à toi Smiley smile
Gili a écrit :
Avant tu avais Accueil+, je t'ai dis que je ne comprenais pas pourquoi il y avait se +, après tu l'as rajouté par le mot « plus », et je dois dire que je ne comprend toujours pas ^^. Maintenant tu remplaces par « Abstract ». Et je ne comprend définitivement pas.

Bon, ben allez hop : suppression de cette page... qui en fait existera toujours comme page de test afin de vérifier les thumbnails pour chaque article. Je voulais en faire une page d'accueil étendue... mais c'était peut-être une fausse bonne idée.
J'aurais préféré éviter de doubler le lien de la page d'accueil déjà disponible à partir du logo du site. Mais il est vrais que l'intégration de ce lien dans la nav semble logique.
Gili a écrit :
L'utilisation de corps gras avec Gill sans est selon moi (attention c'est du subjectif) à utiliser avec parcimonies, et dans le cadre de ton site je ne pense pas que ce soit adapté.

Pour la font, je fais un essai en ligne. Tu as raison : c'est plus joli (et bien vu pour l'auteur, je me suis mélangé les pinceaux Smiley confus ). Par contre le repérage des sous-titres d'un article n'est plus bon, et même en changeant de couleur... du coup je ne sais pas encore si je laisse...

Bien à toi.
Modifié par Olivier C (28 Feb 2012 - 21:44)
Olivier C a écrit :
Par contre le repérage des sous-titres d'un article n'est plus bon, et même en changeant de couleur... du coup je ne sais pas encore si je laisse...


Effectivement, tu as raison.

Moi j'ai essayé de mettre sur « article h1, #contact h1 » un text-transform: uppercase.

Personnellement je trouve que ça suffit, et que ça rend bien. Mais encore une fois ne prend pas mon avis en compte car pour moi, Gill sans en capital et en corps fin, c'est tout simplement magnifique. Donc j'avoue sur le coup je ne suis pas du tout objectif (si tu as un mac tu noteras que la police de base dans keynote est Gill sans en corps fin ^^)

A toi de tester, éventuellement revenir sur un corps gras. A ce niveau-ci ça relève plus du gout personnel, car l'ensemble de la page est très bien, le reste ne sont que gout et couleurs Smiley smile

Bonne continuation.
Enfin : sur ce point, les titres de mon slide ainsi que mes div "source" garderont une trace de ton influence !

Salutation
Modifié par Olivier C (28 Feb 2012 - 22:05)
29/10/2012 : remise à jour de mon thème. Une feuille de style basée sur des éléments Normalize et Bootstrap. Le site n'est pas fini sur le design***, mais n'hésitez pas à donner votre avis sur la structure. Et aussi : je n'ai pas encore fait de page "sommaire" qui, pour l'instant, liste par défaut tous les articles, ce qui n'est pas bon bien sûr. Sinon j'ai opté pour une grille "maison" de 1000px.

Salutation.

*** notamment le footer que j'ai finalement enlevé... pour ne peut être pas en mettre au final, ou alors vraiment un truc très discret.

PS : Ah oui : pour voir la feuille de style non compressée dans mon code source, il faut enlever "min" de "style.min.css" dans le permalien affiché (comme pour le site d'Alsacréations en fait).
Modifié par Olivier C (29 Oct 2012 - 09:15)
Salut Olivier,

Je viens de faire un tour sur ton site, et voici quelques remarques rapides :

- tu pourrais faire quelque chose de mieux pour le header, une police monospace comme ça, en italique, c'est pas ce qu'il y a de plus beau ...

- pour l'ensemble du site, je verrais bien une police serif comme Garamond, plutôt qu'un simple Arial ... ça colle mieux avec le contenu je trouve. Enfin, j'ai jamais vu de Bible, de Missel, ou de psautier en sans-serif Smiley lol

- la couleur orange des liens du footer est assez agressive et ne rend pas super bien sur du gris.

Voilà Smiley smile
Stephanelam a écrit :
tu pourrais faire quelque chose de mieux pour le header, une police monospace comme ça, en italique, c'est pas ce qu'il y a de plus beau ...

C'est vrai. Le problème, c'est que j'ai tellement de polices installées sur mon Mac que je n'arrive même plus à voir les problèmes de rendus : si la font n'est pas chargée correctement où si elle s' interprète différemment en fonction de l'OS ou en fonction d'un chargement purement webfont (ce qui m'est arrivé pour le titre, du coup j'attends de pouvoir contrôler sur un autre ordi pour vérifier les différences).
Stephanelam a écrit :
pour l'ensemble du site, je verrais bien une police serif comme Garamond, plutôt qu'un simple Arial ... ça colle mieux avec le contenu je trouve. Enfin, j'ai jamais vu de Bible, de Missel, ou de psautier en sans-serif Smiley lol

Oui, mais j'avais envie de changer du thème précédent avec une police sans serif... et puis j'ai un coté non conformiste Smiley cligne
Stephanelam a écrit :
la couleur orange des liens du footer est assez agressive et ne rend pas super bien sur du gris.

Ça ne va même pas bien du tout, je dois refaire complètement le footer, mais je n'ai pas encore d'idée pour cette partie, je sèche... D'ailleurs, me faut-il vraiment un footer finalement ? Je trouve que la mode est en train de passer... Qu'en penses-tu ?
Je suis assez d'accord avec le côté non conformiste, mais autant faire du non-conformisme élaboré avec une police Sans-Serif un peu plus recherchée (genre Tisa Sans ou Meta Sans) ... enfin, à toi de voir, mais j'aime moyen Arial, ça fait "police par défaut" ... autant Georgia ne me gêne pas tant, autant Arial me fait grincer des dents.

Pour le footer, plus que par effet de mode, il faut que tu raisonnes par utilité. En as-tu vraiment besoin ? Si non, ne te force pas à en faire un. Sur la dernière version de mon site (j'ai updaté mon topic hier soir), je n'ai pas mis de footer ... enfin, juste deux lignes pour le copyright, "have a happy [jour de la semaine]", et c'est tout ...

Smiley biggrin
a écrit :
il faut que tu raisonnes par utilité. En as-tu vraiment besoin ?

La question de l'utilité bien sûr... disons que je trouve qu'une sidebar peut faire amplement concurrence au footer d'un site, mais je leur ai trouvé une logique différente. Et surtout j'ai installé des icônes vectorielles, ce que j'ai mis un peu de temps à maîtriser...
Re,

Le footer est bien, le header est mieux, la police est pas trop mal ... du positif, en somme !
Y a juste la feuille, dans la sidebar, que je trouve assez déplacée ...

;)
Stephanelam a écrit :
Y a juste la feuille, dans la sidebar, que je trouve assez déplacée ...

Un item par saison (feuille, flocon de neige, etc), avec plus ou moins d'effets en CSS3, ces items étant liés au calendrier.

J'en diminuerais peut-être l'importance le jour où je retoucherais la barre de recherche dans un style vraiment caractéristique par rapport aux autres div's...
Bonjour,

Bravo pour ce beau travail, ce fut un plaisir à lire et à regarder tout simplement. C'est sobre tout en étant précis, clair et concis.

D'accord avec #Stephanelam la feuille fait un peu gif animé (personnellement j'enlèverais juste le mouvement).

Le sommaire avec la police en orange (j'adore le orange!) casse un tout petit peu avec la lisibilité de l'ensemble du site, j'ai du me rapprocher pour lire (peut-être voir une taille ou graisse différente).

J'aime la charte graphique qui correspond à mes goûts. Smiley smile
Bonsoir,
rodolpheb a écrit :
D'accord avec #Stephanelam la feuille fait un peu gif animé (personnellement j'enlèverais juste le mouvement).

Oui... depuis que Stephanelam est passé j'avais réduit la taille de cet élément. Du coup l'effet de mouvement c'était accentué. Aller hop : je double le temps de transition.
rodolpheb a écrit :
Le sommaire avec la police en orange (j'adore le orange!) casse un tout petit peu avec la lisibilité de l'ensemble du site, j'ai du me rapprocher pour lire (peut-être voir une taille ou graisse différente).

Exact, et de manière générale je ne suis pas content de cette page qui n'est pas designée à sa juste valeur. J'attends d'avoir une idée lumineuse (ce qui n'arrive pas souvent !).
rodolpheb a écrit :
J'aime la charte graphique qui correspond à mes goûts. Smiley smile

Merci. Je pense cependant ajouter un filigrane discret sur le fond du site un peu trop noir à mon goût finalement. Mais là encore... je prends mon temps !
rodolpheb a écrit :
Tu n'a pas ajouté de skip links? Est-ce volontaire?

Sur la page "sommaire" ? Non, ce n'est pas volontaire, je les ajouterais sans doute, mais je n'ai pas encore compris le principe de leur intégration, et vu qu'aucun lecteur d'écran ne visite le site et que je n'arrête pas de changer mon thème ce n'est pas une priorité.

Pour l'instant je suis surtout concentré sur la navigation mobile, c'est nettement plus pertinent dans mon cas. La semaine dernière, je me suis débattu avec un menu pour mobile que je viens de refaire à nouveau... ce n'est pas encore ça mais je l'améliorerais.

J'ai aussi vu que j'ai un problème avec Chrome pour PC (aucun problème sous Mac) : le textarea du formulaire n'affiche pas le contenu que l'on frappe. Je ne comprend pas...

édit : plus de problème avec Chrome pour PC maintenant. Une option cochée dans le navigateur ? Je n'y comprend rien...
Modifié par Olivier C (24 Dec 2012 - 11:13)
Olivier C a écrit :
mais je n'ai pas encore compris le principe de leur intégration

http://webaim.org/techniques/skipnav/

Ce lien est un des premiers que je trouve sur google mais il a le mérite d'être clair.
En fait tu crées des ancres sur ta page comme :"aller au contenu" et "aller au menu". Regarde la page d'Alsacréations en survolant le haut de la page ou en désactivant les styles, tu verras que ce sont des liens qui apparaissent en premier.

Concernant la navigation clavier, j'ai failli dire qu'il n'y avait pas de focus, car je distinguais à peine le survol des liens.

J'utilise un petit guide en 10 points récupéré sur un site d'accessibilité qui m'aide beaucoup pour l'élaboration de mes sites.
C'est vraiment ultra simplifié et très basique mais ça peu aider:

1 Des alts aux images
2 Des titres à des liens
3 Des sous-titres à tes vidéos (si besoin, une audiodescription)
4 Un titre et un résumé des animations (javascript non intrusif)
5 Navigation au clavier
6 Une navigation adaptée (liens dévitements, fil d’ariane, plan du site...)
7 Un bon ordre
8 Une écriture compréhensible par tous (citations, acronymes, balises de langues-fr-...)
9 Un code valide W3C
10 Pas de frame ni iframe.
Modifié par rodolpheb (24 Dec 2012 - 09:58)
rodolpheb a écrit :
Pas de frame ni iframe.

En matière d'accessibilité, il n'y a aucune contre-indication à l'utilisation des frames et iframes à partir du moment où l'attribut title est renseigné en bonne et due forme.
C'est pourtant ce que préconise Jean-Philippe Simonnet (Responsable des développements internet et chef de projet accessibilité)
rodolpheb a écrit :
C'est pourtant ce que préconise Jean-Philippe Simonnet (Responsable des développements internet et chef de projet accessibilité)

Je ne suis pas aussi catégorique que lui. Pour ma part, je m'en tiens à ce que disent les WCAG 2.0 (et, par ricochet, les référentiels qui en sont les méthodes d'application).

De plus, l'accessibilité ne consiste pas, en soi, à interdire.
@ rodolpheb : Merci pour les liens d'évitement, j'avais déjà consulté des tutos, mais je voulais avoir ma propre expérience utilisateur que je n'ai pas encre. Et puis, mis à part mon sommaire, ces liens d'évitement ne servirait qu'à passer 8 ou 10 liens au plus... à voir, car dans ce cas je ne vois pas trop l'intérêt.
rodolpheb a écrit :
9 Un code valide W3C.

... sauf qu'il y a toujours un écart entre l'idéal et la pratique. Pour la validation W3C par exemple, rares sont les sites avec 0 erreur.

Par exemple, à ce jour :
- page d'accueil de google.fr : 25 erreurs, 4 warnings,
- page d'accueil de bing.com : 22 erreurs,
- page d'accueil de fr.yahoo.com : 142 erreurs, 9 warnings,
- le forum d'alsacreations : 2 Errors, 3 warnings,
- page d'accueil flickr.com : 25 erreurs, 2 warnings,
- etc...

Notons que dans le cas des pages d'accueil de Google et de Bing, ceux-ci n'affichent qu'un simple champ de recherche...

Qu'est-ce que je retiens de la validation W3C ? Outre le fait ce cela n'a aucune incidence sur le référencement d'un site (je l'ai vérifié sur des sites avec un code horrible, hyper bien positionnés sur des mots clefs concurentiels), le W3C rend invalides jusqu'à certaines pratiques qu'il préconise par ailleurs (par exemple les préfixes css dans les feuilles de style). Je garde donc la validation W3C comme un référentiel de bonnes pratiques du web... en sachant transgresser sur un élément ou sur un autre en cas de besoin (rare il est vrai).
Modifié par Olivier C (26 Dec 2012 - 18:19)
Pages :