Slider e mobile: come comportarsi?

mobile-slider
Tempo stimato di lettura: 3 minuti, 45 secondi
Pubblicato il 15 febbraio 2016

Al giorno d’oggi quasi ogni sito web presenta in homepage uno slider, ovvero una galleria d’immagini e testi dinamica.

Perché li usiamo?

  1. Perché un’immagine vale più di mille parole. Non è una novità, le immagini sono i contenuti che colpiscono maggiormente gli utenti ed aiutano a rinforzare il messaggio che stiamo comunicando.
  2. Per divulgare i valori o le idee di un brand.
  3. Per promuovere prodotti e/o servizi presenti sul nostro sito web.
  4. Perché sono facili da inserire. Sia che il nostro sito sia in html o utilizzi una piattaforma di CMS, esistono migliaia di script e plugin che possiamo utilizzare.

In questi termini, l’inserimento di uno slider sembra essere un’ottima soluzione, ma a parte delle problematiche dal punto di vista SEO, che puoi approfondire in un ottimo articolo di Harrison Jones, SEO & Web Analyst presso The Mx Group, che cosa succede quando proviamo a visualizzare uno slider da uno smartphone o un tablet?

La maggior parte degli slider non sono mobile-friendly e potresti andare incontro a diversi problemi.

Scarso controllo

Uno slider di solito comprende alcuni controlli di base, ad esempio dei cursori laterali per scorrere tra le diapositive o dei bullets per selezionare la diapositiva desiderata, e in alcuni casi la possibilità di soffermarsi su una di esse tramite il mouse hover.

Su uno smartphone usare questi elementi diventa quasi impossibile e ne risulta che l’utente non ha alcun controllo sullo scorrimento delle diapositive. Gesture semplici come lo swipe (scorrimento) non sono quasi mai supportate, perciò ci troviamo a non riuscire a interagire con il dispositivo nel modo in cui siamo soliti fare.

Problemi di ridimensionamento

A chi non è successo? Hai realizzato un sito perfetto il layout e i contenuti si adattano perfettamente a tutte le risoluzioni, osservi lo slider ed è… microscopico!

Le immagini si vedono appena, i testi sono minuscoli e non parliamo dei bottoni… non riuscirebbe a premerlo neanche un bambino! Lo slider è diventato praticamente inutile!

Dopo ore di modifica delle impostazioni e del CSS forse ottieni un compromesso: i testi sono leggibili e il bottone adesso potrebbe premerlo anche tuo padre, ma resta comunque un problema, le immagini sono tagliate.

Quel meraviglioso effetto che avevi creato sul sito ora nemmeno si vede… e non è finita qui!

Tempi di caricamento lunghi

Hai comprato l’immagine più grande che c’era per farla vedere bene sul tuo schermo retina da 27″, una risoluzione di almeno 1920px. Beh quella stessa immagine dovrà essere caricata su un dispositivo mobile, probabilmente neanche connesso a una rete WiFi, insieme al resto del sito. Il risultato è un’esperienza web lenta e tempi di caricamento lunghi che potrebbero portare l’utente ad abbandonare il sito.

La soluzione c’è, ma forse non ti piacerà

Ho scritto questo articolo maledicendomi ad ogni parola perché io adoro gli slider e non credo che da oggi in poi smetterò totalmente di usarli. Ritengo inoltre che per alcune attività sia di fondamentale importanza mostrare le proprie immagini, pensate per esempio ad un sito di un hotel, di un ristorante o di eventi.

Credo però, che inizierò a farne un uso più consapevole e intelligente e a limitarne l’utilizzo dove non è strettamente funzionale agli scopi del sito web.

In alcuni casi si può ottenere un ottimo risultato semplicemente utilizzando quello che oggi viene definito un hero layout. Se non ci credete, date un’occhiata alle home page di Google DriveDropbox o Evernote.

Questo discorso non vale, ovviamente, se ti trovi nella condizione di poter realizzare una versione mobile personalizzata. In questo caso puoi scegliere di creare uno slider ad hoc o di optare per delle soluzioni alternative.

