Hogyan tervezzük meg a tartalmi elrendezést az érzékeny tervezéshez
Egy közelmúltban írtam le, hogyan vizuális tartalom vonatkozik valamire kinézeti terv. Azonban ez a téma nagyon részletes, és a szétvágások sok al-témakörbe kerülnek, amelyek közül az egyik vizuális szervezet az érzékeny elrendezésekhez.
Ebben a bejegyzésben mélyebbre szeretnék ásni az érzékeny tartalmat, hogy megnézhessem a legjobb gyakorlatokat a kisebb képernyők tartalmának átrendezése. Az UI és az UX tervezésben nincs egyetlen helyes válasz minden projektre, de vannak a jól működő trendek, és ezekből a trendekből saját ötleteket építhetsz.
A rácsok átrendezése a listákra
Minden weboldal valamilyen rácsot használ, függetlenül attól, hogy látható-e vagy sem. A szilárd hálózatban lévő tartalom gyakran vízszintesen csoportosul szélesebb monitorokon, de ez nem értelme a kisebb eszközöknél. A legjobb megoldás az, hogy ezeket a rácsokat kisebb képernyőkön lebontják, és konvertálja az elemeket listákká.
1. példa: Wellington városi tanács
Vessen egy pillantást a Wellington városi tanács honlapjára, amely számos felhasználót használ rácsos szekciók a kezdőlapon.

Van egy kis diavetítés a téren csökkenti a böngészőablak átméretezése. A lábléc szakasz is kisebb lesz, és végül a függőleges linkek listájává alakul.
Nagyon kis telefonokon, amelyek 320px szélességűek, meg kell tervezni az eszköz méretét. Az iPhone esetében a készülék szélesebb, mint a szélesebb, ezért érdemes a tartalmat elrendezni.
2. példa: Mooyah Burgers
Nézd meg a Mooyah honlapját, és próbáld meg átméretezni az elrendezést. Van egy kis diavetítési terület, amely három elemet tartalmaz az asztali képernyőn, de ez csökken csak egy elem megjelenítése a mobilon (több rejtett diák hozzáadása a widgethez).

A Mooyah alkalmazást és menüt tartalmazó hirdetési dobozok egymás mellett rögzítettek amíg a képernyő elég kicsi lesz függőleges irányban.
A “Csatlakozz hozzánk!” A szekció is átrendezi a tartalmat úgy, hogy minden egyes társadalmi bejegyzés minél több szobát kap. Általánosságban elmondható, hogy a szélesvásznú monitorok a legszélesebbek és az okostelefon-képernyők a legmagasabbak.
3. példa: Témapiac
Ha rácsos elrendezést tervez, fontolja meg széles és magas elrendezési stílusok egy kódsor írása előtt. Így készen állsz építsen töréspontokat, amelyeknek értelme van.
A teljes rács elrendezésű oldalnak meg kell felelnie csökkenti a dobozok méretét mielőtt új sorra törné őket. Például a Theme Market a fix maximális szélesség 1240, és a rács tartalmazza négy blokk soronként.

Mivel a képernyő csökkenti ezeket a blokkokat csökkentse a szélességet, de végül bontás nak nek hagyjon három mezőt soronként. A legkisebb méretenként egy mezőt kapsz egy sorba, és azt rengeteg szobája van a szöveg és a kép ragyogásához.
Mindig van egyensúlya a lehető legtöbb információ megtartását kombinálva annak szükségességével a szöveg olvasható. Minél többet építesz rácselrendezéseket, annál könnyebb lesz ezt megtalálni tartalmi elrendezés egyensúlya.
Oszlopok elrejtése vagy eltávolítása
Szélesebb monitorok és több böngésző támogatás lehetővé teszi a fejlesztők számára, hogy hihetetlenül összetett elrendezéseket építsenek. Gyakran látom a blogokat három vagy akár négy oszlop a képernyő egy jó részét veszi fel.
A kisebb eszközöknek azonban tartalmaznia kell egy tartalomáramlást értelme függőlegesen. Két lehetőséget találtam túlzott oldalsávok kezelése:
- Dobd el őket a fő tartalom alatt
- Teljesen elrejti őket
1. példa: Stop Press
Tekintse meg a Stop Press webhelyet. Van négy függőleges oszlop az asztali monitoromon.
A bal oldali oszlop függőleges navigációs menü, a következő oszlop a legfrissebb tartalmak oszlop a legújabb cikkekkel. Ezután két különböző oldalsávoszlop van, amelyek túlcsordulnak extra “félre” tartalom.

Mivel a böngészőablak átméretezi ezeket az oszlopokat lassan csökkenti a méretét. Az elsõ lépés a bal oldali navigáció, amely egy hamburger menüikon mögött rejtõzik.
A következő töréspont elrejti a középső oszlopot a felső társadalmi megosztási gombokkal együtt. Ezután végül a legkisebb képernyőkön teljesen eltűnik a jobb oldali oldalsáv csak az elsődleges középső oszlopot hagyja tartalmát.
Az oldalsáv tartalma nem jelenik meg a fő tartalom alatt. ez teljesen elrejtve, és ez egy tökéletesen elfogadható választás csökkenti az oldal betöltését és hogy a görgetősáv magassága tisztességes méretű legyen.
Másrészt sok blog mozgassa az oldalsávot a fő tartalom alatt olyan, mint a Concept Art Empire-nél, amely az oldalsávban kapcsolódó üzeneteket tartalmaz a tartalom alá csökken.
2. példa: Kívánatos blog
A Wishpond Blog is teljesen eltávolítja az oldalsávot a kisebb nézetablakokról. Ez az oldalsáv terület jellemzően hirdetést, bejelentkezési űrlapokat és kapcsolódó postahivatkozásokat tartalmaz. Ez a tartalom egyáltalán nem létfontosságú, de hozzáadott értéket biztosít a látogatók számára.

