Pages :
EDIT :
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! Smiley smile


Bonjour à tous,
Maintenant que j'ai passé mon site en HTML5 et en CSS3 (youpi Smiley smile ), je le soumet à votre critique avertie.
Pas de préférence particulier, que ce soit code, design, ergonomie, rapidité, tout est bon à critiquer Smiley smile

Merci d'avance!
Modifié par Sylverdragon (11 May 2012 - 19:30)
Bonjour,

Je me permets de te répondre tout d'abord sur le design :
- Le logo ne se démarque pas assez je trouve. De plus, il est visiblement très pixelisé.
- La police Times je n'aime pas du tout.
- Les liens dans tes listes UL > LI ne sont pas mis en avant avec un :hover, j'ai eu l'impression d'avoir une liste d'informations, et non une liste de liens cliquables.
- Les citations variables c'est intéressant mais elles mériteraient d'être mise en avant. Et attention aux longues phrases qui s'affichent sur deux lignes.

En résumé, je trouve ça dommage car le fond semble intéressant, mais la forme rebute au moment de lire.

Pour l'ergonomie, tu sembles mieux t'en sortir que moi (voir mon propre topic) et je t'en félicite, par contre Laurie-Anne parlait de la navigation au clavier avec la touche "Tab", et sur Mac OS je n'arrive pas à naviguer au clavier sur ton site. (Je n'ai pas de PC sous la main). Peut-être est-ce à revoir, mais les spécialistes pourront t'en dire plus.

Bon courage !
Tout d'abord merci Smiley smile

Quand tu parles du logo, c'est la favicon je suppose? c'est vrai que je pourrais trouver mieux Smiley smile

Pour la police, moi je trouve ça clair mais peut-être est-ce aussi l'habitude, du coup je vais en essayer d'autres histoire de voir.

J'ai effectivement oublié de mettre un a:hover sur le menu de gauche, je vais le rectifier

Je sais que les citations prennent parfois 2 lignes mais ça me dérange pas. Cependant, c'est vrai qu'elles ne sont pas vraiment mises en valeur. Les mettre en italique et/ou un peu plus en dessous le header ça serait sans doute un peu mieux.

Niveau ergonomie, avec tabulation, j'arrive à parcourir tout le site, y compris les sous-menus. Les liens qui défilent se voient dans la barre de chargement du navigateur. C'est pas top top, mais je vois pas du tout comment faire autrement?
Bonjour,

D'accord avec Mathy pour la police times, et la bannière qui mériterait d'être retravaillée je pense (soleil sur fond vert ... bof, de plus il mange le texte.Personnellement, je conserverais la maison et la planète, et retravaillerais le reste).

Sinon, de haut en bas (sous firefox 5.0) :

- La citation aléatoire n'est pas centrée. Elle mériterait aussi d'être présentée en italique, avec guillemets, et personellement je la distinguerai aussi avec une couleur spécifique.

- les textes verts du menu sont trop clairs avec le fond blanc

- les border-raduis des sous-menus leur donnent un aspect d'onglets horizontaux mis dans un sous-menu vertical

- les éléments des sous-menus s'agrandissent sans raison au survol

- le bloc de droite pourrait être réduit en largeur, ou même supprimé pour laisser la place au contenu. Dans ce cas les liens twitter & cie pourraient par exemple être intégrés en haut du bloc central

- le texte du bloc central est trop près des bords. Plutôt que de mettre une marge sur les paragraphes, il est plus propre de placer un bloc à l'intérieur du bloc central et lui mettre un padding.

- colonne de gauche : la pub google ne fait pas la même largeur que le bloc dessous, et n'est pas non plus centrée.

- pourquoi pas une ou deux images flottantes dans le bloc central ?

- Le bloc central devrait s'étendre en bas pour s'aligner à la colonne gauche (il y a des astuces pour ça). Sinon, remonter la pub du bas et la barre verte.

Pas mal de détails, mais avec tout ça le site serait excellent.

Bon courage pour la suite.
Non, je parle du logo de ton site, "Conseils thermiques". Smiley cligne

Pour les liens, je parlais aussi et surtout du contenu de ta page "plan.php".

Pour le menu avec tabulation, c'est donc peut-être une particularité Mac.
@Mathy : Oui c'est vrai qu'elle est un peu pixelisée mais tu es sur un écran de grande dimension et/ou HD?

Ah oui j'avais pas pensé à la page plan Smiley langue Je vais faire la modif aussi du coup.
Et bien de toutes façons en y repensant je l'ai créé y a longtemps, pour palier aux problèmes des sous-menus qui étaient gérer par javascript. (et donc quand js était désactivé, les sous-menus n'apparaissaient pas).
Mais vu que c'est plus le cas, les titres de catégories ne sont plus cliquables (et puis c'est tout Smiley langue ). Par contre c'est peut-être pertinent que je mette lien pour le plan du site dans le footer? ou pas?

