Flessibili, primi layout mobili con CSS3

Alcuni esperti stanno progettando dispositivi mobili per diventare il mezzo dominante per la navigazione web entro cinque anni, sorpassando la navigazione su computer desktop. Indipendentemente dall'accuratezza di questa proiezione, è chiaro che la formattazione di siti Web per la visualizzazione ottimizzata per dispositivi mobili deve diventare un elemento fondamentale del web design e dello sviluppo. Ci sono molti modi per realizzare questo, ovviamente. Tuttavia, CSS3 fornisce un set di strumenti abbastanza ricco per la formattazione ottimizzata per i dispositivi mobili, facendo affidamento sulle funzionalità del browser del client anziché sul template back-end.

Passaggio 1. Pensaci in anticipo

Ci sono alcuni problemi che dovrebbero essere pensati prima di tuffarsi direttamente nello stile di un layout.

Navigazione Web mobile

In primo luogo, cosa si dovrebbe tenere a mente quando si progetta per i browser mobili? Bene, ecco alcune cose ...

Limita richieste HTTP: il trasferimento dei dati via 3G può essere abbastanza oneroso. Ciò include la limitazione delle immagini ove possibile (dal CSS, per esempio).
Dimensioni dello schermo diverse: I dispositivi mobili tendono a oscillare attorno alle larghezze dello schermo di 320-480 pixel, ma possono variare notevolmente a seconda del dispositivo. Quindi, la definizione di larghezze nel CSS è generalmente una cattiva idea per cose come paragrafi e DIV.
Ottimizza per un sottoinsieme: Ci sono tonnellate di dispositivi mobili, browser, SO, ecc. Cerca di concentrare i tuoi test su ciò che ritieni sia il più importante. Per me, questo include iPhone, iPad, Blackberry e Android. Questo elenco dovrebbe includere anche Windows Mobile, ma semplicemente non ho accesso a un dispositivo Windows Mobile.
Hover deve morire: Ok, è un po 'drammatico. Tuttavia, i touchscreen non tendono a supportare il passaggio del mouse. Quindi, quando crei i menu, non nascondere le cose dietro gli eventi al passaggio del mouse. Il passaggio del mouse dovrebbe essere utilizzato solo per migliorare alcuni effetti (come i cambiamenti di colore) che non forniscono contenuti importanti (come i menu a discesa).

"Il punto generale è sapere in anticipo che aspetto avrà il tuo sito in vari browser prima vederlo. "

Supporto browser (su desktop)

In secondo luogo, tieni a mente il supporto del browser. Il proverbiale "elefante nella stanza" è IE, ovviamente. Buone notizie, però! A quanto pare, i siti Web non hanno davvero bisogno di apparire esattamente uguali in tutti i browser. Purché non interferisca con il contenuto del sito Web, in genere un browser non in grado di elaborare CSS3 fornirà comunque un'esperienza più che accettabile. Il punto generale è sapere in anticipo che aspetto avrà il tuo sito in vari browser prima vederlo.

Passaggio 2. L'HTML

Il corpo

"Mantieni il markup semplice e pulito."

Non solo vogliamo produrre un codice HTML valido, ma vogliamo anche semplificarlo il più possibile. Sebbene sia sempre stata una buona idea mantenere l'HTML ottimizzato e privo di DIV non necessari, è ancora più importante ora con l'aumento della navigazione web mobile. Inoltre, molti degli effetti che richiedevano 7 tag DIV nidificati ora possono essere riprodotti con un po 'di CSS3.

Poiché questo non è un tutorial HTML5, rimarrò fedele a XHTML strict. Con questo in mente, molto del markup qui può essere reso ancora più pulito usando alcuni elementi HTML5. Quindi, ecco alcuni HTML per un layout tipico. Abbiamo una pagina contenente un'intestazione, un piè di pagina, un'area del contenuto e una barra laterale.

Il mio blog

Una voce su qualcosa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis est sit amet felis pellentesque vel egestas sapien iaculis. Mecenate eget quam nisi. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tincidunt tortor non mi ultricies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit a odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, a interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sit amet pellentesque lorem egestas sed. Nam adipiscing, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est. Vivamus ad arcu felis, eget porta odio.

Una voce su qualcos'altro
Mecenate vitae metus acest lobortis tincidunt laoreet et enim. Mecenate purus magna, condimento a mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus a pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut maschiuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam una ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.

Una terza voce
Mecenate vitae metus acest lobortis tincidunt laoreet et enim. Mecenate purus magna, condimento a mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus a pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut maschiuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam una ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.

Menu Blog
sottoscrivi
RSS

Sociale
Facebook
cinguettio

categorie
Qualcosa
Niente
Tutte le cose
Niente cose

archivio
Giugno 2010
Maggio 2010
Aprile 2010
Marzo 2010

Come puoi vedere, è un layout blog piuttosto semplice e tipico con alcuni articoli e alcune opzioni di menu nella barra laterale.

