Layout web reattivi per schermi mobili Introduzione, suggerimenti ed esempi

Questo articolo è parte del nostro "Serie Web Responsive Design" - composto da strumenti, risorse e tutorial per aiutarti a creare siti Web per gli utenti di tutte le piattaforme. Clicca qui per vedere più articoli della stessa serie.

I designer lo hanno più duro ora di prima. Non dobbiamo solo progettare dispositivi fissi, ma anche dispositivi mobili come tablet e smartphone, e visto che stiamo parlando di diverse dimensioni e risoluzioni dello schermo qui, è un compito enorme da affrontare. Alla luce di questo, web design reattivo potrebbe essere la soluzione migliore. Offre molto più di un semplice modello mobile; invece, l'intero layout del sito è progettato per essere abbastanza flessibile da adattarsi a qualsiasi risoluzione dello schermo possibile.

Con uno schema di progettazione così fluido ci sono evidenti vantaggi e svantaggi. Considera i miei esempi qui sotto per quanto il responsive web design possa rendere più fluida la transizione verso i dispositivi mobili.

Come funziona il design reattivo

Quando uso la parola “di risposta” in termini di web design intendo che l'intero layout risponde in base alla risoluzione dello schermo dell'utente. Immagina questo scenario: stai leggendo un sito web su un tablet, quindi passi a un altro dispositivo per un motivo o per un altro. La finestra del browser è ora ridimensionata. Un layout di web design reattivo presenterà schemi e un layout che si scompone e si reinventa con grazia. Dal punto di vista dell'usabilità, questa è una tecnica brillante.

La progettazione reattiva consiste nel creare un'esperienza omogenea indipendentemente dal browser o dalle dimensioni dello schermo del dispositivo. Ho trovato l'esempio perfetto da 'A List Apart' per illustrare il mio punto, che include anche le immagini dinamiche. La larghezza è impostata in CSS usando le percentuali per la maggior parte di tutti gli elementi del contenitore interno. I siti Web di dimensioni maggiori rispondono bene anche alla rimozione di contenuto dinamico come JavaScript quando non è supportato.

Perché progettare per dispositivi mobili?

È diventato evidente che un numero maggiore di utenti sta diventando mobile, e non solo per la navigazione in-the-go. I tablet PC hanno iniziato a cambiare nel contesto quando gli utenti sono online in classe. Progettare per dispositivi mobili è certamente un requisito negli standard web moderni. L'unico problema è scegliere il tuo metodo di sviluppo e indirizzare il tuo pubblico in modo appropriato.

Quando si avvia la codifica per risoluzioni dello schermo specifiche si finisce con troppi fogli di stile da gestire. Le query multimediali in CSS3 possono essere utilizzate per creare layout specifici per iPhone sia per la visualizzazione verticale che orizzontale. Dato che puoi predeterminare la densità dei pixel, è facile rinnovare qualsiasi modello HTML per dispositivi mobili.

(Fonte immagine: bradfrostweb)

Ma quando si codifica un layout per la progettazione reattiva, gli aspetti mobili vengono gestiti per impostazione predefinita. Sia agli utenti desktop che a quelli mobili verrà offerta un'esperienza simile e non sarà necessario preoccuparsi delle proprietà CSS esterne. L'unica ricerca che dovresti eseguire è la pianificazione per il più piccolo schermo possibile. I dati sul traffico di Google Analytics possono essere molto utili per questo.

Probabilmente non riuscirai a far funzionare il tuo sito web al 100% su ogni singolo dispositivo su cui gira ogni browser. Ma puoi scegliere come target una maggioranza in base alla larghezza media dello schermo. I modelli precedenti di iPhone utilizzano una risoluzione del display 320 × 480 che non è così incredibile. Scatterei per una larghezza minima di 240 px, o anche più piccola se si può montare.

Rimozione dello zoom predefinito

Se hai trascorso del tempo navigando sul Web su uno smartphone, noterai come i siti web vengono ridimensionati per essere visualizzati completamente all'interno dello schermo. Questo è per la comodità dell'utente poiché la maggior parte dei siti web non ha una controparte mobile, quindi il layout completo è la scommessa più sicura.

Ma quando inizi a creare un design mobile reattivo, lo zoom automatico può davvero rovinare gli elementi del tuo layout. In particolare, le immagini e i contenuti di navigazione potrebbero apparire piccoli o troppo grandi nel layout. C'è un meta tag speciale che puoi aggiungere nell'intestazione del documento che lo reimposta nella maggior parte dei dispositivi Android e iPhone.

