3246 sujets

Critiques de vos sites: code et design

Http://www.chambiers-loisirs.com

mince l'ours que je suis à encore oublié sa politesse dans le caniveau qui ma vu grandir Smiley biggol .....

pardon


bonjour a tous et merci de vos remarques ( même méchante Smiley langue ) c'est un petit site sans prétention mais j'essaye de lui faire une page sympa et cool pour cette assoca laquelle je participe comme je peut....

a++
Le validateur du W3C relève 22 erreurs pour la seule page d'accueil.

En outre, on est obligé de manier la molette de la souris pour lire le menu de navigation (et pourtant, j'ai un écran qui me restitue 1280 pixels de largeur sur environ 800).

Quant à l'image de fond, elle pourrait être optimisée : 201 ko commencent à faire beaucoup Smiley rolleyes , d'autant plus qu'elle comporte du contenu intéressant : l'intitulé de l'association qui, lorsque l'image ne s'affiche pas ou que la feuille de style n'est pas prise en charge, ne s'affiche pas, ce qui pose un problème d'accessibilité (et je ne parle pas des utilisateurs aveugles ou malvoyants qui ne pourront pas accéder au contenu textuel parce que l'image est en arrière-plan).

Enfin, je constate dans le code source un abus de <br />, alors qu'il suffit d'utiliser les CSS pour augmenter les marges verticales.

Bref, il faudra remettre l'ouvrage sur le métier. Smiley cligne
Modifié par Victor BRITO (29 Nov 2009 - 16:14)
oui 22 erreurs seulement pour ce fichu de iframe de météo, je ne sais pas trop comment le gérer et pense même à le virer......

oui l'image de fond est grosse, je vais essayé de la réduire sans perte de qualité !

ok pour le br je vais m'en occuper


merci du temps que tu me consacre...
Bonjour,

Benito a écrit :
oui 22 erreurs seulement pour ce fichu de iframe de météo, je ne sais pas trop comment le gérer et pense même à le virer
Si els erreurs sont causée par une iframe, il suffit de changer de doctype (ou effectivement de supprimer l'iframe).



Graphiquement... C'est pas génial. La bannière est réellement trop grande (moi elle plus plus d'un écran sur ma config actuelle) et est assez effrayante... (les découpages de fond ne sont pas heureux, l'assemblages des images n'est pas homogène et les images choisies ne sont pas particulièrement belles (photos déformées, têtes toutes rouges et brillantes à cause du flash...).

La partie dédiée au titre/nom du site sur le header est bien trop faible. Il est diffile de savoir sur quel site on se trouve dès le premier coup d'oeil.

L'utilisation de PNG transparents pour les éléments du menu n'est pas justifiée. Des gif sans transparence seraient bien plus adapté (pas de problème de fond gris sous IE et poids plus faible).

Pour le code :

* Un doctype XHTML strict c'est bien joli, mais totalement innaproprié, comme dit plus haut si tu utilises une iframe, tu n'as pas d'autre choix que d'utiliser un doctype transitional ; et étant conenr que le contenu de ta page est servi en text/html, l'utilisation d'HTML serait plus logique.

* Comme l'a déjà signalé Victor, une image porteuse de contenu (pour faire très simple : "qui a du texte dessus") DOIT, toujours, se trouver dans le code HTML, avec un attribut alt duement remplis, et non dans le CSS. Actuellement si pour une raison X ou Y l'image de ton header et/ou ton fichier CSS ne se chargent pas, plus d'image, plus de titre. Résultat : l'utilisateur ne sait pas sur quel site il se trouve.

* Le <title> de la page n'est pas génial. As-tu déjà essayer de le faire lire par un lecteur d'écran ? Un titre qui n'est pas une url, en français correcte serait bien plus aggréable et propre.

* Ajouter une meta description ne boostera pas ton référencement, mais aidera à attirer plus de clics depuis les pages de résultats des moteurs de recherche.

* Le soulignement DOIT toujours être réservé aux liens. Même quand ce soulignement est sur un texte porté par une image se trouvant en fond... De plus les liens de la partie news, ne sont pas clairement identifiables, visuellement, commes liens.

* Le pied de page, après "Madame CONGNARD" est particulièrement désordonné. On a l'impression que tout à été mis là au hasard, parce qu'on ne savait pas quoi en faire. D'ailleurs la plupart des éléments n'apportent rien d'interessant (la température, le logo super U (qui s'il est un sponsor doit être indiqué comme tel), le page rank actuel (le page rank est mort, et induquer un PR de 0 c'est pas glorieux, et même plus haut, en général les visiteurs s'en fichent)).

* Le changement d'interface pour la galerie photo est particulièrement perdurbant et l'assurance de perdre des visiteurs dans le trajet.
Pour le design ben c'est pas trop ça... Comme dit plus haut réduire la surface du montage.
Remplacer la typo de libellé du menu typée années 70 par quelque chose de plus actuel et réduire la surface alloué au menu en essayant de faire rentrer les rub. sur une ligne.

Laurie-Anne a écrit :

Un doctype XHTML strict c'est bien joli, mais totalement innaproprié, comme dit plus haut si tu utilises une iframe, tu n'as pas d'autre choix que d'utiliser un doctype transitional ; et étant conenr que le contenu de ta page est servi en text/html, l'utilisation d'HTML serait plus logique.

Salut, sauf si c'est imposé de l'extérieur on a toujours le choix Laurie-Anne, même celui qui consiste à rendre un document invalide en connaissance de cause. Si on fait exception de la validité, je n'ai toujours pas compris ce qu'il y a de vraiment problématique à utiliser un DTD strict avec des iframe et pourquoi le strict l'a rendu invalide. D'ailleurs HTML5 conserve l'iframe. D'autre part l'avantage du strict est qu'il permet de détecter des erreurs plus ennuyeuses lors de la validation.
ok merci pour vos remarques que je vais mettre (certaine sont déjà rectifiées) en applications

benoit
Hermann a écrit :
Si on fait exception de la validité, je n'ai toujours pas compris ce qu'il y a de vraiment problématique à utiliser un DTD strict avec des iframe et pourquoi le strict l'a rendu invalide.

Sans doute le même problème (à un moindre degré) que les jeux de cadres qu'implique l'élément frame : le contenu appelé par l'élément iframe ne sera pas visible de certains agents utilisateurs, comme les robots des moteurs de recherche (seule l'alternative éventuellement contenue entre <iframe> et </iframe> sera prise en compte par ces derniers).
Victor BRITO a écrit :

