Images, vidéos, boutons : les nouveaux blocs médias en action
Cet article de démonstration met en scène les trois nouveaux blocs de denis8.com : l'image adaptée aux mobiles, la vidéo YouTube intégrée et le bouton d'action. Chaque bloc est présenté, puis utilisé juste en dessous — ce que vous lisez est aussi ce que vous voyez.
Jusqu'ici, les articles de ce site vivaient de texte, d'encadrés, de citations et de tableaux. Il manquait l'essentiel d'un site moderne : les médias. C'est chose faite avec trois blocs pensés pour rester simples à écrire — une balise, une ligne de contenu — et irréprochables à l'affichage, y compris sur téléphone.
1. Le bloc image, pensé pour le mobile
Une image se déclare avec la balise IMAGE (encadrée de doubles dièses), suivie d'une seule ligne : l'adresse de l'image hébergée, une barre verticale, le texte alternatif, une barre verticale, puis une légende facultative. Démonstration immédiate avec la bannière du site :
Trois choses se passent sans que vous ayez rien demandé. L'image ne dépasse jamais la largeur de l'écran : sur un téléphone, elle se réduit d'elle-même, sans déborder ni casser la mise en page. Elle se charge en différé : tant que le lecteur n'a pas fait défiler la page jusqu'à elle, elle ne consomme ni données ni temps de chargement. Enfin, le texte alternatif — obligatoire — décrit l'image aux lecteurs d'écran et aux moteurs de recherche.
La règle d'or du texte alternatif
Décrivez ce que montre l'image comme si vous la racontiez au téléphone : « Bannière DENIS8.COM sur fond étoilé » vaut mieux que « bannière » ou, pire, que rien du tout. C'est un geste d'accessibilité et un atout de référencement.
2. La vidéo YouTube intégrée
La balise VIDEO attend une adresse YouTube — au format watch, youtu.be ou shorts — et un titre facultatif. Le site en extrait l'identifiant et affiche un lecteur au format 16:9 qui s'adapte à toutes les largeurs d'écran, servi par le domaine youtube-nocookie, plus sobre en matière de traceurs :
Vidéo d'exemple — remplacez-la par l'une des vôtres
Et si l'adresse fournie n'est pas une vidéo YouTube reconnue ? Le bloc ne casse rien : il se replie en un encart-lien élégant, comme ici avec l'adresse de la chaîne :
3. Le bouton d'action
Dernier venu, le bloc BOUTON transforme un lien en véritable appel à l'action : texte du bouton, barre verticale, adresse cible. Idéal en fin d'article pour guider le lecteur vers la chaîne, un téléchargement ou une rubrique :
Récapitulatif
Un média bien intégré ne se remarque pas : il se lit, il se regarde, il se touche — sur grand écran comme au creux de la main.
Dans les PDF générés pour chaque article, l'image est incluse en pleine largeur de page et la vidéo devient un encart cliquable : rien ne se perd d'un support à l'autre. Vous pouvez supprimer cet article de démonstration une fois vos essais terminés — ou le garder comme antisèche.
Denis Favre — La Réussite à Domicile - DENIS8.COM