@migli :
Je vais retravailler cette bannière et cette police alors.

La citation est effectivement aligné à gauche et c'est fait exprès, tu trouves que c'est dérangeant?

"- les border-raduis des sous-menus leur donnent un aspect d'onglets horizontaux mis dans un sous-menu vertical" <-- je vois pas ce que tu veux dire par là Smiley langue

-les éléments s'agrandissent uniquement parce que je l'ai voulu Smiley smile mais apparemment c'est pas top?

- pour le bloc à droite je le laisse, pour mieux colonner mon contenu. Le contenu était beaucoup plus large avant et plusieurs personnes m'ont fait la remarque que les lignes étaient trop longues...

-C'est vrai que le texte est prêt du bord, je vais modifier ça.

-pour ce qui est de la pub, je sais pas comment résoudre le problème. La pub à une largeur défini et il faudrait que j'arrive à la faire passer en largeur en %, faut que je cherche, je crois pas que c'est possible.

- pourquoi pas une ou deux images flottantes dans le bloc central ?<-- pas compris non plus Smiley ohwell

-Le problème du bloc qui s'affiche pas en bas, n'apparait que quand il n'y a pas beaucoup de contenu. Je vais essayer de voir pour l'aligner même quand y a pas beaucoup de texte. Parce que le footer est en inline-block après le menu de gauche donc il peut pas remonter...

Super remarques!
Merci à tous les deux!!
Je suis sur un écran de 13“ et c'est déjà pas terrible.
Sur un 24“ c'est encore pire.
Si ça te dis, je peux t'en réaliser un à ma façon. Si il te plait, tu le gardes avec plaisir.
Sinon, je m'en servirais pour me ré-entrainer.

Par contre ATTENTION :

Je ne sais pas pourquoi mais sur firefox 3.6 mac OS :
- Pas de border-radius !
- Pas la même police, et tant mieux, celle que tu as me plait plus.

Sur firefox 4, ça rend beaucoup mieux donc.

Du coup se pose un problème d'ergonomie ?
Sur FF 3.6 y a pas de border-radius car pour passer en CSS3, il faut virer le "moz-"border-radius et donc FF3.6 ne le reconnait pas.
Mais je pars du principe que le border-radius n'est pas indispensable! et que tout le monde va passer en FF>=4 ^^

Pour la police, je sais plus laquelle j'utilise, mais elle doit pas être présente sur tous les ordi, du coup il choisit la 2ème qui doit être Times new Smiley cligne

Bah écoutes je dis pas non pour un joli header Smiley smile
J'étais déjà plus content de celui là (fait sous toshop, je m'y suis mis y a un mois...) que l'ancien (fait sous photofiltre ^^) mais je dis pas non à mieux!
a écrit :
La citation est effectivement aligné à gauche et c'est fait exprès, tu trouves que c'est dérangeant?

Euh, non, à droite !
Peut-être qu'en italique, ça passerait mieux, mais il faudrait au moins l'aligner sur le bloc de droite.

Pour les sous-menus, je m'explique : imagine un menu horizontal avec onglets arrondis. Tu prends chaque élément et tu les mets en blocs empilés : ça donnera tes sous-menus.

Les éléments du sous-menu qui s'agrandissent, ça ressemble à une erreur plutôt qu'à un effet voulu je trouve. Je ne sais pas ce qu'en pense Mathy ?

a écrit :
Le contenu était beaucoup plus large avant

La largeur étant en pourcentage, elle dépendra de l'écran du visiteur. Si tu laisses la colonne de droite, il faudrait je pense réorganiser les icônes (les espacer correctement), et peut-être en profiter pour ajouter du contenu en dessous ?

Pour la pub, peut-être pourrais-tu l'insérer dans un bloc comme le bloc gauche en dessous, et la centrer dedans ?

Google génère une i-frame id="google_ads_frame1", et dedans un div id="ads", tu devrais pouvoir y accéder en réécrivant par dessus le css généré par google.

