Pages :
Bonjour,

Je me suis fendu d'un mini-site consacré au Web Design :
http://www.mon-design-web.com

et j'aimerais bien avoir vos avis.

Vu le thème du site, je m'attends à ce que certains d'entre vous ne me fassent pas de cadeau Smiley langue

Attendez... je mets mon casque et mes gants de protection...

Ok, allez-y

[EDIT]

Le design a été entièrement modifié le 27/05/07 pour tenir compte des avis figurants dans ce sujet.

[/EDIT]
Modifié par zapman (27 May 2007 - 14:20)
Salut,

Il y a de bons conseils, mais certains nécessiteraient d'avoir une explication car ils sont présentés de façon arbitraire.
Par contre je me pose une question, pourquoi n'applique tu pas pour ce site ce que tu conseille ?

Je surfe en 1600x1200, et ton contenu doit prendre au alentour de 1100-1200 pixels de larges ce qui rend la lecture pénible et difficile, et fait paraître chaque paragraphe pour une seule ligne ou presque.

Même en résolution inférieure, le texte est dense et manque d'aération ou d'animation visuelle qui permet de bien naviguer visuellement. Il faudrait une hiérarchie textuelle plus mise en avant (différences de tailles de textes plus importantes, titres ou mots clés en couleur de contraste, puce ou signe graphique permettant l'aspect listage de l'information, etc.)

Le menu fais mal aux yeux à lire en blanc sur bordeaux, car la typo est en graisse légère, et le soulignement dans un espace sert plus à nuire à la lisibilité qu'à mettre en avant le côté lien.

La colonne de gauche et la colonne de droite sont perceptibles comme des publicités et non comme un contenu quelconque, visuellement il est très facile de les zapper.
La colonne de droite ressemble sensiblement à une colonne "google ads" (lien bleu +descriptif sommaire), il ne manque plus que l'adresse du lien en dessous...
La colonne de gauche est incompréhensible, les boutons "page précédente", "page suivante", etc, on dirait qu'ils aident à naviguer au sein des pub google ads tellement le tout est bien impriqué.

Le lien "haut de page" en quasi tout début de page c'est vraiment inutile !

La page d'intro mériterait d'être mieux gérer, car là elle est difficile à lire à cause des textes qui passent ou non sous les images. Essaye d'agrandir le texte d'un seul niveau et tu auras des surprises sur la lisibilité.

a écrit :
largeur de colonneEvitez les colonnes trop larges : l'oeil se fatigue s'il doit parcourir de longues distances de gauche et droite. Vos colonnes doivent faire 15 cm de large au maximum. Des colonnes de 10 cm à 12 cm sont encore mieux.

Parler en cm pour des écrans d'ordinateurs çà me semble un peu aléatoire... En 1600x1200 ton contenu fais 25cm de largeur, en 800x600 il en fait 8-9cm... Si j'ai un écran 17" ou 21" ça aura rien à voir... Mieux vaut préciser une taille en pixels ou en nombre de mots par ligne. Ca reste un peu casse gueule mais beaucoup moins.

Sur le fond :
a écrit :
Des menus simples : vos visiteurs ne passeront pas plus de quelques secondes à essayer de comprendre l'architecture de votre site. L'habitude consiste à placer :
- Le menu principal sous la forme d'une barre située en haut de la page
- Les sous menus à gauche de la page
- Les renvois, les publicités, à droite de la page
- Les références (bibliographie) en bas de la page
En respectant ces habitudes, vous faciliterez la navigation sur votre site.
- Le logo de votre site, situé en haut et à gauche doit être "cliquable" et doit contenir un lien vers votre page d'accueil.

Dans la mesure où les écrans 4/3 tendent à disparaître au profit des écrans en résolutions "wide" ce schéma commence à dater un peu... Surtout que le schéma de mise en page d'un site est avant tout, comme tu le dis ailleurs, conditionné par son contenu, qui peut être très différent d'un site à l'autre. Le fait d'avoir des écrans en résolution plus larges que compactes incite naturellement à mettre à profit la largeur pour la navigation, plus que la hauteur. On évite ainsi un contenu trop long et le fait de passer le menu à coté du contenu permet de le remonter dans la page.
Pour le logo, je ne suis pas vraiment d'accord sur le "doit être cliquable", car un lien "accueil" est bien plus explicite pour tout le monde. Le logo cliquable n'est explicite que pour celui qui utilise la navigation vocale ou qui a désactivé les images, pour peu que l'attribut de l'image soit "retour à la page d'accueil" (ou quelque chose de similaire).
zapman a écrit :
Attendez... je mets mon casque et mes gants de protection...

