Marquee HTML : attirer l’attention sur vos offres promotionnelles

La balise <marquee> : Icône du web des années 90, vestige d’une époque révolue, ou toujours un atout caché (quoique très improbable) pour vos promotions ? Vous souvenez-vous de ces sites web d’antan, bardés de GIF animés clignotants et de textes défilants dignes d’un téléscripteur ? Préparez-vous à un bref voyage nostalgique, mais restez sur vos gardes : certaines technologies gagnent à être oubliées ! Cet article explorera la balise <marquee> , un élément HTML qui, bien que techniquement fonctionnel, traîne une réputation sulfureuse dans le monde du développement web moderne. Nous examinerons son fonctionnement, ses attributs, ses écueils potentiels et, surtout, les alternatives plus élégantes, performantes et respectueuses de l’expérience utilisateur et de l’accessibilité.

Notre objectif est simple : vous informer sur l’histoire et les limites de la balise <marquee> , tout en vous présentant des solutions contemporaines et optimales pour mettre en avant vos offres promotionnelles. L’utilisation de <marquee> est à proscrire dans la grande majorité des cas, et il est crucial d’en comprendre les raisons. Cet article se veut un guide pour appréhender son héritage, ses faiblesses et les méthodes pour la remplacer avec brio. Ensemble, nous allons décortiquer cette relique du web et la comparer aux approches actuelles qui garantissent une expérience utilisateur à la fois agréable et inclusive, répondant ainsi aux exigences modernes en matière d’accessibilité web et d’optimisation SEO.

Le `marquee` : anatomie et fonctionnement

La balise <marquee> est un élément HTML permettant de créer un défilement de texte horizontal ou vertical. Introduite par Microsoft avec Internet Explorer, elle connut son heure de gloire dans les balbutiements du web. Toutefois, elle n’a jamais été reconnue comme un standard officiel par le World Wide Web Consortium (W3C) et est aujourd’hui considérée comme obsolète et fortement déconseillée. Bien que non standardisée, la balise <marquee> demeure supportée par bon nombre de navigateurs, incitant parfois à son emploi. Il est cependant capital de réaliser que son utilisation peut gravement nuire à l’accessibilité et à l’expérience utilisateur, et que des solutions alternatives, bien plus performantes et respectueuses des standards du web, existent.

Structure de base de la balise `marquee`

La structure de base de la balise <marquee> est d’une simplicité enfantine : elle enrobe le texte que vous souhaitez voir défiler entre ses balises ouvrante et fermante. Voici un exemple de code HTML :

<marquee> Offre Spéciale ! </marquee>

Ce code affichera le texte « Offre Spéciale ! » avec un défilement horizontal de droite à gauche (paramètre par défaut). La balise <marquee> est un élément dit « en ligne » (inline), c’est-à-dire qu’elle ne provoque pas de saut de ligne avant ou après son affichage. Divers attributs permettent de moduler le comportement du défilement. Découvrons-les plus en détail.

Attributs clés et leurs effets

La balise <marquee> propose un éventail d’attributs pour personnaliser le défilement. Ces attributs agissent sur la direction, la vitesse, le type de défilement et d’autres paramètres visuels. S’ils peuvent sembler pratiques, il est crucial de se rappeler que leur utilisation excessive peut dégrader l’expérience utilisateur et l’accessibilité. Voici un aperçu des attributs les plus courants :

behavior : Définit le type de défilement. Valeurs possibles :
- scroll (défaut): Le texte défile en continu de bout en bout.
- slide : Le texte défile jusqu’à une extrémité puis s’immobilise.
- alternate : Le texte oscille d’une extrémité à l’autre, tel un aller-retour.
direction : Définit la direction du défilement. Valeurs possibles :
- left (défaut): Défile de droite à gauche.
- right : Défile de gauche à droite.
- up : Défile de bas en haut.
- down : Défile de haut en bas.
scrollamount : Détermine la vitesse de défilement (en pixels). Plus la valeur est élevée, plus le défilement est rapide.
scrolldelay : Fixe le délai (en millisecondes) entre chaque déplacement du texte. Une valeur basse accélère le défilement.
loop : Indique le nombre de répétitions du défilement. loop="infinite" pour un défilement sans fin.
width et height : Définissent les dimensions (en pixels ou en pourcentage) de la zone de défilement.
bgcolor : Choisit la couleur de fond de la zone de défilement.
hspace : Ajoute un espace horizontal autour du texte.
vspace : Ajoute un espace vertical autour du texte.

