Uvod u web dizajn - 6. deo - Responzivni web dizajn

Uvod

Posle savladavanja osnova HTML-a i CSS-a, upoznavanja sa načinima za podelu stranica i HTML5 standardima, preostaje da se upoznamo i sa tematikom responzivnog web dizajna.

Sam termin "responzivni web dizajn", označava skup tehnika koje omogućavaju prilagođavanje vizuelnog sadržaja web stranica različitim uređajima, to jest, različitim rezolucijama ekrana (na kojima se sajt prikazuje), i u pitanju je naravno/očekivano, tehnologija novijeg datuma.

U prvo vreme, kada su web sajtovi tek počeli da se pojavljuju (u obliku koji nalikuje modernim sajtovima), dizajneri su se vodili idejom da prikaz sajtova treba da bude prilagođen desktop monitorima, što je u "davna vremena" bilo krajnje opravdano (budući da su tadašnji mobilni telefoni imali proste tekstualne LCD ekrane i nisu uopšte imali mogućnost uspostavljanja internet konekcije).

Međutim, mobilni telefoni su postepeno napredovali (i postajali su sve dostupniji), a u međuvremenu, počeli su da se pojavljuju i drugi mobilni uređaji ....

Još malo "istorijskog konteksta" ....

U vreme pojave prvih web sajtova, rezolucije desktop monitora su (takođe) bile male, ali, vremenom su rasle, a porast rezolucija ekrana uticao je i na porast količine vizuelnih informacija na sajtovima.

Vreme kada su desktop monitori dostigli rezolucije nalik današnjim rezolucijama (prva polovina prve decenije 21. veka), okvirno se poklapa sa pojavom mobilnog interneta, ali, mobilni uređaji iz navedenog perioda (iako su već imali prave grafičke ekrane u boji), ni iz daleka nisu pružali dovoljno prostora za prikaz sajtova koji su dizajnirani za desktop monitore.

Ako biste se nekim čudom vratili u 2006. godinu (neka ne bude baš sam početak mobilnog interneta), sa sobom poneli moderan telefon iz 2020. i pokušali da na telefonu otvorite neki od tadašnjih sajtova, verovatno biste doživeli blago razočaranje, jer - budući da prilagođavanja sajtova mobilnim uređajima nije bilo - sajtovi su pri prikazu na mobilnim telefonima delovali (jednostavno rečeno), veoma usitnjeno, veličina teksta jedva je omogućavala čitanje, a dugmad i linkovi su bili premali i preblizu jedni drugima.

Ipak, situaciju treba posmatrati iz tadašnjeg konteksta: sajtovi su (kao i do tada), kreirani za desktop monitore (sa rezolucijama koje su znatno veće od rezolucija ekrana mobilnih uređaja sa početka 2000-ih), internet je na telefonima bio dostupan svega nekoliko godina unazad, konekcije su još uvek bile spore, i ljudi su bili zadovoljni time što je uopšte moguće otvarati sajtove na nečemu što nije desktop ili laptop računar.

Prosto rečeno, tehnologija je još uvek bila (suviše) nova i zanimljiva sama po sebi, i nije se (još uvek) previše razmišljalo o poboljšanju prikaza na mobilnim uređajima.

Međutim, svega nekoliko godina kasnije (cca. 2010), rezolucije ekrana i brzina interneta na mobilnim uređajima, dostigli su zadovoljavajući nivo, popularnost mobilnog interneta je već bila 'primetna', i u takvim okolnostima je (naravno) porasla i svest o tome da bi prikaz na mobilnim uređajima mogao (da ne kažemo - "morao"), biti bolji nego do tada.

U praktičnom smislu, može se reći da je u navedenom periodu postalo jasno i to da 'prava popularnost' mobilnog interneta tek predstoji, i stoga su web sajtovi počeli masovno da prolaze kroz svojevrstan "pit-stop", posle čega su vraćani u opticaj u izmenjenom izdanju, koje omogućava dobru preglednost bez obzira na rezoluciju ekrana ....

Kako organizovati sadržaj web stranice

Sada kada imamo predstavu o tome šta responzivni web dizajn podrazumeva (i o tome "kako smo stigli tu gde jesmo"), pozabavićemo se i tehnikalijama koje omogućavaju da se sve što smo naveli - zapravo i postigne.