Una soluzione che apprezzo molto è quella utilizzata sul sito di Alviero Martini caratterizzato dalla divisione dei contenuti in sezioni più o meno della stessa altezza dello slider. Visitando il sito da un computer viene visualizzato uno slider con tre diapositive, visitandolo da un dispositivo mobile le tre diapositive sono invece disposte una dopo l’altra come normali immagini e di seguito ci sono i contenuti del sito.

 

alviero-martini

 

Slider mobile-friendly

Per fortuna, cercando sul web, si trovano anche una serie di slider studiati per garantire una buona esperienza utente su mobile. Tra questi troviamo SlidesJSSwiper e Unslider che sono gratuiti, completamente responsive e supportano l’uso delle gesture.

Inoltre anche il celebre plugin per WordPress Slider Revolution ha introdotto, nella sua ultima versione, la possibilità di personalizzare le dimensioni dello slider sui vari dispositivi.

revolution slider

 

È forse l’inizio di una maggiore attenzione a questo tema? E tu cosa ne pensi? Sei pronto a rinunciare all’utilizzo dello slider?

 

  • Gaetano Miccio

    Nei siti che curo cerco sempre di evitarlo sui dispositivi mobili magari sostituendolo con una sola immagine di testata. A oggi è impensabile una pagina possa pesare oltre 1MB, quando inseriamo uno slider 3 immagini da 150kb, il peso della della pagina aumenta di almeno 500kb che in mobilità fanno la differenza tra una visita e un rimbalzo. La domanda che pongo ai miei clienti che si ostinano con lo slider anche sul mobile è: preferisci avere un sito meraviglioso a costo di avere meno richieste o più richieste e un sito gradevole?

    • Ciao Gaetano mi sembra un’ottima osservazione! Il nostro lavoro è anche quello di far capire ai clienti le motivazioni che ci sono dietro ad a una determinata scelta.

      • Gaetano Miccio

        Credo che rendere partecipe il cliente delle scelte che un designer o un programmare fa è un’ottima pratica, ne giova sia la professionalità personale che il rapporto con il cliente. Poi va detto che non sempre il cliente si affida e spesso è cocciuto per molti motivi. Spesso mi capita il cliente che mi obietta le scelte dicendo che poi “tutti gli altri” lo fanno. Alla fine il cliente è il proprietario del sito e spesso getto la spugna.

        • kozmikcharlie

          Mi capita anche a me Gaetano… penso sia un mal comune e una cattiva abitudine quello di voler imporre i propri gusti (mi riferisco al cliente) a chi deve realizzare un lavoro…. della serie… “sono io che ti pago e fai quel che voglio io…”

          • Io penso che anche se in alcuni casi bisogna scendere a qualche compromesso, il nostro lavoro sia cercare di fare il nostro meglio con i mezzi che abbiamo a disposizione.

  • Molto interessante sapere che Slide Revolution ha implementato (finalmente) il fattore responsive nelle slide. Infatti nella versione mobile le disattivavo ogni volta per i motivi da te descritti. Grazie per la news 😉

    • Ciao Simone, si è possibile usare delle impostazioni di default (auto, full-width o full-screen) oppure impostare delle dimensioni personalizzate per ogni device.

  • E’ proprio il dilemma che sto affrontando in questo momento.
    Sto sviluppando un template commerciale per wp e il cruccio è: optare per una slide figa per incrementarne le vendite, una più sobria slide mobile friendly che rischia di non essere apprezzata dall’acquirente medio oppure un caricamento condizionale che ne impedisca la visione da mobile?

    • Ciao Fabio, credo che per un template commerciale dovresti trovare una soluzioni che “cerchi di accontentare un po’ tutti”. Come hai detto anche tu alcune scelte potrebbero condizionare le vendite… io ti consiglierei di offrire più di una soluzione in modo che sia l’utente poi a decidere come gestire questo problema in base al risultato che deve ottenere.

Shares