Voici un tableau récapitulatif des attributs les plus importants et de leur incidence sur le comportement de la balise <marquee> :

Attribut	Description	Valeurs possibles	Impact
`behavior`	Type de défilement	`scroll` , `slide` , `alternate`	Détermine le style du défilement.
`direction`	Direction du défilement	`left` , `right` , `up` , `down`	Modifie la direction du mouvement.
`scrollamount`	Vitesse du défilement	Nombre entier	Contrôle la vélocité du texte.
`scrolldelay`	Délai entre les mouvements	Nombre entier (millisecondes)	Ajuste la fluidité du défilement.
`hspace`	Espace horizontal	Nombre entier (pixels)	Ajoute de l’espace horizontal autour du texte
`vspace`	Espace vertical	Nombre entier (pixels)	Ajoute de l’espace vertical autour du texte

Exemples d’implémentations variées

Illustrons l’utilisation des divers attributs de la balise <marquee> avec ces quelques exemples de code :

Marquee défilant de gauche à droite (par défaut) <marquee>Marquee défilant de gauche à droite (par défaut)</marquee> Marquee rebondissant (alternate) <marquee behavior="alternate">Marquee rebondissant (alternate)</marquee> Marquee défilant verticalement <marquee direction="up" height="100">Marquee défilant verticalement</marquee> Marquee avec couleur de fond et vitesse ajustée <marquee bgcolor="#FFFF00" scrollamount="20" width="50%">Marquee avec couleur de fond et vitesse ajustée</marquee> Marquee avec espace horizontal et vertical <marquee hspace="20" vspace="10">Marquee avec espace horizontal et vertical</marquee>

Astuce : simuler un téléscripteur boursier

Une application originale (mais toujours déconseillée sur les sites modernes) de la balise <marquee> pourrait consister à simuler un téléscripteur boursier. Bien sûr, un véritable téléscripteur s’appuierait sur des données en temps réel via une API et JavaScript, mais pour une simple illustration ou un effet rétro, la balise <marquee> peut suffire. N’oubliez pas que cette approche doit rester purement démonstrative et ne pas servir à diffuser des informations financières réelles.

Les pièges à éviter et les conséquences négatives

Si la balise <marquee> peut paraître une solution simple et rapide pour capter l’attention, elle recèle de nombreux inconvénients et pièges. Avant de l’intégrer à votre site web, il est impératif de prendre conscience de ces limites et d’envisager des alternatives plus modernes et respectueuses des standards. Ignorer ces problèmes peut compromettre l’accessibilité, l’expérience utilisateur et l’image de marque de votre site.

Problèmes d’accessibilité

L’accessibilité web est un aspect crucial de la conception de sites web. Malheureusement, la balise <marquee> est source de nombreux problèmes d’accessibilité. Le mouvement continu du texte peut se révéler extrêmement perturbant pour les personnes souffrant de troubles de l’attention, tels que le TDAH. De plus, les personnes malvoyantes peuvent éprouver des difficultés à suivre le texte en mouvement, rendant le contenu illisible. En France, plus de 1,7 million de personnes sont atteintes de déficience visuelle, selon l’INSEE (2021), ce qui souligne l’importance cruciale de l’accessibilité web.

Difficultés pour les personnes souffrant de troubles de l’attention ou de déficiences visuelles.
Interférence avec les lecteurs d’écran, qui peinent à interpréter le texte en mouvement et ne permettent pas toujours de contrôler la vitesse ou l’arrêt du défilement.

Pour minimiser l’impact négatif sur l’accessibilité, il est possible de réduire la vitesse du défilement, d’utiliser un texte clair et concis, et d’éviter d’employer la balise <marquee> pour des informations vitales. Toutefois, la meilleure solution consiste à opter pour des alternatives plus accessibles, à l’instar des animations CSS pilotables par l’utilisateur, avec des boutons pause/lecture.

Expérience utilisateur (UX)

L’expérience utilisateur (UX) est un facteur déterminant dans le succès d’un site web. Une UX déficiente peut entraîner une baisse du taux de conversion, une augmentation du taux de rebond et une détérioration de l’image de marque. La balise <marquee> peut impacter négativement l’UX en raison de son caractère distrayant et irritant. Les utilisateurs peuvent être exaspérés par le mouvement incessant du texte, qui les empêche de se concentrer sur le reste du contenu.

Distraction et irritation des visiteurs.
Répercussions négatives sur l’image de marque en cas d’utilisation excessive.
Surcharge visuelle du site, nuisant à la clarté et à la hiérarchisation de l’information.

