3247 sujets

Critiques de vos sites: code et design

[Semi-pro] http://conseil-thermique.servhome.org/

Pages :
(reprise du message précédent)

Bonjour/Bonsoir à tous,
J'ai fait une version (via @media) pour les mobiles, si ceux qui en possédaient pouvaient me faire part des bugs (s'il y en a Smiley lol ) ça serait cool.

Sinon le design a encore légèrement été modifié, donc n'hésitez pas à dire ce que vous en pensez Smiley smile

Merci d'avance!
Bonjour/Bonsoir,
L'ajout continu de nouveaux "articles" me posent des problèmes d'ergonomies et d'organisation des sections.
Je voulais donc savoir comment vous trouviez la navigation? J'ai été obligé de faire deux menu, un latéral, un vertical, est-ce un problème et si oui, avez-vous des pistes pour le corriger?

Si vous avez des remarques sur le design général, des idées d'amélioration (introduction de commentaires? faire une partie "blog/actualité?) ou encore sur le code, je suis tout ouïe!

Merci!
Salut,

ce qui sauve, c'est ton plan, sinon il est incontestable que ton site manque d'air et d'ergonomie, on ne sait pas trop où cliquer.

Les sous-menus ne sont pas assez tranchés, on ne comprend pas à quel menu principal ils se rattachent. Je serais toi, j'opterais pour un header plus gros (logo, bannière) et un super menu type "site du zéro".

Bon courage Smiley cligne
Salut jmlapam,
Le truc qui me chagrine c'est que le menu a déjà plus ou moins un structure identique à celle du SdZ non?!
Mais je vais essayer dans un premier temps de supprimer quelques sous-menus et regroupés les articles on verra ce que ça donnera.

Merci
Sylverdragon a écrit :
... j'ai passé mon site en HTML5 et en CSS3 (youpi Smiley smile )...

Je commence à m'intéresser au HTML5, c'est pourquoi je viens voir comment font les autres...

Vous dites avoir passé votre site en HTML5 mais pourtant je vois ça :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Alors que cela suffit :
<html lang="fr">

Modifié par Olivier C (23 Dec 2011 - 23:41)
...ensuite on a :
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="http://conseil-thermique.servhome.org/contenu/design.css" />

...au lieu de :
<link rel="stylesheet" href="http://conseil-thermique.servhome.org/contenu/design.css">

On continue :
<link rel="shortcut icon" type="image/ico" href="http://conseil-thermique.servhome.org/contenu/favicon_perso.ico" />

...au lieu de :
<link rel="shortcut icon" href="http://conseil-thermique.servhome.org/contenu/favicon_perso.ico">

<script type="text/javascript">

...au lieu de :
<script>

Exetera...

Attention, il ne suffit pas de changer de Doctype, le reste doit suivre...
Modifié par Olivier C (23 Dec 2011 - 14:42)
Pour la sructure : la <div id=&#8203;"menu"> peut être remplacée par <menu> qui existe et est faite pour cela en HTML5. La mal nommée** <div id="float_left"> par la balise <nav> et la colonne principale ("corps") devrait contenir quelque part une balise <article>...

Voir ici : http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html

**"mal nommée" car on devrait toujours nommer les div par leur fonction, et non par leur emplacement (mais il reste un relicat de cela sur mon site ! Smiley rolleyes ). D'ailleurs le HTML5, qui tire les leçons de quelques décennies de pratique sur les structures de site (ainsi que Google d'ailleurs, qui prend en compte ces structures dans son algoritme), l'a bien compris.
Modifié par Olivier C (23 Dec 2011 - 10:28)
Merci pour toutes ces remarques.

En fait, je me suis pas trop intéressé au doctype puisque le site est valide html5 donc je pensais que c'était bon...Mais ça semble pas trop être le cas, du coup je vais changer tout ça Smiley biggrin
En même temps je n'ai pas encore passé le mien sous HTML5 Smiley rolleyes : je regarde d'abords comment s'en sorte les autres afin de m'appuyer sur leur exemple pour m'établir une bonne nomenclature pour la structure de mon site. Smiley cligne
Sylverdragon a écrit :
Salut jmlapam,
Le truc qui me chagrine c'est que le menu a déjà plus ou moins un structure identique à celle du SdZ non?!
Merci


Salut,

Non, je ne trouve pas vraiment qu'il s'agit de la même structure, tu pourrais facilement faire un menu à 3 niveaux avec tout le contenu que tu as.

A+++
Premier essai...
C'est mieux maintenant, je préfère laisser la barre latéral gauche bonne ou mauvaise idée?

Est-ce que les titres de section ("nos critiques", "choix des systèmes",...) ressortent assez et si non comment y remédier? exemple à l'appui svp Smiley murf


Merci et bonnes fêtes of course!
Je viens de m'apercevoir d'un gros problème de menu sur IE8 alors que sur FF, Chrome et Opera tout fonctionne impecc, quelqu'un a une idée? Smiley sweatdrop

EDIT : Ce sont les balises html5 qui faisaient bugger...

La solution :

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->

et dans le CSS :
header
,nav
,section
,article
,aside
,footer
,hgroup
{
display: block;
}
Modifié par Sylverdragon (24 Dec 2011 - 01:39)
Salut,

