Les sliders et carrousels sont devenus populaires dans la conception de sites web depuis quelques années.
Beaucoup de développeurs débutants sont sûrs qu'ils doivent en placer sur chaque nouveau site. En conséquence, ils bourrent de sliders chaque projet.
A première vue, il peut sembler qu'il n'y a rien de mal à cela, mais les sliders peuvent vraiment gâcher votre site rapidement.
En règle générale la plupart des problèmes sont observés sur les pages d'accueil et ce n'est pas étonnant : La majorité des liens mènent aux pages d'accueil, celles ci devraient être parfaites et c'est rarement le cas.
Pourtant 75% des utilisateurs font un premier jugement de l'entreprise sur la base de la conception de la page d'accueil !
Voici plusieurs problèmes que vous pouvez observer lorsque vous utilisez des sliders :
Ralentissement des performances
Les Carrousels
et les sliders peuvent énormément influer sur la vitesse de chargement des sites Web ce qui n'est certainement pas ce dont vous avez besoin pour donner à votre entreprise
une image professionnelle et atteindre un large public. Ce dont vous avez besoin c'est que vos pages se chargent vite.
Comment cela fonctionne ?
Tous les sliders, carrousels et autres effets visuels sont construits sur jQuery, le script charge toutes les images simultanément. Vous ne verrez aucune différence quand vous utiliserez de petites images, mais si vous avez un slider plein écran, la page se charge
beaucoup plus lentement, et à cause de cela un grand pourcentage de vos visiteurs va tout simplement quitter le site.
Pour ceux qui ne savent pas ce qu'est une héro image :
http://www.dbi.io/uk/blog/5-examples-of-hero-banner-homepages-that-increase-conversion/
Mauvais référencement et taux de conversion ridicule
la vitesse de chargement lent n'est qu'un aspect du problème car il peut y avoir aussi des problèmes de référencement graves. En
fait, la vitesse lente conduit à des rebonds dans le serveur qui se traduisent par de
faibles classements des moteurs de recherche et une mauvaise conversion des visites en acte d'achat.
Par ailleurs, le contenu affiché dans les sliders est n'est pas classé du tout par les moteurs de recherche. Donc, il est fortement recommandé de ne pas placer un contenu important dans un slider.
Mauvaise performance sur les appareils mobiles
Une chose que vous devez garder à l'esprit est que les sliders ne sont pas mobiles friendly. Imaginez
combien de sliders ne fonctionneront pas sur les smartphones et les tablettes
avec les connexions 3G ! En outre, en raison de la petite taille, ils seront pas très efficaces car les utilisateurs ne pourront tout simplement pas être en mesure de voir
ce qui y est affiché.
Perte d'intérêt
De plus en plus d'images surchargées de textes, différents types
d'offres et de boutons sont inutiles, car ils détournent l'attention
les utilisateurs dès de la page principale et il est plus difficile
de prendre la bonne décision. Finalement les utilisateurs quittent simplement la page tout de suite.
O ne le répètera jamais assez : " trop d'info, tue l'info"
********************************************************************************************
Quelle est la solution ?
Il
existe de nombreuses alternatives aux sliders qui ne seront pas affectées par
les indices de vitesse de chargement et de référencement de la page. Nous allons jeter un coup d'oeil sur ces solutions et tenter de voir leurs avantages.
layouts Hero
Le slider est pas le seul outil qui peut rendre le site plus dynamique.
Hero est une solution plus efficace.
Cleverbirds.com est un excellent exemple de ce type de site. Les images de héro aident réellement à montrer le contenu qui sera évalué par les moteurs de recherche. Vous voulez savoir pourquoi cela fonctionne mieux que le slider habituel ? Voici quelques réponses.
Statique
Comme vous le savez déjà, la plupart des problèmes liés aux sliders viennent du ralentissement du temps de chargement. les images de Héro sont statiques, de sorte que le problème ne se pose pas. Il n'y à pas besoin de scripts jQuery ou de longues lignes de code CSS.
En plus de cela, une image statique est plus informative et aide les visiteurs à se concentrer sur le contenu de l'écran, peu
importe si c'est un ordinateur de bureau ou un téléphone.
Cohérence
Si
vous avez besoin d'améliorer les ventes et générer davantage de trafic,
il est important que le contenu soit lu exactement comme vous l'avez
fait et sur tous les appareils. Cette règle est essentielle pour les pages d'accueil qui visent à générer des revenus. Les sliders ne peuvent tout simplement pas être efficaces sur des écrans
mobiles quand à afficher des images qui sont trop petites pour la lecture, n'y pensons même pas.Meilleur référencement
Assez souvent les sliders utilisent plusieurs balises H1. Du
point de vue de codage HTML, il n'y a rien de mal à envelopper le
contenu à l'intérieur de cette balise, mais quand on parle SEO, c'est un peu différent. Les titres H1 sont considérés par Google comme mots-clés inappropriés et qui est opposé à ce que vous avez besoin. Donc, il est fortement recommandé d'utiliser une seule balise H1 par page. Les images de héro sont construites sur la même règle, donc optimisées pour les moteurs de recherche.Personnalisation flexible
Les images de héro sont beaucoup plus faciles à créer et offrent plus de possibililités par rapport aux sliders. Pour
ajouter une sorte de forme ou cadre, quel que soit le slider, vous
allez écrire des tonnes de code pour faire fonctionner le tout sur
différentes résolutions d'écran. Donc, en gros toutes les options sont limitées à un graphisme sur la diapositive. Avec les images de héro vous êtes libre d'ajouter tous les éléments que vous souhaitez sans problèmes du tout.
Appel à l'action
Les appels
à l'action sont également assez puissant, en fait, combinés
avec des images statiques, ils peuvent être beaucoup plus efficaces encore que
ce que vous attendez. De cette façon, la page d'accueil semble à la fois attrayante et instructive. Cette méthode fonctionne pour tout type de site, car elle permet aux utilisateurs de prendre une décision beaucoup plus rapidement, et la vitesse sur internet est essentielle.
Formulaires
Le formulaire d'inscription est une excellente alternative au slider. Il
est généralement plus efficace de le placer en haut de la page si vous voulez
enregistrer un grand pourcentage d'abonnés par courriel.
Il
est un peu plus simple pour les utilisateurs de trouver un formulaire qui
est clair que de faire défiler la page, à travers une foule de
renseignements.
Il est essentiel de faire simple et court. les formulaires longs peuvent être source de distraction pour les visiteurs et seront inutiles, car pas complétés.
Vous pouvez également inclure des formulaires aux fonctionnalités
de héro à condition d'attirer l'attention des visiteurs dessus dès qu'ils arrivent
sur le site (haut de page).
Zoho fait une page d'accueil en plein écran simple avec un court formulaire d'inscription et un appel à l'action. Par conséquent les utilisateurs sont en mesure de se concentrer sur les services offerts beaucoup plus facilement.
Vidéo
Vous pouvez vous dire que les vidéos sont similaires aux sliders et il est inutile de les utiliser. Eh bien, cette déclaration est absolument fausse :
Les vidéos offrent un taux de conversion plus intéressant que les sliders. En fait, 70% des résultats de recherche comprennent des vidéos. Jusqu'à 85% des utilisateurs sont susceptibles d'acheter des produits après avoir regardé la prévisualisation rapide d'une vidéo. Les sliders ne donnent pas les informations des
vidéos qui donnent une image claire du produit avec la démonstration et
la description de toutes les fonctions.
*******************************************************************************************
Les sliders sont ils totalement inutiles ?
Bien
sûr, il est fortement recommandé de ne pas les utiliser dans la section
d'en-tête pour afficher vos informations importantes. Voici quelques conseils sur comment et où utiliser les sliders pour ne pas gâcher le site et affecter la conversion :
Faire simple
Il n'y a aucune nécessité d'inclure des sliders pleine largeur sur votre site car ils sont inutiles. les sliders de petite taille sont beaucoup plus efficaces et ne diminuent pas le temps de chargement de la page. Il est préférable d'y inclure des logos, des témoignages,
des noms de marque, ou toute autre information qui est moins importante
que le contenu principal.
Descendre
Déplacez les sliders vers le bas à partir du haut du site. Ils doivent travailler comme des invites pour les utilisateurs qui
sont à la recherche de plus d'informations et il est préférable de les
placer dans le milieu ou au bas de la page.
Défilement automatique
Portez une attention particulière à l'auto-scroll. les
utilisateurs ne peuvent pas se concentrer sur l'information s'il y a des boutons ou des flèches à cliquer. Voilà pourquoi il est recommandé de d'activer la fonction de
défilement automatique.
*******************************************************************************************
Quand est il possible d'utiliser un slider ?
Il y a encore des cas où les sliders sont essentiels et peuvent rendre convivial et instructif votre site. Il y a des cas où les sliders peuvent travailler pour vous et ou il
est assez difficile de trouver une alternative adéquate.
Boutiques en ligne
Lorsque vous avez besoin de montrer le produit à partir de différentes dimensions. Par
exemple, vous vendez une sorte de chaussures, robes, chemises ou n'importe quoi d'autre, et vous avez besoin de montrer à quoi ils ressemblent par
derrière, par le haut, etc. Pour cela vous aurez besoin, en moyenne,
environ 3-5 images par produit.
Portfolios
les portfolios en ligne sont essentiels pour les concepteurs et les développeurs indépendants. un slider peut être indispensable, quoique pas essentiel.
Il permettra aux visiteurss de naviguer entre les œuvres d'un seul clic et de regarder ces œuvres en haute résolution. Cependant, il est recommandé de ne pas intégrer le défilement automatique du curseur dans ce cas précis.
Afficher les offres
Ceci constitue une exception ou les sliders peuvent être utilisés dans la section d'en-tête.
Il peuvent fonctionner comme un outil pour montrer les meilleures offres de votre entreprise. Cependant, il existe plusieurs règles strictes sur la façon de les utiliser de la bonne façon. Tout
d'abord, il est nécessaire de limiter le nombre de diapositives à 2 ou
3. Ce nombre est basé sur la recherche de yorkwebteam qui dit que les 3
premières diapositives apportent le meilleur taux de conversion.
Ensuite, vous devez exclure la rotation automatique et ajouter des boutons de navigation. En ce qui concerne le contenu, il est nécessaire d'inclure une offre
avec titre distinct, l'image du produit, plusieurs caractéristiques de
base, etc.
********************************************************************************************
Comment éviter les problèmes avec les sliders ?
Eh bien, si vous ne pouvez pas renoncer à l'idée d'utiliser un slider , voici quelques conseils sur la façon de le faire fonctionner plus
en douceur et ne pas affecter le SEO.
optimisation de la vitesse de chargement
Pour faire charger le slider plus rapidement, vous allez avoir besoin de faire le plus léger possible. Il peut être fait par une sorte de script simple.
Si vous êtes familier avec jQuery, vous devez supprimer toutes les
lignes de code inutiles qui ne seront pas utilisées dans votre
projet.
Il
est également recommandé d'utiliser la version minified de bibliothèque
jQuery, qui est deux fois plus légere que la version régulière. Utiliser jQuery avec un CDN peut aussi être un excellent moyen de charger le site plus rapidement.
Par exemple, vous pouvez utiliser la bibliothèque de code.jquery.com.
référencement
Ce problème est assez difficile car la majorité des sliders n'est pas vue par les moteurs de recherche. Dans ce cas, vous pouvez essayer d'intégrer le deep linking du curseur.
De cette manière, les URL sont modifiées automatiquement lorsque les diapositives sont affichées. Il faudra utiliser une sorte de plug-in comme
mightyslider qui est construit conformément aux recommandations du SEO.
De meilleures performances sur les mobiles
Pour que votre slider fonctionne aussi bien sur tous les appareils, tout d'abord, vous avez besoin de l'adapter. De cette façon, il va s'adapter à la résolution d'écran rendant le contenu clair.
Maintenant, vous savez quelles sont les alternatives aux sliders et comment les utiliser correctement. Allez-y
essayez sur votre site Web, vous m'en direz des nouvelles .
