Vous êtes dans la zone de contenu principal de la page

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>
  (() => {
    $(document).ready( () => {
      $('#foo').RWDlayout({
        enableResize: true
      });
    });
  })()
</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-responsive). 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 data-responsive="picture" class="xs-hide s-hide m-hide xl-hide margin-top-30 margin-bottom-30"></div>

Et enfin la fonction…

/****
 * Copyright (c) 2006 2020. Kortic - Anthony Ladeuil. Source kortic.com
 * licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions
 * https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
 ****/
 
 ((__) => {
  'use strict';
  __.fn.RWDlayout = function(opts) {
    let settings = __.extend({
        'attribute': 'data-responsive',
        'enableResize': false
      }, opts);
    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);
          if(this__.is(':visible')) {
            if(!this__.html().length) {
              this__.append(cloned.clone());
            }
            /*
            callback kortic.com
             */
            try {
              this__.find('[data-calculate="true"]').doOnce( function() {
                this.deduct({
                  wording: __.means('chars'),
                  colors: ['var(--applegreen)', 'var(--orange)', 'var(--red)']
                });
              });
              this__.find('[data-tooltip]').tooltip();
              __.lazyIO(this__);
              // update materials labels
              __.material_labels();
              __.targeting(this__);
            } catch(e){
              console.warn(e);
            }
            /*
            end callback
             */
          } else {
            this__.empty();
          }
        });
      };
      init();
      settings.enableResize && DOM.window.on('resize', init);
      return this;
    });
  };
})(jQuery);

Utilisation des sources

Les sources de « Design, flux et accessibilité » proposées par Kortic sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0 (licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions).

Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

Un petit sou avec ™