Pre svega, mora se razmotriti šta je pod kojim okolnostima potrebno prikazati.

Uobičajeni pristup u organizaciji elemenata web stranice

Sajt koji posmatrate iskoristićemo kao primer uobičajenog pristupa u organizaciji sadržaja.

U verziji sajta za desktop monitore, prikazano je "sve":

• u podeli stranice po vertikali, navigaciona traka sa linkovima (koji su jedan pored drugog), postavljena je u gornjem delu, u donjem delu je footer (sa servisnim informacijama i linkovima), a centralni deo zauzima glavni sadržaj
• u podeli srednjeg dela po horizontali, članci su približno centrirani, a dodatne informacije u panelima nenametljivo stoje sa svake strane).

Mobilna verzija je prilagođena nižim rezolucijama: linkovi iz navigacione trake premešteni su u padajući meni (da ne kažemo, "razvlačeći"), koji se otvara i zatvara preko popularnog "hamburger dugmeta", i linkovi su sada jedan ispod drugog. Footer je vrlo sličan, tekst na celoj stranici je gotovo iste veličine, ali, slike su umanjene (tako da ne "ispadnu" iz ekrana), a desni bočni panel iz desktop verzije, u mobilnoj verziji je smešten u sopstveni padajući (tj. razvlačeći) meni.

Nasuprot organizaciji kakvu smo prethodno opisali, pogledajmo kako bi sajt izgledao kada bismo na mobilnom telefonu pokušali da otvorimo verziju sajta za desktop monitore (u praktičnom smislu - situacija od pre petnaestak godina, koju smo opisali na početku):

Na ekranu dijagonale 15-ak cm, raspored koji vidimo na gornjoj slici, možda "može da prođe", ali svakako nije optimalan.

U opštem smislu, uvek se postavlja pitanje šta treba raditi sa vizuelnim elementima stranice pri prelasku sa jedne rezolucije na drugu (pogotovo kada se sa većih rezolucija prelazi na manje), a posebno je bitno o tome razmisliti kada su u pitanju komplikovaniji sajtovi sa velikom količinom vizuelnih informacija, na kojima (za razliku od gornjeg primera), nije lako odrediti šta je centralni sadržaj.

Šta raditi kada je sadržaja (ipak) previše

Šta zapravo uraditi (kada rezolucija opadne) i kako smestiti elemente tako da se što bolje prenese informacija o sadržaju sajta?!

Pošto (očigledno) ne može više biti prikazano "sve i odjednom", u prvi plan se moraju postaviti najbitniji elementi, ali, potrebno je da elementi grafičkog dizajna sugerišu da postoje i ostali sadržaji (na primer, kada vidimo "hamburger dugme" - očekujemo da postoji meni sa navigacionim linkovima i sl).

Ponekad se određeni elementi moraju (doslovno) i ukloniti iz prikaza, ali, svakako je potrebno prikazati bar osnovni sadržaj (i pružiti informaciju o tome da postoje i drugi sadržaji).

Veličine fontova i grafičkih elemenata biće (kao što smo već nagovestili), prilagođene dimenzijama ekrana, ali, to je u svemu najmanji problem (i rekli bismo da se tako nešto, u "drugoj deceniji 21. veka", ipak već podrazumeva).

Na nivou intuicije deluje sasvim prirodno da razmišljamo o tome kako treba organizovati 'vizuelnu strukturu' sajta kada rezolucija za prikaz počne da opada (onako kako smo opisali iznad), međutim - u tehničkom smislu - praktičnije je "razmišljati u obrnutom smeru".

U većini situacija, optimalan pristup podrazumeva da se pri dizajnu sajta u obzir prvo uzme prikaz sajta na mobilnim uređajima najmanje rezolucije (tipična odrednica za najmanju rezoluciju je 240px po širini), a potom - svaki put kada rezolucija poraste za 'jedan korak' - elemente treba uvećavati, dodavati i preraspoređivati.

Za pristup koji smo upravo opisali, u stranoj literaturi se koristi termin "mobile-first design".

