Cum să planificați aranjarea conținutului pentru un design receptiv

Într-un post recent, am discutat cum conținut vizual se referă la layout design. Cu toate acestea, acest subiect este foarte detaliat și se împrăștie în mai multe sub-teme, dintre care unul organizarea vizuală pentru aspecte receptive.

În acest post, aș dori să vă adânc în conținut receptiv pentru a vă uita la cele mai bune practici pentru rearanjarea conținutului pentru ecrane mai mici. În designul UI & UX, nu există un singur răspuns corect pentru fiecare proiect, dar există tendințe care funcționează bine, și din aceste tendințe vă puteți construi propriile idei.

Rearanjați grilajele la liste

Fiecare site utilizează un anumit tip de rețea dacă este vizibil sau nu. Conținutul dintr-o rețea solidă adesea se grupează împreună pe orizontală pe monitoare mai largi, dar acest lucru nu are sens pe dispozitivele mai mici. Cel mai bun remediu este să rupă aceste grile pe ecrane mai mici și convertiți elementele în liste.

Exemplul 1: Consiliul orașului Wellington

Aruncați o privire la site-ul Consiliului orașului Wellington, care utilizează un număr de grilă secțiuni pe pagina de pornire.

Există o mică prezentare de link-uri pătrate reduce deoarece fereastra browserului este redimensionată. De asemenea, secțiunea subsolului devine mai mică, si eventual convertește într-o listă verticală de linkuri.

Pe telefoanele foarte mici, cu o lățime de 320px, trebuie să proiectați dimensiunea dispozitivului. În cazul unui iPhone, dispozitivul este mai înalt decât mai larg, astfel încât este logic să aranjați conținutul în acest fel.

Exemplul 2: Mooiah Burgers

Aruncați o privire la pagina de pornire pentru Mooyah și încercați să redimensionați aspectul. Există o zonă mică de prezentare care conține trei elemente pe un ecran desktop, dar asta se scade pentru a afișa numai un element pe mobil (adăugând mai multe diapozitive ascunse în widget).

Cele două cutii promoționale care fac publicitate aplicației și meniului Mooyah rămân fixate una lângă cealaltă până când ecranul devine suficient de mic pentru a le rearanja vertical.

“conecteaza-te cu noi!” secțiunea rearanjează de asemenea conținutul astfel încât fiecare post social primește cât mai mult spațiu posibil. În general vorbind, monitoarele cu ecran lat sunt cele mai extinse și ecranele smartphone sunt cele mai înalte.

Exemplul 3: Tema de piață

Când proiectați un aspect cu o grilă, ar trebui să luați în considerare atat stiluri de layout inalte si inalte înainte de a scrie o singură linie de cod. În felul acesta veți fi pregătiți să construiască puncte de întrerupere care să aibă sens.

O pagină cu aspectul grilei complete ar trebui să fie reduceți mărimea cutiilor înainte de a le rupe pe o nouă linie. De exemplu, Theme Market are un lățimea maximă fixă din 1240, iar grila conține patru blocuri pe rând.

Pe măsură ce ecranul devine mai mic, aceste blocuri reduce în lățime, dar eventual pană la lăsați trei cutii pe rând. La cea mai mică dimensiune, primești câte o casetă pe rând, și asta are o mulțime de spațiu pentru ca textul și imaginile să strălucească.

Există întotdeauna un echilibru de păstrând cât mai multe informații în vedere combinate cu necesitatea de a face text lizibil. Cu cat construiti mai mult grilele, cu atat este mai usor sa gasiti acest lucru echilibru al conținutului.

Ascundeți sau eliminați coloanele

Monitoare mai largi și mai mult suport pentru browser permite dezvoltatorilor să construiască structuri incredibil de complexe. Adesea văd bloguri trei sau chiar patru coloane care iau o bună parte din ecran.

Cu toate acestea, dispozitivele mai mici au nevoie de un flux de conținut are sens vertical. Am găsit două opțiuni manipularea barelor laterale excesive:

1. Aruncați-le sub conținutul principal
2. Ascundeți-le cu totul

Exemplul 1: Opriți apăsarea

Uitați-vă la site-ul Stop Press. Are patru coloane verticale pe monitorul desktop.

Coloana din stânga este un meniu nav vertical, următoarea coloană este coloana cu conținut principal cu articole recente. Apoi, avem două coloane din bara laterală care se deplasează cu extra “deoparte” conţinut.

Pe măsură ce fereastra browserului este redimensionată, aceste coloane redus încet în dimensiune. Primul care merge este navigarea din stânga care se ascunde în spatele unei pictograme de meniu pentru hamburger.

Următorul punct de întrerupere ascunde coloana din mijloc împreună cu butoanele de partajare socială de top. Apoi, în final, pe cele mai mici ecrane, bara laterală din dreapta dispare complet lăsând doar coloana centrului primar de conținut.

Niciuna din conținutul barei laterale nu apare sub conținutul principal. este complet ascuns de vedere, și aceasta este o alegere perfect acceptabilă reduce încărcarea paginii și pentru a menține înălțimea barei de derulare la o dimensiune decentă.

Pe de altă parte, multe bloguri mutați bara laterală sub conținutul principal ca pe Concept Art Empire, care prezintă posturi legate de bara laterală care în cele din urmă drop sub conținutul.

Exemplul 2: Blogul lui Wishpond

Blogul Wishpond de asemenea îndepărtează complet bara laterală de pe ecran pe ferestrele de vizualizare mai mici. Această zonă a barei laterale conține, în general, anunțuri, formulare de înscriere și legături postate legate de acestea. Niciunul din acest conținut nu este vital, dar poate aduce valoare vizitatorilor.

