Responsive design et flux
Objectif
Afficher un bloc (image, texte, etc…) à différents endroits au sein d'une page selon le viewport sans dupliquer n fois le contenu.
Démonstration
Il arrive souvent que la conception graphique (ou DA) ne prenne pas en compte le flux « logique » du code et déplace des blocs au sein d'une page web, selon que l'on soit sur un terminal mobile, tablette ou desktop.
Les principaux inconvénients sont :
- duplication de code pour afficher/masquer un ou des blocs selon le viewport
- duplication d'identifiants (souvent) sur une même page
- perte de la navigation « logique » au clavier (problème d'accessibilité)
- impact sur le référencement naturel (ou SEO)
- il doit y en avoir d'autres…
Pour forcer le trait, le choix a été fait d'intercaler graphiquement l'image de ce bloc à divers endroits et d'associer une balise picture et différentes sources chargées différemment selon les viewports.
Pour appliquer : réduire et agrandir la fenêtre de votre navigateur. L'image principale va se promener un peut partout dans la page. Attention, ça va bouger…
Mise en oeuvre sur une page « photo » également ici.
™
La partie code
Le bloc que nous allons déplacer sans jamais le dupliquer.
<figure id="foo">
<!-- récupération du bloc par son identifiant #foo. Appel possible par tout type de sélecteur -->
<picture>
<source media="(max-width: 480px)" srcset="//pictures.kortic.com/480/200/a7d1dc" />
<source media="(max-width: 767px)" srcset="//pictures.kortic.com/350/350/dd985b" />
<source media="(max-width: 1199px)" srcset="//pictures.kortic.com/1000/290/ff8000" />
<source media="(max-width: 1439px)" srcset="//pictures.kortic.com/300/600/0088cc" />
<img decoding="async" src="//pictures.kortic.com/1100/315/8c2b79" alt="" class="margin-auto" />
</picture>
<figcaption class="line-height-1 font-size-13">note : le choix de ne pas utiliser d'attribut <samp>srcset</samp> avec les options de densité est volontaire</figcaption>
</figure>
Appel de fonction
<script>
(function(){
$(document).ready(function(){
$('#foo').RWDlayout();
});
})()
</script>
Balisage des blocs qui reçoivent le contenu « déplacé » dans le flux. La gestion visible/invisible est gérée par une classique feuille de styles (flex ou autre).
Les blocs porteurs doivent avoir un attribut égal (par défaut data-rwd). De cette manière, il est possible de gérer plusieurs contenus au sein de la même page.
Au moins 1 de ces éléments doit contenir le markup à déplacer.
<div class="xs-hide s-hide m-hide xl-hide margin-top-30 margin-bottom-30" data-rwd="picture"></div>
Et enfin la fonction…
;(function($){
$.fn.RWDlayout = function(opts){
var settings = $.extend({
'attribute': 'data-rwd'
}, opts);
$(this).each(function() {
var this_ = $(this),
attribute_ = settings.attribute,
set_ = $( '[' + attribute_ + '="' + this_.parent().attr( attribute_ ) + '"]' ),
cloned = this_.clone();
var init = function() {
set_.each(function() {
var this__ = $(this);
if(this__.is(':visible')) {
if(this__.html().length == 0) {
this__.append(cloned.clone());
// update materials labels
$.material_labels();
}
try {
// only on kortic.com
this__.find('[data-tooltip]').tooltip();
this__.find(".lazy").lazy({
effect : "fadeIn",
effectTime: 500,
afterLoad: function(element) {
$(element).toggleClass('lazy');
}
});
} catch(e){
console.warn(e);
}
} else {
this__.empty();
}
});
};
init();
$(window).on('resize', function(){
init();
});
return this;
});
};
}(jQuery));