Kortic, Anthony Ladeuil

Design, flux et accessibilité

Objectif

Afficher un bloc (image, texte, etc…) à différents endroits au sein d'une page selon le viewport sans dupliquer n fois le contenu et conserver le flux « logique » de navigation.

Démo

Bloc image responsive en promenade dans la page
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. 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 à déplacer dans le flux 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/8c2b79" />
        <source media="(max-width: 767px)"     srcset="//pictures.kortic.com/350/350/8c2b79" />
        <source media="(max-width: 1023px)"     srcset="//pictures.kortic.com/1000/200/8c2b79" />
        <source media="(max-width: 1199px)"     srcset="//pictures.kortic.com/250/500/8c2b79" />
        <img decoding="async" src="//pictures.kortic.com/890/255/8c2b79" alt="" class="margin-auto" />
    </picture>
    <figcaption class="line-height-1-2 text-align-left padding-top-10 font-weight-600">Bloc image responsive en promenade dans la page</figcaption>
</figure>
Appel de fonction
<script>
    (function(){

        $(document).ready( () => {
            $('#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($){

    'use strict';

    $.fn.RWDlayout = function(opts) {

        var settings = $.extend({
            'attribute': 'data-rwd'
        }, opts),
        window_ = $(window);

        $(this).each(function() {

            let this_ = $(this),
                attribute_ = settings.attribute,
                set_ = $( '[' + attribute_ + '="' + this_.parent().attr( attribute_ ) + '"]' ),
                cloned = this_.clone();

            let init = () => {

                set_.each(function() {

                    let this__ = $(this);

                    (this__.is(':visible'))
                        ? (this__.html().length === 0 && this__.append(cloned.clone()))
                        : this__.empty();

                });
            };

            init();

            window_.on('resize', init);

            return this;
        });

    };

}(jQuery));
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Voir aussi…
2019-10-21