jeudi 11 février 2016

Les Sliders bonne ou mauvaise idéee ?

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 .