3 načina da pređete na mobilni sajt sa responzivnim Web dizajnom
Za mnoga poslovanja, pravljenje verzija Web sajta za svaku rezoluciju i novi uređaj praktično je nemoguće, ili barem nepraktično i neisplativo. Prilično su neodlučni kada je u pitanju njihova mobilna strategija. Veliki broj njih nije siguran da li treba išta da radi po tom pitanju dok su drugi u nedoumici: mobilna aplikacija ili mobilni sajt? Trenutna situacija je takva da korisnici mobilnih uređaja više preferiraju upotrebu mobilnih aplikacija nego mobilnih sajtova.
Koristeći se idejom responzivnog dizajna imaće te mogućnost prilagođavanja svake od ovih verzija sajta na niz uređaja sa različitim veličinama ekrana i sposobnostima.
Responzivni (odgovarajući) Web dizajn je pristup koji sugeriše da bi projektovanje i razvoj trebali da odgovaraju na ponašanje korisnika i okruženja na osnovu veličine ekrana, platforme i orijentacije. Responzivni Web dizajn omogućava bilo kom sajtu da posluži mobilne Web stranice na osnovu tipa uređaja koji se koristi za pristup sajtu.
U poslednje vreme sve više i više poslovanja okreće se responzivnom dizajnu. Ideja, da se ima jedan sajt, sa jednom bazom koda, koji može da usluži Web, mobilne i tablet klijente je zaista moćna stvar koja može da donese dosta velike uštede.
Responzivni Web dizajn znači da ljudi na vašem sajtu mogu da pronađu informacije koje su im potrebne, bez obzira na to da li mu pristupaju sa računara koji ima veliki ekran, tableta ili pametnog telefona.
U ovom članak pokazaćemo vam 3 najbolja načina sa kojim možete konvertovati postojeći Web sajt u mobilni sajt koji će omogućiti visoko-kvalitetno iskustvo pregledanja za svakoga, bez obzira na vrstu uređaja.
Razumevanje responzivnog dizajna
Da bi dizajn bio responzivan (odgovarajući), obično je potrebno da ima sledeća tri atributa:
Fluid Grid: Sistem tečne mreže (rešetke) koristi procente za definisanje kolona ili div tag za širinu umesto piksela. Na primer, širina od 650px u dizajnu sa fiksnom širinom, bila bi označena sa 100% u CSS-u dizajnu sa tečnom širinom.
Media Queries: Upiti medija omogućavaju prilagođeni CSS na osnovu minimalne i maksimalne širine pretraživača. Na primer, upit koji dolazi sa medija sa maksimalnom širinom od 450px znači da se radi o mobilnim pretraživačima.
Responzivne Slike: Po ponašanju su slične tečnoj mreži, responzivne (odgovarajuće) slike nemaju fiksnu širinu već imaju maksimalnu širinu (tipično označenu sa 100% kada se prikazuje na desktopu). Ovo omogućava da slika bude lako smanjena kako bi se uklopila u širinu ekrana na kom se Web stranica prikazuje.
Izlaz ovih atributa je jednostavno prepoznati. Da bi lakše razumeli o čemu govorimo pogledajte na primer sajt Starbucks i ručno promenite veličinu pretraživača. Primećujete li da se ekran prilagođava i podešava na osnovu širine pretraživača? To je responzivni Web dizajn.
Mobilni sajtovi sa responzivnim Web dizajnom
Do skora, nadogradnja ili konvertovanja postojećeg Web sajta u mobilnu platformu bi bilo dosta skupo i komplikovano. Srećom, danas postoje alati i resursi koji nude bržu, lakšu i povoljniju uslugu mobilnog Web dizajna.
Sa Google GoMo i DudaMobile besplatno konvertujte svoj Web sajt u mobilni sajt
Pre nekoliko meseci kompanija Google u saradnji sa startup-om DudaMobile, koje se bavi optimiziranjem mobilnog Web-a, odlučila je da korisnicima besplatno ponudi veoma brz i jednostavan način za prilagođavanje Web sajta mobilnim uređajima.
Google GoMo i DudaMobile sklopile su partnerstvo kako bi vlasnicima Web sajtova pomogli u prilagođavanju njihovih sajtova mobilnim uređajima.
Usluga radi tako što kreira hostovanu mobilnu verziju sajta koja ima sinhronizovane sposobnosti kako bi se osiguralo da vaš mobilni sajt automatski dobije sva ažuriranja koja se nalaze na vašem Web sajtu. U suštini, imate mogućnost da kreirate kvalitetnu mobilnu verziju sajta koja je potpuno različita od vaše Web verzije, a ipak smisleno integrisana u vaš sajt iz perspektive nekoga ko koristi vaš sajt.
Osnovna prednost ovog sistema je što ne morate da znate ništa o responzivnom Web dizajnu, CSS3, HTML5, i dr.. Ovo je savršeno rešenja za poslovanja i blogere sa malo tehničkog iskustva ili resursa.
Ova usluga je besplatna u prvih 12 mjeseci a nakon toga potrebno je platiti 9 dolara mesečno, odnosno 108 dolara godišnje.
Responzivni Web template
Template Monster pruža širok spektar responzivnih Web dizajn tamplate-a (šablona) za svaki veći CMS (Sistem za Upravljanje Sadržajem), kao što su Drupal, Joomla, WordPress, i mnoge druge Web platforme.
Template Monster je najveći svetski ponuđač tamplate-a i tema za sajtove, koji ima ogromnu bazu visoko kvalifikovanih dizajnera koji žive od online zarade od tema i tamplate-a koji se prodaju na Template Monster. Imajući u vidu ekspanziju mobilnog Interneta, nije iznenađujuće što su teme i tamplate-i sa responzivnim Web dizajnom u velikoj meri zastupljeni na ovom, jednom od najvećih tržište tema i template-a.
Prednosti korišćenja Template Monster je ta da ste u stanju fizički preuzeti i instalirati mobilni template na vaš postojeći Web sajt. Pod uslovom da imate malo iskustva i veština sa Web dizajnom, moći ćete sami uraditi neke izmene ili poboljšanje na template-u kako bi ga napravili da savršeno odgovara vašem sajtu.
Migracija na mobilnu Web platformu
Pre otprilike dva meseca, Joomla, koja je jedan od najpopularnijih sistema za upravljanje sadržajem koji se koriste za izgradnju blogova, Web sajtova, portala i Intraneta, predstavila je verziju 3.0. Ono što je značajno kod Joomla 3.0 jeste to što ona donosi ugrađenu podršku za Twitter-ov BootStrap framework koji omogućava automatsku, responzivnu podršku za mobilne Web sajtove.
Više o funkcionalnostima koje donosi Joomla 3.0 pročitajte u članku “Joomla 3.0 sa Twitter BootStrap donosi fantastični responzivni Web dizajn”.
S obzirom da je Joomla napravila veliki iskorak sa podrškom responzivnom Web dizajnu, ima smisla razmotriti mogućnosti da uradite nadogradnju starije verzije Joomla, ili migrirate svoj trenutni sajt na Joomla 3.0 platformu.
Migracija postojećeg sajt ili CMS na Joomla nije nemoguća. Sve velike CMS platforme nude migracione putanje kako bi olakšale ljudima koji žele da presele svoje postojeće sajtove na drugu platformu. Takođe, jednostavnom pretragom Web-a pronaći ćete veoma mnogo korisnih informacija oko migracije na Joomla 3.0.
Šta mislite o responzivnom Web dizajnu i da li ga koristite kako bi korisnicima pametnih telefona i tableta omogućili najbolje moguće iskustvo na vašem sajtu?
[…] korisnike zaista je moćna stvar koja će vam zasigurno donijeti mnoge koristi i velike uštede. Responzivni Web dizajn omogućuje svakom sajtu da posluži mobilne Web stranice na osnovu tipa uređaja koji se koristi za […]
Kako napraviti Drupal blog sa responzivnim Web dizajnom — Online Tržište
2 dec 12 at 18:44 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
[…] nova verzija WordPress-a donosi i novu temu pod nazivom “Twenty Twelve” koja nudi responzivni Web dizajn, što je čini pogodnim za pametne telefone i tablete, kao i za desktop pretraživače. Treba reći […]
WordPress objavio verziju 3.5 sa novim alatom za upload medija — Online Tržište
12 dec 12 at 08:52 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
[…] nova verzija WordPressa donosi i novu temu pod nazivom “Twenty Twelve” koja nudiresponzivni Web dizajn, što je čini pogodnim za pametne telefone i tablete, kao i za desktop […]
WordPress objavio verziju 3.5 sa novim alatom za upload medija | WebSavjeti
12 dec 12 at 13:55 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
[…] Reflow je kompanijin Photoshop za responzivni dizajn. Edge Reflow omogućuje svima da brzo i jednostavno kreiraju Web sajt i sadržaj koji će […]
Adobe objavio aplikaciju za responzivni dizajn te ažurirao Dreamweaver, Edge Animate i Edge Code — Online Tržište
14 feb 13 at 20:18 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
[…] Možda će vam biti od koristi članak “3 načina da pređete na mobilni sajt sa responzivnim Web dizajnom”. […]
Napraviti mobilnu aplikaciju ili mobilni sajt? — Online Tržište
23 apr 14 at 07:51 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>
[…] Preporučujemo vam članak “3 načina da pređete na mobilni sajt sa responzivnim Web dizajnom”. […]
Google počeo kažnjavati sajtove koji nisu prilagođeni mobilnim uređajima! — Online Tržište
22 apr 15 at 11:07 edit_comment_link(__('Edit', 'sandbox'), ' ', ''); ?>