Vediamo quali sono le basi del design per Ipad e un ottimo ( e comodo) tool online per testare le nostre creazioni senza spendere un centesimo!
Il design per IPAD si base principalmente su due layout: Portrait e Landscape. Per intederci, il primo e’ quando l’IPAD e’ in posizione verticale. Il secondo quando e’ in orizzontale.
Cosa fare per rendere il nostro sito adattato a questi due differente layout?
Usando i CSS e’ possibile rendere il layout dinamico a seconda dell’orientamento dell’IPAD. Basta inserire le seguenti righe di codice nel nostro documento HTMl prima del tag di chiusura HEAD.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Ovviamente dovremo creare due documenti CSS differenti (e due layout distinti).
Quali sono le misure per il design IPAD?
Le “misure” del’IPAD sono rispettivamente 768px per la versione Portrait, e 1024px per la versione Landscape. Per un perfetto adattamento l’unico modo e’ creare due file CSS distinti (vedi sopra), anche se il lavoro diventa davvero lungo. In alternativa potete realizzare un layout web “classico” di 960px di larghezza, FLUIDO, ovvero adattabile a tutte le risoluzioni.
In questo modo avrete un buon compromesso di visualizzazione a metà strada dei due orientamenti. Per la versione Portrait il sito apparirà a pieno schermo e l’utente dovrà spostarsi poco per visualizzare l’interezza del sito (non visualizzando però lo sfondo ovviamente). Nell’altra versione invece l’utente non dovrebbe avere nessun tipo di problema (a patto che il layout sia fluido ovviamente).
Ora la domanda che vi dovete porre e’: devo far pagare il sito due volte (versione IPAD e versione MOBILE per altri dispositivi), facendo lievitare il prezzo (probabilmente nessuno sarà disposto a spendere tanto), oppure usare questo compromesso? A voi l’ardua sentenza.
Cosa fare per testare il nostro lavoro?
TESTALO CON IPAD!
Volete testare il corretto funzionamento del sito per IPAD ma non volete spendere 700€ per comprarlo? Usate il comodo tool online a questo indirizzo.
Il sito si presenta semplice ma curato e ci permette attraverso una perfetta simulazione di un IPAD gigante, di verificare la corretta visualizzazione del nostro sito.
Che dire davvero spettacolare da provare almeno una volta!
Ciao
ho trovato utile questo tuo articolo dato che ho problemi di adattamento riguardo un sito con ipad dato che utilizzo un impostazione di pagina più grande di 768 px.
Però ho un problema ,inserendo quel codice mi adatta bene la pagina su ipad,ma non mi carica lo sfondo del tema che utilizzo con wordpress.
C’è un modo per risolvere questo problema?
grazie mille in anticipo