Ok, allez-y

T'es sûr? Smiley grrrrr Smiley ravi

Bon ben soyons clair et direct: c'est à côté de la plaque. Si ton but est, comme l'annonce ton baseline, de "séduire les visiteurs", c'est franchement raté...

Il y a un truc qu'il faudrait rentrer un jour dans la tête des gens: on ne s'autoproclame pas (web)designer du jour au lendemain! Le métier a du mal à être reconnu comme une profession sérieuse justement parce que monsieur tout-le-monde se sent un jour ou l'autre pousser des ailes de graphistes. "Designer? On l'est tous un peu, c'est juste une affaire de bon goût!" entends-je fréquemment avec le plus grand désespoir. Au contraire, c'est un travail de longue haleine que d'arriver à jongler élégament avec les couleurs, de créer des associations harmonieuses de fontes, de construire des grilles de mises en pages efficaces, d'arriver finalement à créer un ensemble bien balancé et bien pensé.

Aussi, je crois que tu n'es pas graphiste, et que tu ne devrais pas en parler; tu y perds beaucoup en crédibilité, en tout cas pour un œil avisé ou simplement plus sensible à ce genre de choses. Par contre, les notions d'ergonomie, le respect des standards, favoriser les bonnes pratiques de développement et cetera, ça, c'est bien, et à la portée d'un plus grand nombre. D'ailleurs, certains de tes articles sont intéressants et c'est, si je peux me permettre, précisément ce contenu qui devrait faire l'objet de ton site, et non un sujet que tu ne maîtrise pas.

Bon sinon, niveau technique, c'est un peu décevant aussi je trouve. Parler d'un tel domaine et se rabattre sur cet immonde html4 transitionnel, c'est presque du sarcasme. Ne me faites pas dire ce que je n'ai pas dit: le site est valide et respecte les préceptes d'un doctype qui l'est tout autant. C'est juste que ça va pour moi à l'encontre d'un support engagé des standards web et plus précisement de l'évolution d'xhtml.

Décidément, ce n'est pas dans ce salon que je vais me faire beaucoup d'amis moi... Smiley biggol
Bonne continuation tout de même!
Modifié par Benjamin D.C. (14 May 2007 - 10:56)
Salut,

Je sais que c'est une critique qui revient souvent sur les sites avec de la pub mais les cadres sont vraiment énervants à gérer...

Pour un site parlant de web design, je le trouve un peu sobre alors que le contenu est intéressant. C'est dommage, le site aurait était très agréable à parcourir avec une touche de fantaisie... Comme le dit Benjamin D.C., tu y perds en crédibilité... On a l'impression que tu donnes des conseils mais que tu ne les respectes pas toi-même.

Je reviens un peu sur le menu du haut dont parlait Mikachu :
+1 pour la lisibilité
Le fait de mettre en "surbrillance" lors du passage de la souris provoque un décalage des autres liens vers la droite. C'est pas terrible comme effet et ça met en cause la robustesse du site.

Pour la page d'accueil, j'éviterais le Times à ta place... Ca fait "machine à écrire" et "le gars qui à pas pris le temps de styler sa page".
Wahou ! Belles réponses que voilà ! Merci beaucoup !!

De nombreuses remarques me semblent claires comme de l'eau de roche. Il y en a d'autres que je n'ai pas bien comprises et pour lesquelles j'aimerais bien avoir des précisions (pour ceux qui ont le temps).

Mikachu a écrit :
Par contre je me pose une question, pourquoi n'applique tu pas pour ce site ce que tu conseille ?

Arf, arf, celle là, je savais bien qu'il fallait m'y attendre. Mais bon, une page Web, c'est souvent un tas de compromis et je n'ai peut-être pas toujours fait les bons Smiley confused

- Je surfe en 1600x1200, et ton contenu doit prendre au alentour de 1100-1200 pixels de larges ce qui rend la lecture pénible et difficile, et fait paraître chaque paragraphe pour une seule ligne ou presque.