Sans doute le même problème (à un moindre degré) que les jeux de cadres qu'implique l'élément frame : le contenu appelé par l'élément iframe ne sera pas visible de certains agents utilisateurs, comme les robots des moteurs de recherche (seule l'alternative éventuellement contenue entre <iframe> et </iframe> sera prise en compte par ces derniers).

Pas visible de certains UA seulement si c'est implémenté de manière non accessible il me semble.
Ceci dit je n'ai jamais testé ce que ça donne sur un navigateur texte.
Contrairement à ce que tu dis, je ne crois pas que les robots d'indexation ne les prennent pas en compte (mais il faut éviter leur indexation via le meta robot).
Concernant l'invalidité, ça doit effectivement venir d'un problème liés à leur accessibilité
qui était probablement plus réduite lors de la rédaction des specs HTML4 (1999).
a écrit :
* Un doctype XHTML strict c'est bien joli, mais totalement innaproprié, comme dit plus haut si tu utilises une iframe, tu n'as pas d'autre choix que d'utiliser un doctype transitional ; et étant conenr que le contenu de ta page est servi en text/html, l'utilisation d'HTML serait plus logique.


peut etre.... mais malheureusement moi qui suit autodidacte n'est appris que par le livre de Mr Nebra ( il est dans le coin je crois??) qui ne parle QUE du xhtml 1 strict, est pas d'autre doctype possible en fonction du contenu, son livre ( qui est vraiment bien !!) ne ma pas permis d'explorer d'autre, il me reste un bon bout de chemin..... j'ai à peine poussez le portillon !!
La différence, lors de la rédaction du code, principale entre XHTML et HTML c'est la fermeture des balises qui ne sont pas doubles. En XHTML on mettra /> et en HTML > uniquement.
Salut,

