23 gennaio 2015 - Global Administrator - 0 commenti

10 errori comuni in un sito mobile e responsive

10 errori comuni in un sito mobile e responsive

Ci eravamo lasciati “nell’episodio precedente” con la mia promessa di realizzare un nuovo articolo sull’importanza di realizzare delle interfacce utente che siano accattivanti ma facili da usare, valorizzando il nostro sito o la nostra applicazione e i suoi contenuti.

Ma qualche giorno fa, tornando a casa per le vacanze natalizie, mi è capitato di riavere tra le mani un vecchio Nokia 7110, uno dei primi dispositivi in grado di navigare in WAP (Wireless Application Protocol). Magari alcuni di voi non sanno neanche cosa sia la tecnologia WAP, soppiantata da UMTS, 3G e attualmente LTE (o 4G)… Ma quel Nokia 7110 e il WAP sono stati l’inizio, circa 14 anni fa, della mia esperienza come web designer (immaginare faccina commossa che pensa ai tempi che furono).

E’ incredibile che in questi pochi anni il mondo del “mobile web” sia cambiato così radicalmente, passando da siti puramente informativi, costituiti da un insieme di link in sequenza, realizzati in bianco e nero (anzi… verde e nero nella maggior parte dei casi) a dei complessi siti con sistemi di iterazione incredibili come touch, swipe, pinch e altri nomi inglesi dal sound molto cool.

Ovviamente… Da un grande potere, derivano grandi responsabilità.

Al tempo del WAP, realizzare un sito web mobile era relativamente semplice, si prendevano i contenuti del sito originale, si organizzavano in una serie di pagine monocolonna, si convertivano le immagini in formato “pixelloso”… Ed era tutto pronto, in meno di 40kb tutte le informazioni di cui avevamo bisogno sul palmo della nostra mano.

Flash-forward di 10 anni e realizzare un sito web navigabile dai cellulari (termine riduttivo di uso comune per indicare i sempre più “computeristici" Smartphone) è diventata un’impresa titanica. Velocità di download, limite di GB disponibili nei vari abbonamenti, display ad alta densità (o per i più fashion:“Retina”) sono solo alcuni dei problemi che affliggono chi vuole realizzare un sito mobile (e spesso, anche chi vuole navigarlo).

Ultimamente in eLogic sto realizzando sempre più siti “responsive”, pagine web in grado di adattare il loro contenuto in base al dispositivo che le sta navigando, e nell’esperienza di questi ultimi anni di sviluppo, ho individuato quelli che a mio avviso sono i 10 problemi da evitare assolutamente quando si pensa di realizzare un sito che dovrà essere visualizzato su smartphone.

1) Considerare la grandezza delle dita!

Lo so, sembra stupido e scontato… Ma uno smartphone al giorno d’oggi si usa CON LE DITA. Alcuni designer sembrano non considerare questo fattore. Spesso il cellulare viene usato mentre siamo a passeggio, o al freddo, con i nostri nuovi guanti “touch-friendly”… La grandezza dei pulsanti e di tutti i controlli con cui l’utente può interagire è fondamentale.

Nell’esempio qui di fianco trovate un sito con un menu di navigazione troppo stretto, difficile da cliccare e da leggere.

E’ buona regola mantenere una grandezza di almeno 8 millimetri per non creare difficoltà alla maggior parte degli utenti.

Un’altra cosa da tenere in considerazione è il non utilizzare i pixel come unità di misura nei fogli di stile, bensì utilizzare misure percentuali o em per definire grandezze e spaziature all’interno degli elementi del nostro sito!

Non tutti gli schermi sono uguali! E 40 pixel su un dispositivo potrebbero risultare molto più “stretti” su un altro.

2) Immagini = dati scaricati = lentezza d’esecuzione

Dal 2010 Google ha inserito la velocità dei siti tra i fattori discriminanti per un’ottima indicizzazione! Se non basta questo a convincervi ad avere un sito veloce, sappiate che il 74% degli utenti abbandona un sito desktop se questo ci mette più di 5 secondi per caricare, la percentuale è del 47% per quanto riguarda i siti visti dal cellulare (evidentemente gli utenti reagiscono differentemente, consapevoli della lentezza della linea mobile). Ma non dobbiamo perdere di vista questo dato… Perdere la metà dei nostri potenziali utenti è un prezzo troppo alto da pagare!

Spesso il problema è facilmente risolvibile limitando l’utilizzo delle immagini o evitando di fornire una versione ad alta risoluzione per ogni immagine del sito!