Les animations intrusives peuvent engendrer une perception négative de la crédibilité d’un site web. Il est donc impératif d’user d’animations avec discernement et de proscrire les effets visuels superflus qui risquent de nuire à l’expérience utilisateur. Privilégiez des animations subtiles et informatives, qui facilitent la compréhension du contenu sans distraire l’utilisateur. Un design épuré et une navigation intuitive sont essentiels pour retenir l’attention des visiteurs.

Compatibilité navigateur et problèmes d’affichage

Bien que la balise <marquee> soit prise en charge par la majorité des navigateurs récents, des disparités subsistent dans son interprétation et son rendu. Sur des navigateurs anciens ou des appareils mobiles, le défilement peut s’avérer saccadé, lent, voire inexistant. De plus, la balise <marquee> peut entrer en conflit avec d’autres éléments de la page, générant des problèmes de mise en page et d’affichage. Il est donc crucial de tester son rendu sur différents navigateurs et appareils pour éviter les mauvaises surprises.

Mauvais usage de la balise

La balise <marquee> doit être utilisée avec parcimonie et proscrite pour véhiculer des messages importants. Le mouvement permanent du texte peut rendre l’information difficile à déchiffrer et à assimiler. Préférez des éléments statiques, plus visibles, pour communiquer des informations essentielles. En outre, évitez d’utiliser la balise <marquee> de manière continue sur l’ensemble de la page, sous peine de créer une surcharge visuelle et de nuire à l’expérience utilisateur. Les premières secondes sont cruciales pour capter l’attention d’un visiteur : un site surchargé en animations inutiles risque de le faire fuir.

Alternatives modernes et efficaces au `marquee`

Fort heureusement, de nombreuses alternatives modernes et performantes à la balise <marquee> existent pour créer des animations et des effets de défilement dignes de ce nom sur votre site web. Ces alternatives offrent une performance accrue, un contrôle plus précis, une accessibilité améliorée et une expérience utilisateur plus agréable. Explorons les principales, en nous concentrant sur les animations CSS et JavaScript, ainsi que les bibliothèques spécialisées dans les « tickers » et flux d’informations.

CSS animations et transitions

Les animations CSS et les transitions CSS sont des outils puissants pour concevoir des effets visuels sans recourir à JavaScript. Elles offrent une excellente performance, sont relativement simples à mettre en œuvre et sont compatibles avec la plupart des navigateurs modernes. De plus, les animations CSS peuvent être rendues contrôlables par l’utilisateur, améliorant ainsi l’accessibilité. L’ajout d’un bouton « pause/lecture » permet aux utilisateurs de stopper l’animation si celle-ci se révèle trop distrayante. Les animations CSS permettent aussi des effets plus subtiles, comme des fondus ou des changements de couleur progressifs, contribuant à une meilleure expérience utilisateur.

<div class="ticker"> <div class="ticker-item">Offre spéciale : -20% sur tous les produits !</div> </div>


 <style> 
 .ticker { 
 width: 100%; 
 overflow: hidden; 
 } 
 .ticker-item { 
 padding-left: 100%; /* Place l'élément hors de l'écran au départ */ 
 animation: ticker-animation 15s linear infinite; 
 }

