Ako naplánovať usporiadanie obsahu pre zodpovedný dizajn

V poslednom príspevku som diskutoval ako vizuálny obsah súvisí s dizajn rozloženia. Táto téma je však veľmi podrobná a rozštiepi sa do mnohých čiastkových tém, z ktorých jedna je vizuálna organizácia pre uspokojivé usporiadanie.

V tomto príspevku by som sa chcel ponoriť hlbšie do odpovedajúceho obsahu a pozrieť sa na niektoré osvedčené postupy usporiadanie obsahu pre menšie obrazovky. V projekte UI & UX neexistuje žiadna jednotná odpoveď pre každý projekt, ale existujú trendy, ktoré fungujú dobre, a z týchto trendov si môžete vytvoriť svoje vlastné nápady.

Znovu usporiadať mriežky do zoznamov

Každá webová stránka používa nejaký typ mriežky, či je viditeľný alebo nie. Obsah v pevnej mriežke sa často zoskupuje horizontálne na širších monitoroch, ale to nemá zmysel pre menšie zariadenia. Najlepším riešením je rozbiť tieto mriežky na menších obrazovkách a premeniť položky na zoznamy.

Príklad 1: Wellingtonská mestská rada

Pozrite sa na webovú stránku rady mesta Wellingtonu, ktorá používa množstvo štýly v štýle mriežky na domovskej stránke.

Je tu malá prezentácia štvorcových odkazov redukuje pretože okno prehliadača sa zmení. Zápalová časť tiež sa zmenší, a nakoniec konvertuje na vertikálny zoznam odkazov.

Na veľmi malých telefónoch s šírkou 320 pixlov je potrebné navrhnúť veľkosť zariadenia. V prípade zariadenia iPhone je zariadenie vyššie ako širšie, takže je rozumné usporiadať obsah týmto spôsobom.

Príklad 2: Mooyah Burgers

Pozrite sa na domovskú stránku pre Mooyah a skúste zmeniť rozloženie. Na plochej obrazovke je malá oblasť prezentácie, ktorá obsahuje tri položky, ale toto sa zmenšuje zobraziť iba jednu položku na mobilnom telefóne (pridanie ďalších skrytých snímok do miniaplikácie).

Obe reklamné krabičky, ktoré propagujú aplikáciu Mooyah a menu, zostávajú fixované vedľa seba kým sa obrazovka nedostane dostatočne malá zoradiť ich zvislo.

“Spojte sa s nami!” časť tiež preorientuje obsah tak, aby každý sociálny príspevok dostane toľko miesta, ako je to možné. Všeobecne povedané, širokouhlé monitory sú najširšie a obrazovky smartphonov sú najvyššie.

Príklad 3: Trh s témami

Pri navrhovaní rozloženia s mriežkou by ste mali zvážiť široký a vysoký štýl rozloženia pred zápisom jedného riadku kódu. Týmto spôsobom budete pripravení vytvoriť body zlomu, ktoré dávajú zmysel.

Stránka s plným rozložením mriežky by mala znížiť veľkosť škatúľ predtým, ako ich prerušíte na novú linku. Napríklad Theme Market má a pevná maximálna šírka z 1240 a mriežka obsahuje štyri bloky na riadok.

Ako obrazovka zmenšuje tieto bloky znížiť šírku, ale nakoniec zlomiť na nechajte tri políčka na riadok. V najmenšej veľkosti dostanete jedno políčko na riadok a to má veľa priestoru aby text a snímky mohli svietiť.

Vždy je to rovnováha čo najviac informácií v čo najväčšej možnej miere v kombinácii s potrebou text čitateľný. Čím viac vytvárate rozloženie mriežky, tým ľahšie to nájde usporiadanie rovnováhy obsahu.

Skryť alebo odstrániť stĺpce

Širšie monitory a viac podpory prehliadača umožniť vývojárom vytvárať neuveriteľne zložité rozloženia. Často vidím blogy tri alebo dokonca štyri stĺpce ktoré zaberajú dobrú časť obrazovky.

Menšie zariadenia však potrebujú tok obsahu má zmysel vertikálne. Našiel som dve možnosti zaobchádzanie s nadmernými postranicami:

1. Zrušte ich pod hlavný obsah
2. Skryť ich úplne

Príklad 1: Zastavenie Stlačte

Pozrite sa na stránku Stop Press. Má štyri vertikálne stĺpce na svojom stolnom monitore.

Ľavý stĺpec je vertikálna navigačná ponuka, ďalší stĺpec je stĺpec hlavného obsahu s najnovšími článkami. Potom máme dve rôzne stĺpce postranných pruhov, ktoré pretekajú extra “stranou” obsah.

Keďže okno prehliadača zmení veľkosť týchto stĺpcov pomaly znižovať veľkosť. Najprv ide o navigáciu vľavo, ktorá sa skrýva za ikonou ponuky hamburgerov.

Ďalšia zarážka skrýva stredný stĺpec spolu s hornými tlačidlami sociálneho zdieľania. Nakoniec na najmenších obrazovkách úplne zmizne úplne pravá bočná lišta pričom zostáva len primárny stredový stĺp obsahu.

Žiadny obsah bočného panela sa nenachádza pod hlavným obsahom. to je úplne skrytý z pohľadu, a je to úplne prijateľná voľba znížiť zaťaženie stránky a udržať výšku posúvacej lišty na slušnej veľkosti.

Na druhej strane, veľa blogov presuňte bočný panel pod hlavný obsah ako napríklad na Concept Art Empire, ktorá obsahuje súvisiace príspevky v bočnom paneli, ktoré nakoniec pokles pod obsah.

Príklad 2: Blahodárny blog