Questo è noto come il meta tag viewport che imposta alcune variabili personalizzate all'interno del contenuto. Apple ha una pagina di documentazione relativa ad alcuni altri meta tag che dovresti esaminare, sebbene questi siano rivolti specificamente ai siti web su iOS. Il iniziale scala il valore è importante in quanto questo imposta automaticamente il tuo sito Web a uno zoom completo al 100%.

L'ultimo valore per user-scalabile rimuoverà completamente questa funzionalità di zoom in modo che l'utente non possa ridimensionare il layout. Ciò bloccherà il disegno in una dimensione in base alla larghezza del dispositivo. Nota che anche se disabiliti la funzionalità di zoom, un buon design reattivo si adatterà ancora durante la transizione da verticale a orizzontale su qualsiasi dispositivo! Ma ha senso bloccare un design reattivo e rimuovere le opzioni di ridimensionamento generiche.

Scala di immagini dinamica

Le immagini sono un altro aspetto importante di praticamente ogni sito web. Gli utenti di dispositivi mobili potrebbero non cercare video in streaming, ma le foto rappresentano una storia completamente diversa. Questi sono anche i maggiori colpevoli quando si tratta di layout che escono dal modello di box.

img larghezza massima: 100%;

La regola standard per i CSS è applicare una proprietà di larghezza massima a tutte le immagini. Dato che saranno sempre impostati al 100%, non noterai mai distorsioni. Quando l'utente ridimensiona la finestra del browser più piccola di quanto la tua immagine può gestire, si riaggiusterà automaticamente alla larghezza del 100% ridimensionata. Il problema è che Internet Explorer non è in grado di comprendere questa proprietà, quindi dovrai utilizzare un foglio di stile specifico per IE larghezza: 100%;.

Le immagini flessibili sono anche possibili se usi JavaScript o plugin jQuery. Ci sono alcuni sviluppatori molto intelligenti là fuori che hanno messo il tempo per costruire contenuti di immagini incredibilmente reattivi. Questo thread è solo uno dei tanti in Stack Overflow che presenta un approccio stravagante ma conveniente per risolvere i bug IE6 / 7.

Personalmente raccomanderei di attenermi al ridimensionamento delle immagini CSS naturali. Se il tuo sito web è in esecuzione su un browser mobile con JavaScript abilitato, molto probabilmente supporterà anche i CSS. Se vuoi davvero approfondire, dai un'occhiata a questo articolo in 24 modi per i disegni adattivi ...

Disegni toccanti

Gli sviluppatori Web possono dimenticare che gli utenti mobili non sono più su telefoni con tastiera come BlackBerrys. La maggior parte degli smartphone oggi utilizza interfacce touchscreen, che rendono uno scenario diverso dalle configurazioni di mouse e tastiera.

In quanto tale, dovrai considerare soluzioni alternative negli elementi mobili. I menu a discesa possono funzionare meglio se visualizzati come un singolo menu sul lato destro. La maggior parte degli utenti è in grado di toccare i collegamenti sul lato destro più facilmente della sinistra, ma entrambe le colonne funzionano per alleviare lo spazio. Utilizzando i rientri sui margini, è semplice identificare la gerarchia dei collegamenti senza richiedere alcun codice jQuery.

È anche buona norma aumentare le dimensioni di questi collegamenti di navigazione. Gli utenti mobili non hanno il lusso di schermi di grandi dimensioni offerti su desktop o computer portatili. È necessario mantenere il testo di grandi dimensioni, in primo piano, tapable e leggibile a tutti i costi. Si potrebbe anche voler ridimensionare se l'utente passa dalla visualizzazione verticale a quella orizzontale - una ricorrenza piuttosto comune durante la navigazione sul Web mobile.

Layout CSS personalizzati

In generale, è meglio adattare il layout e consentire il naturale degrado dei tuoi contenuti. Se si dispone di una barra laterale e di un'area del contenuto, è necessario impostarli in larghezze di percentuali o em, qualsiasi cosa possa essere ridimensionata con la finestra del browser. Se si applica a min-width questo alla fine interromperà parte del layout; quindi ora il contenuto della barra laterale viene visualizzato sopra il contenuto della pagina.

(Fonte immagine: Pepperson)