Ben oui, je sais bien... mais comment faire, quand un site à une largeur variable ? Quant à faire une mise en page fixe (c'est à dire à empêcher l'utilisateur de choisir lui-même sa largeur), c'est quand même très discutable d'un point de vue ergonomique et ça me semble contraire à l'évolution du Web. Sur mon site RankSpirit, j'ai sauvagement rusé en gérant un bandeau de pub vertical qui apparaît ou disparaît selon la largeur de la fenêtre. Ca permet de conserver la largeur du texte dans une fourchette donnée, mais c'est un peu compliqué. Une autre idée ?

- Il faudrait une hiérarchie textuelle plus mise en avant (différences de tailles de textes plus importantes, titres ou mots clés en couleur de contraste, puce ou signe graphique permettant l'aspect listage de l'information, etc.)
Là, je ne te suis pas Smiley eek Les pages sont riches en couleurs, en variation de taille et sont tellement bourrées de puces qu'on dirait des chiens herrants. Parle-tu d'une page en particulier ???

- Pour le logo, je ne suis pas vraiment d'accord sur le "doit être cliquable", car un lien "accueil" est bien plus explicite pour tout le monde.
L'un n'empêche pas l'autre, chaque internaute ayant ses habitudes, mais ça mérite en effet une petite précision dans mon texte

Toutes tes autres remarques me parlent bien. Merci encore pour cette très belle critique. Tu es vraiment un as.

Benjamin D.C. a écrit :
Aussi, je crois que tu n'es pas graphiste, et que tu ne devrais pas en parler; tu y perds beaucoup en crédibilité