Širenje i skupljanje elemenata može se rešiti upotrebom modela flexbox (sa kojim ste imali priliku da se upoznate u IV nastavku), dok je za prepoznavanje promena rezolucije, najpraktičnije koristiti takozvane media-query direktive u CSS-u.

Media-query direktive

Jezik CSS omogućava navođenje posebnih odeljaka u kojima se mogu pisati selektori koji važe samo pod određenim okolnostima (horizontalna ili vertikalna orijentacija ekrana, minimalna ili maksimalna rezolucija i sl).

Pogledajmo primer:

		
h1 {
	font-size:     2rem;
	font-weight:   bold;
	color:         #ffa;
	margin-bottom: 1em;
}

p {
	font-size:     1rem;
	font-family:   sans-serif;
	margin-bottom: 1em;
}

/* ---------------------------------------- */
/* RESPONSIVE                               */
/* ---------------------------------------- */

@media only screen and (min-width: 300px) {
	h1, p {
		margin-bottom: 1.6em;
	}
}
		
	

Selektori navedeni unutar gornje media-query direktive, aktiviraće se kada rezolucija dostigne (ili prestigne) 300 piksela po širini, dok će u (naj)manjim rezolucijama važiti CSS kod koji nije obuhvaćen media-query direktivom (tj. važiće prva dva selektora).

"Mobile-first" pristup

CSS kod koji smo prethodno videli, na praktičan način predstavlja suštinu "mobile-first" pristupa: prvo se navode opšta svojstva elemenata i celokupna definicija stila za najniže rezolucije, a potom, u odgovarajućim odeljcima - izmenjena svojstva koja će se primenjivati kada se rezolucija poveća.

Naravno, ne navode se sva svojstva, za sve rezolucije, već se unutar media-query direktiva navode samo ona svojstva koja se menjaju.

Pogledajmo još jedan praktičan primer:

		
.plavo_dugme {
	width:           100%;
	height:          24px;
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	align-items:     center;
	font-size:       11pt;
	background:      #3355ff;
	color:           #fff;
}

/* ---------------------------------------- */
/* RESPONSIVE                               */
/* ---------------------------------------- */

@media only screen and (min-width: 320px) {
	.plavo_dugme {
		width:     240px;
		height:    32px;
		font-size: 13pt;
	}
}
		
	

Plavo dugme koje se na sajtu koristi za formulare, u nižim rezolucijama zauzima (skoro) punu širinu ekrana - što deluje dopadljivo.

U većim rezolucijama (pogotovo u desktop rezolucijama), nije (više) dopadljivo da širina dugmeta bude ~100% širine ekrana, i stoga je podešeno da se (već) na 320px širine ekrana, širina dugmeta promeni na 240px (fiksno).

Takođe (kao i u prvom primeru), krajnje dobro dođe i komentar koji jasno označava početak dela CSS koda sa media-query blokovima.

Mini-projekat: navigaciona traka

Da bismo još bolje razumeli sve što je do sada navedeno, dizajniraćemo jednostavnu navigacionu traku (ali, ovoga puta, ipak bez padajućeg menija u nižim rezolucijama), a na kraju ćemo ponuditi i link prema gotovom primeru.

Prelomne tačke biće rezolucije 240px (rezolucija za koju pišemo osnovni CSS kod), 300px i 768px:

• u najnižim rezolucijama, linkovi će biti prikazani kao mali (međusobno razdvojeni) dugmići sa neznatnim paddingom (prikaz kakav je primeren najnižim rezolucijama)
• kada rezolucija dostigne 300px, dugmići će biti zaobljeni na ćoškovima i neznatno uvećani
• kada rezolucija dostigne 768px, pojaviće se struktura navigacione trake koja će nositi linkove

Pogledajmo HTML kod koji se odnosi na nav element (zarad preglednosti, nećemo prikazati ostatak strukture, ali, možete pronaći ceo HTML kod preko linka koji ćemo objaviti na kraju članka):

		
<div id='okvir_stranice'>
	<!--
	<header></header>
	-->
	<nav class="iskljucena_selekcija">
		<a href="index.html">POČETNA</a>
		<a href="blog.html">BLOG</a>
		<a href="o_nama.html">O NAMA</a>
		<a href="kontakt.html">KONTAKT</a>
	</nav>
	<!--
	<main></main>
	<footer></footer>
	-->
