Vos avis et conseils sur le relookage du site copieurs.info

Bonjour à tous !

J'ai imaginé un nouveau site ou les internautes auront un accés direct à 1 clic pour les différents produits sans être obligé de passer par des tas de labyrinthes pour y accéder !

Nous avons essayé de faire en sorte que les principaux critères de sélection, pour rassurer le futur client, se trouvent sur la page d'accueil : modèles, contrat de sav, satisfaction des clients, promotion et rachat des anciens matèriels.

Qu'en pensez vous ? car si ça se trouve je me plante complêtement !

Et le design ?

Problème que je n'arrive pas à résoudre malgrés les nombreux conseils trouvés sur Google : la transparence des PNG sur IE6

A+
Christian

Salut,

Si je comprend bien les autres pages sont celle de la version en cours ?

Pour le choix de cet accès direct je trouve ça pertinent pour le client maintenant tu nous dira si ça augmente le taux de transformation.

Pour le design, ça fait sérieux pas de problème.
Je regrette juste la largeur à 100%, ça fait des lignes trop large sur les gd écrans.

Tu devrais mettre en valeur le petit blabla ("depuis 30 ans [...] produits").
Lui donner un peu d'air en haut et grossir la typo notamment.

Sur les fiches produits attention à la cohérence des descriptifs : soit tu écris cpm soit copies/minute.
Le e-bridge du 1er copieur mériterait aussi une mise en valeur (comme toutes les singularités de chaque produit) voire un logo, et un lien vers un descriptif de la technologie (mais c'est pt prévu).

Voili voilou

edit: pour les png tu as lu ceci ?
Modifié par Yorick (25 Oct 2007 - 03:19)

Bonjour Yorick,

Merci pour tes remarques et conseils qui sont plus que pertinents

Quand on a la tête dans le guidon, on ne se rend pas compte de ces petits détails qui ont une importance capitale !

a écrit :
Si je comprend bien les autres pages sont celle de la version en cours ?

J'aurai du le préciser car les liens actuels pointent sur le site copem.fr qui est le site principal de la société.

La maquette que j'ai présentée sera le nouveau site de www.copieurs.info qui appartient également à Copem.

a écrit :
Je regrette juste la largeur à 100%, ça fait des lignes trop large sur les gd écrans.

Je n'avis pas remarqué ces lignes trop lages et c'est vrai qu'en réduisant la taille du body c'est beaucoup plus chaleureux !

a écrit :
Tu devrais mettre en valeur le petit blabla ("depuis 30 ans [...] produits").
Lui donner un peu d'air en haut et grossir la typo notamment.

Je vais rectifier tout ça et resoumettrai la nouvelle page en fonction de tes conseils.

Merci également pour le lien des PNG, je vais essayer de le mettre en pratique..........

A+
christian

Bonjour,
c'est un peu froid dans l'ensemble.
ton logo n'est pas très réussi... tu as la possibilité de le retoucher?
Je suis en 1680 de large et tu as des problème au niveau des background dégradé bleu qu'il faudrait aligner à droite, même prob avec le header > résolution à tester.

Sinon tu as des problème de cohérence, de hiérarchisation, et de mise ne page un peu partout.
Tu n'as pas l'impression que le fil d'ariane est trop petit? Autant dire qu'à cette taille il ne sert strictement à rien!

Même remarque que Yorick sur le texte d'intro, pas assez mis en valeur, bien trop petit. Laisser une marge plus importante sous le menu.
En 1680, certaines ligne sont trop longues.
Penser à un gabarit laissant apparaitre un fond de chaque côté en passant la largeur à 90% par exemple.

La colonne de gauche comme celle de droite donne l'impression de faire uniquement office de fourre-tout publicitaire. On ne comprends pas à quoi ces zone correspondent. Il n'y as jamais de titre structurant.
Toshiba en bas à droite ça veut pas dire grand chose.
le pavé de gauche avec le portable pas clair non plus et le texte est trop petit.

L'arial n'est pas trés conseillée pour des texte à lire à l'écran, préférer la Tahoma.

Bonjour Hermann,

Entre vous deux, j'ai du boulot en perspective et j'aime ça car je souhaite ce site le plus professionnel possible !

a écrit :
ton logo n'est pas très réussi... tu as la possibilité de le retoucher?

Oui bien sur! As-tu une idée pour qu'il fasse plus pro ?

a écrit :
Penser à un gabarit laissant apparaitre un fond de chaque côté en passant la largeur à 90% par exemple.

C'est drole, je suis justement en train de le modifier avec 90% de large pour y faire un fond de couleur chaude !

a écrit :
La colonne de gauche comme celle de droite donne l'impression de faire uniquement office de fourre-tout publicitaire. On ne comprends pas à quoi ces zone correspondent. Il n'y as jamais de titre structurant.
Toshiba en bas à droite ça veut pas dire grand chose.
le pavé de gauche avec le portable pas clair non plus et le texte est trop petit.

Je vais revoir tout ça car si tu as cette impression, les internautes l'auront aussi

Je vais mettre en Tahoma pour voir ce que ça donne !

Merci

A+
Christian

dircom a écrit :

Oui bien sur! As-tu une idée pour qu'il fasse plus pro ?

Commences par supprimer l'ombre portée et le faux italic (inclinaison), ça sera déjà mieux

dircom a écrit :

Je vais mettre en Tahoma pour voir ce que ça donne !

Pour ton info, la Tahoma est grosso modo une version étroitisée de la Verdana qui est une police conçu pour une lecture écran.
Mis appart ça elle est quand même plus élégante et moins banale que l'Arial.

a écrit :
Commences par supprimer l'ombre portée et le faux italic (inclinaison), ça sera déjà mieux

Je vais modifier cela dans la journée........

a écrit :
Pour ton info, la Tahoma est grosso modo une version étroitisée de la Verdana qui est une police conçu pour une lecture écran.
Mis appart ça elle est quand même plus élégante et moins banale que l'Arial.

Voici la version en Tahoma et en cliquant sur Accueil on a celle en Arial

Pour le logo il est en place et c'est vrai qu'il n'y a pas photo ! comme quoi la simplicité est payante. Merci Hermann !!!

A+
Christian
Modifié par dircom (25 Oct 2007 - 12:40)

Bonjour,

J'ai pris en compte vos conseils et aprés avoir bossé dur, je suis heureux aujourd'hui de vous présenter le site www.copieurs.info dans sa version définitive.
Ce n'est pas vraiment définitif puique j'attends avec impatience vos impressions et conseils

Bonne navigation !

Christian

Bonsoir,

Il y'a des erreurs/oublis dans XHTML (il suffit de suivre le lien de validation en bas de votre page pour s'en rendre compte).
copem-orange.gif : une telle largeur (2000px!) est inutile, et mieux vaut utiliser PNG à la place de GIF.