a écrit :
pourquoi pas une ou deux images flottantes dans le bloc central ?

Je voulais dire que dans le contenu de la page d'accueil il n'y a que du texte : 1 ou 2 images rendraient la page plus agréable, et pourraient centrer sur ton sujet (conseils thermiques).

@Mathy :

La police appelée est calibri, si tu ne l'as pas sur ta machine, ça sera du times. D'où les différences d'affichage.
border-radius : utiliser ce type de code pour une meilleure compatibilité :

border:1px solid #002a2a;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
Oui c'est vrai qu'il faut que j'arrive à bien placer toutes ces icônes de réseaux sociaux, mais c'est pas évident avec le pseudo-script-iframe, etc...Mais je vais y arriver Smiley murf
Au dessus ou en dessous, je compte mettre une autre bloc avec une rapide présentation (3 lignes) du webmaster...'fin de moi quoi Smiley langue

Je vais essayer comme tu dis m'a dit pour la pub de droite Smiley smile

comme je l'ai dit plus haut -moz ou -webkit ne passe pas en CSS3 tout simplement parce que tous les navigateurs à jour reconnaisse border-radius qui est devenu un balise à part entière et non plus une balise que l'on peut qualifier "d'éditeur"

Effectivement, les citations sont alignées à droite: Je vais essayer de les aligner avec le menu de droite.

C'est vrai que je pourrais mettre une petite image dans la page d'accueil, je vais tâcher d'en trouver une qui correspond bien.

Selon toi, calibri rend pas bien? J'ai l'impression que ça dépend vachement des écrans... Sur certains écrans, y a des lettres qui s'affichent plus ou moins en gras... J'essayerais d'en trouver une autre

Pour les sous-menus je vais essayer de faire des modifs pour le radius, pour l'agrandissement, j’attends un autre avis, puisque moi j'aime bien (1 partout Smiley cligne balle au centre)

Pfffiou, je vais avoir du taf ce soir Smiley rolleyes
Modifié par Sylverdragon (07 Jul 2011 - 12:12)
L'agrandissement j'ai du mal aussi, c'est surprenant et original mais pas très utile.
Je pense que ce serait plus clair si c'était à la même taille.
Pourquoi pas sans border-radius, afin que le "bloc" menu se déroule naturellement.

Pour mes considérations sur l'affichage, c'est vrai que je ne suis pas allé voir les CSS, désolé.
Du coup en seconde police d'affichage je te conseille un Arial, qui se rapproche davantage du Calibri. Sans-serif, en tout cas.
Ok, ben je vais enlever cet agrandissement Smiley smile

J'avais mis un petit radius pour qu'on délimite bien chaque lien, mais après réflexion, c'est sans doute pas la peine, donc il va virer aussi.

Times new roman --> Arial, c'est noté Smiley cligne
Salutation @tous

Eh bien avec IE8 c'est pas top. La structure est complètement défaite. Bon d'accord que tu es en HTML5/CSS3, mais bon. J'ai vérifier aussi avec FF.

Tu as un problème de profondeur : z-index, de tes menus qui passeront sous la zone centrale.

..
Je suis en train de faire des modifs, c'est pour ça Smiley cligne

Par contre j'ai effectivement un problème avec z-index, j'ai beau en mettre un uniquement pour mon menu, il veut pas passer au dessus du corps depuis que je l'ai enlevé sans faire exprès... Smiley ohwell

EDIT : problème (de boulet Smiley langue ) résolu^^

Quelle icone (de réseaux sociaux) préférez-vous, le bois ou le vert? gros dilemne ^^
Modifié par Sylverdragon (07 Jul 2011 - 19:40)
Je comprend pas pourquoi tu arrives à de tels résultats.

Ta navigation horizontale est glissante, mais vraiment pas solide. Horizontale en FF mais verticale avec IE8. Vraiment faut le faire. Ta structure est à revoir au complet.

Moi perso je n'ai jamais obtenu des résultats semblables. Ma première barre horizontale avec les éléments ul et li était tout simplement solide. Horizontale sur tous les navigateurs.

Bon évidemment les études et exercices sont là pour çà. Sans quoi je n'apprenderais rien de moi même si Alsacréations, openweb et MaxDesign n'existaient pas.

Je crois sincèrement que toute réussite est dans la façon dont nous organisons notre zone d'apprentissage (la façon dont nous allons gérer nos progrès). Documentations, lectures, tutoriels et articles sur CSS. Avec évidemment un pourcentage élevé de pratique et d'exercice.

