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.
Appel de fonction
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.
Et enfin la fonction…
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…