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 class="lazy-io">
            <source media="(max-width: 480px)"         srcset="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs=" data-srcset="https://pictures.kortic.com/480/200/00b0b0.png" />
            <source media="(max-width: 767px)"     srcset="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs=" data-srcset="https://pictures.kortic.com/350/350/00b0b0.png" />
            <source media="(max-width: 1023px)"     srcset="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs=" data-srcset="https://pictures.kortic.com/1000/200/00b0b0.png" />
            <source media="(max-width: 1299px)"     srcset="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs=" data-srcset="https://pictures.kortic.com/250/500/00b0b0.png" />
            <img decoding="async" src="data:image/gif;base64,R0lGODlhIAAgAPAAAAAAACZFySH5BAEAAAEALAAAAAAgACAAAAIejI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC5sFADs=" data-srcset="https://pictures.kortic.com/890/255/00b0b0.png" alt="" class="margin-auto" />
        </picture>
        <noscript>
            <img decoding="async" src="https://pictures.kortic.com/890/255/00b0b0.png" alt="" class="margin-auto" />
        </noscript>
        <figcaption class="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 = async 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…
    • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
    • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
    • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass, SVG encoder, base64 SVG pour CSS. SVG to base64, Convert SVG to Data URI for css
    • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG, optimisation SVG web performance
    • SVG Responsive Utilisation des media queries internes au SVG
    • Lazy Load Intersection Observer Lazy Load avec IntersectionObserver API pour images, picture, iframe, etc. Chargement lazy load de contenu, chargement différé de contenu de page web, lazy loading script
    • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
    • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
    • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran. Infobulle accessible, accessible tooltip
    • Zipcode patterns Contrôle automatisé de codes postaux internationaux, script zipcode, zipcode validator
    • Widget calendrier PHP Construction d'un widget « calendrier » en PHP et asynchrone
    • Responsive background-image jQuery responsive background-image plugin, plugin jQuery responsive background images
    • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). Drapeaux SVG pour internationalisation de sites multilingues.
    • Layout rigolo Une autre approche pour définir un layout de page responsive.
    • Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end
    • Générateur de noms API de génération de couples prénom/nom aléatoires.
    • Générateur images TTF API de génération de textes en images.
    2020-09-27
    Kortic sur les réseaux
    Anthony Ladeuil sur Instagram
    Anthony Ladeuil sur Messenger
    Anthony Ladeuil sur Messenger
    Anthony Ladeuil sur Facebook
    Anthony Ladeuil sur Facebook
    Anthony Ladeuil sur Linkedin