Priručnik "Veb pristupačnost" - Rasporedi strana

Rasporedi strana

Uvod u rasporede strana

Pri radu sa veb sajtovima slabovide osobe obično koriste velike monitore ili povećavaju veličinu fonta u veb čitaču. Glavni problem pri ovome predstavljaju rasporedi strana sa fiksnim širinama elemenata. Oni su vrlo česti jer dizajneru daju veću kontrolu nad rasporedom i pozicioniranjem. Ako se širina postavi na 720 piksela, ona će uvijek biti 720 piksela. Ovaj pristup ima nekoliko negativnih posljedica.

 Prvo, zbog toga što su fiksni uvijek su iste veličine i ne iskorištavaju optimalno dostupni prostor. Na velikim ekra-nima sajt dizajniran za rezoluciju 800x600 činiće se malim i izgubljenim u centru ekrana. Suprotno od toga sajt dizajniran za rezoluciju od 1024x760 izazvaće pojavu horizontalne klizne trake na manjim rezolucijama što će uveliko umanjiti preglednost.

Druga negativna strana se odnosi na dužine linija i čitljivost teksta. Rasporedi sa fiksnom širinom obično dobro rade sa unaprijed određenim veličinama fontova u veb čitačima, ali ako se veličina poveća za nekoliko koraka, linije teksta se počinju prelamati do mjere kada su prekratke i nepogodne za čitanje, a ako se povećavanje nastavi i dalje, tekst će preći zadate granice i preći u susjedne elemente.

Ova dva problema se mogu riješiti primjenom tečnog i elastičnog rasporeda.

Tečni raspored

Kod tečnog rasporeda dimenzije se zadaju pomoću procenata umjesto piksela. Ovo omogućava tečnim rasporedima da se skaliraju relativno u odnosu na veličinu prozora veb čitača. Kako se poveća ili smanji prozor veb čitača, tako će se mijenjati i dimenzije elemenata.

Ali ni tečni rasporedi nisu bez negativnih strana. Pri malim veličinama prozora, dužine linija teksta mogu postati vrlo uske i teške za čitanje. Ovo se može spriječiti postavljanjem parametra min-width u pikselima ili u em da bi se spriječilo da raspored postane preuzak.

Suprotna situacija je ako se raspored raširi previše, linije mogu postati predugačke i teške za čitanje. Ovaj problem se može riješiti na više načina. Glavni elemeat koji sadrži ostale elemente se ne mora prostirati čitavom dužinom prozora već samo određenim dijelom, recimo 85 procenata. Padding i margin se takođe mogu zadati pomoću procenata. Na ovaj način oni će se mijenjati srazmjerno veličini prozora ne dozvoljavajući sadržaju da se proširi previše. Na kraju takođe se može postaviti maksimalna širina pomoću max-width glavnog elementa u pikselima.

Јedna stvar na koju treba obratiti pažnju pri radu sa procentima je da se dimenzija elementa računa na osnovu elementa koji ga sadrži, a ne na osnovu čitavog prozora.

Slijedi primjer veb strane sa elastičnim rasporedom sa tri kolone.

Đ.17 Primjer rasporeda strane sa tri kolone

Za početak se postavlja širina omotača, glavnog div element koji će sadržati ostale elemente, kao procenat širine prozora veb čitača. U ovom primjeru to će biti 85 procenata što daje dobre rezultate na širokom spektru veličina ekrana. Slijedeće što se postavlja je širina sekcije za navigaciju i sekcije za sadržaj kao procenat širine omotača, u ovom slučaju 23 i 75 procenata respektivno. Ostavljena su 2 procenta slobodnog prostora za sve greške u zaokruživanju i neregularnosti u širini do kojih bi moglo doći.

#omotac {
    width: 85%;
}

#navigacija {
    width: 23%;
    float: left;
}

#sadrzaj {
    width: 75%;
    float: right;
}

 

 

Slijedeći korak je postavljanje širina kolona u sekciji za sadržaj. Ovaj dio je malo komplikovaniji jer će širine div elemenata unutar nje biti zasnovane na širini div elementa sadržaj, a ne cijelog prozora veb čitača. Ako veličina sporednog sadržaja treba biti ista kao i širina sekcije za navigaciju, potrebno je izračunati koliko je 23 procenta omotača u odnosu na širinu sekcije za sadržaj. Ovo je 23 (širina sekcije za navigaciju) podijeljeno sa 75 (širina sekcije za sadržaj) pomnoženo sa 100 što na kraju daje oko 31 procenat. Potrebno je ostaviti prostor za greške kao i između sekcija za navigaciju i sadržaj, ovo po istoj formuli izađe na oko 3 procenta, što znači da za sekciju glavnog sadržaja ostaje 66 procenata.