Avere il proprio logo perfetto e scintillante nello schermo retina del nostro nuovo iPhone 6+, con una risoluzione 3 volte più grande rispetto ad uno schermo “normale”, può essere accettabile… Ma avere tutte le immagini… 3 volte più grandi… Dovrebbe essere punito per legge come:”Omicidio preterintenzionale di MB altrui”.

Caricare il più possibile le immagini del nostro sito attraverso il CSS e le Media Query può essere una soluzione, almeno fino a quando il W3C e le nuove soluzioni picture e srcset per delle “responsive images” non diventeranno più popolari e supportate da tutti i browser.
3) Nascondere elementi del sito, sperando di limitare i danni

A fronte del discorso preso nel punto 2, alcuni pensano che nascondere un elemento dal sito utilizzando l’attributo CSS display:none, sia la panacea di tutti i mali… In realtà non è affatto così. Con “display” modifichiamo solamente la visualizzazione di un elemento, ma non il suo caricamento in memoria… Quindi nascondere il nostro slideshow da 4 MB con questa tecnica serve a ben poco…

4) Realizzare una versione mobile del sito

Ok, vuoi realizzare il sito mobile perfetto, senza fronzoli, senza cose extra, senza tutte quelle immagini pesanti che hai sul sito… Crei una versione mobile separata del sito, con il suo indirizzo .mobi (o altri), per poi scoprire che per i motori di ricerca i due siti sono, effettivamente, diversi!

Al fine di migliorare l’indicizzazione del sito è necessario che sia gli utenti da cellulare che gli utenti da desktop arrivino allo stesso indirizzo e navighino effettivamente lo stesso sito. Questa soluzione è consigliata solo ed esclusivamente per siti con contenuti particolarmente vecchi o realizzati in flash o tecnologie simili.
5) Meno richieste, più velocità

Sappiamo tutti che è difficile resistere all’impatto di uno slideshow con quelle bellissime immagini comprate su fotolia, che tanto rappresentano la nostra attività e la nostra azienda… Oppure evitare di utilizzare quel popolarissimo script di jQuery (con i suoi 4 file CSS collegati) che fa mille cose (anche se a noi ne serve una).

Lo ammetto, sono anch’io colpevole; dover realizzare tante cose velocemente a volte rende necessario l’utilizzo di questi espedienti per ottenere risultati che richiederebbero giorni di lavoro… Ma anche in questo caso esiste un modo per limitare i danni!

Se è possibile, scaricare versioni personalizzate del plugin, andando a scegliere le parti di codice che vi interessano e inserendo tutto il codice javascript in un solo file JS (caricandolo prima della fine del tag HTML </body>) e tutto il codice relativo alla grafica in un solo file CSS, questo permetterà di limitare le richieste al server, aumentando la velocità di caricamento della pagina!

6) Considerare l’environment in cui si naviga il sito

Immaginate di dover prenotare un biglietto del treno. Scegliete la tratta del vostro viaggio, l’orario del treno, il posto nella carrozza, realizzate il pagamento online o scegliete il pagamento presso gli appositi rivenditori in stazione.

Ora immaginate di aver perso il treno che avevate prenotato, siete in stazione, dovete assolutamente raggiungere la vostra meta il prima possibile, avete solo il vostro cellulare e potenzialmente c’è un altro treno che vi porta a destinazione, che partirà tra poco tempo…

Avete la stessa esigenza di quando eravate a casa, questa volta però non avete la comodità del computer… Dovete fare tutto dallo schermo del cellulare.

Vi parlo di questa situazione perché mi è capitata (purtroppo) e non avete idea di quanto ho maledetto il sito da cui ho provato a prenotare il nuovo biglietto.

Sarebbe stato d’aiuto se il sito web avesse previsto di localizzare la mia posizione, offrendomi già dalla homepage la lista dei treni che partivano dalla stazione più vicina a me in quel momento, rendendomi la prenotazione del posto immediata in pochi passaggi.

Ma purtroppo non è stato così, ho perso anche il treno dopo purtroppo, e ho preferito recarmi ai computer in stazione per fare la prenotazione.

Questo è un classico esempio di sito che non considera il diverso utilizzo, e le diverse esigenze, che un utente può avere quando naviga il sito da uno smartphone.
7) Rendere le pagine troppo lunghe

Una delle operazioni più comuni nel realizzare un sito per cellulari, è inserire tutti i contenuti uno sotto l’altro, ordinati secondo un’ideale scala di importanza, fino ad arrivare alla chiusura (il classico “footer”) con le informazioni aziendali e, spesso, gli indirizzi dei Social Network.