Szeretem követni a hibrid megközelítés ahol az oldalsávot a tartalom alatt mozgatom, de elrejtem néhány oldalt az oldalsávon egy bizonyos töréspontnál.
Ha például három hirdetési blokk van a teljes elrendezésben, elrejthetem két hirdetési területet a mobilon. Ez hozzáférhetővé teszi az oldalsáv tartalmát de nem zavarja az oldalt túlzott tartalommal.
3. példa: Madame Gautier
Azt is szeretném, hogy Madame Gautier használja “Legfrissebb hírek” oldalsávot. Végül a tartalom alá csökken, és teljes nézet pozícióba kerül az oldalon.

Szinte minden weboldalon legalább egy oldalsáv található a designban. Akár ez egy webhelyes oldalsáv, vagy csak valami, ami megjelenik az oldal sablonjában, a side-by-side design stílus népszerű, mert több tartalomhoz illeszkedik a képernyőn.
A te döntésed hogyan kell kezelni a tartalmat. Csökkentheti az oldalsávot, elrejtheti, vagy használhatja a két technikát. De választanod kell az oldalsáv relevanciája alapján, és annak szükségesség az oldalhoz.
Állítsa be és állítsa be a margókat
Mindig ott lesz egy pont, ahol a tartalom nem szorítható tovább kell, és egy szekciónak szüksége van a másik alá.
Által margók beállítása az oldal tartalmának csökkentése előtt az olvasóknak szélesebb körű tartalmat kell választaniuk.
1. példa: Egy világ
Az One World lábléc nagyszerű példa. Van a sitewide lábléc linkek lebegtek jobbra egy e-mail regisztrációs űrlap bal oldalon.

Ahogy az elrendezés átméretezi, az elemek között lévő margók és párnák zsugorodnak. A link oszlopok közelebb kerüljön egymáshoz, és a regisztrációs űrlapot kicsit kisebb lesz, is.
Egy bizonyos pontot megelőzően csak értelme van dobja le a feliratkozási lap alatt található hivatkozásokat, és adja meg a láblécet rengeteg hely a légzéshez.
Igen, az oldal hosszabbá válik, és igen, több erőfeszítésre van szükség ahhoz, hogy lefelé gördüljön, de ezeknél a kisebb pontoknál feltételezhető, hogy a felhasználók függőlegesen orientált eszközökön.
2. példa: Arany-szigetek
Egy másik példa, amit szeretem, az Arany-szigetek kezdőlapja egyedi navigációs stílus. Amikor átméretezi a böngészőablakot, a navigációs linkek nyomja össze. Végül is törés egy sorból két sorba, majd a legkisebb méretű oszlopokba.

Az oldal egyéb elemei kövesse ugyanazt a mintát. Ez a példa a margók átméretezése az elrendezés teljes átrendezése előtt.
Függőleges áramlás kisebb képernyőkön
Az oldal tartalma legyen természetesen áramlik, és függőleges igazítás értelme a mobilon. Ez azt jelenti, hogy az oldal tartalmának blokkjait meg kell fontolnia frissítse a tartalomstílust. Ez magában foglalja a bekezdéseket, a fejléceket, a blokkjegyeket, a rendezetlen listákat és az egyéni tartalomdobozokat is.
1. példa: BodyBuilding.com Single Post
Vegyük például ezt a BodyBuilding posztot kis dobozokat használ különböző glutál edzésekre mutat.
Ezek a dobozok tartalmazzák miniatűrök a jobb oldalon a gyakorlat bemutatására. Kisebb képernyőkön ezek a bélyegképek lebontani egy új vonalra, és végül egymás tetején.

Az érzékeny CSS-nek figyelembe kell vennie ezt a apró részleteket a weboldal minden oldalán.
2. példa: Vanity Fair
Nagyobb példa erre a Vanity Fair honlapjára teljesen átrendezi a bemutatott történet csúszkát. A teljes képernyős asztalon a történetek egy címmel jelennek meg, amelyek egy oldalra mutatnak. Mivel a böngésző átméretezi a kisebb méretet, ez a legfelsőbb történetek csúszó karusszává válik.

Az interfész maga teljesen megváltozik pont-navigáció, nyilak és kiemelt képek hozzáadásával a lista minden egyes történetéhez. A teljes képernyős cikkek listája több “függőleges”, de ez az elrendezés nehezebb a mobil képernyőn működni, így a csúszós karusszel való jobb változtatás jobb megoldás.
Gondol többet a felhasználó áramlásáról a tartalmi áramlás helyett. Tartalom nem mindig kell függőleges elrendezésre kényszeríteni kis képernyőn. Gondoljunk csak arra, hogyan szervezhetjük meg a tartalmat oly módon támogatja a vertikális böngészési élményt.
Záró gondolatok
A mai napig elengedhetetlen az érzékeny tervezés, és minden webes tervezőnek és fejlesztőnek meg kell értenie, hogyan működik. A látogatók minden webhelyet várnak mobilbaráttá. Valahányszor behatolok egy nem reagáló webhelyre, a vízszintes görgetősáv látványa felé nyúlik.
Kövesse az ebben a bejegyzésben található tippeket tervezési stratégiák tervezése a tartalom átrendezéséhez a lehető legjobb felhasználói élményt minden eszközön.