#glavniSadrzaj {
    width: 66%;
    float: left;
}

#sporedniSadrzaj {
    width: 31%;
    float: right;
}

Ovako zadat tečni raspored je optimalan na rezoluciji od 1024x780, ali se može lako čitati na manjim i većim rezolucijama kao što se može vidjeti na slici.

Slika Đ.18 Prikaz skaliranja rasporeda strane pri promjeni veličine veb čitača

Iz razloga što se dati raspored tako dobro skalira nema prevelike potrebe za postavljanjem max-width, ali sadržaj bi se počeo ponašati loše pri malim veličinama ekrana tako da se može postaviti min-width na 720 piksela za omotač.

Elastični raspored

Dok je tečni raspored dobar za optimalno iskorištavanje dostupnog prostora, dužine linija ipak mogu postati neprijatno predugačke na monitorima sa velikim rezolucijama, suprotno tome linije mogu postati vrlo kratke i izlomljene i izaći iz okvira elemenata koji ih sadrže pri uskim dimenzijama prozora i pri povećavanju fonta. U ovim slučajevima rješenje problema je elastični raspored.

Elastični raspored funkcioniše na način da se širine elemenata zadaju relativno u odnosu na veličinu fonta umjesto na širinu prozora. Zadajući širine u em osigurava se da kada se povećava veličina fonta, čitav raspored se prerasporedi srazmjerno. Ovo omogućava da dužine linija ostanu komforne za čitanje što je posebno bitno za slabovida i mentalno nedovoljno razvijena lica.

Kao i druge metode raspoređivanja ni elastični raspored nije bez problema. Najbitniji je sličan problem kao i kod rasporeda sa fiksnom širinom, a to je da ne koristi maksimalno dostupan prostor. Takođe pošto se čitav raspored uvećava pri povećanju fonta, sadržaj može izaći iz okvira prozora veb čitača, što primorava na korištenje horizontalne klizne trake. Ovaj problem se može riješiti zadavanjem veličine max-width od 100%.

Elastični raspored se kreira mnogo brže od tečnog jer u suštini svi elementi ostaju na istom mjestu u odnosu jedni na druge, s tim što im se povećava veličina. Izmjena rasporeda sa fiksnom širinom u elastični je jednostavan zadatak. Trik je u tome da se odredi osnovna veličina fonta tako da 1 em bude ugrubo oko 10 piksela.

Standardna veličina fonta na većini veb čitača je 16 piksela. Deset piksela je otprilike 62.5 procenata od 16 piksela, tako da je potrebno zadati veličinu fonta od 62.5%  za element body.

body {

  font-size: 62.5%;

}

Pošto je sada 1 em ekvivalentan 10 piksela, konvertovanje rasporeda sa fiksnom širinom u elastični se svodi na konvertovanje svih širina u pikselima u širine zadate u em

# omotac {
    width: 72em;
    margin: 0 auto;
    text-align: left;
}

# navigacija {
    width: 18em;
    float: left;
}

#sadrzaj {
    width: 52em;
    float: right;
}

#glavniSadrzaj {
    width: 32em;
    float: left;
}

#sporedniSadrzaj {
    width: 18em;
    float: right;
}

Slika Đ.19 Prikaz rasporeda strane sa elastičnim rasporedom pri standardnoj veličini fonta veb čitača

Slika Đ.20 Prikaz skaliranja strane sa elastičnim rasporedom pri povećanju veličine fonta u veb čitaču

Elastično-tečni hibrid

Na kraju može se upotrijebiti hibridni raspored koji kombinuje tehnike elastičnog i tečnog rasporeda. Ovaj kombinovani pristup radi na principu da su širine elemenata postavljene u em, a postavljanjem maksimalne širine u procentima:

#omotac {
    width: 72em;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

#navigacija {
    width: 18em;
    max-width: 23%;
    float: left;
}

#sadrzaj {
    width: 52em;
    max-width: 75%;
    float: right;
}

#glavniSadrzaj {
    width: 32em;
    max-width: 66%;
    float: left;
}

 

#sporedniSadrzaj {
    width: 18em;
    max-width: 31%;
    float: right;
}

 Na veb čitačima koji podržavaju max-width ovaj raspored će se mijenjati srazmjerno veličini teksta, ali nikada neće postati veći od širine prozora veb čitača.

Slika Đ.21 Prikaz skaliranja strane sa kombinovanim rasporedom pri povećanju veličine fonta u veb čitaču