Enne kui hakkate paigutust praktilisel viisil rakendama, tuleb põhiasjad selgeks teha. Seega peaksite esmalt otsustama, millist tüüpi paigutuse valite. Põhimõtteliselt on siin kolm võimalust.
• Fikseeritud
• Paindlik
• Elastne
CSS võimaldab paigutusi kindlate või paindlike mõõtmetega. Kindlate paigutuste puhul kasutatakse tavaliselt pikslitena mõõtühikuid. Paindlikud paigutused põhinevad aga protsentuaalsetel väärtustel. Mõlemal paigutusvariandil on omad eelised ja puudused.
Tavaliselt kasutatakse kindlaid paigutusi siis, kui graafikat kasutatakse paigutuse kujundamisel. (Kuigi siin on erandeid ka CSS taustagraafika kasutamise tõttu). Kui paigutus nõuab elementide pikslite täpset paigutust, siis kasutatakse tavaliselt samuti kindlat paigutust. Selles paigutusvormis määratakse tavaliselt vähemalt paigutuse laius kindla piksliarvuga. See laius suunatakse tavaliselt konkreetsetele ekraaniresolutsioonidele.
Paindlike paigutuste puhul on olukord teine. Siin ei anta kindlat laiust. Paigutus kohandub siin brauseriakna laiuse järgi.
Selliste paigutuste puhul antakse näiteks laius protsentides. Kui kasutaja muudab brauseriakna suurust, muutub ka paigutuse suurus.
Tänu kaasaegsetele CSS-i omadustele on nüüd olemas veel üks paigutusvariant, nimelt nn reageeriv paigutus. Selles muudetakse paigutust selliselt, et näiteks nutitelefonis näeb see täiesti erinev välja kui lauaarvutil. Siin PSD-Tutorials.de lehel töötati näiteks sellise paigutusega. Kui lehe avab lauaarvutil "tavalise" brauseriakna suurusega, näeb see välja järgmine:
Kuid kui akent väiksemaks muuta, muutub tõepoolest veebisaidil olevate elementide paigutus.
Reageeriva paigutuse loomise vaev on võrdlemisi suur. Lõppude lõpuks tuleb külastaja ekraani suurus kindlaks teha ja seejärel talle sobiv paigutus esitada. Ning just seda sobivat paigutust peate erinevate ekraanisuuruste jaoks tõepoolest arendama. Külastaja, kes külastab teie veebisaiti suure monitoriga, näeb näiteks kolmesambalist paigutust. Aga kui mõni teine külastaja avab teie veebisaidi nutitelefonis, kuvatakse talle ühesambaline paigutus.
Variantide eelised ja puudused
Enne kui hakkate paigutust rakendama, peate otsustama, millist eespool nimetatud paigutustüüpi soovite kasutada. Tahan teile lühidalt näidata, milliseid eeliseid ja puudusi on kindlatel paigutustel.
• Disainimallide rakendamine on siin kindlasti kõige lihtsam.
• Kui juhindute standardresolutsioonidest, ei tekita veebisaidi kuvamisel praktiliselt probleeme.
• Paigutused on kergesti arusaadavad. (See eelis tuleb teile kindlasti kasuks, kui soovite veebiarendajana kliendile paigutust selgitada).
Kindlatel paigutustel on aga ka puudused.
• Kindlate mõõtmete tõttu on nad paindumatud ja ei kohandu näiteks väga väikestele ega suurtele ekraanidele. Sageli raisatakse palju ruumi.
• Nende ligipääsetavuse osas kehtivad mõned piirangud.
Kuid ka paindlikel paigutustel on nii tugevad kui ka nõrgad küljed. Alustame aga eelistest.
• Paigutused kohanduvad automaatselt brauseriakna suurusega.
• Külastajad saavad seega suurt mõju avaldada veebisaidi kuvamisele.
Kuid siin on ka puudusi.
• Arendajana on teil raske kontrollida tulemusi. Paigutusjuhised on seega ainult piiratult realiseeritavad.
• Lehe sisu tuleb hoolikalt kohandada.
• Suurtel ekraanidel võivad lühikeste tekstide kuvamisega tekkida „ebameeldivad“ probleemid, kuna need kuvatakse siis sageli ainult ühes real. (CSS pakub siiski vastavaid omadusi, nagu min-width).
Üks veel üks paigutusvorm pakub keskteed fikseeritud ja paindlike paigutuste vahel. Siin on tegemist nn elastsete paigutustega. Nende peamiseks tunnuseks on mõõtühik em. (Viimasel ajal kasutatakse üha rohkem ka rem. Erinevalt em-st orienteerub rem alati juureelemendile, mitte nagu em ülemreeglevale elemendile).
Neis paigutustes on laius ja kõrgus paindlikud. Lehe kujundus skaleerub proportsionaalselt brauseriakna suurusele. See kujundamisvorm on ühelt poolt kindlasti kõige keerulisem praktilise rakendamise osas. Selle põhjuseks on lihtsalt asjaolu, et tuleb enne väga täpselt teada, kuidas elemendid käituvad muutuva brauseriakna korral. Elastseid paigutusi kasutatakse peamiselt veebisaitidel, kus pakutakse palju fotosid ja videoid.
Elastsete paigutuste eelised:
• Kasutatav ruum kasutatakse optimaalselt ära.
• Sisu kuvatakse proportsionaalselt alati võimalikult suurelt.
Kuid loomulikult on elastsetel paigutustel omad puudused.
• Nende paigutuste kujundamine on väga keeruline.
• Ka rakendamine ei ole sugugi lihtne.
Valikute küsimus
Seega peate otsustama, millist eespool nimetatud varianti soovite kasutada. Kui olete HTML/CSS-arenduses alles alguses, soovitaksin alustuseks kindlat paigutust. Kes juba omavad edasijõudnud teadmisi veebiarenduse valdkonnas, peaks aga otsekohe töötama reageerivate paigutustega. Siin olete õigel teel, olenemata sellest, millise seadmega teie veebisait lõpuks avatakse.
