Pur se sembra che l’iPad esista da anni, non si è ancora compiuto il primo anno della sua commercializzazione. Eppure, a causa della frenetica velocità che il mondo tablet sta vivendo, non solo possiamo già comprare l’iPad 2, ma anche incominciamo ad avere l’imbarazzo della scelta a causa dei tablets Android di ultima generazione: Motorola, Xoom, Samsung Galaxy Tab. Questi strumenti sono ormai nelle mani di milioni di persone e sono tutti strumenti pensati per navigare in Internet.

Si può tranquillamente dire che il classico concetto di “fold” (ovvero di pagina visibile senza fare scroll) sia ormai da mandare in pensione.

Da un lato, quello PC (desktop e laptop), i monitor da alcuni anni a questa parte hanno incominciato a essere sempre più grandi. Questa novità è stata subito accolta dal web design sin dal 2009 con disegni ampli, che tengono in conto il formato panoramico, immagini di gran formato e background con textures ricche.

Però il processo si è verificato anche nella direzione opposta: schermi sempre più piccoli, come quelli dei netbooks o dei telefoni cellulari intelligenti.

Lo scopo di questo post è di vedere come i web designers hanno reazionato a questo sfida verso il piccolo formato e, in particolare, alla novità del formato medio e alla natura tattile degli schermi dei tablets.

Confermando l’ovvio: Mouse ≠ Dito

Incominciamo dalla più ovvia differenza di usabilità tra PC e Tablets: l’uso delle dita per navigare.

La navigazione sui tablets deve essere più semplice e gli elementi di navigazione più grandi che per un sito pensato per uno schermo tradizionale. Questo significa che i designers devono cercare la miglior soluzione: elementi di navigazione abbastanza grandi per permettere una navigazione fluida nei tablets, ma non così grandi da risultare insulsi sugli schermi tradizionali… oppure creare disegni web esclusivamente pensati per essere usati su tablets.

Fluidità e larghezza

La gran maggioranza degli schermi per PC s’incontrano nella fascia che va dai 15’’ a i 24’’. Alcuni utenti hanno schermi ancora più grandi, ma molto pochi hanno schermi più piccoli. Lo schermo dell’iPad, invece, è di 9,7’’ e con una risoluzione video massima di 1024×768, mentre la maggioranza dei tablets Android ha uno schermo di 7’’.

Sebbene la risoluzione 1024x non sia rara sia per siti sia tablets che PC, la vera differenza tra i due strumenti è la fluidità propria dei tablets con accelerometro incluso. Per esempio, l’iPad realizza scala i siti a con una buona fluidità per far sì che, ruotandolo, possano “entrare” nei 768 pixels di larghezza, oppure si serve delle funzioni built-in del disegno del sito.

Però, questo non elimina il problema che ogni web designer ha di sapere in che contesto un utente visualizzerà il suo sito sul suo tablet. La domanda è: che soluzione dare a questo problema? La principale soluzione sono i metodi di disegno adattativo, per cui si mostra un determinato disegno via CSS dipendendo del dispositivo in cui si visualizza.

Un esempio di ottima visualizzazione su iPad, tanto in formato orizzontale che verticale, è il sito della CNN. Il problema è che non esiste solo l’iPad, ma un’enorme varietà di dispositivi tutti diversi l’uno dall’altro. L’uso di metodi CSS/JavaScript adattabili è perfetto quando si ha a che fare con pochi dispositivi, ma è un incubo quando questi sono in sostanza infiniti.

Per questo motivo, i layout fluidi saranno quelli che molto probabilmente diventeranno più comuni, poiché si adattano automaticamente alle differenti risoluzioni video e non necessitano la creazione di fogli di stile differenti.

Il fold che svanisce

Come detto prima, la presenza degli accelerometri nei tablets fa sì che non esista una risoluzione video definita. Grazie ad essi, cambiare risoluzione è un gioco da ragazzi e questo ha come conseguenza che il fold fisso in pratica scompare come concetto.

