Jak plánovat uspořádání obsahu pro citlivý design

V nedávném příspěvku jsem hovořil o tom, jak vizuální obsah se týká návrh rozložení. Tento předmět je však velmi podrobný a rozpadá se do mnoha dílčích témat, z nichž jedno je vizuální organizace pro citlivé rozvržení.

V tomto příspěvku bych se chtěl ponořit hlouběji do citlivého obsahu a podívat se na některé osvědčené postupy přeskupení obsahu pro menší obrazovky. V UI & UX designu neexistuje žádná jediná správná odpověď pro každý projekt, ale existují trendy, které fungují dobře, a z těchto trendů si můžete vytvořit vlastní nápady.

Uspořádání mřížek na seznamy

Každá webová stránka používá nějaký typ mřížky, ať už je viditelný nebo ne. Obsah v pevné mřížce se často seskupuje horizontálně na širších monitorech, ale na menších zařízeních to nedává smysl. Nejlepším řešením je rozdělit tyto mřížky na menší obrazovky a převést položky do seznamů.

Příklad 1: Rada města Wellington

Podívejte se na webové stránky Wellington City Council, která používá řadu sekce ve stylu mřížky na domovské stránce.

Tam je malá slideshow náměstí odkazy, které snižuje změní velikost okna prohlížeče. Část zápatí také zmenšuje, a nakonec převede do svislého seznamu odkazů.

Na velmi malých telefonech s šířkou 320px je třeba navrhnout velikost zařízení. V případě zařízení iPhone je zařízení vyšší než širší, takže je smysluplné uspořádat obsah tímto způsobem.

Příklad 2: Mooyah Burgers

Podívejte se na domovskou stránku Mooyah a zkuste změnit velikost rozvržení. K dispozici je malá plocha prezentace, která obsahuje tři položky na ploše obrazovky, ale to zmenšuje zobrazit pouze jednu položku v mobilu (přidání dalších skrytých snímků do widgetu).

Dva reklamní boxy reklamy Mooyah app & menu zůstat pevné vedle sebe , dokud se obrazovka dostatečně nezmenší uspořádat svisle.

“spojit se s námi!” sekce také přeskupuje obsah tak, aby každý sociální post dostane co nejvíce místa. Obecně řečeno, širokoúhlé monitory jsou nejširší a chytré obrazovky jsou nejvyšší.

Příklad 3: Téma trhu

Při návrhu rozvržení s mřížkou byste měli zvážit jak široké, tak i vysoké styly rozvržení před napsáním jednoho řádku kódu. Tímto způsobem budete připraveni budovat body, které dávají smysl.

Stránka s úplným rozvržením mřížky by měla snížit velikost krabic před rozdělením na novou linku. Například Theme Market má a pevná maximální šířka 1240 a mřížka obsahuje čtyři bloky na řádek.

Vzhledem k tomu, že se tyto bloky zmenšují snížit šířku, ale nakonec zhroutit se na tři řádky na řádek. V nejmenší velikosti dostanete jednu krabici na řádek a to má dostatek prostoru pro text a snímky pro zář.

Vždy je rovnováha udržet co nejvíce informací v kombinaci s potřebou text je čitelný. Čím více budujete rozvržení mřížky, tím snadněji to najdete rovnováhy uspořádání obsahu.

Skrýt nebo odebrat sloupce

Širší monitory a více podpory prohlížeče umožnit vývojářům vytvořit neuvěřitelně složité rozložení. Často vidím blogy tři nebo dokonce čtyři sloupce které zabírají dobrou část obrazovky.

Menší zařízení však potřebují tok obsahu dává smysl vertikálně. Našel jsem dvě možnosti zpracování nadměrných postranních panelů:

1. Drop je pod hlavní obsah
2. Skrýt je

Příklad 1: Stop Stiskněte

Podívejte se na webovou stránku Stop Press. Má to čtyři vertikální sloupce na svém stolním monitoru.

Levý sloupec je svislé nav menu, další sloupec je hlavní obsah sloupec s nedávnými články. Pak máme dva různé postranní sloupce přetékající extra “stranou” obsah.

Jak se mění velikost okna prohlížeče, tyto sloupce pomalu zmenšuje velikost. První, co se vydá, je levá navigace, která se skryje za ikonou menu hamburger.

Další bod zlomu skryje prostřední sloupec spolu s horními tlačítky pro sociální sdílení. Pak konečně na nejmenších obrazovkách zcela zmizí postranní panel zcela vpravo opouští pouze primární středový sloupec obsahu.

Žádný z obsahu postranního panelu se nezobrazuje pod hlavním obsahem. To je zcela skryté z pohledu, a to je naprosto přijatelná volba snížit zatížení stránky a udržet výšku posuvníku na slušné velikosti.

Na druhou stranu, mnoho blogů přesuňte postranní panel pod hlavní obsah jako na konceptu Art Empire, který obsahuje související příspěvky v postranním panelu, který nakonec pokles pod obsah.

Příklad 2: Blog Wishpond