Se si considera come ciò influisce sul design generale, è molto più facile sviluppare fogli di stile esterni. Tuttavia, è probabile che si verifichino risoluzioni dello schermo che sono troppo piccole per il rendering del layout. Questo è lo scenario perfetto per aggiungere proprietà CSS personalizzate per rimuovere parti della pagina o riformattare del tutto il contenuto.

Attiva / disattiva contenuti extra

Esempi di blocchi di contenuti di grandi dimensioni includono moduli Web, menu dinamici, cursori di immagini e altre idee simili. Invece di rimuovere completamente questi elementi quando il layout diventa più piccolo perché non semplicemente nascondili in a “minimizzato” contenuto div? Puoi utilizzare CSS o JavaScript per eseguire le modifiche, ma alla fine probabilmente avrai bisogno di un codice JS per creare un pulsante di attivazione / disattivazione.

Questa alternativa è perfetta per mantenere la home page dinamica e ricca di contenuti multimediali. Invece di rimuovere completamente la navigazione a discesa o riorganizzare la struttura della pagina, puoi nasconderla all'interno di un div di contenuto. Se l'utente desidera visualizzare i collegamenti, tocca un pulsante di attivazione / disattivazione per aprire / chiudere il menu.

Questa formattazione è semplice, intuitiva e facile da utilizzare con i dispositivi touchscreen. All'interno del div è possibile posizionare ciascuno dei menu a discesa affiancati in un formato di colonna. Man mano che la finestra si ridimensiona ancora di più, si abbasseranno naturalmente l'una di seguito all'altra e aumenteranno l'altezza della pagina. Tuttavia, la possibilità di comprimere l'intero menu è facilmente raggiungibile e basta un solo tocco. Questo div switch è perfetto anche per i cursori di immagini in collaborazione con il ridimensionamento dinamico delle foto.

Utilizzo di query multimediali

Se uno schermo mobile rompe il tuo layout a 2 o 3 colonne, finirai con ognuna delle aree di contenuto impilate una sopra l'altra. L'intero sito sembrerebbe sanguinare e potrebbe risultare molto confuso senza aree di blocco distinte. Un'idea migliore è quella di aggiungere un bordo inferiore su ogni colonna, solo per i dispositivi mobili, usando un foglio di stile simile mobile.css.

Con questi nuovi stili i tuoi contenuti sono suddivisi in sezioni divisibili. L'attributo multimediale di cui sopra è appositamente progettato per indirizzare i dispositivi iPhone più vecchi in visualizzazione orizzontale. Ma si applicherà anche ai dispositivi con schermi inferiori a 480 pixel. Usa questo a tuo vantaggio in modo da poter determinare a che punto il layout “si rompe”.

Ci sono alcune altre opzioni che puoi usare per rilevare l'orientamento del dispositivo. Questa fantastica guida sui supporti CSS può darti qualche idea. Inoltre, il nuovo progetto mobile 320 e versioni successive offre uno standard per i CSS mobili @media stili. Questi possono essere inclusi direttamente nello stesso file mobile.css e applicare le regole per molti dispositivi diversi.

 / * Smartphone (verticale e orizzontale) ----------- * / @media solo schermo e (min-device-width: 320px) e (max-device-width: 480px) / * Stili * / / * Smartphone (orizzontale) ----------- * / @ schermata solo media e (larghezza minima: 321 px) / * Stili * / / * Smartphone (verticale) ---- ------- * / @media solo schermo e (max-larghezza: 320px) / * Stili * / / * iPads (verticale e orizzontale) ----------- * / @ solo schermo multimediale e (larghezza min-dispositivo: 768 pixel) e (larghezza dispositivo max: 1024 pixel) / * Stili * /

(Fonte: Hardboiled CSS3 Media Queries)

Strumenti utili

Skeleton - Beautiful Boilerplate for Responsive Mobile Design
Passando da adattivo a completamente reattivo

Showcase: Beautiful Responsive Designs

Spero che questi suggerimenti e le tecniche di progettazione ti incoraggeranno a creare layout entusiasmanti e reattivi non solo per gli schermi mobili, ma per qualsiasi dispositivo comune con la navigazione web. Per mantenere fluidi creativi, ho messo insieme una piccola vetrina di responsive web design mobili. Assicurati di controllare alcune delle caratteristiche più uniche e condividi i tuoi pensieri sul design o sull'argomento nell'area di discussione.

riagganciare la luna