Miten suunnitella sisältöjärjestelyä reagoivaa suunnittelua varten

Viime aikoina keskustelin siitä, miten visuaalinen sisältö liittyy ulkoasun suunnittelu. Kuitenkin tämä aihe on hyvin yksityiskohtainen, ja sirpaleet erittyvät moniin aihealueisiin, joista yksi on visuaalinen organisaatio reagoiville asetteluille.

Tässä viestissä haluan syventää syvällisempää sisältöä tarkastelemaan joitakin parhaita käytäntöjä sisällön järjestäminen pienemmille näytöille. UI & UX -suunnittelussa ei ole yhtä oikeaa vastausta jokaiselle projektille, mutta on olemassa trendit toimivat hyvin, ja näistä suuntauksista voit rakentaa omia ideoita.

Järjestä verkkoja uudelleen listoihin

Jokainen sivusto käyttää jonkinlaista ruudukkoa, onko se näkyvissä vai ei. Kiinteän ruudukon sisältö ryhmitellään usein vaakasuunnassa laajemmille näytöille, mutta tämä ei ole järkevää pienemmissä laitteissa. Paras korjauskeino on hajottaa nämä verkot pienemmillä näytöillä ja muuntaa kohteet luetteloksi.

Esimerkki 1: Wellingtonin kaupunginvaltuusto

Tutustu Wellingtonin kaupunginvaltuuston verkkosivustoon, jossa käytetään useita ruudukkoiset osat kotisivulla.

Siihen liittyy pieni neliöesitys vähentää kun selainikkuna muuttuu. Alatunnisteosa myös pienenee, ja lopulta muuntaa vertikaaliseksi linkkiluetteloksi.

Erittäin pienissä puhelimissa, joiden leveys on 320 pikseliä, sinun on suunniteltava laitteen koko. IPhonen tapauksessa laite on pidempi kuin leveys, joten on järkevää järjestää sisältö näin.

Esimerkki 2: Mooyah Burgers

Katsokaa Mooyahin kotisivua ja yritä muuttaa ulkoasun kokoa. On pieni diaesitysalue, joka sisältää kolme kohdetta työpöydän näytössä, mutta tämä kutistuu alas näyttää vain yhden kohteen mobiililaitteessa (lisäämällä piilotettuja dioja widgetiin).

Mooyah-sovelluksen ja valikon pysyvät mainoskortit ovat kiinteitä vierekkäin kunnes näyttö tulee tarpeeksi pieneksi järjestää ne pystysuunnassa.

“Yhdistä meihin!” osio myös järjestää sisällön uudelleen siten, että jokainen sosiaalinen viesti saa mahdollisimman paljon tilaa. Yleisesti ottaen laajakuvamonitorit ovat laajimmat ja älypuhelimen näytöt ovat korkeimmat.

Esimerkki 3: Teemarkkinat

Suunnittelemalla verkkoasettelua kannattaa harkita sekä leveät että pitkät ulkoasun tyylit ennen kuin kirjoitat yhden koodirivin. Näin olet valmis rakentaa pisteitä, jotka ovat järkeviä.

Sivun, jossa on koko ruudukon asettelu vähentää laatikoiden kokoa ennen niiden rikkomista uuteen riviin. Esimerkiksi teemamarkkinoilla on a kiinteä maksimileveys 1240, ja verkko sisältää neljä lohkoa per rivi.

Koska näyttö pienenee näitä lohkoja vähentää leveyttä, mutta lopulta hajota että jätä kolme ruutua per rivi. Pienimmässä koossa saat yhden ruudun ruutuun ja sen on runsaasti tilaa tekstin ja kuvien loistamiseksi.

On aina tasapaino pitää mahdollisimman paljon tietoa yhdistettynä tarpeeseen tee tekstiä luettavaksi. Mitä enemmän rakentaa ruudukon ulkoasuja, sitä helpompi löytää tämä sisällön järjestelyn tasapaino.

Piilota tai poista sarakkeet

