[PRO] www.bluebox-chartres.com

Bonjour,

Je viens de mettre en ligne la version 2 de mon site. J'aimerais avoir des avis pour améliorer mon site.

Mon menu déroulant en CSS n'étant pas compatible avec IE6, j'ai rajouté des liens vers les pages suivantes en bas de chaques pages. Comment trouvez vous ça?

Sinon, sur le style générale?

Cordialement

Pika28

hzzp://zzz.bluebox-chartres.com
Modifié par pika28 (09 Nov 2010 - 13:39)

Bonjour,

pika28 a écrit :
Mon menu déroulant en CSS n'étant pas compatible avec IE6, j'ai rajouté des liens vers les pages suivantes en bas de chaques pages. Comment trouvez vous ça?

Pas génial... Il faut le savoir déjà, car ce n'est pas une évidence ; et en tant qu'utilisatrice d'IE6 j'ai l'impression de vraiment peu importer.

Commentaire plus détaillé demain si j'ai le temps ; mais tu peux aller lire ma critique du site juste en dessous vu qu'il y a quelques trucs qui s'appliquent également à ton site.

Laurie-Anne a écrit :
Bonjour,
et en tant qu'utilisatrice d'IE6 j'ai l'impression de vraiment peu importer.

Je comprends pas ce que tu veux dire...

Hello,

D'un point de vue, général je n'aime pas. Cela engage que moi, je l'admets.

Pour les corrections générales :

