[PRO] www.bluebox-chartres.com

(reprise du message précédent)

Même remarques que Mikachu qu'on t'avait déjà faites au départ, pense aux dégradés (légers de préférence)

Edit (18h56) : carrément hors-sujet, je croyais que http://www.bluebox-center.fr était une modif que tu venais de réaliser. J'ai eu très peur pendant un instant.

D'où mon commentaire excédé tant le site que tu donnais en exemple est un abécédaire des mauvaises pratiques de développement web.
Modifié par Akhilleus (08 Dec 2009 - 18:57)

Akhilleus a écrit :


frame + menu en Flash + alignement à gauche = ultra fail combo

Ça partait pas trop mal pourtant ..

Je ne comprends rien à ce post, il n'y aurait pas erreur de sujet là?

Excellent, ça me rassure car c'est le site de l'enseigne, il ya une équipe de webmaster qui ne gère que ça... Il paie google adworks pour être référencé.

ça me rassure perso, moi qui suis un webmaster en herbe....

Lorsque l'on tappe "bluebox bronzage" dans google, au lieu d'avoir le site de l'enseigne en n°1, c'est le miens, mdr...

Sinon pour revenir à ton premier commentaire de ce matin, je ne trouve pas sur mon site la phrase que tu cite, celle que tu as déformé... Tu te trompe pas là également? D'ailleur si tu pouvais faire le tris des mots facheux également, ça serait cool...

Salut,

@Pika, essaye de mettre le lien dans ton post initial à jour au lieu de le mettre au fil de la conversation, ceux qui ne sont pas encore venus commenter ton site risque de ne pas parler de la même chose, ce qui peut provoquer des quiproquo comme il y en a eu déja dans ce sujet.
Par la suite, inutile de remettre systématiquement le lien partout.

pika28 a écrit :
D'ailleur si tu pouvais faire le tris des mots facheux également, ça serait cool...

Je ne vois pas de mots facheux dans la conversation que j'ai relu, au pire une pointe d'humour. Si tu te vexe facilement, proposer une site à la critique n'est pas la meilleure chose à faire, car il est évident que tu auras des retours négatifs qui risquent de te déplaire. Comme tu es venu présenter ton site, assume les critiques qui te sont faites, libre à toi d'en tenir compte ou non.

Que pensez vous de cette adaptation de l'exmple de Akhilleus avec mon code couleur?

http://img694.imageshack.us/img694/1843/templatebluebox1.th.jpg

Salut,

Je crois que quelqu'un t'avais suggéré un dégradé léger
De toute manière je trouve ta forme beaucoup trop grande (haute surtout), qui fait descendre le contenu trop bas.

lol, vous etes quand même dur (j'en ai besoin pour avancé, ce n'ets pas un reproche hi hi hi)... je trouvais cet exemple sympa avec j'avoue, un dégradé ou là je me suis un peu laché...

Que me suggérez vous, tous les avis diverge quand meme sur ce coup, donc un forme plus petite et moins de dégradé?

La facilité d'accessibilité au clic du menu sur le dernier modèle n'est pas idéale, celui-ci devrait se trouver soit sous le logo soit à sa droite si on reste dans un schéma classique.
Les zones périphérique de l'interface sont plus conseillées pour l'intégration des éléments de l'identité graphique (logo...)

Voila ce que je te propose (une amélioration possible) :

http://img40.imageshack.us/img40/2987/sanstitre1eg.jpg

(si tu ne souhaites pas reprendre mon dégradé, pense à assombrir la zone inférieure avec un teinte légèrement plus violacée comme sur mon exemple. Ton fond devrait être plus violacé et pus sombre pour reculer spatialement par rapport à l'interface utile.
Tu peux aussi avoir un "fond perdu" (interface sans délimitation).

> Atténuer l'ombre portée des photos (éviter le noir, une ombre contient toujours du bleu...), elle est trop voyante
> baisser le titre en dessous du bord haut de la photo comme dans mon exemple
> Ajouter une ombre portée au titre (via la propriété text-shadow), pas obligatoire mais ça permet de mieux faire ressortir les titres sont le contraste est un peu limite.
> Éclaircir un peu le titre
Pour tous ces aspect voir mon exemple.
Modifié par Hermann (09 Dec 2009 - 03:18)

Si ça peut t'inspirer (je ne retrouvais pas le psd original, j'ai retravaillé en vitesse le screenshot), cette nouvelle disposition prend en compte les conseils des camarades, à adapter à tes couleurs :

