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

@gili: Merci, je l'avais pas lu celui-là pourtant j'abuse royalement de la lecture sur ce site... Smiley smile
jmlapam a écrit :
Déjà évitons de parler d'IE5 quand déjà IE6 nous paraît un ancêtre. Smiley lol

oui je sais, de toute maniere je ne code que pour IE7 et plus, et encore... Non, je cherche bien plutot une solution pour IE7 et 8.
jmlapam a écrit :
@gili: Merci, je l'avais pas lu celui-là pourtant j'abuse royalement de la lecture sur ce site... smile


Avec plaisir !!

En même temps il y a tellement d'article c'est dur de pas passer à côté de certain ^^
fvsch a écrit :
Cette unité, notée em, est appelée « cadratin » en typographie française. Historiquement, le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie.

... Et c'est tout l'intérêt de coder les valeurs de hauteur d'un texte en "em" et non en pixel, quand on veut un nombre de lignes précis, étant donné que pour une même font l'interprétation de la taille varie d'un navigateur à un autre...
Modifié par Olivier C (19 Dec 2011 - 19:56)
Salut,

Je viens de repasser sur le site pour voir comment ça évolue ... et y a du changement !

Alors si je peux me permettre quelques critiques au niveau du design :

- les petits ticks verts dans le footer pour marquer les listes sont horribles, et le fond type "carton" fait bizarre, pas très sobre.

- la police des titres genre "A lire" ou "Rechercher" n'est pas adéquate selon moi.

- l'effet de rotation CSS3 sur les vignettes de la page d'accueil n'est pas adapté non plus.

Par contre pour le slider c'est beaucoup mieux, well done Smiley cligne
Modifié par Stephanelam (20 Dec 2011 - 14:24)
@ Stephanelam : tout à fait d'accord avec vos critiques, et j'ajoute même que le style tenté n'est pas en phase avec le thème du site. Mais c'est juste un essai pour quelques jours. En fait j'essai de créer une identité à mon site, c'est là qu'il va me falloir être créatif (et non seulement programmeur), et je vois bien que c'est un métier ! Mais avec le temps je vais bien finir par arriver à quelque chose.

Hormis le rétablissement provisoire des anciennes skins le prochain changement notable se situera au niveau du footer : étant donné qu'un menu contextuel s'affiche désormais dans la sidebar la navigation proposée en footer est devenue totalement inutile, du coup je pense me servir de mon footer pour donner des infos sur l'identité du site. Affaire à suivre...
Modifié par Olivier C (21 Dec 2011 - 09:49)
Salut,
Je ne suis pas sûr qu'un site sur l’iconographie religieuse se doive de posséder une identité graphique très forte, au contraire, j'aurais tendance à jouer la sobriété. Par exemple, comme dit stephanelam, le design actuel est totalement HS. Smiley langue
jmlapam a écrit :
Je ne suis pas sûr qu'un site sur l’iconographie religieuse se doive de posséder une identité graphique très forte, au contraire, j'aurais tendance à jouer la sobriété.

