Pomagalnik

Pomagalnik

Strokovnjak za digitalne medije.

Kaj je Responsive Web Design(RWD) oz. odziven spletni design

Responsive Web Design(RWD)

Responsive Web Design(RWD) oz. slovensko odziven spletni design je način izvedbe, ki se prilagaja mediju na katerem se nahajamo. V praksi to pomeni, da imamo eno spletno stran do katere lahko dostopamo preko različnih naprav in brskalnikov. Njena vsebina pa bo vedno enaka in optimalno pripravljena za naš medij.

Nahajamo se v svetu, ko uporabniki do naših straneh dostopajo preko namiznih računalnikov, laptopov, netbookov, tabličnih računalnikov ali mobilnih telefonov. Poleg vrsto različnih naprav in njihovih resolucij pa so tu še različni brskalniki. Da bi lahko zagotovili optimalno spletno izkušnjo in maksimalno izkoristili medij, ki ga imamo na voljo pa uporabimo Responsive Web Design. Pogoj je seveda pravilna izvedba izvajalca.

Sam izraz Responsive Web Design(RWD) je skoval Ethan Marcotte v svojem članku na strani A List Apart.  Sam opis Responsive Web Design-a in praktične primere pa si lahko ogledate v njegovi knjigi Responsive Web Design. Sveže informacije na temo Responsive Web Design-a pa lahko spremljate na Twitter profilu @RWD.

Responsive Web Design dosežemo s pomočjo Cascading Style Sheets 3 media povpraševanji (CSS3 @media). V CSSju namreč določimo vse potrebne akcije, ki se aktivirajo glede na specifikacije uporabnikove naprave in tako dobimo Responsive Web Design.

Mobile First in Progressive Enhancement sta sorodna koncepta, ki sta se pojavila pred Responsive Web Design-om. Njihova filozofija pa je ta, da veliko mobilnih naprav ne podpira naprednejših CSS3 media povpraševanj. Zaradi tega je pametno narediti spletno mesto, ki podpira vse naprave in ga nato nadgradimo za naprednejše mobilne naprave in računalnike. Namreč naprednejše mobilne naprave in računalniki razumejo novejše tehnologije, kot je CSS3. Zaradi tega je postopna nadgradnja bolj upravičena, kot pa da kompleksno stran, ki je namenjena naprednejšim napravam oz. računalnikom in je bogata z slikovnim in video gradivom degradiramo za mobilne naprave.

Boston globeEden najbolj znanih primerov Responsive Web Design-a - The Boston Globe

Uporabo CSS značke "display:none" za skrivanje določenih elementov in lažje prilagajanje spletnih strani mobilnim napravam ne priporočam. Namreč uporabnik še vedno prenese vse podatke in je tako ob uporabi značke "display:none" praktično kaznovan. Enako velik prenos, kot klasični PC uporabnik, vendar manj vsebine. Tu je potrebno poiskati druge ustrezne rešitve.

Glavna slabost, ki jo prinaša Responsive Web Design se nanaša predvsem na Flash. Flash namreč ni responsive oz. odziven in posledično imamo lahko tu zaradi obilice oglasov precej težav. Če smo svoje oglaševanje na strani že priredili iPadom in iPhonom, potem imamo tu manj težav.
Druga slabost pa so slike, najbolj optimalna metoda bi seveda bila slika prilagojena po velikosti in dimenziji uporabnikovi napravi. V praksi bi to pomenilo N število slik, da bi zagotovili optimalno izkušnjo, hitro nalaganje in manjši prenos podatkov. Slabost te metode je ta, da je tehnologija za takšno uporabo še v razvoju, kar pa imamo na voljo pa ima precej kompleksno uporabo. Večjo število enakih slik v drugih dimenzijah prinaša tudi večje potrebe po prostoru na strežnikih. Glede na situacijo je tu najbolj optimalno poiskati neko vmesno pot, kjer zadovoljimo največje število uporabnikov. Uporabniki mobilnih naprav pa morajo kljub navidezni prilagoditvi slike njihovim napravam malo potrpeti pri prenosu podatkov.

Omembe vreden je tudi članek "50 fantastic tools for responsive web design" na spletni strani revije .net. Članek nam poda 50 orodij s katerimi se lahko lotimo Responsive Web Design-a.

Svet in dostop do informacij postaja vse bolj prepleten. Prav tako postajamo uporabniki precej bolj zahtevni in želimo dostop do informacij kjer koli, kadar koli na medij, ki ga trenutno uporabljamo. Zaradi tega moramo imeti pri razvoju novih spletnih strani vedno na prvem mestu uporabniško izkušnjo, ki mora biti enaka tako na mobilnih napravah, kot namiznih računalnikih.

Tagi: , ,

Sorodni članki

Komentiraj