Per chi non lo sapesse, il fold corrisponde a quella linea immaginaria al di là della quale un utente non vede il resto della pagina visibile sul suo schermo senza dover fare scroll con il mouse. È un termine preso in prestito dalla stampa tradizionale, per cui quando si piega un giornale per esporlo nell’edicola, si vede solamente la parte superiore della sua prima pagina.

Adesso, grazie anche all’esplosione dell’internet mobile, il fold è ormai un concetto fin troppo variabile.

Tecnologie in declino

Forse lo sapete già. A Apple non piace Flash. Nessun dispositivo con sistema operativo iOs integra Flash di Adobe o permette installarlo. Questo significa che ogni sito, pagina od oggetto che esiste in Internet e che è costruito con tecnologia Flash è semplicemente invisibile su un iPad.

Bisogna poi anche dire che Flash non è più utilizzato come fino a pochi anni fa, anche se è altrettanto corretto riconoscere che si usa ancora in numerose occasioni per la creazione di elementi rich-media in una pagina. Per esempio, molti siti usano Flash per pubblicare video. Ma anche in questo ambito, Flash sta cedendo terreno a tecnologie più nuove, come HTML5 che ormai si sta integrando in siti come YouTube.

Ed è proprio HTML5 la tecnologia che Apple prefiere, e il caso citato di YouTube, ma anche la sostituzione di Flash con HTML5 da parte di siti importanti come CNET, è un chiaro segnale che stiamo assistendo al tramonto di una tecnologia a vantaggio di un’altra.

4 consigli per disegnare un sito per tablets

Disegnare un sito per il suo uso sui tablets è come passare dalla matita all’evidenziatore.

Tipografia piacevole

La tipografia di piccole dimensioni semplicemente non è leggibile su un tablet. Certo, si può fare zoom, ma questo non toglie il fatto che il loro uso complica l’esperienza degli utenti.

Allo stesso modo, anche la tipografia troppo grande può essere controproducente in un tablet, perché obbliga gli utenti a fare costantemente lo scroll della pagina per completarne la lettura/visione.

La soluzione però non è solamente trovare il giusto mezzo. No, si tratta di trovare la corretta armonia tra font, dimensione, altezza di linea e lunghezza di linea.

Bottoni usabili

Il motivo è ovvio. Icone 16px per16px non sono l’ideale in un tablet, dove il mouse è sostituito dal dito e questo può facilmente cliccare su un’area di circa 20px.

Però, come nel caso dei caratteri, questo non significa che i bottoni debbano per forza essere enormi.

Solo le texture e ombre necessarie

Per necessari intendiamo dire di usare texture e gradienti per creare effetti che siano realmente un vantaggio per l’usabilità del sito.

Per esempio, un bottone potrebbe avere una leggera ombra per dargli un aspetto di “cliccabilità”. La texture dello sfondo della pagina potrebbe essere utilizzata per risaltare meglio il body.

Ovvero: usate il senso comune. Se la texture o l’ombra non apportano un reale valore aggiunto, allora non utilizziamola.

Layout meno complessi, layout migliori

Con meno complessi non vogliamo dire meno colonne, meno varietà o griglie meno interessanti. Con complicato indichiamo, ancora una volta, che offra una scarsa usabilità, per esempio obbligando gli utenti a continui zoom in e zoom out.

Con migliori vogliamo invece dire meglio pensati. Se il nostro sito fa un gran uso di immagini, per esempio, allora dobbiamo pensare a come esaltare quelle stesse immagini.

I siti web per tablets sono più leggeri, minimalisti quasi. Tutti quegli elementi che riempono i nostri siti “tradizionali”, su questi dispositivi semplicemente complicano la vita: data, tags, categorie, icone social sharing… no, lasciate più spazio possibile a ciò che più importa, il vostro contenuto.

Esempi di siti iPad ready

I siti che presentiamo qui sotto hanno saputo benissimo adattarsi al nuovo formato: sono preparati per il flip di visualizzazione (da verticale a orizzontale e viceversa), fanno uso di HTML5, rispondono positivamente ai quattro consigli che abbiamo prima suggerito.

Nike

Apple

iTunes Movie Trailers

BBC iPlayer

SPIN

GMail