original.defeat a écrit :
et mieux vaut utiliser PNG à la place de GIF.

Une affirmation qui ne demande qu'à être étayée .

original.defeat a écrit :
Bonsoir,
Il y'a des erreurs/oublis dans XHTML (il suffit de suivre le lien de validation en bas de votre page pour s'en rendre compte).
copem-orange.gif : une telle largeur (2000px!) est inutile, et mieux vaut utiliser PNG à la place de GIF.

Pour la validation c'est ok maintenant ! Merci de me l'avoir rappelé


Compte tenu que certains clients utilisent maintenant du Full HD en 1900 x 1080 j'ai préféré mettre une largeur concéquente qui conviendra à tous.

Le PNG étant plus lourd que le gif, qu'el est l'intéret d'utiliser ce format pour un logo ?

Christian

Bonjour Christian,

dircom a écrit :

Compte tenu que certains clients utilisent maintenant du Full HD en 1900 x 1080 j'ai préféré mettre une largeur concéquente qui conviendra à tous.

Ce n'est pas une raison, ton choix devrait plutôt être guidé par des notions d'ergonomie. Le parcours de l'oeil entre la gauche et la droite et ses bons successifs quand on dépasse une certaine largeur est trop important, les internautes ne sont encore habitués, surtout pour ce type de site.
Au delà d'un certain temps de consultation cela peut fatiguer ou agacer.

dircom a écrit :

Le PNG étant plus lourd que le gif, qu'el est l'intéret d'utiliser ce format pour un logo ?

Faux, Dans la plupart de cas le PNG est plus léger au le gif, excepté pour les très petites images.
Le PNG est plébiscité pour cette raison et à cause de sa gratuité lors de sa sortie contrairement au GIF dont l'algorithme de compression était sous licence UNYSIS pendant des années mais ce n'est plus le cas aujourd'hui.
Modifié par Hermann (19 Dec 2007 - 11:18)

Dans le cas de votre site, l'argument du Full HD 1900 x 1080 n'a aucun rapport avec le problème que j'énonce. Votre image est insérée en arrière plan. Le logo pourra être positionné à gauche -si tel est le but- grâce à la propriété CSS left et non pas grâce au surdimensionnement de la largeur de l'image.

Un PNG truecolor peut être plus lourd qu'un GIF. Un PNG paletted a de fortes chances d'être plus léger. C'est le cas de votre logo, qui utilise de plus, des entrées similaires qui peuvent être "fusionnées".

Edit:

a écrit :
Une affirmation qui ne demande qu'à être étayée