Aj Wishpond Blog úplne odstráni bočný panel z obrazovky na menších výrezoch. Táto oblasť postranných panelov zvyčajne obsahuje reklamu, registračné formuláre a súvisiace odkazy na príspevky. Žiadny z týchto obsahov nie je dôležitý, ale môže návštevníkom pridať hodnotu.

Chcem nasledovať a hybridný prístup kde posúvam bočný panel pod obsahom, ale tiež skrývať niekoľko položiek v postrannom pruhu za určitým bodom zlomu.

Ak napríklad v plnom rozložení mám tri reklamné bloky, môžem skryť dva z týchto reklamných priestorov v mobilných zariadeniach. toto sprístupňuje obsah bočného panela ale nezahŕňa stránku s nadmerným obsahom.

Príklad 3: Madame Gautier

Tiež sa mi páči, ako ich Madame Gautier používa “Najnovšie správy” bočný panel na domovskej stránke. To nakoniec poklesne pod obsah, a zaujme plnú pozíciu pohľadu na stránke.

Takmer každá webová stránka bude mať aspoň jeden bočný panel v dizajne. Či sa jedná o celoobrazovkový postranný panel alebo len o niečo, čo sa zobrazuje na šablóne stránky dizajn vedľa seba je populárny, pretože to hodí viac obsahu na obrazovke.

Je to tvoja voľba ako zvládnuť obsah. Môžete spustiť bočný panel nižšie, skryť ho úplne alebo použiť hybrid týchto dvoch techník. Ale mali by ste si vybrať na základe dôležitosti bočného panela, a jeho nevyhnutnosť na stránku.

Upraviť a stlačiť okraje

Tam bude vždy bod, kde obsah nie je možné stlačiť akékoľvek ďalšie a jedna časť potrebuje poklesne pod druhú.

podľa úprava marží pred znížením obsahu na stránke dáte čitateľom širšiu škálu obsahu, ktorú si môžete vybrať.

Príklad 1: Jeden svet

Päta na jednom svete je skvelým príkladom. Má celoštátne päty odkazov vznášali pravé s e-mailový prihlasovací formulár naľavo.

Pri rozložení rozloženia sa zmenšujú okraje a podložky medzi týmito prvkami. Odkazové stĺpce zblížiť sa, a registračný formulár dostane trochu menšie, tiež.

Za určitým bodom to má zmysel prepojte odkazy pod registračným formulárom, a zadajte pätu dostatok miesta na dýchanie.

Áno, robí to dlhšie, a áno, vynakladá sa väčšie úsilie na to, aby sa dolu posunul dolu, ale na týchto menších prestávkach môžete predpokladať, že používatelia sú na vertikálne orientovaných zariadeniach.

Príklad 2: Zlaté ostrovy

Ďalší príklad, ktorý milujem, je domovská stránka Zlatých ostrovov s jeho jedinečný štýl navigácie. Pri zmene veľkosti okna prehliadača nav navzájom stlačte spolu. Nakoniec prerušiť z jedného riadku do dvoch radov, potom do stĺpcov na najmenšej veľkosti.

Ďalšie položky na stránke postupujte podľa toho istého vzoru. Tento príklad demonštruje silu zmena marží pred úplným prerozdelením rozloženia.

Vertikálny tok na menších obrazovkách

Obsah stránky by mal byť tok prirodzene, a zvislé zarovnanie dáva zmysel pre mobilné zariadenia. To znamená, že musíte zvážiť bloky obsahu na stránke aktualizovať štýl obsahu podľa toho. Patria sem odseky, hlavičky, blokové bloky, nezoradené zoznamy a tiež vlastné polia s obsahom.

Príklad 1: Posta BodyBuilding.com

Vezmite napríklad tento post BodyBuilding, ktorý používa malé boxy preukázať rôzne tréningy gluteu.

Tieto polia obsahujú miniatúry na pravej strane preukázať cvičenie. Na menších obrazovkách sú tieto miniatúry rozložiť na novú linku, a nakoniec stoh na seba navzájom.

Váš odpovedajúci CSS by mal vziať do úvahy tieto malé detaily na každej stránke webovej stránky.

Príklad 2: Primeranosť

Pre väčší príklad si pozrite domovskú stránku Vanity Fair, ktorá úplne presmeruje zobrazený posúvač príbehu. Na celoobrazovkovej ploche sa zoznamy titulov zobrazujú s jedným zobrazeným obrázkom na strane. Keďže prehliadač zmenší veľkosť, táto sekcia s najlepšími príbehmi sa stáva posuvným kolotočom.

Samotné rozhranie úplne zmení pridaním dotykovej navigácie, šípok a zobrazených obrázkov pre každý príbeh v zozname. Ich celý zoznam článkov je viac “vertikálne”, ale toto rozloženie je oveľa zložitejšie na to, aby fungovalo na mobilnom displeji, takže zmena na posuvný kolotoč je lepšou voľbou.

premýšľať viac informácií o toku používateľa skôr ako váš obsah. obsah nie je vždy potrebné nútiť do vertikálneho usporiadania na malej obrazovke. Len sa zamyslite nad tým, ako usporiadať obsah takým spôsobom podporuje vertikálne prehliadanie.

Záverečné myšlienky

Odpovedajúci dizajn je nevyhnutný v týchto dňoch a každý web dizajnér a vývojár by mal pochopiť, ako to funguje. Návštevníci očakávajú, že budú všetky webové stránky mobily. Kedykoľvek narazím na webovú stránku, ktorá nie je citlivá, narážam na túto horizontálnu posuvnú lištu.

Postupujte podľa tipov v tomto príspevku plánovanie stratégií návrhu na usporiadanie obsahu pre čo najlepšiu možnú používateľskú skúsenosť na všetkých zariadeniach.