Guida sviluppo siti per dispositivi mobili

In questa guida cercheremo di affrontare, in modo semplice e sintetico, i principali aspetti relativi alla creazione di un sito web ottimizzato per dispositivi mobili. La capillare diffusione degli smartphone e dei tablet rende, infatti, indispensabile un adattamento delle comuni tecniche di web design al fine di realizzare pagine web idonee ad essere visualizzate correttamente su questo tipo di...

Vediamo di fare chiarezza e di distinguere subito due concetti tra loro differenti ma troppo spesso confusi: creare una versione mobile di un sito web è diverso dal creare una App o una Web-App! Cos'è una App? Su ogni smartphone o tablet - sia esso Android, iOS o altro - è possibile installare delle appllicazioni (più comunemente note come App) le...

La prima scelta che ci si trova ad affrontare nella creazione della versione mobile di un sito già esistente, consiste nella scelta circa la realizzazione di un nuovo sito web appositamente concepito per la visualizzazione su dispositivi mobili (sito ad hoc) oppure optare per l'adattamento del sito "normale" alle nuove esigenze della mobilità (versione adattata). A prima vista la seconda...

Nello sviluppare pagine web destinate a smartphone e tablet è necessario tenere in considerazione le caratteristiche peculiari di questo tipo di dispositivi. Vediamo di elencare di seguito alcune cose che è necessario tenere bene a mente: la grandezza del display è piuttosto ridota, soprattutto negli smartphone, e ciò impone una particolare attenzione in termini di design ed accessibilità dei contenuti; fatta eccezione...

Se sul Web ci siamo abituati a sbizzarrirci con infiniti layout e combinazione di spazi, progettando pagine web destinate agli smartphone dovremo rivedere le nostre ambizioni creative o, quanto meno, ridimensionarle alla limitata dimensione dei display destinati alla visualizzazione del nostro lavoro. Nota: la risoluzione video varia, ovviamente, a seconda del modello; la gran parte degli smartphone di nuova generazione...

Terminata la fase introduttiva entriamo nel vivo della nostra guida: vediamo quindi come iniziare a costruire l'ossatura HTML della nostra pagina web ottimizzata per dispositivi mobili partendo, come logico, dalle intestazioni. In questa lezione, infatti, vedremo come configurare correttamente l'header del nostro m-site (abbreviazione di "sito mobile"). L'intestazione della pagina, infatti, è un elemento fondamentale affinche il nostro sito web...

Nella lezione precedente abbiamo visto come configurare correttamente i meta-tag specifici per un m-site. In questa lezione vedremo come aggiungere, sempre all'interno delle instestazioni del nostro sito, altri elementi utilissimi che introducono caratteristiche interessanti compatibili con gl iPhone e più in generale con i dispositivi equipaggiati con il sistema operativo mobile iOS. Il browser Safari Mobile, infatti, riconosce ed interpreta...

Vediamo ora come configurare un'icona per il nostro m-site o per la nostra web app. Questa operazione è molto importante in quanto consente agli utenti di visualizzare la nostra icona nella home screen del proprio devices (iPhone o iPad) esattamente come accade per le app native installate sul dispositivo. Inoltre questa icona può essere utilizzata nei preferiti di Safari Mobile...

In questa lezione vedremo una serie di meta-tag specifici per Chrome e dispositivi Android, grazie ai quali potremo specificare un'icona per l'aggiunta del sito alla homescreen del dispositivo, definire l'apertura full-screen (modalità immersiva) e personalizzare il colore della toolbar del browser. Impostare un'icona per l'homescreen di Android Nella lezione precedente abbiamo visto come impostare un'apple-touch-icon da utilizzare sui dispositivi iOS. Vediamo...

Come abbiamo già vsto alla lezione .5 di questa guida, il layout di base di un m-site è piuttosto semplice con i diversi elementi della pagina incolonnati uno sotto all'altro. Al fine di proseguire nel nostro percorso didattico immaginiamo di voler realizzare un semplice m-site di un fiorista che ha deciso di creare una piccola enciclopedia di fiori fruibile attraverso...

Nella lezione precedente abbiamo tracciato un semplice scheletro HTML con la macro-struttura del nostro nuovo m-site. In realtà quello che abbiamo visto non è altro che una comune pagina HTML (ad esclusione di alcuni meta-tag specifici), ciò che la renderà una pagina mobile optimized sarà il nostro foglio di stile CSS. Attraverso l'utilizzo della sintassi dei fogli di stile, infatti,...

Nella precedente lezione abbiamo visto le prime istruzioni per il nostro foglio di stile. In questa lezione della nostra guida allo sviluppo di siti per dispositivi mobili vedremo come stilizzare i 4 elementi strutturali della nostra pagina web: header, menu, contenuto e footer. Come detto questi quattro elementi saranno disposti in colonna: cioè uno sotto all'altro. Considerate le dimensioni ridotte...

Un piccolo vezzo che mi piace applicare ai siti mobili che sviluppo è quello di settare l'altezza minima della pagina in base a quella del display. Lo faccio perchè, diversamente, pagine con poco contenuto risulterebbero esteticamente poco gradevoli con il footer troppo ravvicinato all'header. Una tecnica piuttosto semplice per ottenere questo risultato consiste nell'utilizzare un po' di Javascript per fare...