3246 sujets

Critiques de vos sites: code et design

Test terminé

Bonjour à tous,

Je me lance : je viens de terminer un site pour une entreprise d'aménagements extérieurs : dallages abords de piscine, allées, sentiers,...

Voici l'adresse : test terminé ! Merci

Qu'en pensez-vous ? Pas trop dur et pas sur la tête Smiley rolleyes !!!

NB : le caractère a été impérativement choisi par le client.

Merci

A bientôt,
Modifié par xxi (20 Feb 2010 - 14:30)
Bonjour,

C'est la panique sous IE6 ^^;

6 erreurs de code en transitionnal, ça ne devrait pas arriver !

Pour le code :
* Les meta : keywords, author et copyright sont tout à fait inutiles et peuvent donc être supprimée. La première parce qu'elle ne sert strictement à rien en terme de référencement (et en aucun autre terme) et les seconde parce qu'à condition de lire le code source personne ne les verra...

* La meta description n'est pas faite pour lister des mots clés, mais pour donner une description (mince alors, c'est son nom) de la page en cours. Il est relativement important de rendre cette description sexy car c'est la première chose (après le titre de la page) que vera le visiteur potentiel dans les resultats de recherches sur moteurs. Une suite de mots clés, ça ne donne pas du tout envie de cliquer...

* Ceci : 
<div id="teaser"></div>
Avec une image de fond porteuse de texte, c'est zéro en acessibilité... Les images porteuses de contenu doivent toujours se trouver dans le code HTML avec un alt qui va bien !

* La hiérarchie des titres est incorrecte. Elle commence à h2, sans h1. La hiérarchie des titres doit toujours commencer par h1 et ne pas comprter de sauts (passer du h1 au h3 sans h2 entre les deux).

* Chaque page du site doit avoir un titre unique se rapportant à la page (idem pour la description).

* ça : 
</p><br/><br/>
J'avoue que c'est osé...
a écrit :
6 erreurs de code en transitionnal, ça ne devrait pas arriver !


J'ai ajouté le favicon animé en dernière minute et j'ai oublié de corriger les codes.


a écrit :
Pour le code :
* Les meta : keywords, author et copyright sont tout à fait inutiles et peuvent donc être supprimée. La première parce qu'elle ne sert strictement à rien en terme de référencement (et en aucun autre terme) et les seconde parce qu'à condition de lire le code source personne ne les verra...


=> à supprimer

a écrit :
* La meta description n'est pas faite pour lister des mots clés, mais pour donner une description (mince alors, c'est son nom) de la page en cours. Il est relativement important de rendre cette description sexy car c'est la première chose (après le titre de la page) que vera le visiteur potentiel dans les resultats de recherches sur moteurs. Une suite de mots clés, ça ne donne pas du tout envie de cliquer...


C'est la description de l'activité de l'entreprise. Comment décrire autrement ? Mais je vais préciser pour chaque page.

a écrit :
* Ceci :

<div id="teaser"></div>

Avec une image de fond porteuse de texte, c'est zéro en acessibilité... Les images porteuses de contenu doivent toujours se trouver dans le code HTML avec un alt qui va bien !

A corriger

a écrit :
* La hiérarchie des titres est incorrecte. Elle commence à h2, sans h1. La hiérarchie des titres doit toujours commencer par h1 et ne pas comprter de sauts (passer du h1 au h3 sans h2 entre les deux).

* Chaque page du site doit avoir un titre unique se rapportant à la page (idem pour la description).


Simple erreur : le même titre sur la 2nde page est bien en h1

a écrit :
* ça :

</p><br/><br/>

J'avoue que c'est osé...


Je trouvais plus facile pour augmenter l'interligne entre 2 paragraphes bien précis. Comment l'éviter ?

Grand merci à toi pour le temps passé et pour tes conseils.
Modifié par xxi (23 Nov 2009 - 14:54)
xxi a écrit :
Je trouvais plus facile pour augmenter l'interligne entre 2 paragraphes bien précis. Comment l'éviter ?
Une classe avec un margin top ou bottom.
Bonjour,
un peu tristounet tous ce gris...
On ne sait pas si le MS (trop gros en corps) fait parti du logo de l'entreprise à cause son format un peu atypique. La "tagline" (Michel Sébastien) est trop grosse.

Important: La photo du fond du header n'est pas très vendeuse. Elle ne communique rien en terme de valeur ou de diversité. L'impression produite n'est pas positive:
prise de vue en plongée négative et sans ouverture (pas d'horizon ou d'imagination facilitée d'un hors champ ), atmosphère triste, et absence du contexte général. En l'état cette photo n'a qu'une valeur décorative, elle ne fait que montrer un produit parmi d'autres rien de plus. Smiley cligne

Important encore: la spécificité de l'entreprise (placement à l'ancienne de pierres naturelles) n'est pas assez mise en valeur. Celle-ci devrait se trouver inscrite en haut de page dans la bandeau identitaire (le header) en tagline ou en accroche, la tagline étant le petit texte de description (la devise, etc) qui se place sous l'emblème du logo.

xxi a écrit :

NB : le caractère a été impérativement choisi par le client.
Dommage, c'est assez scolaire comme typo.

Pour le reste j'y reviendrai sans doute plus tard mais
il y a pas mal de chose à revoir.
Modifié par Hermann (25 Nov 2009 - 21:33)
J'ai changé l'url, pour diriger vers mon serveur privé.

Google vient de déclasser le site. Est-ce à cause des changements ?

Merci
Ouch, la typo cursive sur TOUS les textes, c'est violent ! Et plutôt indigeste voire illisible... Sur les titres, why not, mais sur le corps de texte de base, c'est too much.

Pour le reste c'est effectivement assez triste, et pour un "créateur d'espaces" le design est bien bouché ! Tout ce gris, ces conteneurs fermés, ça ne respire pas...
Tu pourrais commencer par t'affranchir des cadres, du fond uni, et colorer un peu tout ça Smiley smile
@xxi merci pour le MP, je réponds ici si ça ne te fait rien (n'ais pas peur de "polluer" ton thread, il est là pour toi hin Smiley smile )

Quand je parle de "conteneur fermé", je veux dire que tu enfermes tous tes contenus dans des cadres sans les laisser respirer, ce qui rend tout de suite ton design étriqué. Le fait que ce soit bouché par ton gris "aveugle" renforce ce sentiment (une trame légère l'atténuerait peut-être).

Pour exemple, le site de http://www.smashingmagazine.com/ laisse son contenu respirer : le fond blanc prend toute la largeur du viewport, ce qui aère le (très dense) contenu.
Sujet clos
Aller à