Bonjour.

Tout d'abord, félicitations pour ce premier site. c'est en forgeant qu'on devient forgeron, en lisant qu'on devient liseron, etc.

Cela dit, personnellement, je trouve que les couleurs (gris et bleu) en sont trop ternes, et que celles-ci et le background de page blanc créent un environnement visuel trop pauvre. Une texture, un dégradé, un motif, une image d'arrière-plan ne serait pas de trop.

Le problème des couleurs se pose particulièrement pour le menu, dont les intitulés sont assez peu lisibles. Un meilleur contraste fond/texte serait souhaitable.

De même, il serait également souhaitable de faire changer le background des items de menu au survol, et non seulement la couleur du texte.

Pas d'ombrages ni d'arrondis ni de dégradés. Tu préfères le style Metro tout rectangulaire avec aplats de couleurs (c'est une simple question) ?

Le carrousel défilant (sans possibilité de l'arrêter) attire trop le regard/perturbe la bonne lecture de la page (à lire : http://www.simpleweb.fr/2013/02/20/abandonnez-les-carrousels-car-ils-ne-fonctionnent-pas/.

Tes mentions légales disparaissent sous le carrousel (sur mon Firefox 20.01, pas regardé dans d'autres navigateurs).

Un petit passage de tes pages au Validateur W3C ne serait pas de trop.

Félicitation pour l'orthographe, grammaire, etc. corrects.

Bonne continuation.
Bonjour,

Alors voilà, j'ai profité d'un peu de temps libre pour prendre en compte, dans un premier temps, deux de vos remarques. J'ai mis un fond et j'ai ajouté un dégradé dans le menu (ce qui m'a donné l'occasion d'apprendre à le faire).

Effectivement, le site paraît déjà un peu moins "simple" et un peu plus travaillé dans le détail. Prochaine étape, les codes couleurs et un carousel plus discret. Par contre je reste sur mon "tout"rectangulaire". Smiley cligne

Merci encore des conseils.
effectivement pour un premier site c'est pas mal du tout, les informations sont claires et je pense que les internautes trouveront rapidement l'information recherchée, mais on peut toujours améliorer et je vais donner mon avis personnel :

Design
- le fond d'écran est plutôt moche
- les bordures de 4px sont un peu oppressantes dans les menus du haut surtout

ergonomie:
- personnellement je modifierais l'ordre des menus, mets-toi à la place d'un internaute qui vient chercher des infos sur ce magasin. Je pense que les marques doivent arriver après les infos sur le magasin.

technique :
- il y a une scollbar horizontale sur toute la fenetre (dans certaines pages comme celle-ci ), elle ne sert à rien
- sur IE7 et IE8 certaines fenetres et menus sont décallés, certes ces navigateurs ne sont plus trop utilisés mais il est possible de corriger çà facilement
- les fichiers .js ne sont pas zippés, peut être un réglage à faire au niveau serveur ou .htaccess

contenu :
- sur la page d'accueil le bouton MENTIONS LEGALES est à moitié illisible
Modifié par Zebrou (28 Apr 2013 - 08:53)
Merci pour le compliment du début!! Même si recherche plus la critique constructive qui vient ensuite, ça fait du bien quand même! lol

- pour le fond d'écran je cherche encore la bonne idée. Et comme je suis nul en création de texture sur photoshop, je ne suis pas au bout de mes peines. Mais j'y travaille.

- pour l'ordre du menu, complètent d'accord. Je crois même que c'est l'onglet "actualité" qui doit être dans les premières places.

- pour les fichiers js, je ne savais pas qu'il fallait les zipper... Je vais approfondir mes connaissances. C'est vraiment important?

- IE7 et 8, j'ai vraiment pas le temps (je sais c'est nul comme argument mais c'est tellement vrai) et en plus je n'ai aucune idée de comment corriger les défauts...

- Et pour les mentions légales, vous êtes 2 à me le dire, je ne comprends pas, sur Safari, Chrome et Firefox ca sort bien chez moi...??? C'est sur quel navigateur vous?

Sinon merci encore pour tous ces conseils. Smiley smile
Zebrou a écrit :

- les fichiers .js ne sont pas zippés, peut être un réglage à faire au niveau serveur ou .htaccess


robin25 a écrit :
- pour les fichiers js, je ne savais pas qu'il fallait les zipper... Je vais approfondir mes connaissances. C'est vraiment important?


Alors pour ce que Zebrou dit, personnellement je suis pas d'accord, certes "zipper" et "concaténer"(retirer les espaces/saut de ligne) voir même "obfusquer"(changé les id/class pour rendre incompréhensible+concaténer) pour un site de ce genre c'est ridicule...

Il ne va pas y avoir plus de quoi 10 personnes allez voir 20 pour être gentille et ce en même temps sur un site comme ça ?
Certes ça fais gagné de la performance au site c'est dérisoire surtout face au trafic du site en lui même.

Pour moi Robin25 tu ne devrais pas le faire, après si tu veux vraiment libre à toi mais dans l'absolu ça va pas changé grand chose pour les utilisateurs lambda.
A part te donner du travail en plus, ce que tu peux déjà faire c'est utiliser le lien direct de jquery (de leur serveur ou celui de google) et en .min.js (version concaténé)

Ps : En plus si tu le fais maintenant et que tu dois ou une autre personne doit modifier ton code bonjour la galère Smiley langue .
Modifié par Nyco (01 May 2013 - 17:36)
@ x-info : et bien pas grand chose d'autre. Juste un bout de PHP pour la newsletter et donc du JS pour les carrousels. (c'est du bidouillage, je commence juste à attaquer les tutos pour ces langages)

Nyco : OK c'est noté. Je m'occuperai donc de cela quand je créerai le site concurrent de Facebook!!! lol Smiley cligne
Merci Zebrou. Effectivement. Pourtant quand j'utilise chrome ca ne me donne pas ça. Sans doute une question de version!? Ou est-ce que cela peut avoir un rapport avec le fait que je suis sur Mac? Parce que du coup, je vais avoir du mal à le corriger si je ne visualise pas...
x-info a écrit :
tu me conseil par quelles langages pour faire un site dynamique ?


Ca dépend de tes besoins, le mieux c'est de te crée un post avec la description de ton projet.
Et tes langages de prédilection (framework compris).
Modérateur
robin25 a écrit :
Merci Zebrou. Effectivement. Pourtant quand j'utilise chrome ca ne me donne pas ça. Sans doute une question de version!? Ou est-ce que cela peut avoir un rapport avec le fait que je suis sur Mac? Parce que du coup, je vais avoir du mal à le corriger si je ne visualise pas...

Ce n'est pas un problème de version, mais de police, j'ai le même problème sous mac avec chrome et firefox, car je n'ai pas de police "century gothic" et c'est donc affiché avec de l'Arial chez moi, et chaque police ont des tailles différentes.

Il faut laisser plus de souplesse dans tes designs. le positionnement de tes boites n'est pas top, mais voilà déjà de quoi faire avec:

En modifiant un peu ta css et en donnant la même largeur que la boîte d'en dessus, tu obtiens le résultat escompté avec de la souplesse selon les affichages:

.mentions {
    left: 657px;
    position: relative;
    text-align: right;
    top: -110px;
    width: 277px;
}


De manière générale, si tu veux aligner à droite, une bonne pratique est d'utiliser un float: right, un text-align: right ou un right: XXXpx. Aligner à droite en jouant avec la taille à gauche est toujours un peu casse-gueule.
Merci kustolovic. J'ai suivi tes conseils. Je ne peux toujours pas vérifier mes logiquement ce doit être bon maintenant.

De manière générale, j'ai enfin eu le temps de prendre en compte la plupart des remarques :
- suppression du scroll horizontal sur les pages de l'onglet "magasin"
- j'ai affiné les bordures (de 4px à 2px)
- ajouter un peu de style (dégradé dans la barre de menu)
- modification CSS de "mentions légales"
- suppression du fond un peu moche. Mais je ne sais pas par quoi le remplacer. Si vous avez une idée... Parce que le fond blanc c'est vrai que ça fait un peu trop sobre.

Après j'arrête. Un premier site ne peut pas être top. Je ferai mieux pour le prochain. merci encore de votre aide.
Nyco a écrit :

Alors pour ce que Zebrou dit, personnellement je suis pas d'accord, certes zipper et concaténer(retirer les espaces/saut de ligne) voir même obfusquer(changé les id/class pour rendre incompréhensible+concaténer) pour un site de ce genre c'est ridicule...
...


Désolé je n'ai pas été assez explicite, quand je conseille de zipper les fichiers .js je ne sous-entends pas minifier ou obfusquer. La compression des fichiers .js (et autres, .html, .css ...) est une action réalisée par le serveur, les fichiers sont ensuite dézippés par le client web, de manière transparente pour l'utilisateur. C'est en général un réglage à effectuer au niveau serveur ou au niveau du fichier .htaccess, voir le tuto ici.
Bonjour,

J'ai enfin eu le temps de prendre en compte toutes vos remarques. Finalement le site a beaucoup changé grâce à vous. Mieux je pense...???

PS : je ne peux pas vérifier cette semaine IE donc si vous voyez des gros décalages n'hésitez pas à me le dire. Merci.
Bonjour,

Je ne suis pas fan. Même si il y a de l'idée, c'est trop fouillis, pas abouti, pas assez soigné. On sent trop le travail amateur. Trop d'effets tue l'effet. Une solution, faire simple.


Quelques remarques rapidement :

• La même photo se retrouve en contenu sur la home et en arrière plan, c'est redondant. Il faut alléger le fond, pas de photo lourde ou de motifs kitsch répétés… Un fond uni, blanc ou couleur, aplat (ou dégradé ?) sera bien plus moderne ici. Surtout que là le fond photo est très altéré et flou. L'effet de transparence derrière certains blocs de contenu fini d'achever le tout.
Pire, le fond se déforme avec la fenêtre et les personnages se retrouvent avec des tronches complètement improbables, un coup allongées, un coup plates, avec le bloc de contenu qui leur atterrit en plein dans la figure… C'est hardcore… À retirer d'urgence ! On n'agrandit jamais une photo au dessus de sa résolution native. On ne déforme jamais une photo.

• Le logo est complètement à revoir. Cet œil grand ouvert a une expression de peur avec un gros C en outline à l'intérieur. Il est plutôt mal dessiné façon bricolé au compas. Si vous souhaitez garder un œil comme logo, essayez de lui donner une touche plus stylisée et artistique. Avec une expression plus positive. Là immédiatement, ça ne fait pas pros, rien que ça, ça ne vas pas rassurer le client… 
Pour commencer, le gros rond autour du logo est à enlever, ça enferme et ça flingue le logo. Et un logo doit toujours avoir un espace vierge minimum autour pour le laisser respirer, c'est valable pour presque tous les logos. C'est pourquoi le placer sur le fond en dehors des rectangles pourrait améliorer l'ensemble.

• Cette mise en page dans des blocs cloisonnés et imbriqués dans une présentation en tableaux avec des cases de fonds différents n'est pas moderne. Ce type de mise en page était répandu dans les sites amateurs il y a plus de 10 ans. Maintenant, place à la simplicité. Regardez par exemple le site Microsoft.
Déjà, sortir le logo pour le placer en dehors (au dessus ?) pourrait diminuer cette impression de site "encastré". Bien sûr cela peut fonctionner seulement avec un fond plus discret et avec un logo complètement revu.

• Pas de contour à vos blocs. Ça contribue à les cloisonner encore d'avantage.

• Le "j'aime facebook" tombe en plein dans un paragraphe de texte sur chrome. Il n'est pas à sa place. Il me semble que ça avait déjà été signalé.

• Le bandeau avec les logos qui défilent. Je crois que ça a déjà été dit, ça capte trop l'attention et ce n'est pas élégant. Certains logos sont en plus illisibles. Une image statique, avec au pire un turn over en fondu si vous avez beaucoup de logos.

• Ce fond photo bleuté, on étouffe, c'est lourd. Il faut aérer, dégager ce qui est en trop. Ça plus le bandeau du bas, c'est violent.

• Les fonds des photos avec le logo répété en arrière plan dans la page "L'équipe" sont dévalorisants. C'est trop chargé.

• Globalement, dans les différentes pages, le logo atterrit un coup à gauche, un coup à droite, un coup en arrière plan, un coup dans les photos, un coup en motifs, un coup en double et parfois même en plein dans le texte (Votre vue). Ça ne fonctionne pas du tout ! Il faut trouver un emplacement aéré pour le logo et ne pas le maltraiter ainsi. C'est l'image de la boutique qui est malmenée à l'image du logo.

• Les interlignes sont trop collés. Les marges entre les blocs et les bords sont insuffisantes.

• Le menu déroulant avec l'effet de relief qui se répète, ça n'est pas joli et pas assez simple.

• Un point positif, les informations se trouvent assez facilement. Les titres sont explicites.


Désolé si j'ai été un peu trivial, mais je trouve que ce site est mal engagé et qu'il faut simplifier et moderniser. En l'état, je préférais encore la première version. N'ayez pas peur du blanc. Le logo doit être complètement revu et redessiné sur une base moins kitsch et trouver sa place dans la mise en page, là c'est un peu le boxon.

J'ai bien vu que vous êtes amateur, mais ces conseils sont des basiques de la maquette et de la mise en page. Rien d'insurmontable.
Vous avez fait une erreur très répandue qui est d'intégrer un site et de vous poser ensuite la question de la mise en page. Un site web se dessine avant tout avec un crayon et du papier, puis sur un logiciel d'image. C'est seulement quand le site est visuellement OK, qu'on peut commencer l'intégration.

Voilà, j'espère que je ne vous ai pas trop découragé.
Bon courage en tout cas en attendant de voir la suite. Smiley cligne
Modifié par spongebrain (11 Jun 2013 - 07:17)