Leggevo un interessante post di Stephen Vescio - uno studente di economia e web designer freelance di 20 anni (!!!) - che mette in evidenza aspetti fondamentali nella progettazione di applicazioni web per iPad.
Voglio qui riassumere alcuni punti invitandovi a leggere il post di Stephen per maggiori dettagli.
In fase di progettazione
- Lavorare alla risoluzione nativa dell'iPad di 768 x 1024 pixel. Attenzione: la risoluzione che visualizzate sul vostro monitor appare più grande di quella dell'iPad. Fate degli screenshot e visualizzateli sull'iPad per verificare le dimensioni corrette.
- Ricordarsi che il dispositivo visualizza la web apps sia in modalità Landscape che Portrait.
- Utilizzate gli elementi GUI for iPad per Photoshop che potete scaricare da qui.
Limiti
- L'iPad, come l'iPhone, non supporta Flash: utilizzate HTML5 e CSS3 per le animazioni, gli effetti o per i video.
- Non esiste il mouse quindi non usate eventi come mousehover per particolari animazioni: sfruttate le potenzialità del touch screen!
- Le scrollbar vengono gestite in modo nativo da Safari e il loro funzionamento potrebbe essere diverso da quello che vi aspettate. Evitate l'utilizzo di frames (questo anche in applicazioni per il web). Date un'occhiata anche allo script iScroll realizzato da Matteo Spinelli che permette di scrollare il contenuto e lasciare in posizione fissa l'header e il footer dell'applicazione.
- Evitate l'utlizzo della proprietà css position:fixed
Redirect automatico se l'utente sta usando un iPad
Attraverso poche righe di Javascript, potete verificare lo user-agent del browser che sta visualizzando la vostra applicazione e se si tratta di un iPad potete fare un redirect alla pagina progettata su misura per il dispositivo:
if ( (navigator.userAgent.indexOf('iPad') != -1) ) {
document.location = "http://www.bracketslash.com/app.php";
}
Impostare fogli di stile differenti in base all'orientamento dell'iPad
Può essere utile impostare diversi fogli di stile in base alla visualizzazione dell'applicazione ossia se il dispositivo si trova in modalità landscape o portrait. Si consiglia però di non differire molto tra le due visualizzazioni altrimenti l'utente "perderà l'orientamento", i fogli di stile devono servire solo ad adattare il contenuto all'area di visualizzazione ma non a cambiare la navigazione:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Impostare l'icona dell'applicazione
Come per l'iPhone, cliccando sul bottone "+ - Aggiungi a Home" di Safari possiamo aggiungere la nostra web application preferita alle nostre applicazioni. L'icona da visualizzare deve essere di 72x72 pixel e viene impostata in questo modo nel tag <head>:
<link rel="apple-touch-icon"
href="http://www.yoursite.com/your-apple-touch-icon.png" />
Un esempio...
Se avete un iPad vi consiglio anche di dare un'occhiata alla web app Bracket Slash realizzata da Stephen. Si tratta di un aggregatore di news gratuito per tenere sotto occhio i principali canali tematici in un'unica applicazione. Una bella idea e ben fatta se si pensa che è "solo codice HTML".
1262f4b1-0c2f-4269-9487-24086e2f5b4b|1|3.0