Kahdella sivustolla voi olla identtinen sisältö ja täysin erilaiset tulokset. Toisella on helppo liikkua ja se on selkeä lukea. Toinen tuntuu hajanaiselta ja vaikeasti seurattavalta. Sisältö on sama. Asettelu ei ole. Verkkosivuston asettelu on näkymätön runko, joka ratkaisee, tavoittaako sisältö kävijän vai jääkö se huomaamatta.
Verkkosivuston asettelu tarkoittaa sitä, miten sisältö järjestetään ja jäsennetään sivulle. Se määrää, mihin elementit sijoitetaan, miten ne liittyvät toisiinsa ja missä järjestyksessä kävijä kohtaa ne. Hyvä asettelu ohjaa kävijöitä sisällön läpi luonnollisesti. Huono pakottaa heidät näkemään vaivaa löytääkseen tarvitsemansa.
Asettelu ei ole sama asia kuin ulkoasu. Ulkoasu kattaa sen, miltä asiat näyttävät: värit, fontit ja visuaalisen tyylin. Asettelu kattaa sen, minne asiat sijoitetaan ja miten ne on järjestetty. Sivu voi näyttää kauniilta ja silti olla asettelultaan hämmentävä, tai näyttää vaatimattomalta ja toimia asettelultaan täydellisesti.
Mitkä ovat tärkeimmät verkkosivuston asettelutyypit?
Yksisarakkeinen asettelu
Yksisarakkeinen asettelu pinoaa kaiken sisällön pystysuunnassa yhteen sivun keskellä kulkevaan sarakkeeseen. Se on yksinkertaisin asettelu ja mobiiliystävällisin, koska se ei vaadi mukauttamista, kun leveä näyttö muuttuu kapeaksi. Blogikirjoitukset, pitkät sisältösivut ja ohjedokumentaatio käyttävät yleisesti yksisarakkeisia asetteluja, koska lineaarinen lukujärjestys vastaa sitä, miten sisältöä kulutetaan.
Kaksisarakkeinen asettelu
Kaksisarakkeinen asettelu jakaa sivun kahteen rinnakkaiseen osaan. Yleisimmässä versiossa pääsisältö on leveämmässä vasemmassa sarakkeessa ja täydentävä sisältö, kuten navigointia tai aiheeseen liittyviä linkkejä sisältävä sivupalkki, kapeammassa oikeassa sarakkeessa. Kaksisarakkeiset asettelut toimivat hyvin sivuilla, joilla on selkeä pääsisältöalue, joka hyötyy rinnalla olevasta tukevasta kontekstista.
Ruudukkoasettelu
Ruudukkoasettelu järjestää sisällön rakenteelliseksi rivien ja sarakkeiden järjestelmäksi. Tuoteluettelosivut, portfoliogalleriat ja blogin hakemistosivut käyttävät usein ruudukkoja, koska ne mahdollistavat useiden yhtä tärkeiden kohteiden johdonmukaisen näyttämisen. Ruudukon visuaalinen säännöllisyys tekee siitä helpon silmäillä. Haasteena on varmistaa, että ruudukko tiivistyy järkevästi mobiilissa, jossa kohteiden on yleensä vähennyttävä kolmesta tai neljästä sarakkeesta yhteen tai kahteen.
Koko leveyden asettelu
Koko leveyden asettelu venyttää osiot selainikkunan koko leveydelle. Hero-osiot, taustakuvat ja osioiden erottimet käyttävät yleisesti koko leveyden käsittelyä luodakseen visuaalista vaikutusta ja erottaakseen sisältöalueet toisistaan. Koko leveyden osion sisältö rajataan yleensä luettavaan enimmäisleveyteen, joten tausta venyy reunasta reunaan mutta teksti ei.
Aikakauslehtiasettelu
Aikakauslehtiasettelu käyttää epäsymmetristä sisältölohkojen järjestelyä eri kokoisina, vastaavasti kuin painetut aikakauslehdet järjestävät toimituksellista sisältöä. Sitä käytetään uutissivustoilla ja sisältörikkailla alustoilla, joilla useita eri tärkeysasteisia juttuja on näytettävä yhdessä. Aikakauslehtiasettelun visuaalinen vaihtelu luo hierarkian koon ja sijainnin kautta, mutta se vaatii huolellista suunnittelua, jotta se ei tunnu kaoottiselta.
Korttiasettelu
Korttiasettelu esittää sisällön yksittäisinä rajattuina lohkoina, joilla kullakin on johdonmukainen rakenne: kuva, otsikko, lyhyt kuvaus ja joskus linkki tai toiminto. Kortit ovat modulaarisia, mikä tekee niistä helppoja silmäillä ja helppoja järjestää uudelleen. Ne toimivat hyvin tuotteille, blogikirjoituksille, tiimin jäsenille, palveluille ja kaikille sisältötyypeille, joissa on näytettävä yhdessä monta samanlaista kohdetta.
Miten valitset sivulle oikean asettelun?
Oikea asettelu riippuu sivun tarkoituksesta ja siitä, miten kävijät kuluttavat sisältöä.
Sivut, joilla kävijät lukevat alusta loppuun, kuten artikkelit, oppaat tai vaiheittaiset sivut, toimivat parhaiten yksisarakkeisilla tai yksinkertaisilla kaksisarakkeisilla asetteluilla, jotka noudattavat selkeää lineaarista polkua. Sivut, joilla kävijät selailevat ja valitsevat vaihtoehtojen välillä, kuten tuoteluettelot tai palveluiden yleiskatsaukset, toimivat hyvin ruudukoilla tai korttiasetteluilla, joiden avulla kävijät voivat vertailla kohteita yhdellä silmäyksellä.
Sivut, joiden täytyy tehdä vahva ensivaikutus, kuten etusivut ja laskeutumissivut (landing page), hyötyvät koko leveyden osioista visuaalisen vaikutuksen vuoksi yhdistettynä rajattuihin sarakkeisiin luettavaa sisältöä varten. Asettelun pitäisi vastata sisältötyyppiä: ruudukkoasettelun käyttäminen pitkässä artikkelissa luo väärän lukukokemuksen, aivan kuten yksisarakkeinen asettelu tuoteluettelossa tekee selaamisesta tarpeettoman vaikeaa.
Artikkeli miten suunnittelet toimivan etusivun käsittelee, miten asetteluvalinnat rakennetaan nimenomaan etusivuille, joilla onnistumisen panokset ovat korkeimmat.
Miten asettelu toimii mobiilissa?
Jokainen työpöydän monisarakkeinen asettelu tarvitsee mobiiliversion, jossa sarakkeet pinoutuvat pystysuunnassa. Kolmen sarakkeen tuoteruudukosta tulee yhden tai kahden sarakkeen ruudukko. Kaksisarakkeinen asettelu sivupalkilla tiivistyy yhdeksi sarakkeeksi. Kysymys ei ole siitä, mukautetaanko asettelu mobiilille, vaan siitä, miten se tehdään menettämättä lukujärjestystä tai visuaalista hierarkiaa.
Tiivistymisjärjestyksellä on väliä. Kun kaksisarakkeinen asettelu pinoutuu mobiilissa, vasen sarake esiintyy yleensä oikean yläpuolella. Jos sivupalkin sisältö esiintyy ennen pääsisältöä asettelun tiivistyessä, mobiilin lukukokemus rikkoutuu. Asettelun testaaminen oikealla puhelimella ennen julkaisua paljastaa nämä ongelmat, jotka harvoin näkyvät työpöydän esikatseluissa.
Jotkin työpöydällä toimivat asetteluvalinnat kannattaa harkita kokonaan uudelleen mobiilia varten. Monimutkainen aikakauslehtiasettelu, jossa on viisi eri sisältökokoa, voi joutua yksinkertaistumaan kaksisarakkeiseksi korttiruudukoksi mobiilissa pysyäkseen käyttökelpoisena. Artikkeli miten teet verkkosivustosta mobiiliystävällisen käsittelee kaikki pienempien näyttöjen asettelu- ja suunnittelunäkökohdat.
Miten asettelu vaikuttaa visuaaliseen hierarkiaan?
Asettelu ja visuaalinen hierarkia toimivat yhdessä. Asettelu antaa rakenteen: minne osiot sijoitetaan, kuinka monta saraketta on ja miten sisältölohkot järjestetään. Visuaalinen hierarkia antaa painon: mitkä tämän rakenteen elementit huomataan ensin, toiseksi ja viimeisenä.
Asettelu, joka sijoittaa tärkeimmän sisällön ylös ja suurimpaan tilaan, mahdollistaa visuaalisen hierarkian toimimisen luontevasti. Asettelu, joka hautaa tärkeän sisällön sivupalkkiin tai sijoittaa sen vähemmän tärkeän aineiston alapuolelle, toimii hierarkiaa vastaan riippumatta siitä, miten yksittäiset elementit on tyylitelty. Kun asettelu on kunnossa ensin, selkeän visuaalisen hierarkian luominen on merkittävästi helpompaa. Artikkeli mitä visuaalinen hierarkia on selittää, miten korostuksen työkalut, koko, kontrasti ja välit, toimivat missä tahansa asettelussa.
Miten asettelu vaikuttaa SEO:hon?
Asettelu vaikuttaa SEO:hon ensisijaisesti sen luoman käyttökokemuksen kautta. Sivu, jolla on selkeä, looginen asettelu, pitää kävijät sivulla pidempään ja vähentää todennäköisyyttä, että he lähtevät heti. Nämä käyttäytymissignaalit ovat hakukoneille tärkeitä ajan myötä.
Asettelu vaikuttaa myös siihen, miten hakukoneet lukevat sivun sisältörakennetta. Sivun HTML:ssä aikaisin esiintyvälle sisällölle annetaan yleensä enemmän painoarvoa kuin myöhään esiintyvälle, vaikka visuaalinen asettelu saisi sen näyttämään yhtä näkyvältä. Tärkeimpien otsikoiden ja sisällön sijoittaminen sivun lähdekoodin alkuun, ei vain visuaalisesti, vastaa sitä, miten hakukoneet käsittelevät sivuja. Artikkeli mitä SEO on käsittelee tekniset ja sisältötekijät, jotka vaikuttavat sivujen sijoittumiseen.
Miten WEMASY hoitaa asettelun
WEMASYn sivustorakentimessa on osiopohjainen asettelujärjestelmä, jossa valitset sivun kullekin osiolle esivalmiista asettelulohkoista. Yksisarakkeinen, kaksisarakkeinen, ruudukko-, koko leveyden ja korttiasettelu ovat kaikki saatavilla vedä ja pudota -osioina. Jokainen asettelulohko mukautuu automaattisesti mobiiliin, tiivistäen sarakkeet ja säätäen välejä ilman erillistä mobiilimääritystä. Visuaalinen editori näyttää sekä työpöytä- että mobiiliesikatselun, joten voit varmistaa asettelun toimivuuden eri laitteilla ennen julkaisua.
Katso, mitä kuuluu mukaan, osoitteesta WEMASYn sivustonrakentaja tai tutustu vaihtoehtoihin hintasivulla.
Usein kysytyt kysymykset
Mikä on yleisin verkkosivuston asettelu?
Yritysten sivustojen yleisin asettelu yhdistää yläosan koko leveyden hero-osion, sen alapuolella olevan monisarakkeisen tai korttipohjaisen sisältöalueen ja yksisarakkeisen alatunnisteen. Tämä rakenne antaa etusivulle visuaalista vaikutusta yläosassa, joustavuutta ominaisuusosioille keskellä ja johdonmukaisen vertailukohdan alaosassa. Yksittäisillä sivuilla yksisarakkeiset asettelut ovat yleisimpiä sisältöpainotteisilla sivuilla, kuten blogikirjoituksissa ja palvelukuvauksissa. WEMASYn sivustorakentimellavoit toteuttaa tämän suoraan omalla sivustollasi.
Mikä on rautalankamalli ja miten se liittyy asetteluun?
Rautalankamalli (wireframe) on sivun asettelun yksinkertaistettu, vähän yksityiskohtia sisältävä kaavio, joka näyttää, mihin sisältölohkot, navigointi ja avainelementit sijoitetaan. Se luodaan ennen kuin visuaalisia suunnittelupäätöksiä on tehty, ja se keskittyy pelkästään rakenteeseen ja sisällön sijoitteluun. Rautalankamalleja käytetään asetteluratkaisujen suunnitteluun ja testaamiseen ilman värien, fonttien tai kuvituksen aiheuttamaa häiriötä. Sivustorakenninta käyttävälle yrittäjälle valitsemasi mallipohja toimii käytännössä rautalankamallina, jonka päälle on lisätty ulkoasu.
Pitäisikö jokaisella sivustolla olla sama asettelu?
Ei välttämättä, mutta niiden pitäisi tuntua yhtenäisiltä. Etusivulla, blogikirjoituksella ja tuoteluettelosivulla on eri sisältötyypit ja eri tarkoitukset, joten niille sopivat kullekin omat asettelunsa. Yhtenäisenä pitäisi pysyä ylätunniste, navigointi, alatunniste ja yleinen visuaalinen tyyli. Näiden yhtenäisten elementtien sisällä sisältöalueen asettelu voi vaihdella sivun tarkoituksen mukaan. Tavoite on, että sivusto tuntuu johdonmukaiselta, ei että jokainen sivu on rakennettu identtisesti.
Mikä on responsiivinen ruudukkoasettelu?
Responsiivinen ruudukkoasettelu on ruudukkorakenne, joka mukauttaa sarakkeiden määrän käytettävissä olevan näytön leveyden mukaan. Leveällä työpöytänäytöllä se voi näyttää neljä saraketta. Tabletilla se vähenee kahteen. Puhelimella se tiivistyy yhteen. Ruudukko reagoi näytön kokoon automaattisesti ilman erillisiä suunnitelmia jokaiselle laitteelle. Useimmat nykyaikaiset sivustorakentimet toteuttavat responsiiviset ruudukot oletuksena, joten asettelu mukautuu oikein ilman käsin tehtävää määritystä jokaiselle rajapisteelle.
Miten asettelun valinta vaikuttaa sivun latausnopeuteen?
Asettelulla itsellään on vähäinen vaikutus latausnopeuteen. Nopeuteen vaikuttaa asettelun sisältö: kuvat, videot, skriptit ja fontit. Monimutkainen ruudukkoasettelu optimoiduilla kuvilla latautuu nopeammin kuin yksinkertainen yksisarakkeinen asettelu optimoimattomilla. Tästä huolimatta asettelut, joissa on paljon koko leveyden taustakuvia tai parallax-vierityksiä, voivat pidentää latausaikaa, jos kuvia ei ole pakattu kunnolla. Asettelu on säiliö. Sen sisältö ratkaisee nopeuden.