Creare One Web Design per tutti i dispositivi - dummies

Se l'idea di progettare un iPhone ritratto e paesaggio web design e un ritratto di iPad e un design del paesaggio - solo per una pagina web - ti senti sopraffatto, ecco un po 'di sollievo.

Il browser Web Safari fa un buon lavoro di visualizzazione della maggior parte dei siti Web su Internet, anche se tali siti non sono progettati specificamente per questi due dispositivi. Se si desidera l'opzione più semplice per alcuni o tutti i siti Web, è possibile creare un design che sia "abbastanza buono" sul desktop, nonché su iPhone, iPad e iPod touch.

Se decidi di creare un solo progetto, assicurati di seguire queste linee guida:

• Non usare Adobe Flash. Scusa - questo è un peccato per gli sviluppatori Flash, ma a meno che Apple non cambi la sua posizione, qualsiasi cosa progettata in Flash non funziona nemmeno su un dispositivo iOS. Di conseguenza, non utilizzare Flash in nessuno dei tuoi siti.

• Crea un disegno di larghezza non superiore a 980 pixel. Sebbene l'iPad mostri disegni di 1024 pixel in modalità orizzontale e solo 768 in modalità verticale, Safari ridimensiona automaticamente il design della pagina Web se crei una pagina e non la ingrandisci troppo.

  Mantenere il numero di pixel tra 960 e 980 è l'ideale se si desidera che il tuo sito riduca automaticamente le dimensioni. Tieni presente, tuttavia, che il ridimensionamento automatico delle immagini può portare a un testo sfocato e modifiche ai tuoi progetti che potrebbero lasciarli meno di pixel perfetti.

• Crea disegni che si estendono per più di 600 pixel lungo la pagina. Se i tuoi siti si adattano perfettamente a un monitor con una risoluzione di 800 x 600 pixel, probabilmente sono troppo corti per apparire belli su un iPad. In questa figura, è possibile vedere un esempio dello spazio rimasto in una pagina Web progettata per adattarsi a meno di 600 pixel dall'alto verso il basso.

  

Se stai cercando l'opzione di design "Goldilocks" (non troppo lunga e non troppo corta), progetta le tue pagine in modo che assomiglino a quelle mostrate qui. In questo sito per l'attore Yuval David, puoi vedere come l'iPad visualizza una pagina larga 970 pixel e quasi 2000 pixel dall'alto al basso.

Si noti che l'intero disegno viene automaticamente ingrandito in modalità orizzontale per riempire la larghezza di 1024 pixel e viene ridotto a soli 768 pixel per adattarsi alla modalità verticale.

Per i migliori risultati, prova i disegni della tua pagina web su un iPad o iPhone per assicurarti che la tua pagina principale riempia l'intero schermo in modalità verticale. Assicurati inoltre che il testo e le immagini non diventino troppo sfuocati per leggere o apparire troppo distorti quando vengono ingranditi o ridotti automaticamente.