Realizzare un sito per il mobile: Parte 2

giu 11, 2010   //   by admin   //   Blog, Tutorial, Web  //  No Comments

Questa settimana come promesso approfondiamo il tutorial sulla realizzazione di un sito per il mobile.

Entriamo nel vivo della realizzazione analizzando i fattori essenziali dal punto di vista del design.

1) Layout fluido

Innanzitutto la parola d’ordine è semplicità. Il layout non dovrà tenere conto del sito originale, e sarà indispensabile tenere conto delle varie dimensioni/orinetamento dei telefoni cellulari. Ogni mobile ha le sue dimensioni e non tutti come iPhone hanno il doppio orientamento verticale/orizzontale, quindi diventa necessario realizzare il sito con un layout fluido e possibilmente su un unica colonna con tutti i contenuti posizionati verticalmente, avete presente i siti Single Page, ecco dovremo fare una cosa simile.

2) Navigabilità

Tutte le informazioni non necessarie sarà utile eliminarle e creare una navigabilità fondata su un unico livello in modo tale da poter velocemente ritornare indietro e continuare la navigazione.  Possono tornare utili i link alle pagine successive e precedenti oppure il link ben visibile per tornare all’homepage.

3) Link

Sui cellulari visto l’assenza del mouse, possiamo evitare di inserire l’hover, meglio invece aggiungere degli accesskey. Non devono mai mancare invece i link tel e sms. Sotto trovate un esempio di come devono essere inseriti.

<pre>
<pre><code><a href="tel:3498686323">Chiamami</a>
<a href="sms:</code><code>3498686323</code><code>">Mandami un sms</a>
</code></pre>
</pre>

4) I Font

Al di là del font che decidete di utilizzare è sempre meglio specificare la dimensione tramice CSS in percentuale o em, meglio ancora se specificate small/normal/large.

5) Dimensione della Pagina

Il peso di ogni pagina non dovrebbe superare i 25 kb, per questo NO assoluto all’uso di Javascript e Object, le immagini possiamo utilizzarle ma con accortezza, limitiamoci quanto è più possibile. Altra cosa che possiamo fare per diminuire il peso del sito è comprimere i CSS, un consiglio che vi do’ a prescindere dal sito per il mobile è di scrivere i CSS su una riga, eliminando tutti gli spazi inutili come nell’esempio.


ul.news { float: left;  height: 210px; width:230px; margin: 0 15px 0 0; padding: 0; }
ul.news li { display: block; float: left; margin: 0 0 5px 0; }
ul.news li span { font-size: 1.2em; font-weight: bold;}
ul.news li a {text-decoration: none !important; }
ul.news li a:hover {text-decoration: none !important; }

Altro aiuto per caricare più velocemente la pagina è tramite il controllo della cache, basta una riga di codice posizionato nel <head> delle pagine per dare istruzione affinchè il browser tenga in memoria tutto ciò che è già stato caricato in un arco di tempo definito da noi.

</pre>
<code><meta http-equiv="Cache-Control" content="max-age=300"/></code>
<pre>

Il content max-age indica in secondi il tempo di memorizzazione dei contenuti caricati

Anche per oggi è tutto. La prossima settimana vedremo come realizzare il SEO e alcuni utili strumenti per realizzare il sito per mobile.

Secondo voi c’è qualcos’altro da aggiungere?

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • email
  • FriendFeed
  • Google Buzz
  • LinkedIn
  • Netvibes
  • RSS
Tag:,

Leave a comment

Blog Categories

News in anteprima

  • La vacanza da cani
    Se è vero che il sito web è  diventato il primo business per le aziende, il settore alberghiero ne è ...
  • Non utilizzi Windows? Chiedi il rimborso!
    Per tutti coloro che lo volessero da oggi è possibile  richiedere il rimborso per la spesa sostenuta nell'acquisto di un ...
  • Lo shopping arriva su twitter
    Twitter metterà a disposizione delle aziende uno strumento per promuovere offerte. Si chiama @earlybird è gli utenti in ...

Ultimi Articoli di Tutorial

Ultimi Articoli di Showcase

  • 10 Siti internet Luxury Hotel
    Nel post di questa settimana voglio condividere con voi 10 siti internet Luxury Hotel che ho trovato navigando sul web ...
  • Web marketing che forza
    Quanto è importante il marketing e il web marketing per promuovere un'attività? Domanda retorica ovviamente! E' fondamentale, ma quanto può ...

Commenti

Tag