Progressive Enhancement (4): ottimizzare per iPhone

scritto da Francesco Gavello [+] il 05 novembre 2008 | Un Commento in: Web Design & UX

iphoneQuesto articolo fa parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. La prima, seconda e terza parte hanno già visto analizzati i più interessanti selettori CSS3 che possono esssere utilizzati sin da oggi in maniera proficua.

Oggi invece parliamo di iPhone.
Un oggettino estremamente controverso che nonostante le differenti opinioni a riguardo è riuscito a finire in una notevole quantità di tasche italiane, e per via delle sue innovative potenzialità a livello di browsing merita sicuramente un’analisi più approfondita.

Come possiamo dunque rendere migliori i nostri layout agli utenti iPhone?

Diciamo che sviluppare con un occhio ad iPhone è in qualche modo possibile anche senza averne acquistato uno. E’ sufficiente basarsi su Safari (in versione desktop), da qualche tempo disponibile anche per Windows e attenersi ad alcune basilari regole di buona scrittura durante la costruzione dei nostri layout (ah, gli standard).

Tuttavia, così facendo si sta solo iniziando a scalfire la superficie. La completa integrazione di Safari Mobile con le altre apps installate come Mappe o le chiamate telefoniche rendono possibili tutta una serie di interessanti ottimizzazioni che si possono sperimentare solamente “mettendoci la mani sopra”.

Lavoriamo su iPhone, e vogliamo letteralmente spremerlo al massimo.

Prima di iniziare

  • Le tue dita non saranno mai precise come un mouse.
    Su iPhone si interagisce con le dita, e a meno di non fare un uso continuo dello zoom, la precisione di puntamento sarà leggermente inferiore rispetto a quanto siamo abituati a fare tramite mouse; layout ampi e spaziosi sono semplicemente l’ideale.
  • Dimentica il concetto di finestra.
    Il concetto di finestra poi, lascia il tempo che trova quando la navigazione avviene una pagina alla volta, a tutto schermo e senza overlay di nessun tipo. Lo zoom tramite doppio tap su una parte del layout adatta la visuale al primo elemento blocco presente. Nessuna finestra, altro resize o scroll controllabili.
  • Quando lo spazio è poco, “less is more”.
    Con una risoluzione portante di 480×320 pixel (in modalità landscape) è naturale che un contenuto a singola colonna sia il meglio che un vostro utente possa chiedere: tuttavia anche senza rivoluzionare il vostro layout in tale senso, ricordate che la chiarezza con la quale disponete i vostri contenuti verrà notata (e apprezzata) da chi altrimenti si troverebbe a scrollare continuamente a destra e sinistra.

Hey, ma Mobile Safari non se la sbrigava da solo?

Per la maggior parte è vero. Safari Mobile sarà in grado di visualizzare le vostre pagine web con l’esatta qualità della controparte desktop senza che voi dobbiate metterci mano in alcun modo.

Tuttavia come già detto la differente area di visualizzazione e i metodi che avete per interagire con essa (le vostre dita) possono richiedere qualche accorgimento aggiuntivo per agevolare la navigazione e sfruttare al massimo le caratteristiche dell’iPhone.

Un foglio di stile separato

Probabilmente già lo immaginavate. Anche in questo caso è bene prevedere un CSS separato dal resto della nostra struttura, contenente le sole regole volte a determinare la resa su Mobile Safari.

Possiamo filtrare il caricamento del nostro foglio di stile aggiuntivo riconoscendo la proprietà “max-device-width” settata a 480 pixel (la dimensione dello schermo dell’iPhone).

Inseriamo quindi nell’head del nostro documento la seguente riga, che permette a tutti gli altri device con una dimensione superiore ai 480 pixel di ignorare il caricamento del CSS dedicato all’iPhone.

<link media="only screen and (max-device-width: 480px)" 
href="css_iphone.css" type="text/css" rel="stylesheet" />  

Comprendere il Viewport

Mobile Safari effettua un resize automatico a partire dai 980 pixel verso i 320 pixel (modalità portrait). Consideriamola una buona base di partenza per poter ottenere la migliore resa qualitativa sull maggior parte dei siti web attualmente in circolazione (che sono dotati per l’appunto di una width massima di 980 pixel).

