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, andremo a stilizzare i diversi elementi della nostra pagina in modo da:
- offrire una visione corretta sui display degli smartphone (notevolmente più piccoli di quelli di un PC);
- adattare l’interfaccia alle gestures tipiche dei display touchscreen (con particolare attenzione al tap, cioè il corrispondente "touch" del click).
Quando andate a creare lo stile del vostro m-site ricordate che i vostri utenti sono in cerca di contenuti fruibili: essenzialità e funzionalità sono due parole d’ordine imprescindibili quando si studia il design di un sito ottmizzato per smartphone.
Nello stilizzare gli elementi della nostra pagina, quindi, seguiremo alcune linee guida generali:
- gli elementi della pagina saranno disposti gli uni sotto agli altri (cd. impaginazione "a colonna");
- gli elementi strutturali dovranno sfruttare l’intera ampiezza del display (utilizzando una width del 100%);
- i comandi (come, ad esempio, link e bottoni) dovranno essere piuttosto grandi in considerzione del fatto che il tap è meno preciso del click di un mouse;
- per i testi utilizzeremo font ad alta leggibilità (un font standard come sans-serif o verdana ad esempio) ed eviteremo di utilizzare dimensioni troppo ridotte (a mio avviso 16px è la dimensione minima per garantire una buona leggibilità);
- per le immagini dovremo settare una max-width in modo da evitare che eventuali file di grandi dimensioni compromettano la visualizzazione del nostro layout.
Un CSS Reset per smartphone
Di abitudine inizio sempre i miei fogli di stile con un bel CSS Reset (per chi non sapesse di cosa si tratta, il CSS Reset è un insieme di istruzioni CSS che hanno lo scopo di uniformare la stilizzazione di default prevista in ciascun browser al fine di evitare differenze di visualizzaione sulla base del browser in uso).
Le prime righe del nostro CSS "mobile" saranno queste:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video {
display: block;
}
a img { border: 0; }Stiliziamo il body di un m-site
Uno degli elementi della pagina più importanti da stilizzare è, ovviamente, il body: cioè il corpo della pagina.
body {
background-color: #FFF;
font: 16px sans-serif, verdana, thaoma, georgia;
color: #000;
text-size-adjust: none;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}Come potete notare ho optato per un grande contrasto (sfondo bianco e testo nero) e per un font standard (sans-serif) con una buona dimensione (16px).
Unica proprietà degna di nota è text-size-adjust: si tratta di una proprietà non-standard di CSS3 appositamente dedicata ai browser mobili. Grazie a questa proprietà possiamo istruire il browser circa il comportamento da tenere in relazione alla dimensione del testo (ovvero se adattarla automaticamente alle dimensioni del display oppure non fare nulla).
Nel nostro caso, trattandosi di sito ottimizzato per dispositivi mobili, abbiamo deciso di settare questa proprietà come "none" in quanto vogliamo avere il controllo completo circa l’aspetto dell’output.
Regole di stilizzazioni per elementi comuni
Dopo aver stilizzato il body procediamo specificando alcune regole di stile per gli elementi tipici di una pagina web: titoli, paragrafi e link:
h1, h2, h3 { font-size: 1.3em; font-weight: normal; color: #333; margin-bottom: 3px; }
h1 { margin-bottom: 10px; }
a, a:active, a:visited, a:hover { text-decoration: none; color: #006699; }
p { margin-bottom: 10px; }Nulla di particolare da segnalare in questo caso, si tratta di una stilizzazione assolutamente comune ed analoga a quella di un sito per desktop.
Stilizzare le immagini
Come detto dobbiamo evitare che eventuali immagini troppo grandi compromettano il layout. Vediamo quindi le nostre regole CSS:
img { display: block; max-width: 99%; height: auto; margin: 0 auto; }Come avrete notato abbiamo previsto di gestire le immagini come block (nativamente le immagini sono elementi inline) con una larghezza massima pari al 99% dell’ingombro disponibile. Si noti che abbiamo utilizzato non width ma max-width: in questo modo se l’immagine è più piccola del 99% dello spazio disponibile non succederà nulla, in caso contrario la larghezza verrà adattata allo spazio disponibile e l’altezza verrà settata automaticamente rispettando le proporzioni originali dell’immagine.
Nella prossima lezione vedremo come stilizzare i comandi della pagina (link, bottoni, form) al fine di adattarli ad un "utilizzo touch".
