Changer le layout via media queries?

Bonjour,

quel serait le meilleur moyen, s'il en existe un, pour changer le layout d'un site? Si possible, sans recourir à JS, Relocate ou autres.
J'avais pensé à utiliser display:none mais je ne suis pas certain que ce soit la solution idéale.

Afin d'anticiper d'éventuelles questions, je précise que je souhaite régler un problème pas forcément super compliqué: mon site, en version écran large orientation paysage, possède un menu horizontal tout en haut du layout. Le header, où figure un logo+un titre+un slogan, se trouve sous le menu.

Je voudrais que, dans la version mobile orientation portrait, le header (de taille réduite) se trouve tout en haut du layout, suivi par mon menu - qui devient vertical.

En bref, il faut que j'inverse la position du menu et du header. Pour l'instant, la seule solution qui me soit venue à l'esprit, est d'avoir 2 header ou 2 menus, et compter sur display:none pour faire disparaitre ce qui ne doit pas s'afficher.

Merci d'avance pour vos conseils.
Markuz
Modifié par Crest (04 Nov 2012 - 13:31)

Salut,

tu a plusieurs options envisageables :

* position absolute/relative : un peu crade aux yeux de certains mais terriblement efficace avec un minimum de maîtrise.

* le template layout évoqué dans le bouquin de Raphaël : encore trop novateur à mon goût.

A ta dispo,

Ju

Et quels seraient les pour et contre du l'utilisation du display:none ?

Ayant principalement les graphiques (videos et photos) je ne suis pas franchement dérangé en cas d'interférance avec les terminaux pour non-voyants.
N'y voit aucun manque de respect de ma part. Je suis simplement assez réaliste quant à mon audience potentielle.

Markuz

Salut,

Les pours : là comme ça j'ai un peu de mal à en trouver si ce n'est la simplicité et la rapidité de mise en place.

Les contres :

* je ne suis pas expert SEO mais je ne pense pas que ces-derniers te recommande trop de dsiplay:none
* le tout va alourdir le temps de chargement, même si tu les cache en css, tes éléments sont chargés
* les mises à jours vont devoir s'effectuer au moins 2 fois, c'est dommage.

En conclusion, l'approche responsive me semble plus saine, quitte à être border-line avec les absolute : on conserve exactement le même contenu mais seul l'affichage diffère.

Ju