Header pour site extensible.

Bonjour à toutes et tous

Tout d'abord je ne suis pas sûr de poser la question dans la bonne section...

Je suis actuellement en train d'étudier comment je réaliserais mon futur site internet, l'idée de base est de reprendre le design d'un restaurant italien que j'avais réalisé il y a quelques années.

Je voudrais bien partir sur un design fluide, mais je bute un peu sur la gestion extensible de l'header qui sera une image.

Je suis en train de lire l'ouvrage de Ethan Marcotte qui parle de la propriété CSS max-width .

Si je prends exemple d'un site que je suis en train de réaliser, http://orangedrink.ch/, supposons que je veuille que l'image ( header ) soit fluide, pour les résolutions légèrement inférieure ( pour les plus petites, une autre image sera mise en place avec les média queries ) mais plutôt supérieure.

Il faudrait donc que je réalise une image d'environ 2'000 px de large ( au lieu de 980px actuellement ) et que je mette l'image en max-width 100% qui respectera la largeur du bloc dans laquelle elle sera placée.

Seulement voilà, si je fais comme ça, l'image risque de peser bien lourd, est-ce vraiment une bonne pratique ?

J'espère avoir été assez clair, le cas échéant dites le moi.

Je vous remercie d'avance et vous souhaite une excellente journée.

Cordialement

Marc..
Modifié par marc.suisse (13 Jan 2012 - 13:29)

La question c'est surtout : pourquoi vouloir afficher un site à 100% sur des résolutions de 2000px et + de large ?

Bonjour,

Ton header va donc pouvoir s'étendre jusqu'à 2000px de large. Est-ce que ton contenu pourra aussi s'étendre sur la même largeur? Un texte sur 2000px de large c'est juste illisible (et déjà sur 1000px de large ça fait des lignes de texte clairement trop longues).

Si c'est un header décoratif sur toute la largeur du viewport, mais avec un contenu fixe (ou fluide avec un max-width raisonnable), tout dépend de plusieurs facteurs:
- le design de ce header;
- est-ce qu'il doit être toujours entièrement visible, ou bien certains bords seront masqués si le viewport n'est pas très large;
- s'il doit être toujours entièrement visible, et donc se redimensionner en fonction de la largeur du viewport, il faut prendre en compte le fait que la hauteur du header sera variable;
- le niveau de détail dans l'image déterminera le type de compression (JPEG, PNG) utilisable et en partie le poids final de l'image.

Difficile de conseiller une approche plutôt qu'une autre sans avoir au moins une partie de ces informations.

Bonjour, merci de vos réponses

J'admets n'avoir pas été assez précis dans ce que je veux obtenir, je vais essayer de clarifier ma demande .

Pour répondre tout d'abord à bzh et en partie à Florent, mon but n'est pas de proposer un site pour une résolution de 2'000 px de large voir plus, c'est simplement que j'essaye de suivre le conseil que Ethan donne dans son livre qui est de créer une image d'une largeur absurdement trop large afin qu'elle puisse être affichée ( avec le max-width ) dans les écrans les plus larges.

Quand je dis les plus larges, je pense évidemment mettre une limite, je suppose avec les média-queries, mais je ne sais pas encore vraiment comment faire.

Genre pour le body, max-width 100% mais pas plus large que....

Pour répondre à Florent =>

a écrit :
Ton header va donc pouvoir s'étendre jusqu'à 2000px de large. Est-ce que ton contenu pourra aussi s'étendre sur la même largeur? Un texte sur 2000px de large c'est juste illisible (et déjà sur 1000px de large ça fait des lignes de texte clairement trop longues).

Oui, tu as raison, mais le texte ne va clairement pas prendre toute la largeur de la page, il y aura des sections bien distinctes ( plusieurs colonnes ) .

a écrit :
Si c'est un header décoratif sur toute la largeur du viewport, mais avec un contenu fixe (ou fluide avec un max-width raisonnable), tout dépend de plusieurs facteurs:

Comme mon but étant déjà de me renseigner au maximum et que je n'ai pas encore d'idées ou de design proprement dit pour mon futur site internet, je vais partir dans l'idée que je voudrais rendre fluide le site internet que j'ai mis en lien dans mon premier message.

a écrit :
- le design de ce header;

Typiquement celui-là

http://orangedrink.ch/header.jpg