@keyframes ticker-animation { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style>

Cet exemple illustre un effet de défilement horizontal utilisant les keyframes CSS et la propriété transform: translateX() . La durée de l’animation et le nombre d’itérations peuvent être ajustés à souhait pour moduler la vitesse et la répétition du défilement.

Javascript/jquery

JavaScript et jQuery offrent une flexibilité accrue et un contrôle plus précis sur les animations, ouvrant la voie à des effets complexes et interactifs. JavaScript permet de créer des animations sophistiquées, d’interagir avec l’utilisateur et de manipuler le DOM (Document Object Model). Il est cependant crucial d’optimiser le code JavaScript pour éviter les problèmes de performance, car une utilisation excessive peut ralentir le chargement de la page et dégrader l’expérience utilisateur. L’utilisation de requestAnimationFrame() au lieu de setInterval() pour les animations, améliore considérablement la fluidité.

Voici un exemple simple de code JavaScript pour créer un effet de défilement horizontal :

<div id="ticker-container"> <div id="ticker">Offre spéciale : -20% sur tous les produits !</div> </div>


 <script> 
 const tickerContainer = document.getElementById('ticker-container'); 
 const ticker = document.getElementById('ticker'); 
 let position = 0; 
 function moveTicker() { 
 position--; 
 ticker.style.transform = `translateX(${position}px)`; 
 if (position < -ticker.offsetWidth) { 
 position = tickerContainer.offsetWidth; 
 } 
 requestAnimationFrame(moveTicker); 
 }

moveTicker(); // Initialiser l'animation </script>

Ce code JavaScript utilise la fonction requestAnimationFrame() pour déplacer le texte horizontalement de manière fluide. La vitesse du défilement peut être ajustée en modifiant l’incrément de la variable position .

Bibliothèques CSS/JS spécialisées pour les « tickers » et les flux d’informations

Une multitude de bibliothèques CSS et JavaScript sont spécialement conçues pour faciliter la création de tickers et de flux d’informations. Ces bibliothèques proposent une large gamme de fonctionnalités, telles que la gestion des données, l’animation fluide, l’accessibilité et la personnalisation. L’utilisation d’une bibliothèque peut vous faire gagner un temps précieux et vous assurer que votre ticker est optimisé en termes de performance et d’accessibilité. Parmi les bibliothèques populaires, citons Swiper, Tiny Slider, Owl Carousel et Flickity. Ces outils offrent une grande flexibilité et permettent de créer des animations complexes sans nécessiter une expertise approfondie en JavaScript.

Focus sur l’accessibilité

Quel que soit votre choix, l’accessibilité doit être au cœur de vos préoccupations. Veillez à ce que l’animation soit contrôlable par l’utilisateur (boutons pause/lecture, contrôle de la vitesse), qu’elle ne soit pas excessivement distrayante et qu’elle soit compatible avec les lecteurs d’écran. Utilisez des balises sémantiques pour structurer le contenu et enrichissez-le avec des attributs ARIA (Accessible Rich Internet Applications) pour améliorer sa compatibilité avec les technologies d’assistance. Proposer un contraste suffisant entre le texte et le fond est également essentiel pour les personnes malvoyantes.

Comparaison directe : `marquee` vs alternatives

Ce tableau comparatif met en lumière les avantages et les inconvénients de la balise <marquee> face aux alternatives modernes :

Option	Avantages	Inconvénients	Recommandation
`<marquee>`	Mise en œuvre basique et rapide	Obsolète, problèmes d’accessibilité majeurs, mauvaise UX, compatibilité aléatoire	À proscrire absolument, sauf cas très spécifiques (projets artistiques ou nostalgiques)
CSS Animations	Performance, contrôle fin, potentiel d’accessibilité (si bien implémenté), compatibilité étendue	Complexité accrue pour les animations avancées	Solution idéale pour la plupart des animations simples à modérées
JavaScript/jQuery	Flexibilité maximale, contrôle total, animations interactives et complexes	Peut impacter la performance, optimisation nécessaire, complexité de développement	À privilégier pour les animations très personnalisées et interactives nécessitant une gestion dynamique des données
Bibliothèques CSS/JS	Facilité d’utilisation, optimisation intégrée, accessibilité facilitée, large éventail de fonctionnalités	Peut augmenter le poids du site, courbe d’apprentissage de la bibliothèque	Recommandé pour les tickers et les flux d’informations complexes nécessitant une gestion optimisée et des fonctionnalités avancées.

Adopter les meilleures pratiques pour animer vos promotions

En définitive, la balise <marquee> est une relique d’un web révolu. Bien qu’elle puisse encore fonctionner dans certains navigateurs, son utilisation est vivement déconseillée en raison de ses lacunes en matière d’accessibilité, de son impact négatif sur l’expérience utilisateur et de la présence d’alternatives bien plus performantes et respectueuses des standards. Adopter ces alternatives est un gage de professionnalisme et de respect envers vos visiteurs.

Il est donc primordial de privilégier les approches modernes, à l’instar des animations CSS et JavaScript, pour créer des effets visuels attrayants et accessibles sur votre site web. Ces alternatives offrent un contrôle plus précis, une meilleure performance et une expérience utilisateur plus agréable pour tous. N’oubliez jamais de tester l’accessibilité de vos animations sur différents supports et navigateurs afin de garantir leur utilisabilité par tous. Alors, prêt à tourner le dos à la balise <marquee> et à embrasser un web plus performant, accessible et agréable pour tous ? Vos visiteurs (et votre crédibilité) vous en remercieront!

Détourer une image en ligne pour booster vos campagnes marketing

Peut-on voir les captures d’écran sur instagram story et quelles implications pour votre marque ?