http://omicronlab.net/upic/4b1f601e-377.png
Cliquer pour agrandir
Modifié par Akhilleus (09 Dec 2009 - 09:37)

@Hermann : Quand tu parles de l'éccéssiblité au clic, tu veux dire que lorsque l'on est en bas de page, pour trouver le menu, ça oblige à faire un max de scroll?

Quand tu dis "si tu ne souhaites pas reprendre mon dégradé", tu parles de quel dégradé?

Atténuer l'ombre portée des photos (éviter le noir, une ombre contient toujours du bleu...), elle est trop voyante
c'est là que j'aurais du garder les calques...

baisser le titre en dessous du bord haut de la photo comme dans mon exemple
je peux mais après le texte dépasse en dessous de la photo, c'est pas top et je peux pas suppri la dernière phrase comme dans ton exemple

Ajouter une ombre portée au titre (via la propriété text-shadow),
super je connaissais pas cette propriété

Éclaircir un peu le titre
je peux pas non plus, le orange doit être du FF9900

pense à assombrir la zone inférieure avec un teinte légèrement plus violacée comme sur mon exemple
comment intégrer ce dégrader sachant que mes pages n'ont pas la même hauteur

---------------------------------------------------------------

@Akhilleus : J'adore vraiment ce style de header, mais comment faire pour intégrer tout ça sans alourdir le site?

Est ce une bonne idée de supprimer l'onglet contact au profil d'un lien dans le footer?

Intégrer les photo sous la courbe permet d'humaniser le site, maintenant je suis pas sur de pouvoir les utiliser et je pense pas que ça ferait la mêm avec les mienne

Je vais refaire le template avec cette nouvelle base

pika28 a écrit :
@Hermann : Quand tu parles de l'éccéssiblité au clic, tu veux dire que lorsque l'on est en bas de page, pour trouver le menu, ça oblige à faire un max de scroll?

Non la distance moyenne que doit parcourir le curseur et l'œil pour accéder au menu est trop importante dans ce cas.

pika28 a écrit :

Quand tu dis "si tu ne souhaites pas reprendre mon dégradé", tu parles de quel dégradé?

Hé hé, c-a-d que si tu regardes bien, le fond de l'interface utile est en dégradé, c'est un léger dégradé qui n'a pas besoin d'être immédiatement perceptible et qui donne néanmoins un peu de profondeur et de consistance au fond. Celui que tu as actuellement est trop frontal comme le dit STPo.

pika28 a écrit :

Atténuer l'ombre portée des photos (éviter le noir, une ombre contient toujours du bleu...), elle est trop voyante
c'est là que j'aurais du garder les calques...

C'est pas un problème ça, tu peux redécouper tes photos avec l'outil vectoriel à bord arrondis.

pika28 a écrit :

baisser le titre en dessous du bord haut de la photo comme dans mon exemple
je peux mais après le texte dépasse en dessous de la photo, c'est pas top et je peux pas suppri la dernière phrase comme dans ton exemple

Tu peux réduire les espaces inter-paragraphe et récupérer un peu d'espace.

pika28 a écrit :

pense à assombrir la zone inférieure avec un teinte légèrement plus violacée comme sur mon exemple
comment intégrer ce dégrader sachant que mes pages n'ont pas la même hauteur

> background: #bleudubas url() repeat-x, et c'est tout, celui-ci se calera en haut.

pika28 a écrit :

Est ce une bonne idée de supprimer l'onglet contact au profil d'un lien dans le footer?

Je répond pour Akhilleus, non je pense qu'il a dû l'oublier, tu as largement la place de l'ajouter a droite du menu.

Au passage tu pourras penser à remercier Akhilleus qui te fait des propal princièrement,
car on est pas sensés faire le boulot à ta place.

pika38 a écrit :
Est ce une bonne idée de supprimer l'onglet contact au profil d'un lien dans le footer?

C'est un oubli (bien vu Hermann).
Comme je l'ai dit pour le premier proto, c'est fait à coup de ache, c'est à dire sans peaufiner les détails, le but étant que tu puisses avoir une idée claire du concept, pas un design intégrable tel quel