</div>
		
	

Ovoga puta (takođe zarad bolje preglednosti), nećemo smeštati navigacione elemente u ulančanu listu (što je inače praksa).

Koristićemo sledeći osnovni CSS kod:

		
nav {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     center;
	flex-wrap:       wrap;
	
	height:          auto;
	background:      none;
	padding:         16px 8px 0 12px;
}

nav a {
	font-family:   Roboto-Light, Inconsolata, Consolas, monospace;
	background:    #5966ee;
	color:         #ffffff;
	font-size:     10pt;
	padding:       1px 5px 1px 5px;
	margin:        0 5px 12px 5px;
	border-radius: 2px;
	text-align:    center;
}

nav a:hover {
	font-weight: bold;
}
		
	

U selektoru za nav traku primećujemo atribut flex-wrap (sa vrednošću "wrap"), koji omogućava elementima da se rasporede u "novi red" ukoliko po širini nema dovoljno prostora za smeštaj (visina se prilagođava sadržaju, a pozadine nema).

Selektor za navigacione linkove definiše: boju pozadine, margine (preko kojih će se linkovi "odmicati" jedni od drugih), zaobljavanje ćoškova i horizontalno centriranje teksta.

U najnižim rezolucijama, dugmići sa navigacionom trakom (koja je 'još uvek' nevidljiva), prikazuju se na sledeći način:

U sledećem koraku, dodaćemo CSS za rezolucije od 300+ piksela po širni:

		
/* ---------------------------------------- */
/* -          RESPONSIVE                  - */
/* ---------------------------------------- */

@media only screen and (min-width: 300px) {
	nav a {
		padding:       4px 20px 4px 20px;
		margin:        0 5px 12px 5px;
		border-radius: 14px;
	}
}
		
	

Ništa "ekstravagantno", ali sasvim dovoljno.

U praktičnom smislu, u pitanju je prava mobilna verzija sajta (jer većina modernih telefona ima rezoluciju koja je nezanemarljivo veća od 240px po širini).

Navigaciona traka sada ima sledeći oblik:

Na kraju, kada rezolucija dostigne 768 piksela po širini, "promenićemo CSS", tako da se pojavi prava (plava) navigaciona traka (sledeći kod je potrebno dopisati ispod već postojećeg CSS-a):

		
@media only screen and (min-width: 768px) {
	nav {
		height:     36px;
		min-height: 36px;
		background: #5966ee;
		padding:    0;
	}
	
	nav a {
		background:     none;
		width:          120px;
		padding:        0;
		margin:         0;
		letter-spacing: 0.07em;
	}
}
		
	

Traka poprima novi oblik na krajnje jednostavan način: potrebno je samo da se traci pripiše boja (pozadine), a da se linkovima ukine boja (pozadine).

Sigurni smo da vam nije promaklo ni to da je traka sve vreme bila prisutna (samo što je bila 'bezbojna'), a sada joj se može pripisati i fiksna širina (budući da znamo da u rezoluciji od 768px širine, svi dugmići garantovano mogu stati u isti red).

Takođe, možemo ukinuti i padding za dugmad (s obzirom na to da smo im pripisali fiksnu širinu).

Posle svega, navigaciona traka je spremna za "eksploataciju".

Sledeći koraci ....

Implementaciju principa responzivnog web dizajna sagledali smo na primeru samo jednog elementa, ali (sa druge strane), izabrali smo element koji na većini stranica "trpi" najveće promene pri promenama rezolucije.

Programski kod gotovog sajta koji koristi navigacionu traku koju smo opisali u ovom članku, možete preuzeti sa sledećeg linka:

.... a preko drugog linka ....

.... možete videti kako sajt izgleda u praksi.

U bliskoj budućnosti počećemo sa objavljivanjem specijalizovanih članaka sa mini-projektima koji se tiču različitih elemenata stranica (dugmad, padajući meniji, galerije slika i drugi elementi), a poslednji nastavak serijala o web dizajnu (Web dizajn - 7. deo), posvetićemo editorima i efikasnoj obradi teksta.