Laajemmat monitorit ja enemmän selaintukea antaa kehittäjille mahdollisuuden rakentaa uskomattoman monimutkaisia ​​ulkoasuja. Näen usein blogeja kolme tai jopa neljä saraketta jotka vievät hyvän osan näytöstä.

Kuitenkin pienemmät laitteet tarvitsevat sisältövirran on järkevää pystysuunnassa. Olen löytänyt kaksi vaihtoehtoa liiallisten sivupalkkien käsittely:

1. Pudota ne pääsisällön alle
2. Piilota ne kokonaan

Esimerkki 1: Stop Press

Tutustu Stop Press -sivustoon. Sillä on neljä pystysuoraa saraketta työpöydän näytössä.

Vasemmassa sarakkeessa on pystysuora nav-valikko, seuraava sarake on pääsisältö-sarake, jossa on viimeisimmät artikkelit. Sitten meillä on kaksi eri sivupalkin saraketta, jotka ovat täynnä ylimääräisiä “syrjään” pitoisuus.

Kun selainikkuna muuttuu, nämä sarakkeet pienennä hitaasti. Ensimmäinen mennä on vasen navigointi, joka piilotetaan hampurilaisen valikkokuvakkeen taakse.

Seuraava katkaisupiste piilottaa keskimmäisen sarakkeen yhdessä ylemmän sosiaalisen jakamisen painikkeiden kanssa. Sitten lopulta pienimmille näytöille, oikea oikea sivupalkki katoaa kokonaan jättää vain ensisijaisen keskipylvään sisältöä.

Mitään sivupalkin sisältöä ei näy pääsisällön alla. Sen täysin piilossa näkymästä, ja tämä on täysin hyväksyttävä valinta vähentää sivun latausta ja pitää vierityspalkin korkeuden kunnollisessa koossa.

Toisaalta monet blogit siirrä sivupalkkia pääsisällön alle kuten Concept Art Empire, joka sisältää siihen liittyviä viestejä sivupalkissa pudota alle sisällön.

Esimerkki 2: Suosittele blogi

Myös Wishpond-blogi poistaa sivupalkin kokonaan pienemmistä näkymänäytöistä. Tämä sivupalkin alue sisältää tyypillisesti mainoksia, kirjautumislomakkeita ja niihin liittyviä postilinkkejä. Yksikään tästä sisällöstä ei ole välttämätöntä, mutta se voi lisätä arvoa vierailijoille.

Haluan seurata a hybridi missä siirrän sivupalkin sisällön alle, mutta myös piilotan muutamia kohtia sivupalkista tietyn katkaisupisteen ohi.

Jos esimerkiksi minulla on kolme mainoslohkoa kokonaisuudessaan, voin piilottaa kaksi mainostilaa mobiililaitteissa. Tämä tekee sivupalkin sisällön saataville mutta ei häiritse sivua liiallinen sisältö.

Esimerkki 3: Madame Gautier

Pidän myös siitä, miten Madame Gautier käyttää “Uusimmat uutiset” sivupalkki. Se lopulta putoaa alle sisällön, ja vie täyden näkymän sivulla.

Lähes jokaisella verkkosivustolla on ainakin yksi sivupalkki. Onko kyseessä sivustonlaajuinen sivupalkki tai vain jotain, joka näkyy sivumallissa, vierekkäinen muotoilu on suosittu, koska se sopii enemmän sisältöä näytöllä.

Se on sinun valintasi miten käsitellä sisältöä. Voit pudottaa sivupalkin alemmaksi, piilottaa sen kokonaan tai käyttää näiden kahden tekniikan yhdistelmää. Mutta sinun pitäisi tehdä valinta perustuu sivupalkin merkitykseen, ja se on välttämättömyys sivulle.

Säädä marginaaleja

Aina on aina kohta, jossa sisältöä ei voi puristaa edelleen, ja yksi osa tarvitsee pudota alle toisen.

mennessä marginaalien säätäminen ennen sivun sisällön alentamista annat lukijoille laajemman sisällön valittavaksi.

Esimerkki 1: Yksi maailma

Yksi maailman alatunniste on hyvä esimerkki. Sillä on sitewide-alatunnisteiden linkit kelluvat oikeassa sähköpostin kirjautumislomake vasemmalla.

