Ottimizzare un sito Joomla per iPad

 
Se usi Joomla dovresti assicurarti che il tuo sito web funzioni anche su un iPad. Anzi non solo funzionare: dovrebbe essere un piacere navigare nel tuo sito con l’iPad.
 
Se non hai un iPad con cui testare il tuo sito, puoi simularlo sul pc usando il browser Apple Safari e scegliendo come user agent Mobile Safari – iPad.
 
Dopodiché ecco 10 consigli per ottimizzare il tuo sito Joomla per l’iPad.
 

1. Semplifica il design

E’ probabile che non tutti gli elementi delle pagine siano necessari. L’iPad è orientato al consumo di informazioni, perciò il tuo sito dovrebbe focalizzarsi sul trasmettere informazioni.
Inoltre usa un layout ‘fluid‘ (con larghezza variabile), che quindi si adatta all’utilizzo sia in verticale sia in orizzontale dell’iPad.
 

2. Imposta il metatag ‘viewport’

Il viewport è l’effettiva porzione di sito mostrata di default dall’iPhone o dall’iPad. Aggiungendo la linea di codice:

<meta name=”viewport” content=”width=device-width” />

 
diciamo al browser che il sito dovrà essere visualizzato in riferimento alla larghezza del nostro dispositivo. La pagina, quindi, sarà mostrata immediatamente al giusto livello di zoom, migliorando l’esperienza dell’utente sul sito.
 

3. Menu finger-friendly

Su un iPad l’utente naviga usando le dita, perciò invece di nascondere i link nei testi è preferibile progettare il sito con link più grandi e più facili da identificare, per semplificare la navigazione.
 

4. Usa CSS condizionali

Utilizzando dei fogli di stile condizionali si può creare un CSS specifico per l’iPhone OS.
I CSS3 riconoscono diversi tipi di dispositivi (stampanti, palmari, schermi). L’iPhone riconosce il tipo ‘screen’, perciò si può aggiungere al foglio HTML l’espressione:

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

 
Le keyword ‘only screen‘ specificano che il foglio di stile vale solo per iPhone OS e non influenza altri dispositivi, mentre device-width, max-device-width, e min-device-width servono a specificare le dimensioni dello schermo.
 

5. Modifica il codice dei CSS a posizione fissa

Gli elementi che usano un posizionamento fisso rimangono sempre sullo schermo se si usa Safari su Mac OS X o Windows, ma possono finire fuori dallo schermo di un iPad o iPhone se l’utente usa lo zoom.
Questo perchè, per definizione, il blocco che contiene un elemento di una pagina web che usa CSS fissi è il viewport. Perciò quando, ad esempio, si imposta position: fixed con bottom e right con un valore di 20px, si fissa la posizione dell’elemento 20 pixel sopra al bordo inferiore e 20 pixel dal bordo destro del viewport.
 

6. Video supportati da iPad

Le seguenti compressioni sono supportate dall’iPad:
 

• H.264 Baseline Profile Level 3.0 video, fino a 640 x 480 a 30 fps
• MPEG-4 Part 2 video (Simple Profile)
• AAC-LC audio, fino a 48 kHz
• File video con estensioni .mov, .mp4, .m4v, .3gp

 

7. Inserisci le informazioni più importanti ‘sopra la piega’

Quando l’iPad è usato in orizzontale, le informazioni visibili diminuiscono, perciò è importante tenere le informazioni più importanti ‘above the line‘.
L’utente, cioè, non deve avere bisogno di scrollare la pagina. Questa regola vale soprattutto per i browser tradizionali e un po’ meno per l’iPad, dove far scorrere la pagina è più semplice: basta un dito.
 

8. Segui gli standard nella scrittura del codice

E’ importante realizzare il proprio sito rispettando gli standard web, validando le pagine HTML e CSS.
Questo aiuterà di certo la visualizzazione su iPad.
 

9. Niente Flash

Come l’iPhone, anche l’iPad non supporta la tecnologia Adobe Flash. Questo non è un problema per gli utenti Joomla, dato che Flash non fa parte dell’output del core di Joomla (i file nativi di Joomla, in pratica). Ma Flash potrebbe essere usato da qualche estensione o dagli Ads (pubblicità). E’ preferibile utilizzare una soluzione di tipo Ajax piuttosto che Flash.
 

10. Joomla Admin su iPad

Amministrare il tuo sito Joomla dall’iPad può essere una buona idea se si utilizzano gli strumenti giusti. Alcuni sviluppatori hanno creato dei template di amministrazione che funzionano bene su iPad. Uno di questi è AdminPad.
 
FONTE: http://www.joomlablogger.net/blog/joomla-development/10-things-to-know-about-joomla-and-the-ipad/