a écrit :
- est-ce qu'il doit être toujours entièrement visible, ou bien certains bords seront masqués si le viewport n'est pas très large;

Je pense que tu fais mention de la propriété overflow : hidden, mais dans mon cas, un rognage de ce header pâtirait au design en lui-même.

a écrit :
- s'il doit être toujours entièrement visible, et donc se redimensionner en fonction de la largeur du viewport, il faut prendre en compte le fait que la hauteur du header sera variable;

Tu soulèves un point auquel je n'avais pas pensé, tu as donc bien fais de le souligner.

a écrit :
- le niveau de détail dans l'image déterminera le type de compression (JPEG, PNG) utilisable et en partie le poids final de l'image.

Effectivement, je ne le saurais que lorsque je le ferais concrètement.

Je me demande même s'il ne serait pas préférable de privilégier les résolutions inférieurs, genre ipad, iphone et autres smartphones, plutôt que les résolutions très hautes.

On lit que pour un design fixe, la valeur de 960-980px est adéquate ( tout en gardant à l'esprit l'utilisation des media queries pour les résolutions inférieures ), qu'en est-il de la résolution max raisonnable que pourrais prendre un site fluide ?
Modifié par marc.suisse (13 Jan 2012 - 16:33)

marc.suisse a écrit :
Je pense que tu fais mention de la propriété overflow : hidden, mais dans mon cas, un rognage de ce header pâtirait au design en lui-même.

Alors:
- Non, je fais référence au fait qu'une image de 2000px en background d'un élément dont la largeur sera inférieure (1200px, 980px, 600px, que sais-je) ne sera pas affichée en entier. Pas besoin de overflow:hidden pour ça.
- Peut-être que ton design devrait prendre en compte le fonctionnement du média. En particulier, il va falloir décider s'il est pertinent de redimensionner l'image en fonction de la largeur, ou s'il vaut mieux avoir une partie du header de taille fixe (en pixels) et toujours visible, raccordée à une couleur de fond ou à un motif de fond.

Aussi se demander si la notion même de «header» conçu comme une image n'est pas inadéquate et quelque peu has been.

marc.suisse a écrit :
On lit que pour un design fixe, la valeur de 960-980px est adéquate (tout en gardant à l'esprit l'utilisation des media queries pour les résolutions inférieures), qu'en est-il de la résolution max raisonnable que pourrais prendre un site fluide ?

Tout dépend de ton design, de tes contenus. Tu peux bien remplir 2000px de large avec du contenu si tu le souhaites et que ton contenu est adapté. Mais bon, mettons que au delà de 1100 ou 1200px ça devient très large et on a rarement l'usage d'autant d'espace.

Encore une chose que j'ignorai, je pensais que l'image en question avec la propriété max-width 100% se réduisait "à volonté" ..

a écrit :
Peut-être que ton design devrait prendre en compte le fonctionnement du média

Là je n'ai pas bien compris, pourrais-tu stp me l'expliquer ?

a écrit :
En particulier, il va falloir décider s'il est pertinent de redimensionner l'image en fonction de la largeur, ou s'il vaut mieux avoir une partie du header de taille fixe (en pixels) et toujours visible, raccordée à une couleur de fond ou à un motif de fond.

Donc avec le header toujours collé à gauche de l'écran et la suite ( vers la droite ) avec une couleur ou un motif ?

Typiquement dans le cas de mon image avec une couleur orange qui continuerai à droite dans le cas d'un navigateur avec un résolution plus grande que 980px ?

a écrit :
Aussi se demander si la notion même de «header» conçu comme une image n'est pas inadéquate et quelque peu has been. lol

Tu veux dire que ce n'est plus tout à fais à la mode ?

En tout franchise, que penses-tu de mon image ?

Car ce site va également recevoir des modifications, mais comme je comptais garder le header tel quel et que finalement il voudrait mieux ne pas retenir cette solution, autant le savoir tout de suite

a écrit :
Tout dépend de ton design, de tes contenus. Tu peux bien remplir 2000px de large avec du contenu si tu le souhaites et que ton contenu est adapté. Mais bon, mettons que au delà de 1100 ou 1200px ça devient très large et on a rarement l'usage d'autant d'espace.

Ok pour une largeur 1200px max.

Mais une autre question me vient, si j'affiche mon site sur un écran TV ( HD ) donc 1920px de large, 1200px restera raisonnable et donc pas trop petit ?