Ainsi que l'écriture des balises en minuscules, et une imbrication correcte des balises, fermées dans l'ordre inverse d'ouverture. Smiley cligne
Mikachu a écrit :
Ainsi que l'écriture des balises en minuscules, et une imbrication correcte des balises, fermées dans l'ordre inverse d'ouverture. Smiley cligne
Oui, mais ça faut pas le dire aux débutants qu'ils ne sont pas obligés de le faire en HTML 4.01 Smiley langue
Si si, moi je le dis, car même si ce n'est pas une obligation de rédiger en minuscules en html, ca me pique les yeux quand je vois du code tout en majuscules ! Donc c'est pour la bonne éducation ! Smiley murf
bon j'ai retravaillé le sujet, beaucoup moins de jeu avec la roulette !!, plus leger, les photos composant le fond toute travaillé, bref je progresse ??

ben
Salut,

Graphiquement je n'ai pas vu la première version mais là ce n'est toujours pas terrible...

On sent bien la volonté de faire un patchwork d'éléments visuels en rapport avec ton sujet mais la réalisation ne suit pas :

- Ton header est 15 fois trop haut ! Réduis-le de moitié au minimum.
- Ton fond est trop étroit, sur un gros écran le noir s'arrête net sur ton fond bleu est c'est peu esthétique.
- Tu recycles des éléments visuels en rapport avec l'enfance, mais ceux-ci sont mal intégrés principalement parce que tu ne crées aucune unité graphique et colorimétrique entre eux : photo, dessins, modélisations 3D, pictos, tout ça est trop hétérogène.
- Les photos que tu utilises sont vraiment pas terribles (euphémisme) : cramées au flash, étirées non homothétiquement, elles sont une piètre matière première dont tu auras du mal à tirer quelque chose.
- Le menu sur 3 lignes, c'est too much et illisible. De manière générale, je dirais qu'il y a trop d'items dans ton menu : tu devrais avoir 5-6 éléments pas plus. Regroupe ceux qui peuvent aller ensemble et / ou crée un deuxième niveau de navigation.
- Beaucoup trop de famille de fonts différentes se croisent sur cette home : DejaVu, Georgia, Comic Sans MS, Trebuchet, et encore une autre sur tes blocs de Lego. Choisis 2 fonts (voire 3) et tiens t'y.
- Fais attention à ne souligner que les liens hypertextes.

Voilà pour une première passe ! Smiley cligne
ca dort jamais un dev ?? je pensais être tranquille jusqu'à ce matin ...... Smiley bawling

les photos que j'ai sont celle du centre, prise avec tout et n importe quoi et dans les conditions que tu peut imaginer, mais c'est aussi la vie centre.... donc je dois faire avec...

vus tes remarque, et je te remercie du temps consacré pour cela, je vais modifier ceci dans ce sens des que possible (demain ?? )


a++
Bonjour,

@Benito : je passe en coup de vent (je repasserai dès que j'aurai quelques minutes).

J'ai le sentiment que le patchwork dans ce cas précis n'apportera jamais un bon rendu.
Au delà de ça, les couleurs sont trop crues et les contrastes entre ces dernières trop importants.

--

C'est fait en 5 minutes montre en main.
Si ça te plait, c'est à toi. (à condition que tu l'accommodes à ta sauce, le design est loin d'être terminé)

http://omicronlab.net/upic/4b18292e-2438.png

Edit : on pourrait aussi imaginer un empilement des blocs Légo pour ton menu :

http://omicronlab.net/upic/4b1857f1-882.png
Modifié par Akhilleus (08 Dec 2009 - 18:02)
c'est vraiment tres gentil !! mais je n'aurai aucun plaisir a recopier ton travail et surtout aucune fierté, en tout cas je vais m'inspirer de ta disposition et laisser la page uniquement au contenu...


merci
Sujet clos
Aller à