Raté Smiley biggol Je me suis taillé un joli petit succès dans le graphisme et la mise en page que j'ai pratiqué pendant une décennie, mais...
1- ça remonte un peu et les tendance changent vite (sans compter que j'ai peut-être perdu un peu la main)
2- le papier et le Web, ça n'est pas pareil
Je prend ça comme un encouragement à revoir mon ouvrage Smiley smile
Cela dit, j'aimerais bien que tu précises un peu tes reproches. Ce "j'aime pas" ne m'avance pas beaucoup. N'oublie pas ! Ici les critiques se doivent d'être constructives, c'est à dire précises et si possible accompagnées de suggestions.
Qu'il soit positif ou négatif, un avis sans arguments, ça ne vaut pas un pêt de lapin.
Quant au html transitionnel, je ne veux pas ouvrir ce débat ici. Si nous avons l'occasion d'en débattre ailleurs, tu trouveras en moi un adversaire farouche et convaincu Smiley cligne


predator93 a écrit :
Pour un site parlant de web design, je le trouve un peu sobre alors que le contenu est intéressant. C'est dommage, le site aurait était très agréable à parcourir avec une touche de fantaisie... Comme le dit Benjamin D.C., tu y perds en crédibilité..

Ah, la la... faire un site élégant, esthétique, pratique et un peu fantaisiste en même temps... quelle gageure !! C'est surtout le dilemne élégant/fantaisiste qui est ambitieux : là, ou touche tout simplement à l'Art avec un grand A.
Bon... "peut mieux faire", donc. Mais de là à considérer que j'y perds en crédibilité, n'est-ce pas un peu sévère ?

- Je sais que c'est une critique qui revient souvent sur les sites avec de la pub mais les cadres sont vraiment énervants à gérer...
En quoi ? Pourrais-tu préciser ?
- Le fait de mettre en "surbrillance" lors du passage de la souris provoque un décalage des autres liens vers la droite. C'est pas terrible comme effet et ça met en cause la robustesse du site.
Ce n'est pas la surbrillance qui crée le décalage, c'est un petit padding que j'ai mis dans le style du "hover". Cet effet est volontaire pour bien confirmer à l'utilisateur qu'il a placé son curseur sur une zone active. Si cette précision a pu te rassurer sur la "robustesse du site", trouve-tu toujours cet effet gênant ?
-Pour la page d'accueil, j'éviterais le Times à ta place... Ca fait "machine à écrire" et "le gars qui à pas pris le temps de styler sa page".
Tout à fait. Je vais y travailler.
Modifié par zapman (14 May 2007 - 14:50)
zapman a écrit :
Ben oui, je sais bien... mais comment faire, quand un site à une largeur variable ? Quant à faire une mise en page fixe (c'est à dire à empêcher l'utilisateur de choisir lui-même sa largeur), c'est quand même très discutable d'un point de vue ergonomique et ça me semble contraire à l'évolution du Web. Sur mon site RankSpirit, j'ai sauvagement rusé en gérant un bandeau de pub vertical qui apparaît ou disparaît selon la largeur de la fenêtre. Ca permet de conserver la largeur du texte dans une fourchette donnée, mais c'est un peu compliqué. Une autre idée ?

Il n'est pas nécessaire de définir une taille au pixel près qui ne bouge pas quelle que soit la résolution. Il est juste question de faire un design extensible, mais jusqu'à un certain point. Il est sur que quelqu'un qui surfe en 1600x1200 comme moi aurait envie de remplir son écran, mais si c'est pour peiner à revenir à la ligne à cause des longueurs de textes trop grandes, autant revenir au 800x600...
Chez moi ta pub reste visible même si la fenètre du navigateur fais moins de 800 pixels de large, ça semble ne pas fonctionner

a écrit :
Là, je ne te suis pas Smiley eek Les pages sont riches en couleurs, en variation de taille et sont tellement bourrées de puces qu'on dirait des chiens herrants. Parle-tu d'une page en particulier ???

La structure de lecture n'est pas suffisamment évidente pour le coeur du contenu. Ceci dit je dis çà surtout parce que les lignes sont longues et que çà donne pas envie de lire.

a écrit :
L'un n'empêche pas l'autre, chaque internaute ayant ses habitudes, mais ça mérite en effet une petite précision dans mon texte

L'un et l'autre cela fait une redondance de liens pour les navigateurs textuels ou vocaux. Inutile de répéter un lien qui n'a besoin d'être présent qu'une seule fois. Et dans ce choix, autant adopter un lien simple et explicite pour tous !
Mikachu a écrit :
Il n'est pas nécessaire de définir une taille au pixel près qui ne bouge pas quelle que soit la résolution. Il est juste question de faire un design extensible, mais jusqu'à un certain point.

Un exemple ? Pour que je vois comment c'est codé...

Mikachu a écrit :
Chez moi ta pub reste visible même si la fenètre du navigateur fais moins de 800 pixels de large, ça semble ne pas fonctionner.

Sur IE, la pub apparaît et disparaît en "live" quand on change la taille de la fenêtre. Sur Mozilla/FF, seulement quand on relâche le bouton de la souris aprés avoir changé la taille. Note bien que cette astuce est utilisée sur le site RankSpirit, et non pas sur "mon-web-design" pour lequel j'ai voulu garder un code simple.

Mikachu a écrit :
L'un et l'autre cela fait une redondance de liens pour les navigateurs textuels ou vocaux. Inutile de répéter un lien qui n'a besoin d'être présent qu'une seule fois. Et dans ce choix, autant adopter un lien simple et explicite pour tous !

Très bon argument. Mais je suis toujours partagé car ça revient à faciliter (un peu) la navigation pour les 0,x% d'internautes utilisant les navigateurs textuels ou vocaux tout en la compliquant un peu pour les x% d'internautes habitués à ce raccourci. Encore un compromis à faire Smiley decu !
a écrit :
Mais de là à considérer que j'y perds en crédibilité, n'est-ce pas un peu sévère ?


Je dis ça pour les mêmes raisons que Benjamin. Le site d'un web designer qui ne possède pas d'atout graphique pour mettre en valeur son contenu et pour le rendre agréable va laisser le visiteur perplexe. Il va certainement se dire "si c'est ça le web design alors je peux m'y mettre aussi". Il faut, grâce à ton site, que tu puisses montrer que tu maîtrises vraiment ton domaine. Si ce n'est pas (encore) possible, alors il est superflu de mettre en évidence le fait que ce site soit celui d'un web designer...

Pour les cadres, voilà ce que j'obtiens :

upload/9610-capture1.jpg

Le menu du haut disparait totalement et je suis obligé de faire une gymnastique avec la molette de la souris pour revenir en haut de page...

a écrit :
Ce n'est pas la surbrillance qui crée le décalage, c'est un petit padding que j'ai mis dans le style du "hover". Cet effet est volontaire pour bien confirmer à l'utilisateur qu'il a placé son curseur sur une zone active. Si cette précision a pu te rassurer sur la "robustesse du site", trouve-tu toujours cet effet gênant ?


OK mais le fait de mettre en surbrillance n'est-il pas déjà une preuve de zone active ?
predator93 a écrit :
Le site d'un web designer qui ne possède pas d'atout graphique pour mettre en valeur son contenu et pour le rendre agréable va laisser le visiteur perplexe. Il va certainement se dire "si c'est ça le web design alors je peux m'y mettre aussi". Il faut, grâce à ton site, que tu puisses montrer que tu maîtrises vraiment ton domaine. Si ce n'est pas (encore) possible, alors il est superflu de mettre en évidence le fait que ce site soit celui d'un web designer...

Je crois qu'il s'agit d'une question de priorité.
- sur la page "Esthétique et couleur", je dis : Dans leur immense majorité, les internautes recherchent de l'information pratique, pas des belles images. La recherche esthétique que vous mènerez sur votre site ne doit jamais nuire, en aucune façon, à l'aspect pratique et à la lisibilité du contenu.
- sur la même page : "Gérez vos priorités dans l'ordre suivant : contenu / clarté-ergonomie / rapidité d'affichage / esthétique."
- sur la page "Mise en page", je dis : Visez l'élégance et la clarté
Je définis donc assez précisemment mes priorités (même si on peut toujours les contester) et je pense les avoir appliquées sur ce site.

Donc, oui, sans aucun doute, si je parvenais à faire un design qui en mette plein la vue tout en étant cohérant avec ce discours (et notamment avec la rapidité d'affichage !), ça serait le top. Mais connais-tu un seul site qui reussisse ce tour de force ?
Tous les sites qui ont pu m'impressionner par la beauté de leurs designs sont horribles en termes de confort de navigation, à cause du poids de leurs pages. Je les mets dans mes favoris pour les regarder les soirs d'hivers, mais je ne les visite pas tous les jours.
Ca n'empêche pas certains de ces sites d'avoir du succès, mais comme je le suggère plus haut, réussir en méprisant les règles, c'est de l'Art, pas de la technique (et ça n'empêche pas les règles d'être valables).

predator93 a écrit :
Pour les cadres, voilà ce que j'obtiens :
upload/9610-capture1.jpg

Merci beaucoup d'avoir pris le temps de préciser le problème. Je vais voir ça.

predator93 a écrit :
OK mais le fait de mettre en surbrillance n'est-il pas déjà une preuve de zone active ?

Si, mais pour un gars très pressé, ça peut passer inapperçu alors que l'oeil est toujours hypersensible au mouvement. Vois-tu un inconvénient à ce que j'ai fait ?
a écrit :

Si, mais pour un gars très pressé, ça peut passer inapperçu alors que l'oeil est toujours hypersensible au mouvement. Vois-tu un inconvénient à ce que j'ai fait ?


J'avais lu un sujet sur ce forum à propos des éléments qui provoquaient un décalage des autres éléments lors du survol. Je t'invite à faire une recherche...
zapman a écrit :
connais-tu un seul site qui reussisse ce tour de force ?
Tous les sites qui ont pu m'impressionner par la beauté de leurs designs sont horribles en termes de confort de navigation
Tu devrais faire un ptit tour du côté de chez CSS Beauty toi. Smiley cligne
zapman a écrit :

Donc, oui, sans aucun doute, si je parvenais à faire un design qui en mette plein la vue tout en étant cohérant avec ce discours (et notamment avec la rapidité d'affichage !), ça serait le top. Mais connais-tu un seul site qui reussisse ce tour de force ?


Ben sans aller bien loin : http://www.alsacreations.fr/
Benjamin D.C. a écrit :
Tu devrais faire un ptit tour du côté de chez CSS Beauty toi. Smiley cligne

Sûrement pas !! Aucune des pages présentées ne pèse moins de 300 ko.

Benjamin D.C. a écrit :
Mouais non, c'est propret mais pas terrible terrible non plus...

C'est à mon sens un excellent compromis entre esthétique et confort de navigation.
zapman a écrit :

C'est à mon sens un excellent compromis entre esthétique et confort de navigation.


+1

De surcroit si l'on compare les design d'alsacreations.fr et alsacreations.com on remarque qu'il y a là dedans un vrai style, i.e. une vraie originalité et une vraie personnalité qui se déclinent de manières diverses.

Et justement le concept de style quand il s'agit d'esthétique ben c'est vachement important Smiley smile si, si...
Modifié par Christian Le Bouler (15 May 2007 - 00:58)
Salut,

a écrit :
Tu devrais faire un ptit tour du côté de chez CSS Beauty toi.


oui moi aussi je suis déçu. le site en lui-même avec ça couleur cyan fait mal au yeux. et les temps de chargement des pages presentées est horriblement long sur la premiere j'ai même cru être planté.

bien sur je n'ai que 4 méga de down mais c'est pas 56k non plus.


sinon bon moi je ne suis pas graphiste et je ne le serais jamais. tout au plus arriverais-je a maîtriser les css a la longue. ça n'empeche pas de pouvoir apprecier ou non.

La page d'accueil du site me semble pas mal. sauf le pied de page trop classique.
je trouve que les sites sobres avec fond blanc sont souvent pas si mal.

bon une fois la page d'accueil passer tes pubs et le menu a gauche ressortent trop.
franchement même si j'essai de me concentrer sur le contenu j'ai vraiment du mal a faire abstraction de la partie gauche et ça me gêne.

et pourtant je suis intéressé par des sites comme le tien qui donnent des conseils de ce coté là. avec toutes ces annonces qui aujourd'hui demandent aux programmeurs d'être aussi designer.

pascal
Modifié par CPascal (15 May 2007 - 10:30)
Non, non, soyons honnêtes Pascal, Benjamin ne parlait pas tant du site css beauty en lui même mais des exemples (des démonstrations, voire tours de force) proposés en liens.
zapman a écrit :
Sûrement pas !! Aucune des pages présentées ne pèse moins de 300 ko.
D'abord, c'est faux, certaines pages sont très légères, et d'autre part, si tu penses qu'un site n'est "confortable" que s'il ne dépasse pas d'un poil d'octet les sacro-saints 300K, tu es très mal parti...

zapman a écrit :
C'est à mon sens un excellent compromis entre esthétique et confort de navigation.
Oui c'est confortable, clair et tout ça, jamais dit le contraire. Je disais juste que niveau layout pur, c'est "pas mal", mais franchement sans plus quoi.

Christian Le Bouler a écrit :
+1

De surcroit si l'on compare les design d'alsacreations.fr et alsacreations.com on remarque qu'il y a là dedans un vrai style, i.e. une vraie originalité et une vraie personnalité qui se déclinent de manières diverses.
Bah non justement, pas vraiment. On a un style très template générique, blanc avec des fruits, de l'orange et des trucs frais comme on en voit un peu partout depuis l'avènement des CSS. Ce n'est pas "moche", c'est juste pas génial ni franchement original. Mais bref, revenons au sujet de départ Smiley smile

CPascal a écrit :
oui moi aussi je suis déçu. le site en lui-même avec ça couleur cyan fait mal au yeux.
... Smiley rolleyes
Christian Le Bouler a écrit :
Non, non, soyons honnêtes Pascal, Benjamin ne parlait pas tant du site css beauty en lui même mais des exemples (des démonstrations, voire tours de force) proposés en liens.
... merci Christian.
Benjamin D.C. a écrit :
Si tu penses qu'un site n'est "confortable" que s'il ne dépasse pas d'un poil d'octet les sacro-saints 300K, tu es très mal parti...

La limite communément admise n'est pas de 300Ko, mais de 30 à 50Ko.
A ma connaissance il n'y a guère que Vincent Bernard qui ait développé un contre-argumentaire intelligent vis-à-vis de cette recommandation.
Je t'encourage à la lire.

Certe, la technologie évolue, mais pas à la même vitesse pour tout le monde. Paris n'est pas le monde et même aujourd'hui, bien peu d'internautes peuvent charger une page de 300Ko en moins de 20 secondes.

La vitesse de chargement fait partie du confort et de l'ergonomie et je répête que - comme la majorité des internautes - c'est là que je place mes priorités.

Je t'invite encore une fois à argumenter tes affirmations. Si tu pense que le temps de chargement n'influe pas sur le succès d'un site, je serais heureux de lire ta démonstration.
Modifié par zapman (15 May 2007 - 16:00)
Pages :