Ottimizzare CSS per iPhone

Quasi tutti i siti internet sono visualizzabili dall’iPhone, eccezione fatta per quelli costruiti con Flash. Visualizzare una pagina web su iPhone, non vuol dire avere quella pagina ottimizzata per tale piattaforma. Noi pero’, come web designer, dobbiamo capire e sapere come si fa ad ottimizzare un sito per iPhone.

La teoria e’ molto importante, ma noi ci basiamo sulla teoria di San Tommaso:”se non vedo non credo”, e quindi sulla tecnica “fammi veder come si fa, anziche’ spiegarmelo”. Ecco perche’ passo subito alla pratica:

Se proviamo ad accedere alla stessa pagina da iPhone, la visualizzeremo, ma e’ lontana dall’ essere ottimizzata per il supporto di Cupertino.

Vediamo come ottimizzarla, partiamo dal codice base Html della pagina:

I Web Design




I Web Designer


Chi Siamo
IWebDesigner.it e' un progetto creato da due ragazzi che lavorano nel mondo del Web da diversi anni.

Web Designer per professione da 15 anni, totalmente sconosciuto ai professionisti in questo campo, puo' vantare diverse collaborazioni con societa' di altissimo livello sempre nel campo del Design e del Web. Produce video pubblicitari, crea loghi su misura e brandizza l'imbrandizzabile per chiunque abbia un portafogli degno di nota e ne faccia richiesta.

Zep, SEO e Web Master, lavora in questo campo da "soli" 10 anni e non ne ha ancora abbastanza. Anche lui, uno sconosciuto qualsiasi, possiede un portfolio di tutto rispetto riguardante soprattutto clienti di grosso calibro di oltre oceano. 

Insieme, questi due squinternati, compiono azioni furtive di abbellimento di siti web, indicizzazioni occasionali e restyling di interi portali, muovendosi come delle ombre in una notte buia e tempestosa.

Ora, e' arrivato il momento di far risuonare nell'aere Italiano i nomi di Zep e Magoo. =)

Prepariamo un foglio di stile separato per iPhone

Per specificare un foglio di stile per iPhone, bisogna sostituire il tag con il collegamento al foglio di stile nel documento Html di esempio:

I Web Design

Cosa abbiamo fatto? Abbiamo commentato il richiamo al CSS del documento Html, e abbiamo inserito il foglio di stile per iPhone, denominato iphone.css, che sara’ richiamato per dimensioni di larghezza dello schermo minori di 480px. Poi abbiamo detto di richiamare il default.css solo nel caso lo schermo abbia larghezza superiore a 481px.

Contollare lo scaling della pagina

Fatto tutto questo, a meno che non si imposti diversamente, Safari su iPhone presuppone che la pagina sia larga 980px. Nella maggior parte dei casi funziona bene; tuttavia , si stanno per formattare i contenuti per le dimensioni piu’ piccole del’iPhone, quindi si deve fare in modo che Mobile Safari lo sappia; aggiungiamo nel codice Html:

Questo tag viene ignorato dai browser diversi da Mobile Safari, per cui possiamo includere senza problemi.

Ultimato tutto questo processo, abbiamo preparato la nostra pagina Html per l’ottimizzazione e il rimando al Css per iPhone; ma manca il foglio di style della piattaforma di Cupertino. Per questo vi rimando al prossimo articolo dove costruiremo il css per iPhone, il nostro iphone.css.