Ennen kuin aloitatte layoutin käytännön toteuttamisen, on joitakin perusasioita selvitettävä. Sinun tulee ensinnäkin päättää layoutin tyyppi. Periaatteessa tässä on kolme mahdollisuutta.
• Kiinteä
• Joustava
• Joustava
CSS mahdollistaa layoutit kiinteillä tai joustavilla mitoilla. Kiinteissä layouteissa käytetään yleensä pikseleitä. Joustavat layoutit sen sijaan perustuvat prosentuaalisiin arvoihin. Kummatkin layout-vaihtoehdot ovat omat etunsa ja haittansa.
Kiinteitä layouteja käytetään yleensä silloin, kun grafiikkaa käytetään layoutin määräämisen osana. (Vaikka CSS-taustakuvien käytön ansiosta tässä on poikkeuksia). Jos layoutin elementtien tarkka sijainti on tärkeää, kiinteä sijainti on yleensä valinta. Tässä tapauksessa usein ainakin layoutin leveys määritellään kiinteään pikselimäärään. Tämä leveys tähtää yleensä tiettyihin näyttöresoluutioihin.
Joustavat layoutit ovat erilaiset. Näissä ei ilmoiteta kiinteää leveyttä. Layout mukautuu tässä selaimen ikkunan leveyden mukaan.
Tällaisissa layouteissa leveys annetaan esimerkiksi prosentteina. Jos käyttäjä säätää selaimen koon, myös layoutin koko muuttuu.
Nykyiset CSS-ominaisuudet ovat mahdollistaneet uuden layout-vaihtoehdon, nimeltä responsiivinen layout. Layout muuttuu siten, että esimerkiksi älypuhelimessa se näyttää täysin erilaiselta kuin työpöytäkoneella. Täällä PSD-Tutorials.de:llä on työskennelty tällaisella layoutilla. Jos avaat sivun normaalilla työpöytäselaimen ikkunalla, näyttää se seuraavalta.
Kun pienennät ikkunaa, sivustolla olevien elementtien järjestys muuttuu todellakin.
Varianttien edut ja haitat
Ennen kuin aloitat layoutin toteuttamisen, sinun tulee miettiä, minkä layout-muodon haluat valita. Haluan lyhyesti näyttää teille kiinteiden layoutien edut ja haitat.
• Suunnittelumalleja on varmasti helpoin toteuttaa tässä.
• Kun noudatat standardeja resoluutioita, verkkosivuston esityksessä ei yleensä ole ongelmia.
• Layouteja on helppo välittää ymmärrettävästi. (Tämä etu on teille hyödyksi, jos olet web-kehittäjä ja haluat selittää layoutin asiakkaalle).
Kiinteillä layouteilla on kuitenkin myös haittoja.
• Koska mitat ovat kiinteät, ne eivät mukaudu esimerkiksi erittäin pieniin tai suuriin näyttöihin. Usein tilaa haaskataan.
• Ne ovat rajallisia esteettömyyden suhteen.
Joustavilla layouteilla on myös vahvuutensa ja heikkoutensa. Ensinnäkin etuihin.
• Layoutit skaalautuvat automaattisesti selaimen ikkunan koon mukaan.
• Vierailijat voivat itse vaikuttaa verkkosivuston esitykseen.
Heikkouksia on kuitenkin myös täällä.
• Kehittäjänä ette voi kovin hyvin kontrolloida tuloksia. Layout-ohjeita on vaikea toteuttaa täysin.
• Sisältöjen on oltava hienovaraisesti sopeutettuja.
• Suurilla näytöillä lyhyiden tekstien visualisointi voi olla "epämiellyttävää", koska ne usein näkyvät vain yhdellä rivillä. (CSS tarjoaa tähän kuitenkin asianmukaiset ominaisuudet, kuten min-width).
Toinen layout-muoto on jonkinlainen kompromissi kiinteiden ja joustavien layoutien välillä. Kyseessä ovat ns. elastiset layoutit. Niiden pääominaisuus on em-mitta. (Nykyään myös rem on yleistymässä. Toisin kuin em, rem mukautuu aina pään elementtiin, ei, kuten em, ylemmän tason elementtiin).
Nämä layoutit ovat leveydeltään ja korkeudeltaan joustavia. Sivuston suunnittelu skaalautuu suhteessa selaimen ikkunan kokoon. Tämä suunnittelutapa on varmasti monimutkaisin käytännön toteutuksessa. Tämä johtuu siitä, että sinun on tiedettävä tarkasti, miten elementit käyttäytyvät muuttuvassa selaimen ikkunassa. Elastisia layouteja käytetään pääasiassa sivustoilla, joissa tarjotaan paljon valokuvia ja videoita.
Elastisten layoutien edut:
• Käytettävissä oleva tila hyödynnetään optimaalisesti.
• Sisällöt näytetään aina niin suurina kuin mahdollista suhteessa.
Mutta tietenkin elastisilla layouteilla on myös omat haittansa.
• Näiden layoutien suunnittelu on hyvin monimutkaista.
• Myös toteutus ei ole millään muotoa helppoa.
Valitsemisen vaikeus
Teidän on siis päätettävä, minkä layout-vaihtoehdon haluatte käyttää. Jos olet vasta HTML/CSS-kehityksen alkuvaiheessa, suosittelisin kiinteää layoutia. Jos taas sinulla on jo edistyneitä tietoja web-kehityksestä, tulisi sinun työskennellä heti responsiivisten layoutien kanssa. Tässä olette oikealla tiellä, riippumatta siitä, millä laitteella verkkosivustoasi lopulta käytetään.