Questo non toglie che il vostro layout possa avere differenti dimensioni e richiedere un diverso livello di resize. Esiste a tale scopo un potente meta tag aggiuntivo: viewport in grado di indicare ad iPhone la dimensione di partenza da cui effettuare il resize.

<meta name="viewport" content="width=800" />

Nel caso il vostro layout sia leggermente più piccolo della media, un semplice accorgimento come questo può rendere i vostri testi direttamente leggibili senza bisogno di ulteriori zoom lato utente. Un bel vantaggio con poco sforzo.

Sempre tramite viewport possiamo definire il livello di zoom iniziale, tramite la proprietà “initial-scale=x.y” o bloccarla del tutto con “user-scalable = no” (ma ve lo sconsiglio).

<meta name = "viewport" content = "initial-scale = 1.0" />
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no" />

Lavorando sui dettagli potremo scoprire che agevolare uno zoom iniziale su una “area calda” del nostro layout può far risparmiare tempo prezioso ai nostri lettori e focalizzare l’attenzione su ciò che per noi è importante.

Testi

iPhone applica una sorta di ridimensionamento intelligente anche ai testi mano a mano che il livello di zoom aumenta. Ciò può portare ad effetti imprevisti nei menù di navigazione o quando ci troviamo a disporre i contenuti in spazi a dimensione fissa.

E’ possibile disattivare il ridimensionamento del testo o aumentarne la dimensione ad hoc tramite la regola “-webkit-text-size-adjust”.

-webkit-text-size-adjust: none; /* nessun ridimensionamento intelligente */
-webkit-text-size-adjust: 150%; /* ingrandisci il testo del 150% */

Integrazione con le apps

Esistono poi tutta una serie di proprietà che la versione mobile di Safari implementa per migliorare la user experience e che, per ovvi motivi, non sono implementate nella versione desktop.

Cliccare su un link ad una mappa di Google, ad esempio, porterà all’apertura dell’applicazione Mappe con il passaggio dei parametri associati. Iphone riconosce infatti i link che iniziano con “http://maps.google.com/maps” e ne dirotta l’apertura all’applicazione più consona anziché aprirne la pagina web.

Vengono anche riconosciuti i formati hCard, attivando i numeri telefonici in essi inclusi e permettendo la chiamata diretta dalla pagina web.

<div id="hcard-Francesco Gavello" class="vcard">
    <div class="fn">Francesco</div>
    <div class="tel">123-45667890</div>
</div>

O in alternativa è anche possibile passare un parametro al software telefonico tramite il classico link con tag “a”, inserendo nell’attributo href il prefisso “tel:”.
E’ da notare come link di tale costruzione possano quasi certamente generare problemi sui restanti browser, e dovrebbero essere mostrati solo tramite il foglio di stile riservato all’iPhone.

<a class="call" href="tel:123-4567890">Chiama Francesco Gavello</a>

CSS potenziati

Non vanno trascurate le potenzialità di Safari nell’implementare (come abbiamo visto in passato) le più recenti regole CSS3. Proprietà come “-webkit-border-radius”, “-webkit-border-image”, background multipli e l’utilizzo di PNG trasparenti possono finalmente venire applicati in maniera semplice e senza grattacapi.
Il paradiso del web designer, insomma :D

Il giusto equilibrio

Questa ovviamente è solo una parte di ciò che potete fare oggi con il vostro iPhone un pò di tempo da dedicare ottimizzazione. Le potenzialità sono moltissime e dipendono in gran parte dai risultati che volete ottenere.

Non credo tuttavia che sia una buona idea spingersi troppo oltre sino a sostituire la totalità del proprio layout con una versione “lite” dedicata alla navigazione mobile (a meno di non essere un grosso network come Digg, Facebook o eBay, ma in quel caso una apps dedicata risolve gran parte dei problemi).

La potenza di iPhone sin dall’inizio è stata quella di offrire la vera internet senza troppi compromessi. Questo è ciò che gli utenti si aspettano ed è ciò che dovremmo secondo me dargli. Voi che ne pensate?

foto: Apple

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

Un Commento

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. [...] Ottimizzare i nostri layout per iPhone [...]

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!