Kun ulkoasu muuttuu, näiden elementtien väliset marginaalit ja pehmusteet kutistuvat. Linkin sarakkeet lähestyä toisiaan, ja kirjautumislomake saa hieman pienemmän, liian.

Tietyn kohdan jälkeen se on järkevää pudota linkit ilmoittautumislomakkeen alla, ja anna alatunniste runsaasti tilaa hengittää.

Kyllä, se tekee sivun pitemmäksi, ja kyllä, se vie enemmän vaivaa selaamiseen niin pitkälle, mutta näillä pienemmillä katkaisupisteillä voit olettaa, että käyttäjät ovat pystysuunnassa.

Esimerkki 2: Golden Isles

Toinen esimerkki, jota rakastan, on Golden Islesin kotisivu, jossa on ainutlaatuinen navigointityyli. Kun muutat selainikkunan kokoa, nav-linkit purista yhteen. Lopulta he tauko yhdestä rivistä kahteen riviin, sitten alaspäin pienimmän koon sarakkeisiin.

Muut sivun kohteet noudata samaa mallia. Tämä esimerkki osoittaa voiman marginaalien koon muuttaminen ennen järjestelyn uudelleenjärjestelyä.

Pystysuuntainen virtaus pienemmillä näytöillä

Sivun sisällön pitäisi olla virtaama luonnollisesti, ja pystysuunnassa on järkevää matkapuhelimessa. Tämä tarkoittaa sitä, että sinun on harkittava sivun sisällön lohkoja päivitä sisällön tyyli vastaavasti. Tähän sisältyvät kappaleet, otsikot, lohkot, järjestämättömät luettelot ja myös mukautetut sisältölaatikot.

Esimerkki 1: BodyBuilding.com Single Post

Otetaan esimerkiksi tämä BodyBuilding post, joka käyttää pieniä laatikoita näyttää erilaisia ​​glute-harjoituksia.

Näihin ruutuihin kuuluu pienoiskuvat oikealla puolella osoittamaan harjoituksen. Pienemmillä näytöillä nämä pikkukuvat hajota uudelle riville, ja lopulta pinota päällekkäin.

Herkkä CSS: n tulisi ottaa tämä pieni pikkutarkkailu huomioon verkkosivuston jokaisella sivulla.

Esimerkki 2: Vanity Fair

Tarkempaa esimerkkiä varten tutustu Vanity Fair -kotisivulle järjestää uudelleen tarjotun tarinan liukusäätimen. Koko näytön työpöydällä tarinaluettelot sisältävät otsikoita, joissa on yksi sivussa näkyvä kuva. Koska selain muuttaa kokoa pienemmäksi, tämä ylimmän tarinan osio tulee liukuva karuselli.

Liitäntä itse täysin muutoksia lisäämällä piste-navigointi, nuolet ja varustellut kuvat jokaiselle luettelon tarinalle. Niiden koko näytön lista on enemmän “pystysuora”, mutta tämä ulkoasu on vaikeampi käyttää mobiilinäytöllä, joten sen muuttaminen liukuvaksi karuselliksi on parempi vaihtoehto.

Ajatella enemmän käyttäjän virtauksesta pikemminkin kuin sisältövirta. pitoisuus ei aina tarvitse pakottaa pystysuunnassa pienellä näytöllä. Ajattele vain, miten sisältöä voidaan järjestää tavalla tukee vertikaalista selauskokemusta.

Sulkeutuvat ajatukset

Reagoiva muotoilu on välttämätöntä näinä päivinä, ja jokaisen web-suunnittelijan ja kehittäjän tulisi ymmärtää, miten se toimii. Vierailijat odottavat kaikkien sivustojen olevan mobiililaitteisiin sopiva. Aina kun törmänmme ei-reagoivaan verkkosivustoon, siroutun tämän vaakasuoran vierityspalkin näkyviin.

Noudata tämän viestin vinkkejä suunnittelustrategioiden suunnittelu sisällön järjestämiseksi uudelleen paras mahdollinen käyttäjäkokemus kaikissa laitteissa.