La solution googlecode c'est mieux:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Smiley cligne
Olivier C a écrit :
En même temps je n'ai pas encore passé le mien sous HTML5 Smiley rolleyes : je regarde d'abords comment s'en sorte les autres afin de m'appuyer sur leur exemple pour m'établir une bonne nomenclature pour la structure de mon site. Smiley cligne

Ce qu'il a fait était correct Smiley cligne C'est vrai qu'on peut simplifier, mais ce n'est pas obligatoire.

Si on veut créer des documents xhtml5 ou polyglottes, le namespace sur l'élément html est obligatoire ainsi qu'un doctype écrit correctement et une syntaxe de type xhtml. Smiley smile
Modifié par Patidou (24 Dec 2011 - 12:29)
Bonjour,
Du coup la navigation vous paraît-elle plus claire?

Pour le script, je pensais que niveau vitesse, ça irait plus vite sans faire appel à un site extérieur mais bon...
Vu l'ampleur que prend le site, je souhaiterais passer à un niveau supérieur. J'aimerai donc savoir ce qui fait selon vous que le site ne fait pas "pro" et qu'est ce qu'il faudrait changer?

Merci d'avance! smile
Salut,

La bannière, les polices, les alignements, l'absence de grille, le manque d'homogénéité dans le design comme par exemple entre les icônes des réseaux sociaux qui s'intègrent pas trop mal mais on sent que c'est rajouté.

Le bon point du site c'est vraiment son contenu très riche mais je pense pas qu'il y a eu maquettage, développement, etc... c'est bricolé ce qui ne veut pas dire que c'est nul mais c'est vrai que cela fait petit site associatif à l'image du footer très peu travaillé, assez vide en fait.

A toi de voir si tu as bien plus de 120h à mettre dedans. Encore plus si tu veux faire un site qui soit Responsive ce qui je pense devient incontournable.
Modifié par jmlapam (12 May 2012 - 00:24)
Salut,
Merci de ta réponse! Smiley smile

120h, attends je cherche dans ma poche.........Ah bah non j'ai pas Smiley lol

Le problème de la bannière et du footer, c'est que je suis très très très mauvais à toshop et du coup, je peux pas mettre grand chose de graphique... Mais je me suis quand même améliorer un peu, faudrait que j'essaye quand même!

Niveau police, tu conseilles quoi? Parce que sur les nombreux portefolio qui sont ici, les polices sont sympas, mais là c'est pas le but d'en mettre une super joli et design, faut que ça soit lisible le plus possible...

Concernant le concept de grille, je sais plus qui m'en avait déjà parlé, j'ai potassé ça un peu, mais honnêtement, j'ai pas compris grand chose au concept Smiley langue

J'avais pensé aussi mettre des marges de chaque côté (comme sur alsa, et la majorité des sites) histoire que ça soit pas trop étalé sur l'écran comme c'est le cas maintenant...

Concernant le fond, actuellement c'est légèrement...moucheté?
Est-ce que le uni est plus recommandé et/ou "in"?

Merci encore Smiley smile
Modifié par Sylverdragon (12 May 2012 - 00:36)
De rien.

Pour les grilles, le tuto de Simon Kern constitue une bonne introduction.

Nul en Toshop > à améliorer. Concrètement tu peux essayer de regarder du côté des design minimaliste qui n'engagent que très rarement des images mais attention c'est très dur à faire un beau design minimaliste.

Pour la police je suis loin d'être expert, éviter la fantaisie c'est sûr > travailler sur l'interlignage et choisir une police agréable pour la lecture > le georgia est basique mais cela reste une référence.

Pour le moucheté, mouais les textures c'est sympa mais il vaut mieux éviter si on ne sait pas ce que l'on fait.

Quant à ce qui est 'in' ou 'out', fais de la veille > le minimalisme reste une bonne solution pour toi, priorité au contenu.
Modifié par jmlapam (12 May 2012 - 01:56)
Salut,

Sylverdragon a écrit :
Le problème de la bannière et du footer, c'est que je suis très très très mauvais à toshop et du coup, je peux pas mettre grand chose de graphique... Mais je me suis quand même améliorer un peu, faudrait que j'essaye quand même!
Il n'y a pas qu'une image qui peut être « quelque chose de graphique ». Le contenu peut aussi servir à créer des chouettes résultats graphiques notamment grâce à l'utilisation de la typographie. Là avec ton texte « Conseils thermique » et « Vous aider à mieux penser votre maison, pour consommer moins… » et ton logo il y a déjà de quoi faire sans devoir rajouter d'autres artifices.

Sylverdragon a écrit :
J'avais pensé aussi mettre des marges de chaque côté (comme sur alsa, et la majorité des sites) histoire que ça soit pas trop étalé sur l'écran comme c'est le cas maintenant...
Bonne idée, perso j'ai fais le test, ça change directement le style du site, ça fais beaucoup plus sobre et je pense que c'est déjà un énorme pas vers le résultat que tu souhaites, je te conseil d'essayer tu seras étonné de la différence visuelle. Ça fais un peu année 90 un site large comme ça (quand c'est présenté de la sorte du moins) de plus sur les grandes résolutions ça dois pas être très joyeux.

Cela dis en passant, sur ton body tu as : 

width: 100%;
max-width: 100%;
Qui ne servent sensiblement à rien, sauf à te causer d'éventuels problèmes par la suite. Pour résumer à width: 100% on préfèrera width: auto.

Bonne continuation ^^
Pages :
Sujet clos
Aller à