3246 sujets

Critiques de vos sites: code et design

Avis sur mon 1er site CSS [http://location-jonzac.freehostia.com]

Bonjour à tous,

Après avoir réalisé quelques sites en HTML, j'ai tenté d'en faire utilisant le XHTML et le CSS, et j'aimerais avoir l'avis d'habitués de ces languagues sur le site.

Voici donc le site en question : http://location-jonzac.freehostia.com/

Merci de me dire ce que vous en pensez, et ce qui peut être amélioré...

A+, Adam
Modifié par adam061 (21 Mar 2009 - 01:15)
Une charte des couleurs te sera donc essentielle.
À la barre horizontale, au rollover nous passons du noir au blanc sur fond jaune.
Ce n'est pas visuel. Nous perdons en définition typographique.

Et la qualité typographique : « lecture » : est essentielle voir même prioritaire
pour des sites orienté vers un fort pourcentage de texte. Ce qui est ton cas
à voir la page d'accueil. Donne toi une chance en définisant une charte des couleurs.

Exemple : en se servant d'une image.

» Si tu as des images, disons un logo, eh bien rien ne t'empêche de l'éditer en « gif » afin de
vérifier la palette des couleurs que tu pourras enregistrer comme fichier « .act ».
» Ceci fait tu pourras visualisé la palette « .act » et t'en servir. Celui-ci est la présentation de toutes les couleurs représenter à partir de ton image.

Ce qui devrais t'aider à harmoniser ta charte de couleurs.

Considère que c'est plus un astuce qui nous informent sur les possibilités d'harmonisations
inter-pages ou inter-éléments : éléments de compositions

Trop de choses sont à dire concernant l'esthétique de ton site. Je laisse donc aux autres la participation à ce topic afin de t'aider davantage.

++ : Smiley smile
Modifié par zardoz (21 Mar 2009 - 20:19)
Administrateur
Bonjour,

(en vitesse cause plâtre)
J'ignore ce qu'est la "définition typographique" mais je confirme un souci avec le blanc sur jaune: c'est illisible.

Niveau code HTML, tu commences un § par un <br /> (sans aucun caractère avant), il te faudrait utiliser margin ou padding (-top) dans ce cas.
Modifié par Felipe (21 Mar 2009 - 20:30)
Bonjour,

je confirme aussi pour le blanc sur jaune, illisible :s.

Pour un premier site c'est déjà pas mal en tout cas Smiley cligne (un petit mot d'encouragement ne fait pas de mal !) .

Je ne suis moi même pas un super pro du css, mais je te dirais de mettre la propriété alt sur tes images, et title sur tes liens.

Et pour info aussi : erreurs de validation
Modifié par Heyoan (22 Mar 2009 - 14:15)
Salut,

@Laogan > merci d'utiliser les balises BBCode [ url]...[ /url] lorsque les liens sont trop longs Smiley cligne

Laogan a écrit :
je te dirais de mettre la propriété alt sur tes images, et title sur tes liens.
Si et seulement si cela est nécessaire :

* pour le alt : il est par exemple inutile sur une image qui ne serait que décorative (même si dans ce cas elle devrait logiquement se trouver dans le code css).

* pour le title : il n'est utile que s'il apporte une information complémentaire au libellé du lien.
Par exemple <a href="monlien.html" title="Mon lien">Mon lien</a> n'a pas d'intérêt.
Modifié par Heyoan (22 Mar 2009 - 14:23)
Hello,

Laogan a écrit :
Bonjour,

je confirme aussi pour le blanc sur jaune, illisible :s.

[...]

De l'orange irait bien sur son fond.

Heyoan a écrit :
[...]
Si et seulement si cela est nécessaire :

* pour le alt : il est par exemple inutile sur une image qui ne serait que décorative (même si dans ce cas elle devrait logiquement se trouver dans le code css).

* pour le title : il n'est utile que s'il apporte une information complémentaire au libellé du lien.
Par exemple <a href="monlien.html" title="Mon lien">Mon lien</a> n'a pas d'intérêt.

Ben voui, mais les validateurs n'aiment pas toujours Smiley confused et ne savent pas faire la différence.
Modifié par hibou57 (22 Mar 2009 - 17:45)
hibou57 a écrit :
Ben voui, mais les validateurs n'aiment pas toujours Smiley confused et ne savent pas faire la différence.
C'est pour ça qu'il faut mettre un alt vide. Smiley smile
Bonjour,
mêmes remarques que les précédent intervenants sur le hover et le reste.

Quelques autres points à améliorer:

> c'est un peu trop monochrome, des petite touche de couleurs vives et un fond blanc (ou plus clair) permettraient de dynamiser un peu l'ensemble et de faire circuler les couleurs.
Tu as encadré la surface utile d'un filet noir pour la délimiter du fond de la page mais comme sa couleur avec le fond est identique, il n'y a aucun mise en avant de l'interface utile. Bref il faut choisir entre l'intégration totale des contenu dans le fond ou son passage en avant plan via une couleur plus clair.

> Tu devrais passer tes exposant (m2) en position: absolute avec la marge vertical qui va bien pour éviter de provoquer une augmentation de la hauteur d'interligne dans ton premier paragraphe.

> Je pense pas que le centrage de tes textes ne se justifie, tu dois faire un choix entre tout centrer et tout ferrer à gauche (ce qui serait préférable)
Autrement dit tu ne devrais pas avoir un titre centré avec un texte au fer à gauche.

> Tu as des superpositions de texte dans la rub. Maison sous Firefox3

> Pense à donner des marges latérales (et verticales) à tes textes (exemple: texte presque collé à gauche sur la page d'accueil) pour laisser respirer un peu ta mise en page.

> Le traitement tonal de tes photos est parfois inégal (rub tarif, 1ere photo rub. maison > trop saturé/agressif)

> Bandeau identitaire du haut: attention à ne pas trop noircir l'extrémité droite au risque de faire un peu moins ressortir le texte. Tu dois veiller à l'impression générale produite par ta photo, un noir opaque aux extrémités n'est en général pas très recommandé sauf effet particulier recherché (enfermement...)

Voilà pour l'essentiel Smiley cligne

Sinon pour un premier site ben c'est pas mal du tout Smiley cligne
Modifié par Hermann (23 Mar 2009 - 09:51)
Juste une remarque rapide, et parce que j'aime pas le jaune (et que déjà beaucoup de conseils ont été donnés) Smiley langue

adam061 a écrit :
Après avoir réalisé quelques sites en HTML, j'ai tenté d'en faire utilisant le XHTML et le CSS, et j'aimerais avoir l'avis d'habitués de ces languagues sur le site.


On peut faire du CSS avec du HTML, d'ailleurs ce que tu fais c'est du faux XHTML, puisque servis en text/html : 
<meta http-equiv="Content-Type" content="[b]text/html[/b]; charset=iso-8859-1" />
.

Désolée, on est plus vendredÿ, mais fallait que je le dise ^^;
merci à tous pour vos commentaires !

je vais modifier un peu tout ça et je reviens vers vous !
Bonjour,

Concernant le faux xhtml, quel intéret puisque peu de navigateur profite pleinement de ces avantages. IE n'intègre aucun support pour les documents déclaré xhtml+xml.
La plupart des documents xhtml sont text/html.
D'ailleurs c'est même conseillé par le w3c.
Laurie-Anne je te trouve un peu strict à ce sujet Smiley cligne

La rigueur trouve ses limite là ou l'accessibilité impose son droit.
Modifié par artistik (04 Apr 2009 - 01:34)
artistik a écrit :
La rigueur trouve ses limite là ou l'accessibilité impose son droit.


Que voilà une jolie phrase qui ne veux rien dire. Tu ne voudrais pas développer ?

Enfin si c'est pour dire qu'un site accessible DOIT être en XHTML+CSS c'est pas la peine ^^; C'est faux et relativement idiot.

Et oui, je suis stricte, car pro HTML.
<p class="intro"><br /><strong>Maison située à Saint Germain de Vibrac<br />
	(Département de la Charente Maritime)<br />
	A dix minutes de Jonzac (8 km)</strong></p>


1) Pour moi ceci est un titre et meriterait une petite balise <hx>

2) Une question qui me taraude tes pages sont en php et tu as fait de l'url rewriting ou alors tu demandes le rechargement tu canevas (ce qui est commun a toutes les pages) à chaque fois avec des pages en pur html ?

3)
<p id="pub">
<table>
<tr><td>
<a href="http://www.locannuaire.com" target="_blank"><img src="http://www.locannuaire.com/minilogo.png" alt="Annuaire Vacances" border="0" /></a></td>
<td><a href="http://www.abritel.fr/annonces-detail/france_poitou-charentes_255/maison_jonzac_635399.php">Locations Vacances Jonzac</a><br /><a title="locations vacances" href="http://www.abritel.fr/annonces/location-vacances/france_poitou-charentes_charente-maritime_dt0.php">Locations Charente-Maritime</a></td></tr></table>
</p>

Un tableau dans une balise p ca ne va pas. Tu peux enlever ton p et mettre.
<table id="pub">... </table>

Ca donnera la meme chose en étant sémantiquement correct.

4)
<div><ul id="menu">...</ul></div>

a quoi sert cette div ?

Ceci dit pour un premier c'est bien. Bon courage pour la suite.
Modifié par gilles6975 (04 Apr 2009 - 18:14)
Sujet clos
Aller à