Come progettare una pagina web per iPhone
Dal lancio 2007, l'iPhone ispira web designer a creare pagine ottimizzate. L'iPhone include Safari; si può anche scaricare Opera da App Store. Non è obbligatorio ridisegnare il sito: entrambi i browser visualizzano pagine come su desktop. Ma un design snello carica più veloce su iPhone. Servono conoscenze CSS, HTML e iPhone per testare.
Cosa serve
- iPhone
- Software editing HTML e CSS
Istruzioni
- Aprire il file ".html" della pagina corrente col software HTML/CSS. Anche editor base vanno bene: Blocco note (Windows), TextEdit (Mac).
- Aggiungere elemento "<link>" nella sezione "<head>" dell'HTML che rimanda a nuovo file ".css" (es. "iphone.css"). Stesso percorso degli altri CSS. Includere media query per caricarlo solo su dispositivi max 480px. Esempio:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/iphone.css" type="text/css" /> - Creare nuovo file ".css" nell'editor: "iphone.css". Scrivere come CSS normale, mirroring dello stile principale. Aprire CSS principale come riferimento.
Per iPhone: layout a colonna singola, larghezza 100% per riempire schermo. Nascondere elementi non necessari con "display:none". Sperimentare finché il design soddisfa. - Caricare il nuovo file CSS nella sezione del sito indicata nell'elemento "<link>". Caricare l'HTML rivisto sostituendo l'originale.