• Programmazione » Programmazione » Creare siti per Iphone - Guida su come realizzare sito web per mobile

6 Consigli per ottimizzare il proprio sito web per iPhone

I siti web ordinari al giorno d'oggi ricevono più che mai traffico da dispositivi mobili. Anche se non avete pianificato nell'immediato di sviluppare un microsito per i visitatori in possesso di un iPhone, ci sono dei passi che possono rendere il vostro attuale sito maggiormente apprezzabile per quest'ultimi. Qui di seguito esploreremo svariate tecniche che potete utilizzare per ottimizzare i contenuti del vostro sito per questa fascia di utenti.

Usare gli stili ottimizzati per MobileSafari

Avete provato a visualizzare sull'iPhone il vostro sito? Come la dimensione e l'ordine degli elementi di una pagina influenzeranno l'esperienza di navigazione dell'utente? Avete bisogno di zoomare in un'area per leggerne i contenuti? Potete inserire facilmente del testo in un campo di ricerca?

Queste sono alcune delle questioni a cui punta lo sviluppo di un sito per l'iPhone. Considerate il numero di pixel allocati come riempimento fra le vostre opzioni di navigazione. Se non avete sufficiente spazio tra gli elementi della vostra navigazione, il vostro sito presenterà delle difficoltà per quegli utenti che navigheranno il sito senza un mouse. Un dito in media occupa 40-70 pixel, quindi dovreste considerare di lasciare dello spazio in più fra gli elementi della navigazione oppure renderli più larghi per permettere una facile interazione.

Fortunatamente potete apportare tali modifiche usando uno specifico foglio di stile per l'iPhone come viene discusso qui. In questo modo è possibile stilizzare il vostro sito separatamente per questi visitatori.

Settare lo zoom di default

MobileSafari vi permette di zoomare e ruotare le pagine per fruire più facilmente dei contenuti, ma potete facilmente minimizzare la necessità di farlo per i vostri utenti. Ad esempio, se la vostra home page viene caricata con dello spazio in eccesso ai margini, ciò oltrepasserà i limiti del display dell'iPhone. Ad ogni modo potete istruire MobileSafari per zoomare su del contenuto in una pagina settando la larghezza del viewport attraverso la seguente dichiarazione nell'header della pagina HTML:

<meta name = "viewport" content = "width = device-width">

Per settare la scalatura iniziale a 1.0, aggiungete anche questo codice nell'header della pagina:

<meta name = "viewport" content = "initial-scale = 1.0"> 

Se volete settare la scalatura iniziale e disattivare la possibilità dell'utente di ridimensionare la pagina, aggiungete quest'altro codice sempre nell'header:

<meta name = "viewport"       content = "initial-scale = 2.3, user-scalable = no"> 

Abbiamo utilizzato il meta tag viewport per migliorare la presentazione del contenuto web per l'iPhone. Ora diamo uno sguardo all'orientamento.

L'orientamento del viewport per l'iPhone

L'iPhone supporta viste di tipo "ritratto" e di tipo "paesaggio". Potete specificare un foglio di stile basato sull'orientamento del viewport, che viene determinato attraverso Javascript e aggiornato nell'attributo orient per l'elemento body. Per fare ciò usate:

body[orient="landscape"]

o

body[orient="portrait"]

Lo script seguente determina e setta l'orientamento dell'iPhone valutando la proprietà innerWidth dell'oggetto window e settando l'attributo orient del tag body ad intervalli regolari:

Cod. 1:

var updateLayout = function() {
    if (window.innerWidth != currentWidth) {
      currentWidth = window.innerWidth;
      var orient = (currentWidth == 320) ? "profile" : "landscape";
      document.body.setAttribute("orient" , orient);
      window.scrollTo(0, 1);
    }
  };
  
  iPhone.DomLoad(updateLayout);
  setInterval(updateLayout, 500);

Nascondere la toolbar dell'iPhone

Con una sola linea di Javascript potete nascondere la grossa toolbar:

window.scrollTo(0, 1);

Includete questa linea di codice allo script Cod. 1 e la toolbar riapparirà al cambiare dell'orientamento. Omettete semplicemente questa linea se volete mantenere la toolbar. Per maggiori approfondimenti, si legga “How to hide the address bar in MobileSafari”.

Ottimizzazione delle immagini

Se ricordate le ottimizzazioni delle immagini per i modem da 28.8 kbit/s potreste saltare questa sezione. E' importante considerare che la velocità media di connessione di un iPhone attraverso EDGE è considerevolmente più lenta di quella tipica dei computer tradizionali. Considerare la possibile velocità minima di connessione dei vostri utenti fa parte delle procedure standard di sviluppo. Vi consigliamo di eliminare l'utilizzo di immagini di grosse dimensioni o qualsivoglia media troppo pesante nel vostro sito.

Assenza del supporto Flash

Anche se potrebbe venir supportato in futuro, al momento chi possiede un iPhone non è in grado di vedere contenuti flash di un sito web. Che fare quindi se disponete già di contenuti in flash nel vostro sito? Crediamo sia il caso di presentare del contenuto alternativo per dispositivi non abilitati a flash. Ci sono diverse librerie liberamente usabili per verificare se il dispositivo è in grado o no di riprodurre contenuti flash.