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: 1299px)"     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( 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($){

        'use strict';

        $.fn.RWDlayout = function(opts) {

            let 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 = function() {

                    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…
    2020-01-25