Potrebno znanje: Osnovno poznavanje CSS i HTML Potreban softver: Tekst editor (Notepad ili slično) Vreme potrebno za učenje: 1-2 sata
Responzivni (prilagodljivi) dizajn je danas uglavnom pogrešno shvaćen. U ovom članku ću pokušati da srušim neke mitove u vezi tog pitanja a nakon toga ću vas provesti kroz proces izrade jednostavnog responzivnog veb sajta.
Većina veb dizajnera i programera danas priča o responzivnom, prilagodljivom veb dizajnu. Ali, da li svako od njih razume čemu on služi? Nisam baš siguran. Čini mi se da su mnogi kreatori veb sajtova pogrešno razumeli problem sa kojim se bave. Jednostavno rečeno, nije stvar u tome da se postojeći sajtovi prilagode mobilnim uređajima poput telefona i tableta, već se radi o tome da se sam sadržaj sajta prilagodi prikazivanju na ekranima različite veličine.
U ovom tutorijalu ću se detaljno pozabaviti principima na kojima je zasnovan responzivni veb dizajn, tako da bi smo bili sigurni da smo pravilno razumeli njegove koncepte. Kada to budemo razjasnili, objasniću vam kako da napravite sajt koji se savršeno uklapa i u velike i u male ekrane raznih uređaja koji prikazuju sadržaje sa interneta. Responzivni veb dizajn je postao vruća tema pre svega zato što sve više ljudi za pristup internetu koristi mobilne uređaje kao što su android telefoni, ajfon, ajped, blekberi, tablet računari i tome slično.
Dakle, postaje sve važnije da se shvati da sajt ne treba biti posebno napravljen za prikaz na kućnom desktop računaru ili pak specijalno za mobilne uređaje, već mora da bude izrađen na takav način da se njegov izgled automatski prilagođava različitim veličinama prikaza. Ako razmišljamo o novim tehnologijama koje ćemo neizbežno koristiti u budućnosti, onda adaptivni dizajn koji može automatski da odgovori na vrstu uređaja koji upotrebljava korisnik, postaje nezaobilazna i veoma važna pogodnost.
Na internetu postoji još uvek puno sajtova koji su skoro neupotrebljivi kada se pregledaju na mobilnim uređajima jer u vreme kada su načinjeni nije još uvek bila razvijena tehnologija mobilnog interneta. Zato su programeri izmislili takozvani “media queries” (medija kveris – medijski upiti) CSS3 modul u pokušaju da te sajtove koji su napravljeni za prikaz na velikim monitorima kućnih računara, prilagode prikazu na malim uređajima. Media queries omogućava renderovanje sadržaja klasične veb stranice tako da se prilagodi različitim uslovima prikaza kao što je rezolucija ekrana “pametnih” telefona ili tableta. W3C je preporučio taj standard u junu 2012 i on je sada temelj tehnologije responzivnog veb dizajna.
Kod sajtova koji ne koriste “media queries”, postoji mučan problem prilikom pregledanja sadržaja na mobilnim uređajima. Širina stranice tih sajtova je uglavnom veća nego što je širina ekrana tako da je naporno i frustrirajuće stalno ručno zumirati i uklapati sadržaj stranice u ekran kako bi smo pronašli ono što nas zanima.
S druge strane, mnogi sajtovi koriste media queries tako da je sadržaj sajta koji je prikazan na telefonu prilično osiromašen, nedostaju stvari za koje vlasnici sajta smatraju da nisu toliko bitne. Ta redukcija je po njima nužna da bi se sajt uklopio u mali ekran. Žrtvuju sadržaj radi izgleda i efikasnog pregledanja. Međutim, zašto ne bi smo i na mobilnim uređajima imali sve pogodnosti koje imamo i na kućnim desktop računarima? Ti sajtovi bi morali da promene izvorno kodiranje svojih stranica savremenim responzivnim kodiranjem što može biti veoma veliki i skup posao kod sajtova koji sadrže velike količine podataka i veliki broj stranica.
Znači, uz pomoć medija kverija možemo prilagoditi izgled celog našeg sajta veličini ekrana raznih uređaja. To je fantastično, ali da li je rešenje u tome da samo ubacimo nekoliko adaptacija u naš sajt? Zašto bismo se uopšte zamarali sa sajtom koji je tako loše projektovani ili izrađen da ne može nikako da se potpuno i precizno prilagodi drugim veličinama ekrana?
Muke korisnika
Neki ljudi smatraju da je u redu ukloniti opcije i sadržaje za koje veruju da nisu suštinski važne korisniku stranice. Ali, kako oni mogu biti sigurni da informacije koje su uklonili ili premestili na sporednu stranicu sajta nisu sadržaji koji su najvažniji za mene? Smatram da ako sadržaj nije vredan da bude prikazan na mobilnim uređajima korisnika, onda on nije vredan da se prikazuje bilo gde.
Prva stvar koju treba razumeti je da responzivni veb dizajn nije povezan samo sa mobilnim telefonima – on se odnosi na sve formate prikazivanja veb stranica. Drugo, izgradnja dobrog responzivnog sajta zahteva više vremena i truda nego ako samo koristimo medija kveri modul da podesimo stari sajt. U situaciji kada imamo brzo rastući ogroman broj raznih uređaja povezanih na internet, važno je da sajt bude što je više moguće lagan korisniku za pregledanje i da mu bude prijatno iskustvo.
Kod responzivnog veb sajta, možemo da koristimo jedinstvenu bazu kodova (codebase). To je odlično jer to znači da ne treba prilagođavati njegov sadržaj za svaki uređaj. Međutim, mnogi sajtovi sakrivaju sadržaj koji smatraju nepotrebnim za korisnike mobilnih uređaja i tu onda nastaju dva problema. Prvo, to u stvari kažnjava mobilne korisnike koji trenutno pretražuju sajt jer im uskraćuje da uživaju u punom sadržaju. Drugo, primena skrivenog stila u našem CSS kodu ne znači da taj sadržaj neće biti preuzet na njihov uređaj. Ovo može veoma da utiče na performanse onih uređaja koji imaju spore veze sa internetom.
Dakle, možda je najbolji način da se započne projektovanje sajta ako ga prvo načinimo za tablete ili manje uređaje. Na ovaj način možete da se fokusirate na najvažnije informacije koje vaš sajt treba da prikaže, a onda, ako je potrebno, možete da koristite prilagođene načine prikaza u kojima će vaša kompozicija stranice, velike slike i multimedijski elementi biti izgrađeni na temelju tog osnovnog dizajna.
Pravi razlog što mnogi sajtovi ne mogu u potpunosti da se prikažu na mobilnim uređajima je taj što su oni u stvari problematični na bilo kom uređaju. Kad bi bili dobro dizajnirani, onda bi trebalo da se lepo i efikasno uklapaju u male ekrane. Responzivni sajt ne mora da bude napravljen posebno za mobilne uređaje jer ako je ispravno sastavljen, on će raditi savršeno na bilo kom uređaju koji prikazuje sadržaje sa interneta. Jednostavno, biće bez problema prikazan.
U suštini, i kod klasičnog dizajna usmerenog na kućne desktop računare i kod responzivnog dizajna, ostaje isti problem – naša želja da dizajniramo najlepši mogući izgled sajta je ograničena time što smo prinuđeni da u stranice ugrađujemo standardne aplikacije za reklame, multimediju ili socijalne mreže. Ipak, kod responzivnog dizajna je taj problem sveden na minimum.
Zbog zapanjujućeg razvoja mobilnih uređaja, responzivni veb dizajn nas neće u potpunosti spasiti od potrebe da povremeno vršimo izmene na sajtovima u skladu sa pojavom novih tehnologija, ali bi trebalo da eliminiše problem prikaza na ekranima različitih veličina. Svi mi koji pravimo veb sajtove smo prošli kroz iste muke – kreirali smo sajtove koji ne rade dobro u Internet Eksploreru 6 a čak ni i u novijim verzijama tog pretraživača. To je problem koji je sve nas izluđivao i potrošili smo puno vremena smišljajući i primenjujući razne trikove da bi smo sa time izašli na kraj. Međutim, prava istina je da nije problem u Internet Eksploreru, nego u tome što smo naše sajtove dizajnirali na pogrešan način. Prateći eksplozivni rast upotrebe internet-aktivnih mobilnih uređaja, bitno je da dizajniramo naše sajtove na način koji omogućava njihovo prilagođavanje promenama.
Praktičan rad
Za potrebe ovog tutorijala, napravio sam probni sajt koji se lepo uklapa u velike i male ekrane to jest njegov sadržaj se prilagođava. Pomoću upotrebe medija kverija, podesio sam da se navigacija iz horizontalnog prikaza prebacuje u vertikalni prikaz za manje uređaje, a takođe sam ostavio dovoljno margina na smanjenom prikazu da bi sve dobro funkcionisalo na ekranima osetljivim na dodir (touch – screen).
Posebno zanimljiva mogućnost dok pregledate verziju sajta za male ekrane je da možete skočiti na glavni sadržaj pomoću linka (“sidra” – anchor) koji se nalazi na vrhu stranice. To omogućava korisnicima mobilnih uređaja da ne moraju da skroluju stranicu na dole.
Fajlove demo sajta možete preuzeti OVDE a demo prikaz pogledajte OVDE
Sajt Mediaqueri.es koji vidite na gornjoj slici je savršen za vašu inspiraciju i za demonstraciju responzivnog dizajna jer na njemu možete da vidite kako mnogi ozbiljni sajtovi izgledaju na raznim veličinama ekrana.
Ključni element fleksibilnosti u responzivnom dizajnu je fluidna širina prikaza. Sve što je potrebno je da podesite širinu vrapera (wrapper), sadržaja i kolumna tako da se uklapa u širinu ekrana različitih uređaja. To nije ništa novo, ali je sada ta osobina veb stranice postala važnija nego ikada ranije. Da bi smo pojednostavili stvari, pokazaću vam kako da napravite fluidnu stranicu koja se sastoji od navigacije, naslovne slike (banera) i dve kolumne, koja reaguje na veličinu i oblik ekrana raznih uređaja. Možete primetiti da sam priključio respond.min.js polyfill java skript koji omogućava da medija kveri bez problema radi na Internet Eksploreru od verzije 6 – 8.
Ovo je osnovna HTML5 struktura:
[html]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<title>Primer | Responzivni sajt</title>
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />
<link href=”styles/main.css” type=”text/css” rel=”stylesheet”>
<!–[if lt IE 9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<script type=’text/javascript’ src=’scripts/respond.min.js’></script>
</head>
<body>
<div id=”wrapper”>
<header>
<nav id=”skokNa”>
<ul>
<li>
<a href=”#main” title=”Skoči na glavni sadržaj”>Glavni sadržaj</a>
</li>
</ul>
</nav>
<h1>Demo</h1>
<nav>
<ul>
<li><a href=”#” title=”Bakutaner”>Babac</a></li>
<li><a href=”#” title=”Opis”>Opis</a></li>
<li><a href=”#” title=”Radovi”>heklanje</a></li>
<li><a href=”#” title=”Kontakt”>Kontakt</a></li>
</ul>
</nav>
<div id=”banner”>
<img src=”images/babac.jpg” alt=”banner” />
</div>
</header>
<section id=”main”>
<h1>Glavni sadržaj</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<aside>
<h1>Sporedni sadržaj</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</body>
</html>
[/html]
Što se tiče CSS, dobra ideja je da definišemo max-width (maksimalnu širinu prikaza) kako bi smo ograničili širenje na ekranima ogromne veličine. Jedan od glavnih problema kada se prebacujemo sa fiksnih širina na fluidne je prikazivanje slika. To se može lako rešiti pomoću CSS, samo podesite širinu vaših slika na 100%.
[css]
/* Struktura */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
#main {
width: 60%;
margin-right: 5%;
float: left;
}
aside {
width: 35%;
float: right;
}
/* Logo H1 */
header h1 {
height: 60px;
width: 195px;
float: left;
display: block;
background: url(../images/primer.png) 0 0 no-repeat;
text-indent: -9999px;
}
/* Navigacija */
header nav {
float: right;
margin-top: 40px;
}
header nav li {
display: inline;
margin-left: 15px;
}
#skokNa {
display: none;
}
#skokNa li {
background: #ffded4;
}
/* Baner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
}
#banner img {
width: 100%;
}
[/css]
Na taj način, vaša slika će se smanjivati i uvećavati u skladu sa veličinom ekrana ili prozora pregledača a zadržaće svoje srazmere. Jedino je bitno da pazite da max-width slike ne prekoračuje max-width njenog kontejnera inače će da pobegne van ekrana. Da bi ova metoda bila efikasna, zapamtite da je potrebno da upotrebite sliku čija će izvorna dimenzija biti dovoljno velika da bi mogla biti prikazana i na maksimalnom uvećanju koje ste odredili, bez gubitka kvaliteta prikaza.
U slučaju našeg demo sajta, opcija max-width sprečava sadržaj da se previše proširi.
Korišćenje velikih slika može da produži vreme učitavanja stranice i zato bi bilo dobro da se na malim uređajima gde su one nepotrebne, umesto njih učita manja verzija slike u zavisnosti od veličine ekrana. Postoji tehnika koja može da detektuje veličinu ekrana korisnika i prema njoj ubacuje sliku ali taj projekat je još u razvoju. Uprkos tome, vredi ga pogledati. Mat Markiz (Mat Marquis) koji je jedan od članova “JQuery Mobile” tima je napisao odličan tekst o ovoj metodi gde objašnjava njene prednosti i nedostatke. Pogledajte OVDE.
Uklapanje glavne navigacije
Glavni razlog zašto je potrebno uklopiti glavni navigacioni meni je zato što njegovo jednostavno umanjivanje može dovesti do toga da on postane nečitak i težak za klik mišem. Korišćenjem ove metode omogućićete korisniku da ga koristi sa lakoćom. Izvršio sam neke izmene u kodu što se tiče #main i aside sekcije da bi se uklopile u jednu kolumnu.
[css]
/* Medija Kveri */
@media screen and (max-width: 480px) {
#skokNa {
display: block;
}
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #f7f2cb;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}
[/css]
Primetićete da se kod nekih mobilnih uređaja vaš sajt automatski skuplja kako bi se uklopio u ekran i tu može doći do problema jer onda moramo ručno da zumiramo stranicu kao bi smo se kretali kroz problematičan sadržaj. Zato smo optimizovali naš sajt za mobilni prikaz pomoću ovog koda u head sekciji stranice:
[html]
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />
[/html]
Widht pravilo kontroliše veličinu prikaza. On može biti podešen na specifičan broj piksela, na primer widht=960 ili na vrednost širine uređaja koja je širina ekrana u pikselima pri skaliranju od 100%. Inicijalno scale pravilo kontroliše nivo zumiranja prilikom učitavanja stranice. Pravila pod nazivom maximum-scale, minimum-scale, i user-scalable definišu koliko je korisniku dopušteno da zumira stranicu.
Kao što sam već rekao, responzivni dizajn se ne bavi kreiranjem sajtova za mobilne uređaje već prilagođavanjem izgleda svim veličinama ekrana ili prozora u kome se stranica sajta prikazuje. Osobina sajta da se lepo uklapa u različite veličine prikaza bi trebalo da postane obavezna stvar za SVAKI sajt na internetu. Ako želite da napravite “mobilnu verziju” vašeg postojećeg sajta, koja će izgledati drugačije od originala i koja će prikazivati samo “važne” sadržaje, nema problema ali onda bar dozvolite korisniku da može pogledati i “ful” sajt. Trebalo bi da koristimo tehnologije koje se smatraju za “responzivni dizajn” u svrhu stvaranja boljeg interneta.
CSS3 mogućnost koja će nam neizmerno pomoći sa fluidnim prikazivanjem sajtova i koja me veoma raduje je Flexibile Box Layout Module. Taj modul je poznat i kao FlexBox i donosi nam metodu pomoću koje elementi automatski menjaju veličinu bez potrebe da se proračunavaju vrednosti visine i širine. Osim što dinamički menja veličinu elemenata, FlexBox može da ubaci pravila koja kontrolišu raspored praznih prostora na stranici. O korišćenju FlexBoxa ću uskoro napisati detaljno objašnjenje i praktičan tutorijal sa demo fajlovima za vežbu.
Veb dizajneri i programeri moraju da razmišljaju o tome kako da sadržaj sajta bude organizovan na takav način da bude isti za svakoga. Minimalni standard koji sebi kao kreatorima sajtova treba da postavimo je da pravimo sajtove koji dobro rade kod svakog korisnika, na bilo kom uređaju.