Site avant mise en ligne... désolé : "le dimanche de la vie"

awaloo a écrit :
Me permettez-vous de prendre quelques libertés avec la charte et vous proposer une page avant la conception complète d'un site (SPIP). Cela m'évitera de tout reprendre.

Tant que le site n'est pas une image et suit les autres recommendations de la charte, il n'y a aucun problème.

Par contre pourrais-tu donner un nom de sujet plus explicite (le nom du site ou son adresse) ?

Merci d'avance.

Je le fais bien volontiers

Salut,

Dans l'ensemble ça se tient plutôt bien : c'est lisible, aéré !

Pinailles graphiques usuelles (je n'ai pas regardé du tout le code) :

- ton header est ferré à gauche alors que ton contenu est centré : sur les gros écrans, ça crée un décalage pas très heureux, tu devrais centrer aussi ton header.

- tes onglets ne sont pas hilightés en fonction de la rubrique dans laquelle on se trouve : c'est dommage, ça ne mange pas de pain !

- le rollover sur tes liens dans la sidebar n'est pas homogène (parfois soulignement, d'autres fois passage en gras) : pourquoi ? Le passage en gras n'est pas très heureux dans la mesure où il déforme la colonne au roll de façon pénible...

- les liens de cette sidebar sont un poil trop étriqués, un petit coup de padding pour éloigner le contenu texte du bord ferait pas de mal.

- plus graphiquement, je ne suis pas méga-fan de ton vert pour le header et le "15" sur le calendrier n'est pas super bien centré (bon ça ça devient subjectif je te l'accorde)

Voilà pour une première passe
Modifié par STPo (22 Apr 2009 - 11:37)

a écrit :
En ce qui concerne le header, j'ai fait comme ça car j'ai vu sur internet de plus en plus de sites utiliser cet aspect : le haut de la page est intégralement utilisé et on centre le contenu... Je trouvait que ça meublait. En général mes gabarits sont centrés.

Oui oui, j'ai dû mal m'exprimer : c'est très bien de faire prendre à ton header toute la largeur du viewport comme tu l'as fait, par contre centre le contenu de ce header, afin qu'il soit aligné au reste de ton site (comme le header d'Alsa ci-dessus par exemple).

Non non, rien de choquant pour le reste.
Je n'ai rien contre les couleurs pétantes, mais ton vert est trop acide je dirais : je le couperais bien avec du jaune / ocre comme celui présent sur ton calendrier, histoire de rendre le tout plus digeste (et sans perdre le côté "coloré").

Bonjour,
+1 avec toutes les remarques de STPo

Dans l'ensemble c'est agréable à l'oeil même s'il y a certaines choses à améliorer:

> s'agissant du bandeau identitaire, il te manque quelque chose qui puisse identifier l'objectif du site (un slogan, un visuel éloquent...). En l'état ça manque de sens.
Tes ombres portées (en haut en bas du bandeau) sont trop importantes et trop grises (toujours mettre du bleu et éventuellement la couleur de l'objet (vert ici) assombrie).
L'austérité et l'excessive discrétion de ton menu contraste un peu trop avec le bandeau.

> Certains de tes paragraphes de texte sont trop longs, ne pas dépasser 10 lignes par paragraphe. Essayer de mettre des mots en exergue. Bref ça manque un peu trop d'accidents visuels.

> L'idée des lettrines n'est pas mauvaise mais il faudrait que tu alignes leur ligne de base sur une des lignes de base du texte (la 3ème par exemple). D'autre part il faudrait réduire un peu l'espace entre la lettrine et le texte qui la suit pour obtenir une meilleur liaison (rien ne t'interdit d'habiller le "A" par exemple).
Essayer d'avoir à peu prés le même espace à droite et en bas de la lettrine, tu as actuellement trop d'espace en bas.

> Attention à ne pas réduire excessivement les approches (interlettrage) et les interlignes surtout avec des police serif. Tes titres "Exemple de titre..." se sont pas suffisamment interlettrés et interlignés.
Modifié par Hermann (23 Apr 2009 - 15:21)

Je ne sais pas si c'est approprié dans ton cas, vu que ton site n'est pas encore finaliser, mais je vais me concentrer un peu plus sur le code de ta page que sur son graphisme (il y a déjà beaucoup plus que je n'aurais pu remarquer qui a été dit ).

* Tu as une erreur de code :

<p>walter galvani fecit 2009  <p>

Le <p> n'est pas fermé.

* Dans la hiérarchie de ton site, tu mets au même niveau (h1) le titre de ton site "Le dimanche de la vie" et les titres de tes articles. Ces derniers devraient plutôt être balisé de h2.

* Attention aux textes alternatifs de tes images :

<img class="left" src="img/logoheader.png" alt="logo" />

Ici ton image logo ne porte pas vraiment d'information importante, elle est purement décorative, son alt devrait être vide.

<img src="img/logophilo.png" alt="logo" />

D'ailleurs tu réutilise ce "logo", ici le alt devrait contenir "Philo" comme l'image.

* Le contraste de la couleur de police de ton breadcrumb et des informations sous les titres de tes articles est très faible. Utiliser un gris un peu plus foncé permettrais à tous de bien lire sans avoir à plisser les yeux.

* Il pourrait être intéressant d'utiliser une feuille de style complémentaire pour IE6 et d'y mettre des images de remplacement au format gif avec un fond transparent (et tant pis pour les dégradés) à la place des png. Avec le fond blanc de ton site, le fond gris des png n'est pas très gênant, mais ce serait un plus graphiquement.

* Sur IE6, ton menu de droite apprait sous le contenu.

Merci à tous pour vos remarques.
Je me suis efforcé d'en tenir compte et de corriger certains détails.
Pour les "alt" des images, je me suis souvent contenté de copier/coller avant la version définitive.
J'ai modifié certains point de typo suggérés par Hermann et STPo. Les titres, les lettrines, les couleurs et même le bandeau du titre. J'ai un peu revu tout cela, dans la mesure du possible.
Ce sont les remarques sur le logo et IE6 qui me posent problème. Non qu'elles soient infondées mais mis à part les petites erreurs que je peux corriger ici où là, je ne sais pas quoi faire.
Les logos... je suis nul en dessin et j'ai du mal à trouver une identité visuelle... Je crois avoir peu d'imagination graphique !
Pour IE6 là franchement j'ai pas du tout codé dans ce sens... Bien que ce navigateur soit malheureusement répandu, je l'admets !
Questions : comment faire pour adapter une feuille de style ? Où trouver des infos à ce sujet ? Et puis est-ce encore justifié ?
En tout cas merci d'avoir pris un peu de temps pour vous pencher sur mes pages.

awaloo a écrit :
Questions : comment faire pour adapter une feuille de style ? Où trouver des infos à ce sujet ? Et puis est-ce encore justifié ?

Le plus simple avec IE6 c'est d'utiliser une feuille de style "additionnelle" que tu appellera grace à un commentaire conditionnel.

Et oui, c'est encore justifié, cela dépends des sujets des sites, mais sur le global il y a encore une petite 20 de % d'utilisateurs d'IE6.

Humm ! je trouve bien dans l'ensemble.

» Un peu trop étouffant la partie droite, un petit padding-left pour dégager le texte serais sûrement essentielle. Sauf si tu ne place pas de background.

» Une simple colorisation des thèmes et des rubriques suffit quelquefois et permet un visuel aérer de la zone, Ceci permettrais une cohérence avec la partie gauche de la page.

» Si tu tiens vraiment au background, je te suggère de choisir une couleur qui se fond avec le « body / background » afin de ne pas créer trop de contraste avec la partie gauche.

» Le but évidemment sera de montrer l'information avant son conteneur et non l'inverse. Dans ton cas, la partie de droite nous montrent le ou les conteneurs en premier plan et l'information en second plan.

» Je suis cependant d'accord avec un background sur le conteneur de base. Mais pas nécessairement sur le conteneur de chaque thème ou rubrique.

Tout n'est que suggestion évidemment : Félicitation pour ton site.

PS » Remarque que je n'ai pas looker ton script : J'ai grimper en simple visiteur.

++ :