Metadati Viewport

Nel nostro elemento principale, inseriremo tutti i pezzi tipici come fogli di stile, tipo di contenuto, titolo, ecc. Tuttavia, c'è un pezzo in più che includeremo per appianare i browser mobili.

Questo è un piccolo tag di metadati, suggerito da Apple, per aiutare gli iPhone a rendere una pagina. In pratica, si adatta automaticamente alla pagina per il viewport e impedisce lo zoom. Molti altri browser mobili supportano anche questo, incluso il browser nativo di Blackberry. Nei miei test, mantenere questo tag non nuoce alla navigazione sul desktop. Quindi, mettiamocelo nella testa e dimenticatene.

Pensando al layout

Questo particolare tutorial si concentrerà sull'adozione del codice HTML sopra riportato e sullo styling in due layout. Un layout sarà mirato alla navigazione mobile e uno alla navigazione desktop. In pratica, sarà probabilmente utile suddividere tale layout in diversi "target" diversi. Tuttavia, per il gusto di questa semplicità, questo tutorial si concentrerà solo su questi due.

Passaggio 3. Lo stile mobile

disconoscimento

Lo scopo di questo tutorial non è quello di parlare di una ricca tipografia o di un brillante design grafico. Quindi, la presentazione qui è molto semplice. Ciò che è importante è il processo di pensiero che guida il foglio di stile.

L'approccio

La spinta principale di tutto questo è pensare alla progettazione di un layout mobile primo. La ragione di questo è che è probabile che qualunque cosa tu abbia in mente per un dispositivo mobile funzionerà anche su un desktop. Quindi, invece di finire con un layout mobile gettato insieme e un brillante layout desktop, inizierai con un brillante layout mobile e lo migliorerai per desktop. Ciò assicurerà anche che il tuo sito Web non perda il suo pubblico mentre il mondo diventa mobile.

L'ispirazione

Questo approccio è ispirato da Luke Wroblewski che ha parlato quest'anno ad An Event Apart a Boston. La sua presentazione era incentrata sul pensare "Mobile First".

Mentre questo tutorial non cattura la sua presentazione in alcun tipo di interezza, un pezzo di esso ha colpito a casa più del resto (per me). La tendenza attuale è che il design è di lavorare prima sulla versione desktop di un sito Web, quindi eliminarlo e creare un sito Web mobile se c'è tempo. Invece, dovremmo iniziare prima a progettare per il mondo mobile, quindi cambiare quel disegno come desiderato per il desktop. Il razionale è essenzialmente uno di miglioramento progressivo ... se il design è utile su dispositivi mobili, funzionerà anche su desktop. Il contrario, tuttavia, di solito non è vero.

Alcuni CSS

Quindi, pensiamo alla navigazione mobile per un momento. Gli schermi a scorrimento lunghi sono difficili da gestire. Quindi, prendiamo gli elementi dell'elenco dei menu del blog e li rendiamo più facili da gestire.

.barra laterale ul border-left: solid 1px #ccc; padding: 0 0 0 5px;  .sidebar ul li display: inline; padding: 0 5px 0 0px; border-right: solid 1px #ccc;

Questo dovrebbe darci un bel menù dall'aspetto pulito con alcuni separatori dall'aspetto tubolare. Noterai che non ho scelto di spostare il menu dalla parte inferiore dello schermo. I menu in basso possono essere utili nella navigazione mobile. Se si pensa di scorrere una pagina Web, quando si arriva in fondo si dovrebbe scorrere fino in fondo per andare da qualche altra parte. A seconda del dispositivo, lo scorrimento può essere alquanto gravoso. Ci sono pro e contro a questo metodo, ma in questo caso, penso che funzioni bene.

Tuttavia, mi piacerebbe spostare l'RSS sul banner in alto, quindi facciamolo anche noi.

h3.subscribe display: none;  .sidebar ul.subscribe position: absolute; top: 25px; destra: 10px; border: none; color: #fff;  .sidebar ul.subscribe li border: none;

A parte questo, il resto è praticamente solo un ridimensionamento dei caratteri degli elementi di direzione e la colorazione delle ancore. Per gli scopi di questo tutorial, ho incluso un reset CSS nella parte superiore del foglio solo per semplicità. Il foglio CSS completo può essere trovato nel codice sorgente per questo tutorial.

Come puoi vedere, non c'è niente di speciale nello stile mobile quando ci si avvicina al design da un angolo mobile. Invece di pensare, "cosa voglio che questo assomigli sul mio schermo", pensi "come posso usare lo stile per renderlo più utile su un dispositivo mobile".

Passaggio 4. Lo stile del desktop

Media Query

Nel caso in cui non l'avessi indovinato, tutta questa faccenda finirà per essere guidata dalla media query CSS3. Nel caso non lo si conosca, la query multimediale è un modo per il foglio di stile di attivare e disattivare le dichiarazioni in base a varie condizioni. Una di queste condizioni e l'argomento di questo foglio sono le dimensioni dello schermo.