Îmi place să urmez a abordare hibridă în cazul în care am muta bara laterală sub conținutul, dar, de asemenea, ascunde câteva elemente în bara laterală trecut un anumit punct de întrerupere.

De exemplu, dacă am trei blocuri de anunțuri în structura completă, pot ascunde două dintre aceste spații publicitare de pe mobil. Acest face ca conținutul barei laterale să fie accesibil dar nu deranjează pagina cu conținut excesiv.

Exemplul 3: Doamna Gautier

Îmi place de asemenea modul în care Madame Gautier le folosește “Cele mai recente știri” bara laterală de pe pagina de pornire. În cele din urmă scade sub conținut, și ocupă o poziție de vizualizare completă pe pagină.

Aproape fiecare site web va avea cel puțin o bara laterală în design. Indiferent dacă aceasta este o bară laterală la nivel de site sau doar ceva care apare pe un șablon de pagină, side-by-side stil de design este popular pentru că se potrivește mai mult conținutului pe ecran.

E alegerea ta cum să se ocupe de conținut. Puteți să părăsiți bara laterală mai jos, să o ascundeți complet sau să utilizați un hibrid din aceste două tehnici. Dar ar trebui să vă alegeți pe baza relevanței barei laterale, si este necesitate la pagina.

Reglați și strângeți marginile

Va exista întotdeauna un punct în care conținutul nu poate fi stins orice mai departe, și o secțiune trebuie să scădea sub celălalt.

De ajustarea marjelor înainte de a reduce conținutul pe pagină, îi oferiți cititorilor o gamă mai largă de conținut pentru a alege.

Exemplul 1: O singură lume

Footerul din One World este un exemplu foarte bun. Are sitewide link-uri de subsol plutitoare dreapta cu un formular de înscriere prin e-mail pe stanga.

Pe măsură ce macheta este redimensionată, marginile și garniturile dintre aceste elemente se micșorează. Coloanele linkului apropiați-vă împreună, și formularul de înscriere devine puțin mai mic, de asemenea.

Trecut un anumit punct, are sens dați legăturile de sub formularul de înscriere, și dați subsolul o mulțime de spațiu pentru a respira.

Da, face ca pagina să fie mai lungă și da, este nevoie de mai mult efort pentru a vă deplasa atât de departe, dar la aceste puncte mai mici vă puteți presupune că utilizatorii sunt pe dispozitive orientate vertical.

Exemplul 2: Insulele de Aur

Un alt exemplu pe care îl iubesc este pagina de pornire a insulei de aur stil de navigare unic. Când redimensionați fereastra browserului, legăturile nav strângeți împreună. În cele din urmă pauză de la o singură linie în două rânduri, apoi în coloane la cea mai mică dimensiune.

Alte elemente de pe pagină urmați același model. Acest exemplu demonstrează puterea lui redimensionarea marjelor înainte de a rearanja complet aspectul.

Vertical Flow pe ecrane mai mici

Conținutul paginii ar trebui să fie fluxul natural, și aliniere verticală are sens pe telefonul mobil. Aceasta înseamnă că trebuie să țineți cont de blocurile de conținut în pagină actualizați stilul de conținut în consecință. Acestea includ paragrafe, anteturi, bloccoate, liste neordonate și casete de conținut personalizate.

Exemplul 1: Mesaj unic pentru BodyBuilding.com

Luați, de exemplu, acest post BodyBuilding care folosește cutii mici pentru a arăta diferite antrenamente glute.

Aceste cutii includ miniaturi pe partea dreaptă pentru a demonstra exercițiul. Pe ecrane mai mici, aceste miniaturi descompune pe o nouă linie, si eventual stivă deasupra celuilalt.

CSS dvs. receptiv ar trebui să ia în considerare aceste minuțioase minuscule pentru fiecare pagină a site-ului.

Exemplul 2: Targul de Vanity

Pentru un exemplu mai mare, verificați pagina de start Vanity Fair, care rearanjează complet glisorul pentru poveste. Pe un ecran complet pe ecran, istoricul conține lista de titluri cu o imagine prezentată lateral. Pe măsură ce browser-ul este redimensionat, această secțiune de articole de top devine un carusel alunecos.

Interfața însăși se schimba complet prin adăugarea de puncte de navigare, săgeți și imagini recomandate pentru fiecare poveste din listă. Lista lor fullscreen de articole este mai mult “vertical”, dar acest aspect este mai dificil pentru a funcționa pe un ecran mobil, astfel încât schimbarea acestuia într-un carusel alunecător este o opțiune mai bună.

Gândi mai multe despre fluxul utilizatorului mai degrabă decât fluxul de conținut. Conţinut nu este întotdeauna necesar să fie forțat într-un aspect vertical pe ecran mic. Gândiți-vă doar la modul de organizare a conținutului într-un mod care să fie suportă o experiență verticală de navigare.

Gânduri închise

Designul receptiv este esențial în aceste zile, iar fiecare designer web și dezvoltator ar trebui să înțeleagă cum funcționează. Vizitatorii așteaptă ca toate site-urile web să fie dispozitive mobile. Ori de câte ori mă întâlnesc pe un site web care nu răspunde, mă opresc la vederea acestei bara de derulare orizontală.

Urmați sfaturile din această postare pentru planificarea strategiilor de design pentru a rearanja conținutul pentru cea mai bună experiență de utilizare a tuturor dispozitivelor.