Lorsque le temps me le permettra, c'est ce que je compte faire
Modifié par original.defeat (19 Dec 2007 - 12:50)

original.defeat a écrit :

Un PNG truecolor peut être plus lourd qu'un GIF. Un PNG paletted a de fortes chances d'être plus léger.

Oui en effet j'ai oublié de précisé PNG 8bits
Modifié par Hermann (19 Dec 2007 - 13:35)

Hermann a écrit :
Bonjour Christian,

Ce n'est pas une raison, ton choix devrait plutôt être guidé par des notions d'ergonomie. Le parcours de l'oeil entre la gauche et la droite et ses bons successifs quand on dépasse une certaine largeur est trop important...

Faux, Dans la plupart de cas le PNG est plus léger au le gif, excepté pour les très petites images.

Bonjour Hermann,

Tu as certainement remarqué que le texte (à droite du bandeau) est du H1 et qu'il se positionne en float : right;
Que me proposes tu de faire : de lui donner une position fixe en % ? pour éviter ces bonds gauche droite...........

Pour le PNG tu as raison car je viens de le modifier et j'ai gagné 20% en poids.

Christian

original.defeat a écrit :
Dans le cas de votre site, l'argument du Full HD 1900 x 1080 n'a aucun rapport avec le problème que j'énonce. Votre image est insérée en arrière plan. Le logo pourra être positionné à gauche -si tel est le but- grâce à la propriété CSS left et non pas grâce au surdimensionnement de la largeur de l'image.

Oui vous avez raison mais le background du header est #3B3B3B avec un padding-bottom de 18px pour pouvoir avoir une bande grisée en prolongement du menu "Accueil".

Si vous avez une autre solution, je suis preneur......

Christian

dircom a écrit :
une autre solution

Insérer l'image dans le div grâce à img avec des dimensions correctes ? Si oui, profitez en pour créer un lien sur l'image, et pas sur l'espace.

Bonjour,
le h1 ou plutôt le co-texte/slogan ne devrait pas être balisé ainsi:

> Ce n'est pas un titre de section structurant
> Dans l'idéal le titre1 devrait être variable suivant la page
> Si tu fais ça pour le référencement saches que les mots clés utilisé dans le
body ont autant (si ce n'est plus) d'importance que ceux utilisés dans le h1.

Le titre h1 devrait être accueil etc...

D'autre part la typo (gras+rouge et noir) choisis pour le slogan et son emplacement font que l'on a instinctivement tendance à l'associer à un contenu publicitaire qui est en général boudé par les utilisateurs.
Trouver donc une autre présentation pour le slogan s'harmonise mieux avec
le reste de la page et le rapprocher du logo ou alors le convertir en baseline
(en petit et lettres capitale sous le logo) mais ce choix dépend
d'autres critère que je ne peux pas connaître

Les titres des pavés de le colonne de droite ne sont pas assez mis en valeur
et pas bien intégrés aux blocs dont ils dépendent >
Ferrer le titre à gauche, augmenter le corps du texte et l'intégrer au pavé.
Celui-ci devrait être un titre h2.

Les texte comme "Haute performance et qualité de reproduction" dépassé du bloc relatif en 1024x768.

Les bande oranges horizontales du logo ne sont pas propres.

Mis appart ça l'évolution depuis la première version que j'ai pu
voir est évidente, c'est bien mieux
Modifié par Hermann (20 Dec 2007 - 09:12)

Hermann a écrit :
Bonjour,
Mis appart ça l'évolution depuis la première version que j'ai pu
voir est évidente, c'est bien mieux

C'est encourageant et te remercie !

a écrit :
le h1 ou plutôt le co-texte/slogan ne devrait pas être balisé ainsi:
> Ce n'est pas un titre de section structurant
> Dans l'idéal le titre1 devrait être variable suivant la page
> Si tu fais ça pour le référencement saches que les mots clés utilisé dans le
body ont autant (si ce n'est plus) d'importance que ceux utilisés dans le h1.

En fait les slogan sont différents sur les autres pages et reprennent les mots clefs que je vise et qui se trouvent dans les titres.

J'ai remarqué sur mon autre site copem.fr que j'arrivais a me placer 1er sur Google sur le mot clé le plus recherché dans mon activité en utilisant cette méthode. Bien sur ce n'est pas le seul critère que j'utilise mais ça y contribue largement.

Pour les autres remarques et conseils que tu m'as donné je vais travailler dessus.

Merci !

Christian

original.defeat a écrit :

Insérer l'image dans le div grâce à img avec des dimensions correctes ? Si oui, profitez en pour créer un lien sur l'image, et pas sur l'espace.

Oui mais si j'insère l'image il y aura toujours ce fond noir ???? a moins de faire un logo gif avec fond transparent...........

Christian