Perso moi je pense en terme de séquence web (fragment), non pas de site web. La plus grande dimension que je peut atteindre est celle d'une page web (mais c'est la dimension maximale puisqu'un site web est constitué de (n) pages web). Je ne suis pas loin d'un site web (statique disons). HTML CSS oblige.

Vaut mieux s'exercer sur une séquence web du genre entête et barre de navigation horizontale qui soit solide et ce, peut importe le navigateur, qu'un site web fragile qui glisse sans cesse, d'un navigateur à un autre.

Tout à la base est une question de structure globale et de la structure des détails. Et une séquence web (ou fragment de page), est basé sur cette structure. Notre apprentissage doit se vivre dans la plus petite unité constituant une page web, que moi j'appelle séquence ou fragment. Si on contrôle pas un fragment, à plus forte raison nous ne contrôlons pas une page web, et encore moins un site.

Je n'irai pas voir ton fichier CSS. J'ai vu ta HomePage. Ya pas de différence de qualité entre un fichier CSS, et la présentation esthétique de la HomePage. La HomePage, c'est le résultat d'un travail déjà effectué en CSS.

J'espère que tu m'en veut pas trop. Je sais que je suis dur, mais c'est gentil aussi. Smiley cligne

..
Ben écoutes zardoz, je prends très bien ta remarque, cependant, je vois pas vraiment pourquoi tu dis ça.
Pour moi ça parait logique : un corps de texte avec 2 floats de chaque côté. et si tu as des bugs d'affichage fait un screen parce que tu es le premier à m'en parler.

Et puis désolé mais j'ai rien compris ton histoire de fragment Smiley rolleyes ni de navigation horizontal solide Smiley langue

Expliques! Smiley langue
Modifié par Sylverdragon (07 Jul 2011 - 22:08)
Eh bien oui tu as raison j'ai naviguer en mode document IE7 avec IE8. J'ai jouer avec les différent modes de documents aujourdh'hui. Donc sur IE8 la navigation est horizontale. Désolé c'est une erreur de ma part.

Par contre je ne retire rien de tout ce que j'ai dit à mon message précédent. Il y a effectivement une faiblesse au niveau de la présentation.

C'est tes décisions qui ne portent pas vraiment. text-align:justify ?

upload/20350-sylvertext.jpg

Lorsque je parle d'un CSS qui glisse, d'un navigateur à un autre, ce sont les objets visuels qui glissent. Ceux-ci ne se positionnent pas nécessairement avec précision d'un navigateur à un autre. Mais avec le temps j'ai compris qu'il était possible de faire juste et multi-navigateurs, si nous prenions de meilleurs décisions en CSS.

Une vue globale sur la structure et une vue des détails, toujours appuyée sur la structure, pourra nous aider à prendre les meilleurs décisions en instructions CSS, tant esthétique que fonctionnelle. Peu importe le navigateur, que nous soyons en HTML5 ou pas. C'est technique le CSS, c'est subtile aussi, beaucoup plus que je ne l'aurais cru.

upload/20350-sylverIE8.jpg

Quelquefois ton logo RSS est remplacé par le vrai logo : celui orangé.

Dans le sens contraire, lorsque je fait mention d'un CSS solide, c'est que l'écriture est tout simplement logique, avec aucune instruction superflue. C'est le plus difficile à faire, ça fait partie de notre apprentissage. Ce principe nous ne l'avons pas au premier 24hrs de pratique. Seule l'expérience est mise en cause. Un CSS solide c'est une page dont les objets visuels ne bougerons pas d'un navigateur à un autre. Ne serais-ce que de quelques pixels.

upload/20350-sylverFF01.jpg

Dans l'exemple ci-haut, la pensée de Mahomet me fait penser à deux possibilités. Soit le texte est justifier à droite, soit l'espace est mal gérer. Seule une vue sur le fichier CSS m'apportera une réponse.

En générale c'est faible en présentation esthétique. Tu ne contrôle pas l'espace. C'est difficile de contrôler un espace, si nous ne développons pas avec cette vue globale de l'espace, de la page. C'est la première chose à faire en CSS, contrôler l'espace globale, définir les zones clés, et proposer des contenus qui s'adapterons parfaitement à cette structure.

M'enfin c'est comme tout le monde, un jour on essais et un jour on là.

Alors mille fois pardon pour ma navigation en mode document IE7 Smiley cligne ça donnait des résultats un peu surprenant disons. Smiley biggrin

