Bonjour,
je m'amuse depuis fort longtemps a créer des interfaces de sites internet, et, depuis peu à leur donner vie. Voilà donc un des mes premiers site codé, après beaucoup de tâtonnement / bidouillage niveau CSS pour arriver a ce rendu.

Le tout est valide XHTML 1.0 & CSS 2.1.

Grafitix 'Black&White?' / ( CSS )

Merci et bonne journée.
Modifié par Grafitix (27 Apr 2011 - 13:59)
Bonjour,

Merci de faire un second sujet pour le deuxième site (question de facilité pour les critiques) et d'éditer ton message (en supprimant ce qui le concerne).
Bonjour,

deux remarques naïves qui n'engagent que moi :

sur le premier site, j'avoue que je suis toujours perturbé par les polices qui changent de taille en hover (je sais il m'en faut peu...).

sur le deuxième on a au premier abord l'impression qu'il n'y a que 4 photos en regardant les vignettes. Je n'ai en effet pas passé la souris sur la photo grand format au début.
Pourrais-tu rajouter des flèches qui apparaitraient sur les côtés des vignettes (lorsqu'on passe la souris sur elles par exemple).



H.
Merci pour ta réponse, pour le deuxième site, il y a déjà une flèche -blanche...- pour naviguer entre les vignettes. A part en blanc ca passait mal je trouve, j'essaierai le noir.

(je m'en vais modifier le premier post...)
Visuellement, la page d'accueil pose un gros problème : elle est tellement sombre qu'on voit à peine de contenu. Il faut absolument augmenter le contraste pour que le visiteur puisse, immédiatement voir le contenu présent plutôt que de le chercher.

La zone en haut à gauche de l'image "photographie" n'est pas réactive au survol, à savoir si c'est un bug de superposition ou d'IE8...

Pour le code :
* Tu ne déclare pas la langue de la page : attribut lang sur html + meta Content-Language à ajouter.

* Vu le peu de contenu de la page d'accueil, une meta description serait un gros plus (et pas vraiment du luxe) pour ta visibilité sur les pages de résultats de Google & co. Attention : ça n'améliorera pas ton positionnement, ni ton référencement.

* Il est préférable de placer les scripts JS en fin de document (sauf s’ils se chargent de manière asynchrone).

* Il est également préférable de limiter le nombre d'appel à des fichiers externes : un seul fichier JS est suffisant ; idem pour les CSS, un seul suffit.

* Les images utilisée pour le survol ne devraient pas se trouver en début de code (c'est-à-dire pas là où elles apparaissent réellement) mais au niveau des images de base (qui semble être placée dans le CSS).

* Accessoirement les alt de ces images ne sont pas correct ("hover" n'est pas une info de l'image).

* Les images porteuses de contenu (typiquement, les images de ton menu) DOIVENT toujours se trouver dans le code HTML, avec un attribut alt correctement rempli : en l'état, les liens de ton menu (vides) n'existent pas.

* Pour les pages de contenu, ta hiérarchie des titres est incorrecte. Sur la page photographie (qui ne semble pas parler de photo, d’ailleurs) tu utilises un h3 comme premier titre de section : ce devrait être un h1.

* Pour baliser les paragraphes il faut utiliser <p>

En gros : Il y a de l’idée, mais il y a beaucoup à améliorer en terme de qualité.
Merci pour toutes ces remarques, c'est noté et je corrige tout dès ce soir.

Laurie-Anne a écrit :

La zone en haut à gauche de l'image &quot;photographie&quot; n'est pas réactive au survol, à savoir si c'est un bug de superposition ou d'IE8...


J'avais remarqué et oublier de corriger, ca vient apparemment du fait le logo est sur l'image "photographie". (idem sur Mozilla)

Laurie-Anne a écrit :

* Il est préférable de placer les scripts JS en fin de document (sauf s’ils se chargent de manière asynchrone).

* Il est également préférable de limiter le nombre d'appel à des fichiers externes : un seul fichier JS est suffisant ; idem pour les CSS, un seul suffit.


Oui, j'ai oublié d'enlever les scripts dont je comptais me servir.
Pour le CSS, il faut juste le mettre sur la page d'index?

Laurie-Anne a écrit :

* Les images utilisée pour le survol ne devraient pas se trouver en début de code (c'est-à-dire pas là où elles apparaissent réellement) mais au niveau des images de base (qui semble être placée dans le CSS).


J'ai trouvé cet "astuce" pour donner une certaine fluidité au menu, je l'ai peut être mal utilisée...

Laurie-Anne a écrit :

* Accessoirement les alt de ces images ne sont pas correct (&quot;hover&quot; n'est pas une info de l'image).

* Les images porteuses de contenu (typiquement, les images de ton menu) DOIVENT toujours se trouver dans le code HTML, avec un attribut alt correctement rempli : en l'état, les liens de ton menu (vides) n'existent pas.

Ah, ça je savais pas mais en y réfléchissant c'est logique Smiley ohwell

Pour le "hover" en guise de alt, c'est parce que les images chargées ne sont pas affichées, le alt est alors inutile saut pour m'y retrouver non?
a écrit :

* Pour les pages de contenu, ta hiérarchie des titres est incorrecte. Sur la page photographie (qui ne semble pas parler de photo, d’ailleurs) tu utilises un h3 comme premier titre de section : ce devrait être un h1.

* Pour baliser les paragraphes il faut utiliser &lt;p&gt;


Ok pour les titres et les paragraphes.
Pour le contenu, c'est évidement du provisoire.

Merci encore!
Grafitix a écrit :
Pour le CSS, il faut juste le mettre sur la page d'index?
Non, le fichier CSS doit être appellé par toute les pages qui doivent être stylée.

Grafitix a écrit :
J'ai trouvé cet &quot;astuce&quot; pour donner une certaine fluidité au menu, je l'ai peut être mal utilisée...
Il semblerait. Le plus simple pour ton cas serait d'avoir les image de bases dans les liens (élément img avec en alt le texte porté par l'image) et au survol de changer la source de l'image pour utiliser celle de survol. Pour le préchargement des images, il existe d'autre techniques préférables à du display:none;

Grafitix a écrit :
Pour le &quot;hover&quot; en guise de alt, c'est parce que les images chargées ne sont pas affichées, le alt est alors inutile saut pour m'y retrouver non?
Sauf si les CSS ne sont pas pris en compte.