Ancora una volta, il codice CSS completo può essere trovato nella fonte allegata a questo tutorial, ma esaminiamo questo per un momento:

.pg width: 800px; margine: 0 auto;

In questo caso, non vogliamo una larghezza di pagina di 800px a meno che non siamo sicuri che la finestra del browser dell'utente sia larga almeno 800 px. Altrimenti, ci ritroveremo con uno di quei fastidiosi scrollbar orizzontali.

Quindi, inseriremo quella dichiarazione (insieme a molte altre) all'interno di una query multimediale.

@media all e (min-width: 800px) .pg width: 800px; margine: 0 auto;

Che si legge abbastanza facilmente, giusto? Il "tutto" si riferisce a "usa questo stile per tutti i tipi di media". Ci sono altre cose che possono andare qui, come "print" per la stampante, ma non c'è un supporto consistente. Comunque, "all" funzionerà perfettamente per questo.

"Sovrascrivi" Stili precedenti

Metteremo molte altre cose all'interno di questa query multimediale, ma la cosa importante da ricordare è essenzialmente oltrepassare stili precedenti e aggiungere alcuni nuovi per ottenere il nuovo layout. Ciò consentirà ai browser che non supportano la query multimediale di tornare semplicemente sullo stile originale. Anche se lo sono ottimizzato per i dispositivi mobili, non c'è niente di sbagliato nel visualizzare quel layout su un browser desktop meno capace.

Ad esempio, sposteremo quella barra laterale dal fondo e renderemo gli elenchi come elenchi di nuovo.

@media all e (min-width: 800px) .sidebar ul border: none; padding: 0;  .sidebar ul li display: block; padding: 0; border: none;  h3.subscribe display: block;  .sidebar ul.subscribe position: static; top: auto; a destra: auto; border: ereditare; colore: ereditare;  .sidebar ul.subscribe li border: inherit;

Ciò posizionerà la sidebar a sinistra (combinata con un altro paio di float trovati nel foglio di stile) e posizionerà nuovamente il subscribe dove appartiene per le persone che esplorano il sito con una larghezza di almeno 800px.

Quindi, se apri la sorgente in un browser e la ridimensiona orizzontalmente, sarai in grado di vedere il flip di layout tra il formato desktop e il formato ottimizzato per i dispositivi mobili

Forse ti stai chiedendo, perché 800px? C'è qualcosa di magico in una larghezza di 800px? No. In effetti, direi che è troppo ampio. Con l'introduzione dello "snap" in Windows 7, direi che 600px dovrebbe essere la nuova larghezza target per un sito Web desktop. In questo modo, il browser può essere "agganciato" a destra oa sinistra su uno schermo a 1280 px e mantenere comunque il layout. Tuttavia, questo è davvero né qui né lì. Basta essere consapevoli del fatto che 800px non è niente di speciale.

Supporto del browser

Importante: Il sito Web sarà designato come versione mobile in IE8 e in basso. Va bene? Credo di si. Inoltre, l'ho già fatto e finora nessuno mi ha arrestato. Inoltre, il supporto per le query multimediali è promesso in IE9.

Passaggio 5. Metodi alternativi

Questo non è l'unico modo per realizzare questo. Tuttavia, lo scopo di questo tutorial era quello di mostrare un uso molto pratico per la query sui media e presentare alcune idee di layout mobili basati solo su CSS.

Detto questo, ecco alcuni altri modi per creare un layout mobile ...

Serve diversi modelli: Se hai accesso ai modelli per il sito, un sistema di tema può essere messo in atto dove viene rilevato il browser richiedente, quindi viene fornito un modello HTML diverso in base al tipo di browser (mobile o meno). Questo di solito è accompagnato da un insieme separato di CSS.
sottodomini: m., mobile. e .mobi tendono ad essere gli standard qui, dove viene offerto un sito web completamente diverso. Detto questo, di solito è lo stesso di "servire modelli diversi" per evitare la duplicazione dei contenuti.
Layout fluidi: Si può anche rendere il loro layout completamente fluido in modo tale che, indipendentemente dalle dimensioni della finestra del browser, il contenuto si aggiusti da solo. In effetti, il foglio di stile "mobile" in questo tutorial è un layout fluido. La cosa bella dell'utilizzo di query multimediali è che puoi ridurre le immagini di sfondo e produrre meno richieste HTTP.

Ci sono probabilmente molti altri metodi di gestione della navigazione web mobile, ma spesso arriverà a un ibrido di qualche tipo. Tuttavia, che si tratti di un layout fluido con determinati punti di "kick" basati sulla query multimediale o di un reindirizzamento del sottodominio che serve diversi modelli, l'importante è iniziare a pianificare i layout mobili in anticipo, in modo che i siti Web non diventino sempre meno utili rispetto al prossimi 5 anni.

Codice