Predenj kot uporabite postavitev v praksi, je treba pojasniti nekaj osnovnih stvari. Najprej se morate odločiti za vrsto postavitve. Na splošno obstajajo tri možnosti.
• Fiksno
• Prilagodljivo
• Elastično
CSS omogoča postavitve s fiksnimi ali prilagodljivimi dimenzijami. Pri fiksnih postavitvah običajno delamo z velikostmi v pikslih. Prilagodljive postavitve temeljijo na odstotkih. Obe vrsti postavitev imajo svoje prednosti in slabosti.
Fiksno postavitev se običajno uporablja, kadar želimo grafične elemente postabit natančno. (Čeprav so tudi tukaj izjeme zaradi uporabe ozadij s CSS). Pri postavitvah, kjer gre za natančno pozicioniranje elementov, običajno tudi uporabljamo fiksno pozicioniranje. Pri tej vrsti postavitve je običajno določena vsaj širina postavitve v fiksnem številu pikslov. Ta širina običajno cilja na določene zaslonske ločljivosti.
Drugače pa je pri prilagodljivih postavitvah. Tukaj ne dajemo fiksne širine. Postavitev se tukaj prilagaja širini brskalnikov.
Pri takšnih postavitvah navadno določimo širino v odstotkih. Če uporabnik spremeni velikost brskalniškega okna, se spremeni tudi velikost postavitve.
Zahvaljujoč sodobnim CSS lastnostim imamo zdaj tudi drugačno vrsto postavitve, imenovano odzivna postavitev. Ta postavitev se prilagodi tako, da na primer na pametnem telefonu izgleda popolnoma drugače kot na namiznem računalniku. Tu na spletnem mestu PSD-Tutorials.de smo na primer delali s takšno postavitvijo. Če odprete stran na namizju z "običajno" velikostjo brskalniškega okna, dobite naslednji prikaz.
Vendar če okno pomanjšate, se dejansko spremeni postavitev elementov na spletnem mestu.
Izdelava odzivne postavitve je sorazmerno zahtevna. Končno moramo ugotoviti velikost zaslona obiskovalca in mu nato prikazati ustrezno postavitev. To ustrezno postavitev v resnici morate razviti za različne velikosti zaslonov. Na primer, če obiskovalec odpre vaše spletno mesto z velikim zaslonom, bo prikazana tristebna postavitev. Če pa drug obiskovalec odpre vaše spletno mesto s pametnim telefonom, mu bo prikazana enostebna postavitev.
Prednosti in slabosti variant
Preden začnete izvajati postavitev, morate premisliti, katero izmed navedenih vrst postavitev želite uporabiti. Kratek pregled prednosti in slabosti fiksnih postavitev.
• Načrtovanje predlog je tukaj zagotovo najlažje izvesti.
• Če se držite standardnih ločljivosti, praktično ni težav pri prikazu spletnega mesta.
• Postavitev je enostavno prenašati. (Ta prednost vam bo seveda koristila, če kot spletni razvijalec želite stranki razložiti postavitev).
Fiksne postavitve pa imajo tudi slabosti.
• Zaradi fiksnih meril so neprilagodljive, se ne prilagajajo na primer zelo majhnim ali velikim zaslonom. Pogosto se izgubi veliko prostora.
• Imajo nekatere omejitve glede dostopnosti.
Tudi prilagodljive postavitve imajo prednosti in slabosti. Najprej glede prednosti.
• Postavitve se samodejno prilagajajo velikosti brskalniškega okna.
• Obiskovalci lahko torej močno vplivajo na prikaz spletnega mesta.
So pa tudi slabosti.
• Rezultate je težko nadzorovati kot razvijalec. Navodila za postavitev se torej lahko izvajajo samo delno.
• Vsebina na straneh mora biti temeljito prilagojena.
• Pri velikih zaslonih lahko pride do neprijetnega prikaza kratkih besedil, saj so te pogosto prikazane le v eni vrstici. (CSS ponuja ustrezne lastnosti, kot je min-width).
Še ena oblika postavitve predstavlja nekakšen kompromis med fiksnimi in prilagodljivimi postavitvami. Gre za tako imenovane elastične postavitve. Glavna lastnost teh je merska enota em. (V zadnjem času pa je vse bolj v uporabi tudi rem. Za razliko od em se rem vedno prilagaja korenskemu elementu, ne kot em na nadrejenem elementu).
Pri teh postavitvah sta širina in višina prilagodljivi. Oblikovanje strani se sorazmerno prilagaja velikosti brskalniškega okna. Ta način oblikovanja je nedvomno na eni strani najzapletenejši, ko gre za praktično izvedbo. To je preprosto zato, ker moramo vnaprej zelo dobro vedeti, kako se bodo elementi obnašali pri spreminjanju velikosti brskalniškega okna. Elastične postavitve se uporabljajo predvsem za spletne strani, kjer je na voljo veliko fotografij in videoposnetkov.
Prednosti elastičnih postavitev:
• Na voljo izkoristijo prostor optimalno.
• Vsebine se vedno prikazujejo sorazmerno čim večje.
Vendar pa imajo elastične postavitve seveda tudi svoje slabosti.
• Oblikovanje takšnih postavitev je zelo zapleteno.
• Tudi izvedba ni enostavna.
Izbira
Zato se morate odločiti, katero izmed navedenih variant želite uporabiti. Če ste še na začetku svojega razvoja HTML/CSS, vam najprej priporočam fiksno postavitev. Tisti z naprednimi znanji na področju razvoja spletnih mest pa bi morali takoj začeti delati z odzivnimi postavitvami. Tukaj ste na pravi poti, ne glede na to, s katero napravo se bo vaše spletno mesto končno odprlo.
