[resolu]Site Hootel Adriano, Améliorer mon h1 ?

Salut à tous !

Ca fait un petit moment que je participe à ce forum et j'aurai besoin des précieux conseils des designers.
En effet, je ne suis pas web designer mais ma boite me demande quand même de créer des design (des petits trucs classiques pour des hôtels).
Là j'en ai créé un, et les clients ont approuvé, donc jusqu'ici tout est parfait.
Seulement, maintenant que je passe au code, je trouve mon h1 vraiment pas beau... Je voudrais savoir si vous avez des idées pour lui donner une meilleure tête. Je voudrais pas le changer radicalement (sauf si c'est vraiment mieux) car les clients ont approuvé avec un h1 comme ça, mais juste le rendre moins moche...

Voilà le site :
http://www.portalin1.com/CMSIN1/Adriano/facilities.html

C'est une page test que j'ai mis en ligne spécialement pour vous, donc les liens ne marchent pas...

Si vous avez d'autres suggestion pour le reste de la page (en particlier, le texte central) je suis preneuse, mais comme je l'ai déjà dit, je ne peux pas faire de changement radical.

Merci beaucoup !
Modifié par yahrou (20 Jun 2007 - 13:00)

Salut,

Tu peux changer de police et en prendre une plus exotique en utilisant Sifr.

Oui, je sais c'est du flash mais accessible.

Boui, centré c'est pas terrible. En fer à droite avec une police à empattements ?

a écrit :
une police à empattements

J'y connais pas trop grand chose en police, c'est quoi une police à empatement ?

Sinon, ce qui me gène c'est le gros cube bleu, mais j'ai pas réussi à trouver quelquechose de mieux qui s'accorde à la fois avec la bande sur la droite et le bouton de réservation au dessus...

Police a empatement: police avec serif comme Times new roman ou Garamond ^^

J'ai suivi vos conseils, et ça rend, en effet, mieux. (vous pouvez vérifier sur le lien plus haut)

Cependant, j'ai un poblème avec la police du h1. IE ne la prend pas en compte ! C'est à cause de la définition générale sur le body (en verdana). Cependant, avec le système de priorités des sélecteurs, ma définition particulière sur le h1 devrait remplacer celle sur le body, c'est d'ailleurs ce qui se passe avec firefox. Alors est ce que IE (aussi bien 6 que 7) ne prend pas en compte ce système de priorité ?

Quelle solution adoptée ? (A part devoir enlever le verdana du body et donc le répéter partout... Ce qui est vraiment très embêtant)

En plus de Xis, je dirais qu'une police a empattement (traduction française de serif) concerne les caractères non bâtons qui sont pourvu d'un "pied" qu'on appelle empattement (le plus souvent triangulaire).

Pour l'écran avec un corp de petite taille (texte à lire), utiliser de préférence la Georgia qui a été conçu pour une lecture écran (comme la verdana et la Trébuchet). La Garamond n'est pas adaptée pour l'écran (sauf pour des
titres de grande taille et dans un contexte plus historique).

Ne pas oublier d'indiquer des polices alternative pour les système n'étant pas équipé de la Georgia et toujours terminer par la police générique (serif ou sans-serif).
Tu peux rassembler la taille et la famille de caractères dans la propriété raccourci font:

font: 1.7em Georgia, "Times New Roman", Times, serif; 

a écrit :
Alors est ce que IE (aussi bien 6 que 7) ne prend pas en compte ce système de priorité ?

Si bien sûr. Je n'ai pas remarqué de différence. Tu dois avoir un problème de cache.
Modifié par Hermann (07 Jun 2007 - 17:25)

Ca rend très bien avec le Georgia, merci beacoup.

Et avec ça, j'ai enfin compris cette histoire de Serif. Etant donnée que je viens d'une licence d'info et que je n'ai jamais eu de formation design, j'ai parfois des trous de connaissances que je comble au fur et à mesure...

Le bug ie a disparu avec Georgia (mais je ne crois pas que ca venait du cache, l'erreur était aussi là en local). Sans doute, un problème au niveau de la syntaxe css...

Encore une fois merci à tous !

ok, tu aurais quand même encore pas mal de choses à revoir, dont le placement de ton titre...
Modifié par Hermann (07 Jun 2007 - 17:43)

a écrit :
tu aurais quand même encore pas mal de choses à revoir, dont le placement de ton titre...

Tu le mettrais où ?

Lorsqu'il prenait toute la largeur, je le trouvais trop massif, quelqu'un m'a porpoosé de le décaler à droite, et je trouve que ca rend pas mal...

A gauche, ca jure un peu avec le bouton au dessus.

yahrou a écrit :

Tu le mettrais où ?
Lorsqu'il prenait toute la largeur, je le trouvais trop massif, quelqu'un m'a porpoosé de le décaler à droite, et je trouve que ca rend pas mal...
A gauche, ca jure un peu avec le bouton au dessus.

Tu ne devrais pas le mettre à droite pour plusieurs raisons:

> Cela est trop inhabituel dans un mode de lecture (pas de visualisation) classique.
> Le saut du regard pour passer du titre au texte est trop important
> Cela donne une impression de destructuration de l'ensemble un peu gênant.

Si tu en as la possibilité, je pense que tu devrais récupérer certaines couleurs du bandeau supèrieur pour y faire echo. Cela permettrait un meilleur intégration de ton image dans l'ensemble, mais bon...

Pour le titre, je le mettrais donc à gauche avec un fond bleu plus soutenu (celui de la mer par exemple) et je le détacherais du filet bleu-marine horizontal pour créer un espace de respiration un peu plus important.

Autre chose: ton logo est un peu flou et au niveau du bandeau, le flouté du
ciel est trop prononcé. Je suppose que tu as voulu réduir le bruit de l'image?
Modifié par Hermann (07 Jun 2007 - 18:27)

a écrit :

Si tu en as la possibilité, je pense que tu devrais récupérer certaines couleurs du bandeau supèrieur pour y faire echo. Cela permettrait un meilleur intégration de ton image dans l'ensemble, mais bon...

Pour le titre, je le mettrais donc à gauche avec un fond bleu plus soutenu (celui de la mer par exemple) et je le détacherais du filet bleu-marine horizontal pour créer un espace de respiration un peu plus important.

Je vais essayer et voir si ça rend bien, mais faut voir qu'ici, le titre n'est finalement pas le plus important : les hôtels veullent que les gens voient le bouton "réserver'

a écrit :

Autre chose: ton logo est un peu flou et au niveau du bandeau, le flouté du
ciel est trop prononcé. Je suppose que tu as voulu réduir le bruit de l'image?

Je vais voir ce que je peux faire pour le logo, mais je ne l'ai pas en version vectorielle, donc ça ne sera pas parfait...

Pour le ciel, par contre, j'ai déjà fait tout ce que je pouvais. Le flou était en effet la seule option vue l'état de la photo, un vieux truc scané. Ce n'est même pas le bruit de l'image que j'ai essayé d'effacer mais les traces verticales comme sur un papier de mauvaise qualité.

Il est vaguement prévu d'avoir de nouvelles photos, mais en attendant, faut faire avec ce qu'on a...

ces hôtels..... lol
et je sais de quoi je parles!

je suis d'accord avec tout ce qui a été écris au dessus.

mais peut-être pourrais-tu mettre le "reservar ahora" dans un bouton rond par exemple et dans le cois superieur gauche de la page (par dessus le header), ce qui aurait 2 avantages:
1 - il te permettrait de mieux équilibrer le reste de la page;
2 -il sauterait bien plus à l'oeil, car pour le moment il ressemble plus à un tritre qu'à un lien