Bonjour,
je suis en train d'expérimenter une méthode de développement RWD et je voudrais avoir vos avis.
Mon constat est le suivant : bien souvent, en pur RWD si l'on prend une structure en HTML classique et que l'on lui applique un style différent en fonction des points de rupture des media queries, on obtient pas toujours un résultat idéal à certaines tailles.
Je suis en train de tester un système pour charger le contenu 'visible par le visiteur' de la page avec jQuery selon la largeur du viewport, en rapport avec les media queries de la feuille css.
Mon choix se porte sur 3 contextes : mobile – tablette – desktop, avec des points de rupture à 600px et 1000px.
Chaque page charge un contenu différent en fonction du contexte, bien que ces contenus soient très proches. Cela me permet par exemple de charger des images moins lourdes et moins nombreuses sur la version mobile et de disposer mes menus différemment.
Par exemple pour la page d'accueil, j'ai 3 fichiers :
index_content_small.php
index_content_medium.php
index_content_large.php
qui sont chargés, selon le contexte, dans index.php par une commande load() du style
Sachant que je récupère auparavant le nom de la page 'mère' dans la variable js laPage avec le code suivant,
dans chaque page (index.php dans cet exemple). J'appelle 'page mère' la page html intégrale dans laquelle viendra se charger le fragment de code présent dans l'une des 3 pages définies plus haut.
<div id="outter-wrap"></div> contient donc tout le contenu de la page visible à l'internaute.
Bien sur, dans chaque page mère, j'ai déjà un contenu qui sera affiché si javascript n'est pas activé (ce qui devient de plus en plus rare admettons le) et que je remplace avec mon code js. viewportState est une variable js que je créé en mesurant le viewport avac javascript.
Je sais que certains d'entre vous vont me dire que ce principe oblige à faire les mises à jour de contenu dans 3 fichiers différents à chaque fois, mais c'est un choix assumé : le site est simple et son contenu ne sera pas mis à jour très souvent, mais l'aspect design est très important et je veux des mises en pages ultra précises dans chaque contexte.
Je n'ai jamais entendu parler de cette méthode en me documentant sur le sujet mais je ne dois sûrement pas être le premier à y penser.
Est ce que ça peut poser un problème avec Google, sachant que 3 versions différentes (même si les contenus sont ultra proches) de chaque page peuvent transiter sur le net ?
Ce post est aussi en relation avec celui ci, il le développe...
merci
Modifié par lionel_css3 (24 Nov 2013 - 18:56)
je suis en train d'expérimenter une méthode de développement RWD et je voudrais avoir vos avis.
Mon constat est le suivant : bien souvent, en pur RWD si l'on prend une structure en HTML classique et que l'on lui applique un style différent en fonction des points de rupture des media queries, on obtient pas toujours un résultat idéal à certaines tailles.
Je suis en train de tester un système pour charger le contenu 'visible par le visiteur' de la page avec jQuery selon la largeur du viewport, en rapport avec les media queries de la feuille css.
Mon choix se porte sur 3 contextes : mobile – tablette – desktop, avec des points de rupture à 600px et 1000px.
Chaque page charge un contenu différent en fonction du contexte, bien que ces contenus soient très proches. Cela me permet par exemple de charger des images moins lourdes et moins nombreuses sur la version mobile et de disposer mes menus différemment.
Par exemple pour la page d'accueil, j'ai 3 fichiers :
index_content_small.php
index_content_medium.php
index_content_large.php
qui sont chargés, selon le contexte, dans index.php par une commande load() du style
function loadHero() {
$('#outter-wrap').html('');
if (viewportState == 'mobile') {
$('#outter-wrap').load('content/' + laPage + '-content-small.php');
}
if (viewportState == 'tablet') {
$('#outter-wrap').load('content/' + laPage + '-content-medium.php');
}
if (viewportState == 'desktop') {
$('#outter-wrap').load('content/' + laPage + '-content-large.php');
}
}
Sachant que je récupère auparavant le nom de la page 'mère' dans la variable js laPage avec le code suivant,
<?php $la_page = 'index'; ?>
<script>var laPage = ''<?php echo $la_page ; ,>
dans chaque page (index.php dans cet exemple). J'appelle 'page mère' la page html intégrale dans laquelle viendra se charger le fragment de code présent dans l'une des 3 pages définies plus haut.
<div id="outter-wrap"></div> contient donc tout le contenu de la page visible à l'internaute.
Bien sur, dans chaque page mère, j'ai déjà un contenu qui sera affiché si javascript n'est pas activé (ce qui devient de plus en plus rare admettons le) et que je remplace avec mon code js. viewportState est une variable js que je créé en mesurant le viewport avac javascript.
Je sais que certains d'entre vous vont me dire que ce principe oblige à faire les mises à jour de contenu dans 3 fichiers différents à chaque fois, mais c'est un choix assumé : le site est simple et son contenu ne sera pas mis à jour très souvent, mais l'aspect design est très important et je veux des mises en pages ultra précises dans chaque contexte.
Je n'ai jamais entendu parler de cette méthode en me documentant sur le sujet mais je ne dois sûrement pas être le premier à y penser.
Est ce que ça peut poser un problème avec Google, sachant que 3 versions différentes (même si les contenus sont ultra proches) de chaque page peuvent transiter sur le net ?
Ce post est aussi en relation avec celui ci, il le développe...
merci
Modifié par lionel_css3 (24 Nov 2013 - 18:56)
.
) le menu <nav> est contenu dans le header.