Come pianificare l'arrangiamento dei contenuti per la progettazione reattiva

In un recente post, ho discusso di come contenuto visivo inerente a progettazione del layout. Tuttavia questo argomento è molto dettagliato e si divide in molti sotto-argomenti, uno dei quali è organizzazione visiva per layout reattivi.

In questo post, vorrei approfondire i contenuti reattivi per esaminare alcune best practice per riorganizzare il contenuto per schermi più piccoli. Nella progettazione di UI e UX, non esiste una risposta giusta per ogni progetto, ma ce ne sono tendenze che funzionano bene, e da queste tendenze puoi costruire le tue idee.

Riorganizzare le griglie agli elenchi

Ogni sito usa qualche tipo di griglia sia che sia visibile o meno. Il contenuto in una griglia solida spesso si raggruppa orizzontalmente su monitor più ampi, ma ciò non ha senso su dispositivi più piccoli. Il miglior rimedio è quello di abbattere queste griglie su schermi più piccoli, e convertire gli articoli in liste.

Esempio 1: Wellington City Council

Dai un'occhiata al sito web del Wellington City Council che utilizza un numero di sezioni in stile griglia sulla home page.

C'è una piccola presentazione di link quadrati che riduce come ridimensiona la finestra del browser. Anche la sezione del footer diventa più piccolo, ed eventualmente converte in una lista verticale di link.

Su telefoni molto piccoli con una larghezza di 320 px è necessario progettare per le dimensioni del dispositivo. Nel caso di un iPhone il dispositivo è più alto di quello più largo quindi è logico organizzare il contenuto in questo modo.

Esempio 2: hamburger di Mooyah

Dai un'occhiata alla home page di Mooyah e prova a ridimensionare il layout. C'è una piccola area di presentazione che contiene tre elementi sullo schermo del desktop, ma questo si restringe per mostrare solo un elemento sul cellulare (aggiungendo più diapositive nascoste al widget).

Le due scatole promozionali che pubblicizzano l'app e il menu di Mooyah rimangono fisse fianco a fianco fino a quando lo schermo diventa abbastanza piccolo per riorganizzarli verticalmente.

Il “Mettiti in comunicazione con noi!” la sezione inoltre riorganizza il contenuto in modo che ogni post sociale ottiene più spazio possibile. In generale, i monitor widescreen sono i più ampi e gli schermi smartphone sono i più alti.

Esempio 3: mercato tematico

Quando si progetta un layout con una griglia, è necessario prendere in considerazione stili di layout sia ampi che alti prima di scrivere una singola riga di codice. In questo modo sarai pronto a costruire punti di rottura che hanno senso.

Una pagina con un layout di griglia completo dovrebbe ridurre le dimensioni delle scatole prima di romperli su una nuova linea. Ad esempio, il mercato tematico ha un fisso larghezza massima di 1240 e la griglia contiene quattro blocchi per fila.

Come lo schermo diventa più piccolo questi blocchi ridurre in larghezza, ma alla fine abbattersi a lasciare tre scatole per fila. Alla dimensione più piccola, ottieni una scatola per riga, e così via ha molto spazio per testo e immagini a brillare.

C'è sempre un equilibrio di mantenendo quante più informazioni in vista possibile combinato con la necessità di rendere leggibile il testo. Più costruisci i layout della griglia, più facile sarà trovarlo bilanciamento della disposizione dei contenuti.

Nascondi o rimuovi colonne

Monitor più ampi e più supporto per il browser consentire agli sviluppatori di creare layout incredibilmente complessi. Vedo spesso blog con tre o anche quattro colonne che occupa una buona porzione dello schermo.

Tuttavia, i dispositivi più piccoli necessitano di un flusso di contenuti ha senso in senso verticale. Ho trovato due opzioni per maneggiando le barre laterali eccessive:

1. Lasciateli sotto il contenuto principale
2. Nascondili del tutto

Esempio 1: Stop Premere

Dai un'occhiata al sito web di Stop Press. Esso ha quattro colonne verticali sul mio monitor desktop.

La colonna di sinistra è un menu di navigazione verticale, la colonna successiva è la colonna di contenuto principale con articoli recenti. Quindi abbiamo due colonne della sidebar diverse traboccanti di extra “a parte” soddisfare.

Come ridimensiona la finestra del browser, queste colonne ridurre lentamente le dimensioni. Il primo ad andare è la navigazione a sinistra che viene nascosta dietro l'icona di un menu di un hamburger.

Il prossimo punto di interruzione nasconde la colonna centrale insieme ai principali pulsanti di condivisione social. Poi, finalmente, sugli schermi più piccoli, la barra laterale più a destra scompare completamente lasciando solo la colonna centrale principale di contenuto.

Nessuno dei contenuti della barra laterale viene visualizzato sotto il contenuto principale. Suo completamente nascosto alla vista, e questa è una scelta perfettamente accettabile ridurre il carico della pagina e per mantenere l'altezza della barra di scorrimento di dimensioni adeguate.

D'altra parte, molti blog muovi la barra laterale sotto il contenuto principale come su Concept Art Empire che presenta i post correlati nella barra laterale alla fine scendere sotto il contenuto.

Esempio 2: Blog Wishpond