Oui. D'autant plus que je développe ce thème WP pour mon site mais aussi à terme peut-être pour telle ou telle paroisse ou assoc' (avec des modif's mineures). C'est pour cela que je préfère laisser le travail de personnalisation aux grandes images de chaque article placées en bannière.

Aller : je vais retoucher tout ça ce soir, on va essayer de faire sobre et classe (quitte à revenir sur l'ancien design). À l'occasion repassez demain me dire votre opinion sur la prochaine mise à jour, ça fait toujours plaisir d'avoir des avis, et je ne prends pas ombrage des critiques éventuelles, au contraire... Bien à vous
Modifié par Olivier C (21 Dec 2011 - 18:40)
Salut,

Je trouve ça déjà beaucoup mieux, mais il reste encore quelques petites choses à faire au niveau du design si je puis me permettre ...

Je te fais une petite todo list, c'est selon moi ce qu'il y a de plus efficace :

— la favicon est assez bizarre vue de loin, on dirait plus un fantôme que le Christ.
— le logo est bien plat, là pour une fois, un peu plus de créativité aurait été adaptée ... moi j'aurais bien vu le nom dans une police serif, et à la place du T, la Croix.
— il faut vraiment enlever la shadow sur les h2 dans la colonne de droite.
— dans le footer, il faut absolument changer les petits "ticks" verts et il faut augmenter la line-height de tes li, c'est trop serré là.
— la police Cabin Regular est en quelque sorte inutile, puisqu'elle est vraiment très proche de Tahoma ou Verdana, et je trouve que tu devrais faire une séparation serif/sans-serif. Par exemple, tu prends du Georgia pour les titres, et du Verdana pour le corps.

Et je continue de regarder, mais si t'arrives déjà à corriger ça, ça sera un super boulot de fait Smiley cligne
Salut,

Désolé de ce qui suit mais:
- c'était beaucoup mieux à une certaine époque, je trouve que tous ces arrondis ne servent absolument pas le design.
- ce vert qui tend vers le vert lime parfois est HS
@ Stephanelam : merci, je prendrai en compte toute ces remarques, d'autant plus que vous m'aviez déjà fait part de certaines...

J'ai pour l'instant un truc plus urgent que mon site : on me demande de designer un nouveau player pour Radio Espérance, et du coup je me met au HTML 5 et je galère un peu (la maquette en cours d'élaboration ici). Surtout que je n'ai que les vacances pour faire ça, et encore : j'ai des partiels et un travail de fin d'étude qui m'attend pour la rentrée. Mon site va donc attendre, ainsi que le player précité, je le crains...
Modifié par Olivier C (07 Jan 2012 - 14:30)
Je viens de repasser sur le site, et le choix des polices est nettement meilleur, les trucs inutiles et un peu HS ont été enlevés, ... bref, pas mal du tout, c'est la bonne voie Smiley smile
Et tout cela en se passant de @font-face ! J'ai suivis un cours video sur les polices démontrant que la grande multitude des fonts disponibles sur le net n'est pas forcément intéressante et que les polices les plus intéressantes, de l'ordre d'une soixantaine, étaient déjà disponibles sur la plupart des ordis. Ce cours m'a convaincu : je réserverais l'utilisation de @font-face pour les caractères hébreux ou syriaques...

De même, certains shadow ont été enlevés...

Comme débutant je suis omnibulé par l'aspect techno du code : dès que je maîtrise un nouveau truc j'ai envie de le mettre en œuvre sur mon site ! Mais ce qui est techniquement possible et accessible n'est pas forcément opportun...

Comme le site bouge encore un peu je supprime les images en base64, je convertirai définitivement les images du thème vers ce format quand le thème sera plus stable (pas sûr que ça arrive un jour...) sinon la maintenance est trop lourde.

La prochaine étape sera le respect d'une grille plus stricte en regard de la typo et des différents blocks.
Modifié par Olivier C (05 Jan 2012 - 22:45)
***************************************************************************
Bonjour,

Up sur le topic pour relancer la critique suite à la refonte du thème de mon site. Tout est expliqué dans la réédition de l'en-tête du topic.

Bien à vous
***************************************************************************
Salut,

Joli !
La page "'à propos est assez réussie, seul bémol ta bannière qui est floue par endroits.
Jolie favicon.
Tu as amélioré la performance aussi.

Tu as des toutes petites erreurs d'étourderie du style:
a écrit :
<li><a href="http://christus-web.com/sommaire/"[#red]" [/#]class="shadowLinks">Sommaire</a></li>


Très propre, le scrolltop est assez discret en coin comme cela.

Une voie d'amélioration peut résider dans les contrastes assez faibles globalement.
Modifié par jmlapam (29 Jan 2012 - 18:06)
Superbe !

Je trouve que ton design correspond vraiment bien au thème sans tomber dans l'excès. Il me plait beaucoup. Les petits traits sur le bandeau de ton menu sont un détail que j'apprécie beaucoup. Les images sont très belle ça aide évidement pour le rendu final.

Un truc qui fait bien plaisir c'est la taille de ta police, rha enfin un site lisible !

Ce qui est un peu dommage je trouve c'est que la recherche n'est pas disponible sur la première page alors que c'est sans doute là qu'on l'attend le plus vu le contenu. En parlant de ce contenu, ça aurait été bien d'avoir la possibilité de le filtré ou un truc dans le genre qui faciliterai ça consultation car là il y en a vraiment beaucoup ça peut paraître rebutant au premier abord.

Une autre chose que je trouve étrange (dans ton footer) c'est que ton hover fait l'effet inverse, il ne met pas en valeur le focus, il le rend moins visible, ça devrait être le contraire pour moi. Un hover sert à mettre en évidence et pas le contraire.

Dans ton menu il y a un petit « + » à côté du mot accueil, personnellement quand je vois ça je me dis que c'est un menu déroulant, mais non. Pourquoi avoir opté pour ce choix ?

Dans ton formulaire de contact le bouton radio est loin de son label, à première vue on peut se demander à quoi il est associé.

Désolé je me suis permis de te tutoyer, je sais que tu vouvoies tout le temps toi Smiley langue
@jmlapam et Gili : merci pour vos remarques messieurs, j'ai rectifié les bugs signalés. Comme prévu, j'ai aussi mis en place un slider ainsi qu'un plan pour les articles. Contrairement à mon ancien site ou le slider était codé en dur je l'ai ici adapté pour qu'il soit compatibe avec les loop WordPress : celui-ci se gère désormais entièrement tout seul (mode aléatoire).
Gili a écrit :
Je trouve que ton design correspond vraiment bien au thème sans tomber dans l'excès.

Merci, j'ai passé pas mal de temps à trouver un équilibre. En ce sens mon premier thème m'a servis de brouillon. J'ai aussi étudié pas mal de thèmes existants. Un point important pour moi - et que je travaille encore - est la navigation. N'hésitez pas à faire des remontées sur ce point (@Gili : tu l'as déjà fait d'ailleurs).
Gili a écrit :
Un truc qui fait bien plaisir c'est la taille de ta police, rha enfin un site lisible !

C'est bête à dire mais c'est la taille préconisée par défaut ! (1em ou 16px) Et j'ai même supprimé les @font-face suite à la lecture d'un petit cours sur le sujet. En bref : les polices existantes sont très suffisantes dans 90% des cas, et les choix alternatifs ne sont pas toujours du meilleurs goût. Et je dois dire que l'argumentation m'a convaicue. Je réserverai désormais cette techno pour les polices grecques, hébraïques ou syriaques du site.
Gili a écrit :
Ce qui est un peu dommage je trouve c'est que la recherche n'est pas disponible sur la première page alors que c'est sans doute là qu'on l'attend le plus vu le contenu.

Je me suis fait exactement la même réflexion. La barre de recherche est désormais disponible sur la page d'accueil. Mais je pense que je vais finir par l'intégrer dans le header. Ce serait plus simple dans le footer mais je pense qu'il est important que cette barre soit perceptible immédiatement sur un site de contenu tel que le mien.
Gili a écrit :
En parlant de ce contenu, ça aurait été bien d'avoir la possibilité de le filtrer ou un truc dans le genre qui faciliterai sa consultation car là il y en a vraiment beaucoup ça peut paraître rebutant au premier abord.

La page "home plus" est un accueil étendu pour le tout venant, que je voudrais à terme lier avec un script en ajax, afin de réaliser un infinite scroll, comme sur un Chome Web Store par exemple. Pour une recherche avancée, pour les visiteurs un peu moins lambda, il y a la page "sommaire" et la barre de recherche... ce n'est pas suffisant ?
Gili a écrit :
Une autre chose que je trouve étrange (dans ton footer) c'est que ton hover fait l'effet inverse, il ne met pas en valeur le focus, il le rend moins visible, ça devrait être le contraire pour moi. Un hover sert à mettre en évidence et pas le contraire..

Je suis assez d'accord avec cette remarque et je vais essayer de la suivre, mais pour l'instant j'ai du mal à réaliser l'effet inverse : il faudrait un effet opacity sur un fond #FFF pour les img mais, je ne sais pas pourquoi, pour l'instant je n'arrive pas à mes fins...
Gili a écrit :
Dans ton menu il y a un petit « + » à côté du mot accueil, personnellement quand je vois ça je me dis que c'est un menu déroulant, mais non. Pourquoi avoir opté pour ce choix ?

Oui, je reconnais que c'est assez confus, je viens de rectifier le nom mais ce n'est sans doute pas encore assez explicite. Je voudrais éviter un nom à rallonge du genre : "accueil étendu"...
Gili a écrit :
Dans ton formulaire de contact le bouton radio est loin de son label, à première vue on peut se demander à quoi il est associé.

Un problème de compatibilité d'affichage entre navigateurs que j'ai à régler. Je l'avais repéré, ainsi que la page "home plus", pour laquelle les h1 partent tout en live sous firefox et consort...
Gili a écrit :
Désolé je me suis permis de te tutoyer, je sais que tu vouvoies tout le temps toi Smiley langue

No problème ! Smiley cligne Je vouvoie en première intention, mais pas de formalisme ! Smiley ravi

@jmlapam : pour le contraste, je sais. Je développe sous Mac, et les couleurs sont parfaites sous cet environnement. J'avais déjà remarqué qu'un très bon écran PC est environ deux fois moins bon dans les contraste que n'importe quel écran Mac. D'après mes calculs, pour transposer sur PC un contraste visuel background #EEE sur #FFF obtenu sous Mac, il faut au moins mettre un #DDD sur #FFF. J'ai les moyens de cibler un OS en rapportant une class dans mon body, puis appliquer une valeur spécifique en CSS pour tous visiteurs PC en factorisant en css le background concerné. Mais bon, on verra plus tard, et puis je trouve que le contraste passe envore, même sur écran PC...

Edit : je reviens sur ce que je viens de dire. Après vérification sur un bon écran Del, le contraste est comparable à celui d'un Mac. Je ne vais donc pas chercher à m'adapter à tous les écrans... surtout qu'à terme on peu espérer un changement qualitatif au cours du temps !

@ tous : n'hésitez-pas à donner votre avis. Ça fait toujours plaisir et je ne me formalise pas d'une critique, bien au contraire...
Modifié par Olivier C (31 Jan 2012 - 12:43)
Re,

Je viens de refaire par hasard un tour sur le site, et je viens de voir toutes les modifs ... franchement, bravo, je pense que ton site a atteint son meilleur design/code !

C'est superbe, maintenant, n'y touche plus Smiley cligne

EDIT : bon, par perfectionnisme pur :

— je n'aime pas beaucoup la police du lien "TOP" en bas à gauche, et je trouve que le fait que ce soit un triangle, ainsi, donne une impression de sticker "NEW" : tu pourrais plutôt mettre un rectangle arrondi, avec une flèche pointant vers le haut.

— le tout dernier footer est censé être le footer "chiant", car "administratif", donc tu devrais diminuer la taille de la police, et mettre un point final après "réservés".

— dans l'avant-dernier footer, il faudrait ajouter du contenu, là ça fait un peu vide à droite, mais si tu augmentes la width de la div contenant le texte, ça va être déséquilibré verticalement ... tu veux pas ajouter par exemple quelques citations de la Bible ?

— dans le header, tu as mis "un website catholique", tu devrais plutôt mettre "un site web", sinon ça fait un mélange en/fr et ça fait un peu bizarre.

— dans le menu, pourquoi as-tu mis "accueil plus" ?

— la police se lit pas super super bien, surtout en italique, tu devrais regarder du côté de Noticia Text dans Google Webfonts, je viens de la mettre en place sur mon site, c'est pas mal du tout !

— dans le corps de texte, tu devrais augmenter la line-height pour améliorer la lisibilité, là c'est vachement serré (perso, j'aime bien ça, mais certaines personnes peuvent pas le supporter).

— l'utilisation d'Arial est un peu tristounette, à la limite, Verdana, pourquoi pas ...

Enfin bon, c'est vraiment pousser le perfectionnisme à son extrême, parce que ce que tu as fait est déjà excellent Smiley cligne

S.
Modifié par Stephanelam (27 Feb 2012 - 11:32)
Merci pour ton retours Stephanelam, ça fait toujours plaisir, et puis on voit que l'on progresse même au yeux des autres.
Stephanelam a écrit :
— je n'aime pas beaucoup la police du lien &quot;TOP&quot; en bas à gauche, et je trouve que le fait que ce soit un triangle, ainsi, donne une impression de sticker &quot;NEW&quot; : tu pourrais plutôt mettre un rectangle arrondi, avec une flèche pointant vers le haut.

C'est un essai que je vais laisser quelque temps avant de le réévaluer. De toute manière le code CSS3 ne fonctionne pas sous IE<9. Je n'ai même pas pris la peine d'éditer un rectificatif pour ce navigateur, c'est pour dire comme c'est temporaire...
Stephanelam a écrit :
— le tout dernier footer est censé être le footer &quot;chiant&quot;, car &quot;administratif&quot;, donc tu devrais diminuer la taille de la police, et mettre un point final après &quot;réservés&quot;.

Un point ? ... oui pourquoi pas. Mais sinon je préfère laisser la taille de la font de la même grosseur que le corps des articles.
Stephanelam a écrit :
— dans l'avant-dernier footer, il faudrait ajouter du contenu, là ça fait un peu vide à droite

C'est prévu et le vide est laissé exprès. Qu'est-ce qui est prévu ? ... Je ne sais pas encore ! Mais plutôt quelque-chose d'utile à terme. Peut-être une connexion/et profil du connecté. Je verrais.
Stephanelam a écrit :
— dans le menu, pourquoi as-tu mis &quot;accueil plus&quot; ?

Décidément cette dénomination prête à confusion avec la page d'accueil. Aller hop ! Elle saute au profit de "Abstract", qui je l'espère sera beaucoup plus parlant.
Stephanelam a écrit :
— la police se lit pas super super bien, surtout en italique, tu devrais regarder du côté de Noticia Text dans Google Webfonts, je viens de la mettre en place sur mon site, c'est pas mal du tout ! [...]
— l'utilisation d'Arial est un peu tristounette, à la limite, Verdana, pourquoi pas ...

J'ai fait sauter toutes mes @font-face, je n'ai pas trop envie d'en remettre une pour l'instant : après avoir lu un peu sur la typo orientée web 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.

Sauf erreur de ma part il n'y a pas d'arial sur le site.
Stephanelam a écrit :
— dans le corps de texte, tu devrais augmenter la line-height pour améliorer la lisibilité, là c'est vachement serré (perso, j'aime bien ça, mais certaines personnes peuvent pas le supporter).

Ben... moi aussi j'aime bien. Et comme certains articles sont très long... De toute manière j'ai recours à d'autres trucs pour donner de l'aération au texte : les titres, blocs de citation, et autres blocs de texte "spéciaux".
Stephanelam a écrit :
Enfin bon, c'est vraiment pousser le perfectionnisme à son extrême, parce que ce que tu as fait est déjà excellent Smiley cligne

Le design est en effet terminé dans ses grandes lignes. Il reste cependant quelques détails à régler, comme les media-queries que je n'ai pas encore optimisé pour toutes les résolutions, il y a encore des bugs à ce niveau. Il faudra que je me penche sur la question, pour l'instant j'étais plus dans l'édition et sur d'autre projets plus immédiats, et surtout, maintenant que je maitrise pas trop mal le CSS je m'intéresse de plus en plus au php.

Bien à toi,
Olivier
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
Pages :