upload/20350-sylverIE7.jpg

En te laissant sur le sujet je ne peut que te suggérer de te parfaire davantage en CSS qui sera toujours à la base de belles présentations, mais aussi à la base des décisions logiques que nous devons tous prendre en web design.

Un fragment ? - dans mon langage perso tout est fragment, le header est un fragment, de même pour le footer ou tout autre zone comme la navigation horizontale par exemple. Toutes les zones demande une réflexion complète. Avant de considérer une zone comme étant complète, nous devons nous assurer que cette zone réponde aux besoins que nous nous sommes fixés.

En fait le header a des rôles que tu devras définir crayon en main. Celui-ci joue un rôle différent du footer, mais il en est pas moins sophistiqué. Mais lorsque le rôle d'un header s'arrête à « un gros bouton qui target sur la HomePage », vraiment c'est pas fort.

Je te laisse ici, en comprenant que ton sujet est très technique. Ce sera donc à toi de trouver les meilleurs possibilités pour traduire ce sujet au niveau design et au niveau des fonctionnalités.

..
Modifié par zardoz (08 Jul 2011 - 05:13)
Merci pour cette réponse qui est déjà plus clair à mes yeux Smiley langue


Pour la citation, j'ai déjà dit plus haut que c'est moi qui l'est mis à droite...

Tu as tout à fait raisons pour le justify, il va dégager.

Sinon saches que j'essaye de me perfectionner petit à petit en CSS.
Il y a quelques semaines encore, le menu déroulant était géré en javascript, les floats de chaque côté était gérés en pixels. Y a quand même de l'évolution depuis. ça mériterait un peu de ménage dans le fichier CSS et c'est ce que je compte faire ce week-end.

Maintenant, cela me dérange pas que cela bouge quelques peu selon les navigateurs ou écran.
Le but principal est que ça reste lisible à chaque fois. C'est pour ça notamment que j'ai fait passer la pub et le menu de droit (avec les boutons sociaux) sous le contenu pour les plus petits écrans. Et lorsque le menu passe sur 2 lignes, c'est pour les mêmes raisons. (pour IE7, j'ai aucune idée de quelques fonctions il ne reconnait pas....)

Pour le rôle du header, et des autres blocs, t'inquiètes pas, j'utilise aussi des crayons et du papier! Smiley smile
pour la fonction du header, là encore, je vais réfléchir Smiley murf

Merci encore zardoz Smiley biggrin

EDIT : je viens de remarquer un bug sur IE8, mes titres du menu ne sont pas alignés, avez-vous une idée d'où cela peut venir??
Modifié par Sylverdragon (08 Jul 2011 - 09:05)
Ne t'inquiète pas pour IE7, moi pareillement je m'arrête à IE8. Il y a des limites qu je ne franchît pas. D'ailleurs je n'ai jamais été d'accord avec les conditionnels « !if et end if »

De prendre : le crayon et le papier je t'encourage dans ce sens.

Prenons l'exemple de la section - avantage et désavantage. Cette zonne revient régulièrement et nous comprenons son but. Toutefois si on s'arrête sur cette section pour mieux la définir il y a des choses importantes à considérer.

Il n'est pas nécessaire dans cette zone de placer un icone avantage ou désavantage par ligne de texte (liste). Le rôle de ces icones pourrais être un peu plus globale.

1 ) Avantages « un icone ici »
-- Et la liste des avantages sans icone
2 ) Désavantages « un icone ici »
-- Et la liste des désavantages sans icone

L'icone pourra être situé à gauche ou à droite, c'est un choix.

En agissant ainsi tu dégage l'espace, tu évite la répétition inutile des icones, tu optimise le programme, la page respire et tes visiteurs aussi. Bref trouver une façon agréable et simple de passer l'information.

Tu as beaucoup de difficulté à gérer l'espace, visuellement. Trouve toi des trucs qui t'aiderons à mieux gérer cette espace sans tomber dans le superflu inutile.

J'ai quand même pris un temps sur ton site (par plaisir), et j'aurais beaucoup de chose à dire. Mais beaucoup trop. Des choses à faire et qui ne le sont pas, ou encore des choses à éviter, mais tu ne les évitent pas.

C'est la raison du crayon et du papier. Ça nous aide à prendre des décisions majeurs dès le début du projet. Tant esthétique que fonctionnelle.

Bonne chance.

..
Modifié par zardoz (08 Jul 2011 - 19:42)
Pages :