Responsive design et flux
Objectif
Afficher un bloc (image, texte, etc…) à différents endroits au sein d'une page sans dupliquer le contenu n fois.
Démonstration
srcset avec les options de densité est volontaire
Ce bloc est constitué d'une image et de paragraphes, liste, …
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. 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: 1023px)" srcset="//pictures.kortic.com/580/290/8269aa" />
<source media="(max-width: 1199px)" srcset="//pictures.kortic.com/950/300/5088aa" />
<img decoding="async" src="//pictures.kortic.com/975/315/8c2b79" alt="" class="margin-auto" />
</picture>
<figcaption class="line-height-1 font-size-13">note : le choix de ne pas utiliser d'attribut <code>srcset</code> 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());
}
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__.html(null);
}
});
};
init();
$(window).on('resize', function(){
init();
});
return this;
});
};
}(jQuery));