Un errore da evitare è non considerare la possibilità di inserire “tab” o “accordion” per rendere il sito più snello e “corto”, dando all’utente diversi modi di interagire con i contenuti, senza fare infiniti scroll per raggiungere un informazione.

8) Javascript è utile, non fondamentale

Chi conosce cosa vuol dire “Progressive Enhancement” alzi la mano. Non è realmente necessario alzare la mano a dire il vero, ma se non conoscete questo termine… Dovete assolutamente recuperare a questa mancanza!

Coniato da Steven Champeon nel 2003, il termine Progressive Enhancement indica una serie di accorgimenti e un uso di tecnologie che rende il sito mano a mano più “complesso” e “pieno” in base al dispositivo che lo naviga.

Il concetto di progressive enhancement è da affiancarsi a quello di sito web “mobile-first”, che intende la progettazione di un sito partendo dalla sua versione mobile, per poi mano a mano andare a implementare soluzioni grafiche ed effetti visivi più suggestivi mano a mano che aumenta la dimensione delle schermo.

In questo, javascript è molto utile, dandoci, per esempio, la possibilità di far comparire e scomparire un menù di navigazione in un sito mobile, oppure rendendo possibile la realizzazione di slideshow animati e tante altre cose…

Ma cosa succede al nostro sito se disabilitiamo javascript o se lo navighiamo da un dispositivo che per qualche motivo ha javascript disabilitato?

Avete mai provato a visitare il sito di Instagram da un computer su cui è disabilitato javascript? O su un browser di un cellulare di qualche anno fa? Se ci provate, sappiate che non vedrete niente, niente di niente… Perché il sito di Instagram richiede javascript per funzionare.

Assicuratevi che il vostro prossimo cliente, che magari sta solo cercando delle informazioni di contatto sulla vostra azienda, non abbia bisogno di javascript (o di un telefono di ultima generazione) per accedere al vostro sito (o per navigarlo).

Esistono diverse tecniche di progressive enhancement che rendono il sito tranquillamente navigabile anche da dispositivi che non supportano javascript o browser mobile di vecchia generazione (come quelli presenti in tantissimi Blackberry).
9) Dimenticare il buon vecchio Internet Explorer

Tutti i web designer odiano internet explorer. E tutti i web designer sono felici del fatto che la popolarità del browser Microsoft sia in una clamorosa fase calante (anche se ci sono rumors sull’arrivo di un nuovo browser da parte dell’azienda di Redmond).

Internet Explorer, fino alla versione 9, non supporta le Media Query, annullando di fatto la possibilità di realizzare siti responsive!

Per fortuna sono stati inventati dei rimedi a questa cosa, per esempio utilizzando lo script Respond.js, che abilita la possibilità di realizzare siti responsive anche sulle vecchie versioni di Internet Explorer. Una procedura da non dimenticare per rendere il nostro sito mobile compatibile con la maggior parte dei dispositivi!
10) Non testare sui dispositivi

L’ ultimo punto della mia personale lista è dedicato alla fase di testing! In fase di realizzazione può bastare testare tutte le varie modifiche sul browser del computer, ridimensionato… Ma nella fase finale di test consiglio caldamente di utilizzare una serie di dispositivi diversi per rendersi conto delle effettive differenze nella densità di pixel e nell’utilizzo confortevole del sito.

Testare sul dispositivo fa rendere effettivamente conto della grandezza dei link, della velocità di utilizzo e della facilità di navigazione delle pagine.

Riguardo a questo, un altro errore comune è non testare il sito sulla rete cellulare, ma solo in Wi-Fi, mentre uno degli utilizzi più comuni del nostro sito mobile è proprio quello su delle reti generalmente più lente di quella di casa (o del nostro ufficio).
Conclusione

Spero che questo lungo articolo sia di aiuto per alcuni di voi nel capire come realizzare correttamente un sito web per cellulari (e responsive)… Controllate i vostri siti e fatemi sapere se avete riscontrato uno di questi errori!

Ovviamente ci sarebbero tante altre cose da considerare oltre queste 10, ma queste sono quelle più importanti secondo me, fatemi sapere cosa ne pensate tramite il box commenti qui sotto.

E ricordate, tutti i siti nascono “responsive”, cercate di mantenerli tali! Se non avete capito questa affermazione… Ve la spiego alla prossima puntata!
Comments
Blog post currently doesn't have any comments.