* 90, rue ...
* De 9 h à 20 h (strictement bas de casse !) H majuscule est l'abréviation de haut. (ex: les cartons d'emballage)
* Tél. (c'est une abréviation)
* présentation
* esthétique
* Les séances UV sont à partir de 5 euro seulement. (euro est un mot invariable en genre et en nombre !) Quel est le pluriel de euro en Italien ?
* Émilie (fautes d'orthographe redondantes)
* etc.

Donc attention à l'or taux graff.

Une bonne grille avec une bonne mise au point du texte devrait grandement améliorer le parcourt du site. Là, j'ai l'impression que le texte, images, etc. ont été posé n'importe comment. Essaye de trouver sur le net un tut sur le niveau de lecture et grille de mise en page.

Bien que j'ai un soucis d'affichage sur les images en ce moment les coins arrondis avec le masque de fusion, je trouve mauvais goût. Cela engage que moi, je l'admets encore une fois. Mais bon la fusion n'est pas totale et cela se voit. Une bordure blanche au coins arrondis et la photo avec les coins arrondies devrait résoudre cette « pétouille ».

Connaître les tags <div></div> et <br />, c'est bien ! Connaître les autres c'est mieux ! Je pense à <ul><li></li></ul><p></p>. Ceci est pour t'indiquer que tu as une mauvaise sémantique.

Je crois avoir compris ce que veut dire Laurie-Anne. Ton ergonomie est mauvaise. Est ce que l'utilisateur sait qu'il y a le reste du menu déroulant dans le pied de page ? En générale et dans un site en html (pas de full flash), les liens que l'on trouve en bas sont optionnels. Cela peut être intéressant de mettre ces liens en bas sur deux points :

- meilleur référencement
- meilleurs ergonomie générale. Là, dans ton cas, c'est une nécessité. Ce qui n'est pas bon.

C'est dommage, la charte est attrayante mais les acteurs graphiques sont peu élaborés. À l'état actuel, je trouve que c'est une ébauche. non pas un site fini.

Je te conseille de parcourir pompage sans modération.

bonne soirée
Modifié par Nolem (16 Nov 2009 - 18:22)

Nolem a écrit :

* 90, rue ...
* De 9 h à 20 h (strictement bas de casse !) H majuscule est l'abréviation de haut. (ex: les cartons d'emballage)
* Tél. (c'est une abréviation)
* présentation
* esthétique
* Les séances UV sont à partir de 5 euro seulement. (euro est un mot invariable en genre et en nombre !) Quel est le pluriel de euro en Italien ?
* Émilie (fautes d'orthographe redondantes)
* etc.

Correction faite en partie

Nolem a écrit :

Une bonne grille avec une bonne mise au point du texte devrait grandement améliorer le parcourt du site. Là, j'ai l'impression que le texte, images, etc. ont été posé n'importe comment. Essaye de trouver sur le net un tut sur le niveau de lecture et grille de mise en page.

Là, je te trouve un peu injuste, je trouve les explications assez clair, le seul point qui me plait pas, c'est les liens en bas de page pour pallier au problème de menu Full CSS. Je vais travailler sur le menu JS avec mise en page CSS comme le conseille Laurie-Anne.

Nolem a écrit :

Bien que j'ai un soucis d'affichage sur les images en ce moment les coins arrondis avec le masque de fusion, je trouve mauvais goût. Cela engage que moi, je l'admets encore une fois. Mais bon la fusion n'est pas totale et cela se voit. Une bordure blanche au coins arrondis et la photo avec les coins arrondies devrait résoudre cette « pétouille ».

Je ne vois aucunes démarcations chez moi avec le fondu mais j'admets que je suis très mauvais en web design, j'ai encore beaucoup à apprendre...

Que me suggérer vous pour les photos? un autre style de bordures sans arrondi?

Nolem a écrit :

Connaître les tags <div></div> et <br />, c'est bien ! Connaître les autres c'est mieux ! Je pense à <ul><li></li></ul><p></p>. Ceci est pour t'indiquer que tu as une mauvaise sémantique.

Je me sers déjà de <ul> et <li>, ou veux tu que j'en place d'autres? Pour le <p>, c'est vrai que je m'en sers jamais, je vais étudier cette balise basique mais inconnu pour moi... lol

Après lecture, tu me conseilles, si j'ai bien compris de placer une balise <p> en fin paragraphe pour faire deux retours à la ligne, ce qui remplace <br /><br />... ?

Nolem a écrit :

Je crois avoir compris ce que veut dire Laurie-Anne. Ton ergonomie est mauvaise. Est ce que l'utilisateur sait qu'il y a le reste du menu déroulant dans le pied de page ? En générale et dans un site en html (pas de full flash), les liens que l'on trouve en bas sont optionnels. Cela peut être intéressant de mettre ces liens en bas sur deux points :
- meilleur référencement
- meilleurs ergonomie générale. Là, dans ton cas, c'est une nécessité. Ce qui n'est pas bon.

Sur ce point, il est prévu que je retravaille sur le menu JS/CSS. Par contre , je ne comprends pas ta phrase "Là, dans ton cas, c'est une nécessité. Ce qui n'est pas bon." Je place les liens pour le référencement, pas pour le menu.



Merci beaucoup pour vos commentaires, c'est comme ça qu'on avance...
Modifié par pika28 (16 Nov 2009 - 19:52)

Bonjour,
même remarque que Nolem concernant tes photos: les bords floutés même si ça passe ne sont pas du meilleur effet et les coins arrondis ne sont pas vraiment justifié ici. Contente toi d'ajouter par exemple une bordure blanche (via un border CSS) de quelques pixel.

Le bleu cyan du fond en aplat ne présente pas beaucoup d'intérêt plastiquement quand
il ne contient pas de modulation de couleurs. Un léger dégradé suffira par exemple à lui donner plus de profondeur et de beauté.

Ton menu est un peu basique et grossier dans le traitement graphique (ajouter par exemple des dégradés, séparateurs...)
Le blanc des items de menu manque de contraste avec le fond orange et les bordures rouge sombre ne sont pas très heureuses.

Le orange des titres manque un peu de contraste avec le fond bleu.

Le texte courant manque d'interlignage (> line-height:1.3em à 1.6em).

Éviter le centrage de tes textes quand il ne se justifie pas (sous menu + titres de sections + adresse), par ailleurs si tu centres tes titres il faudrait aussi centrer tes texte pour rester cohérent. > calle donc tes titres sur le texte qu'ils introduisent.

Ne pas enregistrer des images non photographique comme les logo en JPEG (c'est assez rapidement perceptible), ce dernier étant un format compressé destructif (avec perte de qualité donc) qui engendre en partie une perte de netteté au niveau des zone de transition. Choisi plutôt du PNG paleted (1 à 8bits) > 2 à 256 couleurs.

Revoir le footer intégralement c'est trop confus, pas assez aéré et pas assez rapidement identifiable (la fonction de son contenu).

Voila pour cette fois-ci
Modifié par Hermann (16 Nov 2009 - 22:18)

re,

Hermann a écrit :

[...]
Contente toi d'ajouter par exemple une bordure blanche (via un border CSS) de quelques pixel.
[...]

Pour faire simple, je pensais à une bordure blanche au coin légèrement arrondis avec une petite ombre portée peut être.

Hermann a écrit :

[...]
Le bleu cyan du fond en aplat ne présente pas beaucoup d'intérêt plastiquement quand
il ne contient pas de modulation de couleurs. Un léger dégradé suffira par exemple à lui donner plus de profondeur et de beauté.
[...]

+1
Ah oui bien vu

pika28 a écrit :
[...]Je me sers déjà de <ul> et <li>, ou veux tu que j'en place d'autres? Pour le <p>, c'est vrai que je m'en sers jamais, je vais étudier cette balise basique mais inconnu pour moi... lol

Après lecture, tu me conseilles, si j'ai bien compris de placer une balise <p> en fin paragraphe pour faire deux retours à la ligne, ce qui remplace <br /><br />... ?[...]

J'ai vite vu ton code. En effet, les <br /> à répétition sont plutôt à proscrire au profit de margin-bottom ou padding-bottom.

Je parlais pour d'autres pages également :

a écrit :

QUI BRONZE?

Toute personne qui bronze en s'exposant aux rayons naturels du soleil.

QUEL TEMPS DE BRONZAGE EST CONSEILLÉ ?

- Bien que la méthode de bronzage UVA ne fasse pas craindre de coups de soleil, il est bon de faire attention, surtout après une longue période sans exposition au soleil.
- En règle générale, une peau bronzant normalement permet d'obtenir un beau bronzage uniforme en 3 à 4 séances.
- Les premières expositions doivent impérativement être espacées de 48 heures.
- Pour conserver le bronzage obtenu, 1 à 2 séances par semaine suffisent.

IL EST EN OUTRE CONSEILLÉ D'OBSERVER LES CONSEILS SUIVANTS :

Au passage, j'ai vu que tu avais corrigé euro par le symbole. C'est bien, mais il me semble qu'il y ait une espace entre le chiffre et la devise.
Modifié par Nolem (17 Nov 2009 - 04:39)

Chose promise... Certains commentaire risquent de se répéter avec ce qui a déjà été dit, mais redire les choses n'est jamais mauvais ;p

Pour le design, je n'aime pas, mais c'est subjectif. Les commentaires émis par Nolem et Hermann te permettront de donner un look plus professionnel à ton site.

Pour le code :
* Les metas keywords, author, reply-to (attrape spam) et owner sont totalement innutile et pourraient être supprimées. Elles prennent de la place pour rien.

* Attentions aux alt sur les images :

<img src="images/logo-bluebox.jpg" alt="Centre de bronzage esth&eacute;tique beaut&eacute; onglerie Bluebox UV Chartres" />

L'image porte le texte : "BlueBox - Centre de bronzage", le alt devrait contenir la même information, particulièrement au niveau de l'ordre d'affichage, le nom de l'entreprise étant ici plus important que ce qu'elle fait, puisque c'est l'identifiant du site. Les alt doivent être pensés pour ceux pour qui ils sont indispensables (utilisateurs de lecteurs d'écran, navigateurs text-only...) et non pour le référencement.

* Pour les images purement décorative, il faut mettre un alt vide, et non une série de mots clés qui n'ont rien à voir avec l'image :

<img src ="images/tunnel-xl75-accueil.jpg" alt="Tunnel de bronzage au centre de bronzage esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-1.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-2.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-3.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-4.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-5.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />
<img src="images/vign-mach-6.jpg" alt="Centre de bronzage UV esth&eacute;tique beaut&eacute; BlueBox Chartres" />

* Attention aux title sur les liens :

<a href="http://www.bluebox-chartres.com" title="Centre de bronzage esth&eacute;tique beaut&eacute; onglerie Bluebox UV Chartres"><img src="images/logo-bluebox.jpg" alt="Centre de bronzage esth&eacute;tique beaut&eacute; onglerie Bluebox UV Chartres" /></a>

L'attribut title, sur les liens, doit être utilisé pour donner une information supplémentaire et nécessaire à la bonne navigation de l'utilisateur. Elle ne doit en aucun cas être utilisée pour répéter à l'identique l'intitulé du lien, ici, le alt de l'image. La plupart du temps les titles sont inutiles ; ici, c'est clairement le cas. Comme pour les alt, les titles doivent être pensé pour les utilisateurs, non le référencement.

* La hiérarchie des titres n'est pas correcte. Elle doit toujours commencer par h1 et ne pas comporter de sauts (donc aps de h1 suivit directement de h3 sans h2 entre les deux). L'importance de cette hiérarchie est double : 1. elle est bonne pour le référencement ; 2. Elle permet aux utilisateurs de lecteurs d'écrans de naviguer plus facilement. Il est donc important qu'elle soit correcte.

* Les <p>aragraphes sont nos amis, ils faut les aimer aussi !

Bonsoir,

Merci pour vos remarques d'hier. Voilà les premières corrections effectuées :

- Passage du menu full css à un menu JS + CSS qui le rend compatible à tous les nav.
Y a t-il pas un risque que le JS soit désactivé?

- Ajout d'un interligne de 1.3em
effectivement, ça change beaucoup

- Revu du code avec ajout de <ul> <li> et <p> plutot que du <br> à tout va
Sympa les différences de marging et padding entre les navs...

- Suppression des alt="" et title="" qui servent à rien
j'ai trop peur à mon référencement

- Suppresion des meta inutile keywords, author, reply-to, owner

- Revu des balises <h1> <h2>
dans certains cas, je commence les pages par <h2> direct, sinon il me faudrait du css pour chaque page

- j'ai revu les logos, tous en png maintenant
je voulais pas y toucher car je dois faire un flash en haut pour remplacer logo et adresse

=======================================================

Il me reste à réaliser les corrections (design) suivantes mais là, j'ai besoin d'aides :

-Passage du backgound en dégradé bleu à blanc ou bleu à bleu ciel
Peut-on le faire en CSS ou doit obligatoirement créer un fichier image?

-Modification des fondu images
Je vois pas très bien ce que vous me suggérer, un exemple?

- Modification du design du menu
J'ai vraiment pas d'idée, un exemple également

- footer en bazare...
Je voudrais le laisser mais comment rendre ceci plus lisible? Ou alors il vaut mieux que je passe tout ça en plan de site avec un lien dans le footer?


Bonne soirée à vous tous

pika28 a écrit :
- Passage du menu full css à un menu JS + CSS qui le rend compatible à tous les nav.
Y a t-il pas un risque que le JS soit désactivé?

Le % de désactivation de JS est très inférieur à celui de l'utilisation d'IE6. Et si tu conçoit ton menu correctement (avec du JS non intrusif) il n'y a aucun risque.

pika28 a écrit :
- Revu du code avec ajout de <ul> <li> et <p> plutot que du <br> à tout va
Sympa les différences de marging et padding entre les navs...

CSS c'est magique, ça permet de définir exactement ce que l'on souhaite.

pika28 a écrit :
- Suppression des alt="" et title="" qui servent à rien
j'ai trop peur à mon référencement

Raison de plus pour les supprimer (les alt doivent toujours être présent, mais vide de contenu), car là vu les doublons de contenu que tu produit, tu risque plus d'être pénalisé qu'autre chose. Ce qu'il y a de fantastique avec le référencement à niveau débutant, c'est que c'est en y pensant pas que ça marche le mieux. Pense ton site pour les utilisateurs, les robots seront content. À niveau expert, ce n'est pas avec des bidouilles de planquage de mots clés dans les alt et title que le référencement se fait, mais en produisant du contenu de qualité.

pika28 a écrit :
- Revu des balises <h1> <h2>
dans certains cas, je commence les pages par <h2> direct, sinon il me faudrait du css pour chaque page

Là encore, CSS est magique et c'est à ça qu'il sert.

pika28 a écrit :
-Passage du backgound en dégradé bleu à blanc ou bleu à bleu ciel
Peut-on le faire en CSS ou doit obligatoirement créer un fichier image?

Nope, il faudra utiliser une image, mais c'est pas bien compliqué à faire ni à mettre en place.

Laurie-Anne a écrit :
Le % de désactivation de JS est très inférieur à celui de l'utilisation d'IE6. Et si tu conçoit ton menu correctement (avec du JS non intrusif) il n'y a aucun risque.

Le menu que j'ai mis en place est fait avec un fichier menu.js récupéré dans un tuto, ça t'ennui de jeter un oeil pour vérifier qu'il n'est pas "intrusif?

Laurie-Anne a écrit :

Là encore, CSS est magique et c'est à ça qu'il sert.

Tu veux dire que je dois définir plusieur style de balise <hn> pour chaque page de mon site pour que <h1> soit toujours en premier?

Laurie-Anne a écrit :

Nope, il faudra utiliser une image, mais c'est pas bien compliqué à faire ni à mettre en place.

Je suis une quiche en design, quelqu'un peut me conseiller et me dire comment l'intégrer. Je suppose avec background en css et repart...

pika28 a écrit :

Je suis une quiche en design, quelqu'un peut me conseiller et me dire comment l'intégrer. Je suppose avec background en css et repart...

Oui tu créés ton dégradé (léger) comme tu le souhaites puis tu découpes une image de 1px par (la hauteur du dégradé)px puis tu l'insères via un background CSS en le répétant sur l'axe des X.
Ensuite tu prend la couleur la plus sombre du dégradé et tu l'ajoutes dans les valeur du de la propriété background raccourci (équivalent background-color).
Modifié par Hermann (18 Nov 2009 - 00:05)

Le mieux serait de mettre en ligne tes essaies.

Hello,

En lisant les réponses et en faisant un passage sur ton site. Certaines choses ont été améliorées notamment l'interlignage. En revanche, le dégradé clair, ça le fait pas. Automatiquement la lecture est difficile puisque le contraste n'est pas élevé. Là, je viens de faire un truc simple et vite fait (20 minutes) qui peut être te plaira. Ceci dit, le contraste est élevé.

http://img264.imageshack.us/img264/1323/bluebox.th.jpg

<<<EDIT
Juste une petite question :
Comment as tu préparé ta maquette : papier/crayon/règle ? Inkscape/Gimp/Scribus/Open Office/Word ? Illustrator/Photoshop/Xpress/InDesign ?
EDIT;
Modifié par Nolem (18 Nov 2009 - 17:41)

Bonjour,
effectivement ne pas oublier de conserver un niveau de contraste suffisant.
Ton dégradé "réfléchi" a un côté artificiel pas très heureux, un dégradé linéaire du clair (en haut) vers le sombre (en bas) est plus intéressant et réaliste (dans le sens ou il peut rappeler par exemple un fond marin (même si c'est pas le but recherché)). S'inspirer du réel est une démarche moins casse-gueule surtout en l'absence de parti pris précis.

a écrit :
Par contre, je ne voulais le faire que sur mon div principal et là aller comprendre, je peux placer le backgroung sur le body et sur tous les autres div mais pas sur le <div id="divprin">... une idée

Tout simplement parce que tous les enfants directs (div) du div conteneur sont positionnés de manière absolue et qu'ils n'ont par conséquent aucune incidence sur la calcul de la hauteur de leur bloc conteneur puisqu'ils sont sortis entièrement du flux normal.
Le bloc conteneur n'a donc pas de hauteur et le backgroun ne pourra donc pas s'afficher.
D'autre part la solution de facilité du positionnement absolue est à utiliser en dernier recours, tu dois privilégier le placement des bloc en les conservant dans le flux normal. Revoir les bases sur ce forum si c'est pas compris
Modifié par Hermann (18 Nov 2009 - 18:00)

Hello,

pika28 a écrit :

J'ai pas de maquette, je travaille comme ça... [...]

Pas bien. Il faut un minimum. Prend pour habitude d'au moins crayonner sur papier (placer les éléments) que tu mettras sur la page. Surtout si tu n'as pas l'habitude

pika28 a écrit :

[...]
- Pourrais tu m'expliquer comme refaire le même style photo en photoshop ou me filer ton style que l'import dans photoshop directement?
[...]

* Tu récupères la sélection de ta photo (ctrl+clic gauche sur calque)
* menu sélection/modifier/dilater
* choisir une valeur entre 5 et 10 px (suivant l'oeil)
-> Tu remarqueras que les coins « s'arrondissent » automatiquement.
* nouveau calque
* remplir le calque de blanc (maj+back-space)
* passer le calque en dessous
* effet de calque->ombre portée
* joindre les deux calques

pika28 a écrit :

[...]
- Pour le background, je pensais garder ton style mais avec la même chose en bas pour le footer inversé, c'est juste que du coup le menu fait quiche...
Exemple

Attention, une mise en page linéaire risque d'ennuyer ton lecteur. Ce n'est pas le but recherché, n'est ce pas ? Là, dans ton cas :
en-tete/menu,
puis « bienvenue »,
puis « vos conseillers »,
puis galerie photos
et pour finir le footer.

Si tu fais une belle mosaïque de tes éléments, la mise en page sera automatiquement plus attrayante. Par exemple, comme je t'ai mis les photos :
1 il y a un appel vers une galerie potentielle
2 mise en page non linéaire
3 créativité du footer beaucoup plus vaste
Modifié par Nolem (18 Nov 2009 - 22:27)