pika38 a écrit :
mais comment faire pour intégrer tout ça sans alourdir le site?

En l'intégrant de manière intelligente, pour le tout (sans compter la photo de la machine), tu peux t'en sortir avec 3 images :

* le fond : http://omicronlab.net/upic/4b1f803d-21ad.png
* le header : http://omicronlab.net/upic/4b1f800f-fc0.png
* le logo : http://omicronlab.net/upic/4b1f8055-1e72.png

Soit un total de 140 Ko, c'est plus que raisonnable (et on pourrait encore optimiser les images).

Edit : et parce que je n'avais rien à faire cet aprem', un screencast "how to" (sous photoshop) pour les formes du design [MP4, 6 Mo] que je t'ai proposé
Modifié par Akhilleus (09 Dec 2009 - 15:48)

pika38 a écrit :
Qu'entends tu par optimiser les images?

Il existe des programmes qui utilisent des techniques mathématiques que je ne détaillerai pas ici pour diminuer le poids des images, par exemple : PngOptimizer pour les PNGs (il existe aussi des sites web qui proposent ce type de services "on line" mais je n'ai plus les noms en tête).

À ce propos, il y a avait un excellent article d'un membre de la communauté d'Alsa qui traitait des méthodes d'optimisation de PNGs mais le site est down pour l'instant (il est en maintenance depuis plus de 3 mois ).

Concernant la rapidité d'exécution dans le "how to", c'est comme pour tout, c'est à force de pratique que tu prends la main et acquiert des réflexes (dans le cas de photoshop, il doit y avoir un raccourci pour presque toutes les actions [PDF]), je me suis forcé pour le screencast à effectuer certaines actions avec la souris (création d'un nouveau calque, inversion de la sélection, etc.) et à ne pas enchaîner les actions trop rapidement pour ne pas te perturber mais en temps normal, ça aurait été plus rapide
Modifié par Akhilleus (09 Dec 2009 - 17:48)

@Akhilleus :
Merci pour l'info, je vais tester ce programme

@Hermann :
Je viens de tester la propriété text-shadow et ça n'a l'air de fonctionner qu'avec safari. J'ai testé plusieur option mais idem... Peux tu m'en dire plus sur ta façon de l'utiliser.

MERCI à vous tous et bonne soirée

pika28 a écrit :
@Hermann :
Je viens de tester la propriété text-shadow et ça n'a l'air de fonctionner qu'avec safari.

Non ça fonctionne aussi sur Firefox 3.5+, Opera et Chrome (pour ce qui est des principaux navigateurs)

pika28 a écrit :

J'ai testé plusieurs option mais idem... Peux tu m'en dire plus sur ta façon de l'utiliser.

C'est pas bien compliqué tu n'as pas bien cherché

Je me suis acharné avec IE et bien sur, c'est le seul navigateur qui n'en tient pas compte. Je viens de tester avec firefox et c'est nickel

Il n'existe pas de technique pour l'appliquer à IE.

Dommage

EDIT :Je répond seul à ma question, je viens de voir l'alternative avec

filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=4);   zoom: 1;

Je mets ça en pratique demain avec le dégradé du bloc contenu central. D'ailleur je viens de tilter, si j'applique u degrdé en plein milieu, les bordure de chaque photo vont se voir...
Modifié par pika28 (10 Dec 2009 - 00:18)

Bonsoir,

J'ai essayé le fondu du bleu clair vers le bleu foncé en repeat-x. Le problème du coup, c'est le détourage (cache) des photos qui se vois même après retouche. J'ai placé le type de bleu moyen pour chaque photo en fond mais certaine (genre pie de page se repète sur toutes les pages et ne sont jamais au même endroit...

Bon[jour|soir],

Il faut songer à laisser tomber le détourage graphique des photos.
Tu obtiendrais des résultats esthétiquement bien meilleurs en ajoutant une bordure et un dégradé en CSS3.

Par exemple : CSS3 : ombre portée et coins arrondis
Modifié par Akhilleus (11 Dec 2009 - 09:34)

J'y avais bie pensé mais comme pour le text-shadow, ce n'est pas encore pris en compte par les IE... A moins que je dise une connerie...