Anche il Blog di Wishpond rimuove completamente la barra laterale dallo schermo su finestre più piccole. L'area della barra laterale contiene in genere pubblicità, moduli di iscrizione e collegamenti post correlati. Nessuno di questi contenuti è vitale ma può aggiungere valore ai visitatori.

Mi piace seguire a approccio ibrido dove sposto la barra laterale sotto il contenuto, ma nascondo anche alcuni elementi nella barra laterale oltre un certo punto di interruzione.

Ad esempio, se ho tre blocchi di annunci nel layout completo, posso nascondere due di questi spazi pubblicitari sui dispositivi mobili. Questo rende accessibile il contenuto della barra laterale ma non ingombra la pagina con contenuto eccessivo.

Esempio 3: Madame Gautier

Mi piace anche come Madame Gautier usi il loro “Ultime notizie” barra laterale sulla home page. Alla fine scende sotto il contenuto, e occupa una posizione di visualizzazione completa sulla pagina.

Quasi ogni sito web avrà almeno una barra laterale nel design. Se si tratta di una barra laterale di tutto il sito o solo di qualcosa che appare su un modello di pagina, il stile di progettazione side-by-side è popolare perché si adatta più contenuto sullo schermo.

È la vostra scelta come gestire il contenuto. È possibile rilasciare la barra laterale in basso, nasconderlo del tutto o utilizzare un ibrido di queste due tecniche. Ma dovresti fare la tua scelta in base alla rilevanza della barra laterale, e la sua necessità alla pagina.

Regola e spreme i margini

Ci sarà sempre un punto in cui il contenuto non può essere spremuto qualsiasi ulteriore, e una sezione deve scendere sotto l'altro.

Di regolando i margini prima di ridurre il contenuto della pagina, dai ai lettori una gamma più ampia di contenuti tra cui scegliere.

Esempio 1: One World

Il footer su One World è un grande esempio. Esso ha i collegamenti footer in tutto il sito galleggiavano proprio con un modulo di iscrizione via email sulla sinistra.

Man mano che il layout si ridimensiona, i margini e i paddings tra questi elementi si restringono. Le colonne del link avvicinarsi, e il modulo di iscrizione diventa un po 'più piccolo, pure.

Passato un certo punto, ha solo senso rilascia i collegamenti sotto il modulo di registrazione, e dare il footer molto spazio per respirare.

Sì, rende la pagina più lunga e sì, è necessario più tempo per scorrere verso il basso, ma a questi piccoli punti di interruzione si può presumere che gli utenti siano su dispositivi orientati verticalmente.

Esempio 2: Golden Isles

Un altro esempio che amo è la home page Golden Isles con la sua stile di navigazione unico. Quando ridimensionate la finestra del browser, i collegamenti nav spremere insieme. Alla fine loro rompere da una sola riga in due file, quindi giù in colonne di dimensioni molto ridotte.

Altri articoli sulla pagina seguire lo stesso schema. Questo esempio dimostra il potere di ridimensionando i margini prima di riorganizzare completamente il layout.

Flusso verticale su schermi più piccoli

Il contenuto della pagina dovrebbe flusso naturale, e allineamento verticale ha senso sul cellulare. Ciò significa che devi considerare i blocchi di contenuti in-page a aggiorna lo stile del contenuto di conseguenza. Ciò include paragrafi, intestazioni, blockquotes, elenchi non ordinati e anche caselle di contenuto personalizzate.

Esempio 1: singolo post di BodyBuilding.com

Prendiamo ad esempio questo post BodyBuilding che usa piccole scatole per mostrare diversi allenamenti di glutei.

Queste scatole includono miniature sul lato destro per dimostrare l'esercizio. Su schermi più piccoli, queste miniature abbattere su una nuova linea, ed eventualmente impilare uno sopra l'altro.

Il tuo CSS reattivo dovrebbe tenere in considerazione queste piccole minuzie per ogni pagina del sito web.

Esempio 2: Vanity Fair

Per un esempio più ampio, controlla la pagina iniziale di Vanity Fair che riorganizza completamente il dispositivo di scorrimento della storia in primo piano. Su un desktop a schermo intero le storie elencano i titoli con un'immagine in primo piano mostrata a lato. Mentre il browser ridimensiona, questa sezione di storie principali diventa un carosello scorrevole.

L'interfaccia stessa cambia completamente aggiungendo dot navigation, frecce e immagini in primo piano per ogni storia nell'elenco. Il loro elenco di articoli a schermo intero è più “verticale”, ma questo layout è più complicato da operare su uno schermo mobile, quindi cambiarlo in un carosello scorrevole è un'opzione migliore.

Pensare altro sul flusso dell'utente piuttosto che il flusso di contenuti. Soddisfare non sempre deve essere forzato in un layout verticale sul piccolo schermo Pensa a come organizzare i contenuti in un modo simile supporta un'esperienza di navigazione verticale.

Pensieri di chiusura

In questi giorni il design reattivo è essenziale e ogni web designer e sviluppatore dovrebbe capire come funziona. I visitatori si aspettano che tutti i siti Web siano mobile-friendly. Ogni volta che inciampo su un sito web non reattivo, rabbrividisco alla vista di quella barra di scorrimento orizzontale.

Segui i suggerimenti in questo post per pianificare strategie di progettazione per riorganizzare i contenuti per la migliore esperienza utente possibile su tutti i dispositivi.