Opšte o responsiv web dizajnu

Responsive web dizajn nije isto što i mobilni dizajn. Mobilni dizajn podrazumeva da Vaš web designer kompletno pravi dizajn web sajta ili web aplikacije za pametne uređaje. Na drugu stranu, responsive web dizajn, podrazumeva da domen, sadržaj i sintaksa koda ostaje nepromenjena (manje više nepromenjena zbog JavaScript-a), a sam dizajn se menja usled takozvanih Media Query-a u fajlu koji određuje sam dizajn sajta (CSS fajl)

Ovaj način dizajniranja sajtova podrazumeva korišćenje takozvanih flexibilnih šema, fleksibilnih slika i CSS3 Media Queries - a, da bi se sadržaj adaptirao korisnikčkim različitim rezolucijama na ekranima različih uređaja. Responsive web design je postao standard u kreiranju modernih web sajtova. {to je više uređaja sa različitim veličinama ekrana na tržištu, osnovno je prilagoditi i Vašu web stranicu istim. Programeri i web dizajneri moraju da razmisle kako da web dizajn sa desktop uređaja prilagode ekranima mobilnih telefona ili tableta, a da web sajt ili aplikacija ostane jednako funkcionalna, i da korisniku obezbedi jednostavno korišćenje sadržaja. Što je zadovoljniji korisnik veći je i profit od web sajta. Zadovoljniji je i vlasnik web sajta, a mi kao programeri dobijamo dobre reference. Win Win situacija

Magazin TechCrunch je u jednom svom članku predvideo da će 1.9 milijardi korisnika interneta biti isključivo na "pametnim uređajima". To znači da je responsive web dizajn "must have", u sadašnjem poslovanju.

Responsive web design je počeo da se primenjuje kao fensi trend, ali je ubrzo postao evolucioni korak u oblasti izrade sajtova i dan danas ima veliki uticaj na posao kojim se bavimo svi mi koji smo na internetu.

Postoji mnogo prednosti responsive web design - a, a neke od njih su:

Prednosti koje donosi responsive web design

Prednosti koje donosi responsive web design su mnogobrojne ali navešću neke koje se tiču korisnika i vlasnika web sajtova, nas programere ću staviti u drugi plan.

• Jeftiniji je. Klijent plaća malo veću cenu nego kada bi radio standardni web dizajn, ali plaća mnogo manje nego kad bi radio 2 ili 3 različita web sajta za sve platforme. U suštini programer izrađuje samo jedan web sajt koji putem pravila u responsive web dizajnu menja izgled i prilagođava se različitim platformama. Postavljanje novog sadržaja na web sajt je lakše kada ga unosite samo na jednom mestu i prilagođavate samo jednom uređaju (uglavnom je to desktop). Svaki bolji programer, treba da ima takav sistem (CMS) koji taj sadržaj optimizuje i prilagođava ostalim uređajima. Zaključak je da ko god unosi sadržaje na sajt, čini to veoma brzo, a time čuva svoje vreme i novac.
• Čuva Vaše vreme. Sa pravim planiranjem, RWD sa lakoćom obezbeđuje efikasnost zbog toga što ne morate unositi jedan te isti sadržaj prilagođen za sve platforme, to radite samo jednom. Programerski kod sve radi za Vas. Smanjivanje slika, prilagođavanje veličine fonta, transformisanje navigacije... sve je to automatski i prilagođava se "palcu" korisnika.
• Optimizacija web sajta se poboljšava. Sa jedinstvenom web adresom (URL-om) i desktop korisnici i korisnici sa pametnih uređaja i google roboti imaju isti prikaz sadržaja, samo što je svakome od njih prikazano ono što se od Vašeg sajta "traži" na način, najbolji za svakog od njih. Google, kao najjači pretraživač, je počeo u svojoj generičkoj pretrazi web sajtova da pokazuje ispod linkova reči "Mobile Friendly", što u prenesenom značenju predstavlja činjenicu da je web sajt urađen tehnologijom responisive web design.
• Performanse web sajta će biti znatno bolje. Učitavanje web sajta i sama navigacija kroz stranice biće veoma brže. Slike koje se učitavaju na manjim urešajima su manje po rezoluciji i prostoru koje zauzimaju na hostingu, a samim tim se brže učitavaju. Fontovi koji se koriste su prilagođeni pametnim uređajima tako da iskustvo korisnika sa Vašim web sajtom postaje znatno bolje.
• Korisnici Vašeg web sajta će brže stići do željenih informacija Koristeći RWD na dizajnu Vašeg web sajta znači da će te dobiti mnogo veći broj korisnika koji koriste mobilne uređaje. Složićete se da će korisnik pre kupiti Vaš proizvod ili zatražiti Vašu uslugu ako se web sajt lepo vidi na njegovom uređaju. Ipak je web sajt ogledalo Vašeg poslovanja

GOOGLE preporučuje Responsive web design

Google preporučuje web programerima da prate trendove iz oblasti web programskog jezika HTML 5 jer je robotima koji skeniraju Vaš sajt lakše da se snađu u tom kodu, i takođe preporučuju upotrebu CSS3 standardna za dizajniranje web sajtova uz korišćenje tzv. Media Query-a koji su osnovni alat responsive web design-a kako bi se web sajtovi prilagođavali različitim rezolucijama ekrana i po google-u bili "Mobile friendly"

Da li je web sajt mobile-friendly možete proveriti klikom na link Google Mobile friendly test

Izvor: Google Developers

Mane responsive web design-a

Da bi sagledali u drugu stranu medalje, moramo napomenuti i neke mane koje nam donosi RWD, a sve u cilju kako bi pokušali da ih izbegnemo ili učinimo da što manje utiču na optimizaciju i preglednost našeg web sajta

• Moguće sporije učitavanje web sajta. Česta greška programera je u tome što koriste iste slike za sve rezolucije ekrana. Ovo je velika greška što se tiče optimizacije i Vaš programer nikako ne bi smeo da dozvoli da mu se podkrade ova greška. Vaš web sajt nikada neće biti dobro optimizovan i trpeće veoma sporo učitavanje na ionako sporim konekcijama na internet tipa 3G mreže za mobilne telefone
• Moguće produženje roka izrade web sajta Ključ uspeha u izradi RWD-a je znati uraditi isti. To znači da web programer mora sagledati problem i prilagoditi kompletan sadržaj korisnicima manjih uređaja, a ne samo sakriti neke sadržaje koji se na manjim ekranima neće videti (slideri, velike slike, navigacije itd...). Ukoliko Vam web programer kaže da će mu za RWD trebati još nekoliko dana rada, velika je verovatnoća da zna šta radi, ali ne uzimajte ovaj savet zdravo za gotovo
• Sadržaj mora biti prikazan na svim platformama - Neki web programeri idu lakšim putem i samo sakriju sadržaj koji je komplikovan za prilagođavanje manjim ekranima. Kao klijent obratite pažnju na to, jer vi programeru plaćate taj deo posla. Obratite pažnju na forme, tabele i navigaciju
• Korisnici ne žele onaj osnovni dizajn u svim slučajevima - Uzmite mobilni telefon ili tablet u ruke i pogledajte šta Vam je programer napravio. Ponekad korisnici ne žele da se slideshow slika okreće na malenom telefonu sa malenim strelicama koje nikako ne mogu da pritisnu, ili pak moraju da zumiraju taj deo web sajta kako bi pritisli i pomerili sliku. Prilagodite svaki sadržaj na sajtu tako da kontakt telefona ili proizvoda ili usluga dolazite u najviše 2 klika. Kontakt podatke i dobru pretragu treba istaći na prikazu sadržaja na manjim ekranima.

Da li ste spremni za responsive web dizajn?

Pre nego što požurite sa izradom web sajta proverite da li Vaš programer ima potrebno iskustvo u izradi web sajtova ovog tipa ili da li Vama zaista treba web sajt sa ovom tehnologijom.

• Da li je web sajtu potreban Responsive web design - Ovo pitanje se više odnosi na redizajn postojećeg web sajta. Ukoliko imate web sajt i hoćete od njega da učinite da bude prilagodljiv uređajima, razmislite prvo dal je vredan toga. Ukoliko su stranice velike, korisniku će trebati više vremena da downloaduje te stranice prilikom korišćenja Vašeg sajta. Možda je bolje da se novac utroši prvo na optimizaciju web sajta nego na slepo praćenje trenda. Nemojte me pogrešno shvatiti, po mom mišljenju svakom sajtu je poteban RWD, ali web sajt treba pripremiti za isti. Takođe, ako prodajete proizvode ili usluge koje kupci kupuju isključivo preko desktop računara ili laptopovima sa ekranima preko 13" dijagonale, ne morate trošiti dodatan novac na responsive web design. Podatak koji Vam govori sa kojih uređaja korisnici dolaze na Vaš sajt možete proveriti u Google Analytics servisu
• Da li Vaš web programer zna da pravi responsive web design - Responsive web design se ne izrađuje jednostavno i može biti kompleksniji nego što mislite. Za sve postoji proces učenja pa tako i za ovu tehniku izrade web sajta. Postoje raznorazna pomagala za dizajnere i takozvani frejmvorksi (eng. Frameworks) ili predefinisane šeme po kojima se znatno lakše responsive web design može uraditi. Bootstrap i Boilerplate su dva najpoznatija framework-a za izradu responsiv web dizajna, ali mi u Izradi sajtova Srbija smatramo da je uvek bolje napraviti rešenje koje se odnosi samo na Vaš sajt, koje će imati mnogo manje linija koda, nego već neko predefinisano rešenje koje je napravljeno za veliki broj sajtova. Manje koda = brže učitavanje. Postupak izrade namenjenog rešenja za Vaš sajt traje duže, ali se tačno kontroliše svaki pixel i moguće je lako pomeranje i odstupanje od dizajna ukoliko klijent to želi.
• Da li web programer može da istestira web sajt - Bez obzira što na tržištu postoji veliki broj alata preko kojih možete videti kako web sajt izgleda na različitim rezolucijama ekrana, iz iskustva znamo da se responsive web design najbolje testira na "živom primeru". U našem studiju posedujemo ekrane od 27" pa sve do ekrana mobilnih telefona od 4 i 5.5". Ovako obezbeđujemo kvalitet urađenog responsiv web dizajna i prilagođavamo ga da budućim korisnicima web sajta bude stvarno od koristi. Treba pogledati i analitiku i pratiti na njoj šta korisnici koji dolaze sa mobilnih uređaja gledaju na sajtu tj. da li gledaju ono što mi želimo da im prikažemo. Ukoliko RWD nije podešen kako treba , potrebno je promeniti dizajn i istaći bitne stvari. Postoji preko 100 različitih rezolucija ekrana na tržištu, tako da problemu dizajniranja web sajta za sve njih, treba prići sa izuzetnim znanjem o materiji.
• Očekujte da nije sve tako savršeno - Kao što smo rekli Responsive web design manipuliše sa istim kodom i pomoću CSS Medija queries - a i JavaSrcript -a upravlja kodom i prikazuje ga onako kako je to web programer namestio. U velikom broju slučajeva ne možete očekivati da na svakom pogledu sve bude u pixel savršeno. Ovakve greške se najčešće javljaju nakon što programer završi web sajt, a vlasnici sajta prilikom unosa sadržaja unesu možda neku veliku neoptimizovanu sliku ili neki duži tekst gde dizajnom nije predviđeno. Dobar web programer bi trebalo da Vas uputi da takve greške ne pravite, odnosno da predvidi gde bi dizajn mogao da "pukne" prilikom Vašeg rada.

Zaključak o ovoj temi

Responsive web design je postao neophodnost za 99% korisnika. Ušao je u standardnu ponudu svake agencije za izradu sajtova ali pažljivo birajte programera. Preporuka ili reference su uvek najbolji način da proverite kvalitet usluge neke agencije za izradu sajta. Raspitajte se sa kojim alatima radi, kako testira izrađeno itd. Nadam se da sam Vam bio od pomoći i da sam uspeo bar malo da Vam približim ovaj trend u oblasti dizajniranja web sajtova.

Hvala na izdvojenom vremenu. Ukoliko Vam se dopao tekst, molimo Vas da ga podelite na socijalne mreže. Podržite naš rad.