Blog Wishpond také zcela odstraní postranní panel z obrazovky na menších výřezech. Tato oblast postranního panelu obvykle obsahuje reklamu, registrační formuláře a související odkazy. Žádný z tohoto obsahu není životně důležitý, ale může návštěvníkům přinést přidanou hodnotu.

Rád následuji hybridní přístup přesunu postranního panelu pod obsah, ale také skrýt několik položek v postranním panelu za určitým bodem zlomu.

Pokud mám například tři reklamní bloky v plném rozložení, můžu skrýt dva z těchto reklamních prostorů v mobilu. Tento zpřístupní obsah postranního panelu ale neporušuje stránku s nadměrným obsahem.

Příklad 3: Madame Gautier

Také se mi líbí, jak Madame Gautier používá jejich “Poslední zprávy” postranní panel na domovské stránce. To nakonec klesne pod obsah, a zaujme plnou pozici zobrazení na stránce.

Téměř každý web bude mít v designu alespoň jeden postranní panel. Ať se jedná o postranní panel celé stránky nebo jen něco, co se zobrazí na šabloně stránky styl designu vedle sebe je populární, protože to vyhovuje více obsahu na obrazovce.

Je to tvoje volba jak s obsahem pracovat. Postranní panel můžete přetáhnout dolů, skrýt jej úplně nebo použít hybrid těchto dvou technik. Ale měli byste si vybrat na základě relevance postranního panelu, a jeho nutnost na stránku.

Upravte & Squeeze Margins

Vždy bude místo, kde obsah nelze zmáčknout další část a jedna sekce potřebuje pokles pod druhou.

Podle úpravy marží před snížením obsahu na stránce poskytnete čtenářům širší rozsah obsahu, který si vyberete.

Příklad 1: Jeden svět

Zápatí na Jeden svět je skvělým příkladem. Má to celoplošné odkazy zápatí se vznášely vpravo s e-mailový registrační formulář nalevo.

Jak se velikost rozvržení změní, okraje a výplně mezi těmito prvky se zmenší. Sloupce propojení přiblížit se, a registrační formulář dostane trochu menší, také.

Za určitou chvíli to dává smysl přetáhněte odkazy pod registračním formulářem, a dát zápatí dostatek prostoru pro dýchání.

Ano, to dělá stránku déle, a ano, to vyžaduje více úsilí posouvat se tak daleko, ale u těchto menších zarážek můžete předpokládat, že uživatelé jsou na vertikálně orientovaných zařízeních.

Příklad 2: Zlaté ostrovy

Dalším příkladem, který miluju, je domovská stránka Golden Isles s jeho jedinečný styl navigace. Když změníte velikost okna prohlížeče, budou odkazy nav stlačit dohromady. Nakonec přerušení od jednoho řádku do dvou řad, pak dolů do sloupců v nejmenší velikosti.

Další položky na stránce stejný vzor. Tento příklad demonstruje sílu změna velikosti okrajů před kompletním uspořádáním rozvržení.

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

Obsah stránky by měl tok přirozeně, a vertikální zarovnání dává smysl v mobilu. To znamená, že musíte zvážit blokování obsahu na stránce styl obsahu odpovídajícím způsobem aktualizovat. To zahrnuje odstavce, záhlaví, blockquotes, neuspořádané seznamy a také vlastní obsahové schránky.

Příklad 1: BodyBuilding.com Single Post

Vezměme si například tento příspěvek BodyBuilding používá malé krabičky předvést různé glute cvičení.

Tyto krabice obsahují na pravé straně ukázat cvičení. Na menších obrazovkách jsou tyto miniatury rozdělit na nový řádek, a nakonec zásobníku na sebe.

Vaše citlivé CSS by měla vzít tuto drobnou drobnost do úvahy pro každou stránku webu.

Příklad 2: Vanity Fair

Pro větší příklad, podívejte se na Vanity Fair domovskou stránku, která zcela přeuspořádá zobrazený příběh slider. Na ploše na celé obrazovce se zobrazí seznam titulků s jedním zobrazeným obrázkem, který se zobrazuje na straně. Vzhledem k tomu, že se prohlížeč zmenšuje, tato horní sekce příběhů se stává posuvným karuselem.

Samotné rozhraní zcela změní přidáním bodové navigace, šipek a zobrazených obrázků pro každý příběh v seznamu. Jejich celý seznam článků je více “vertikální”, ale toto uspořádání je složitější pracovat na mobilní obrazovce, takže změna na posuvný karusel je lepší volba.

Myslet si více o toku uživatele než tok obsahu. Obsah nemusí být vždy nucen do svislého uspořádání na malé obrazovce. Přemýšlejte o tom, jak organizovat obsah takovým způsobem podporuje vertikální procházení.

Uzavření myšlenek

Reagující design je v těchto dnech nezbytný, a každý web designer a vývojář by měl pochopit, jak to funguje. Návštěvníci očekávají, že všechny webové stránky budou mobilní. Kdykoliv jsem narazil na non-reagovat webové stránky jsem krčit při pohledu na horizontální posuvník.

Postupujte podle tipů v tomto příspěvku plánování strategií návrhu k přeskupení obsahu pro nejlepší možný uživatelský komfort na všech zařízeních.