{"id":3278,"date":"2013-02-21T10:09:01","date_gmt":"2013-02-21T08:09:01","guid":{"rendered":"https:\/\/dev.optiweb.com\/?p=3278"},"modified":"2018-01-22T10:07:40","modified_gmt":"2018-01-22T09:07:40","slug":"responsive-design","status":"publish","type":"post","link":"https:\/\/dev.optiweb.com\/sl\/blog\/responsive-design\/","title":{"rendered":"Responsive design"},"content":{"rendered":"<h2>Kaj sploh je responsive design?<\/h2>\n<p>Responsive design (odzivna oblika) je pristop izdelave spletne strani, ki cilja na optimalno izku\u0161njo uporabnikov ne glede na to, s katere naprave dostopajo do te spletne strani. Poskrbi tudi, da ima uporabnik dober pregled in nadzor nad spletno stranjo, brez da bi se moral poslu\u017eevati aktivnosti kot so zoomanje, obra\u010danje ekrana ali scrollanje levo in desno.\u00a0Torej, oblika odzivne spletne strani se prilagaja glede na napravo, s katere dostopamo do nje.<\/p>\n<p>Primer na\u0161e strani, ki ima responsive design (<a href=\"http:\/\/www.videa.si\/\" target=\"_blank\" rel=\"noopener\">www.videa.si<\/a>) :<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/dev.optiweb.com\/wp-content\/uploads\/2013\/03\/videa.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-3379\" src=\"https:\/\/dev.optiweb.com\/wp-content\/uploads\/2013\/03\/videa.png\" alt=\"Videa\" width=\"614\" height=\"461\" \/><\/a><\/p>\n<h2>Zakaj se je pojavila potreba po responsive designu?<\/h2>\n<p>V\u010dasih smo ljudje do spletnih strani ve\u010dinoma dostopali prek ra\u010dunalnika, le redko pa tudi prek mobilnih naprav. Leta 2012 so se pametni telefoni mo\u010dno raz\u0161irili, z njimi pa tudi \u0161tevilo povezav na spletne strani z mobilnimi napravami. Dele\u017e uporabnikov pametnih telefonov v ZDA je dosegel 50%, v Sloveniji pa presegel 27,5%. Uporabniki pametnih telefonov predstavljajo tudi 31% spletnih nakupovalcev. Glede na te statistike je jasno, da morajo biti spletna mesta \u010dim bolj optimirane za delo na mobilnih napravah, saj se bodo druga\u010de uporabniki &#8220;slabim&#8221; spletnim stranem izognili.<\/p>\n<p>V\u010dasih so si podjetja zagotovila stranke, ki do spletne strani dostopajo z mobilnimi napravami tako, da so izdelali lo\u010deno spletno stran za mobilne naprave. Na\u010deloma je bila to morda dobra re\u0161itev, sedaj pa se ne obnese ve\u010d, saj sedaj do spletnih strani ne dostopamo le z mobitelov, ampak tudi s tabli\u010dnih ra\u010dunalnikov, in drugih naprav (nekateri tudi \u017ee preko televizij).<\/p>\n<p>Med uporabo te naprave pogosto le to tudi obra\u010damo, da si \u010dim bolj olaj\u0161amo delo. Iz tega lahko povzamemo, da bi avtorji spletnih strani morali izdelati veliko razli\u010dnih spletnih strani, da bi pokrili vse razli\u010dne naprave. To bi prineslo ogromne stro\u0161ke, zato so izdelovalci spletnih mest za\u010deli iskati alternative. Pojavila se je ideja o responsive designu.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/dev.optiweb.com\/wp-content\/uploads\/2013\/02\/Responsive-web-design.png\"><img loading=\"lazy\" class=\"size-full wp-image-3295 aligncenter\" src=\"https:\/\/dev.optiweb.com\/wp-content\/uploads\/2013\/02\/Responsive-web-design.png\" alt=\"Responsive-web-design\" width=\"600\" height=\"392\" \/><\/a><\/p>\n<h2>Prednosti responsive designa<\/h2>\n<h3>Prijaznost uporabnikom<\/h3>\n<p>Odzivna spletna stran je v primerjavi s klasi\u010dno veliko bolj prijazna uporabniku, saj pa\u0161e na zaslon skoraj vsake naprave. \u017divimo v dobi kjer se tehnologija zelo hitro razvija, novi pametni telefoni in tabli\u010dni ra\u010dunalniki pa izhajajo tako pogosto, da jim komaj sledimo. Ti se seveda razlikujejo med sabo, zato je res pomembno, da je va\u0161a spletna stran narejena na osnovi responsive designa, saj druga\u010de ni optimalna za vse te naprave.<\/p>\n<h3>Analiza mobilnega segmenta<\/h3>\n<p>V primeru, da imamo namesto dveh lo\u010denih strani za ra\u010dunalnike in mobilne naprave le eno spletno mesto, imamo bolj\u0161i pregled vsega prometa. Ti podatki so klju\u010dni za analizo in izbolj\u0161anje spletne strani.<\/p>\n<h3>Optimizacija za iskalnike (SEO)<\/h3>\n<p>Iskalniki so vsak dan bolj\u0161i. Trenutno so \u017ee zmo\u017eni najti povezavo med spletnimi stranmi za mobitele in ra\u010dunalnike, zato je sedaj bolje, da imamo le eno spletno stran, ne pa eno za vsak tip naprav.<\/p>\n<h3>Preusmeritve niso potrebne<\/h3>\n<p>Ena najve\u010djih prednosti responsive designa je ta, da pri uporabi le-tega ne rabimo uporabljati nobenih preusmeritev. To je velika prednost pri razvijanju same spletne strani.<\/p>\n<h3>Zahteva manj vzdr\u017eevanja<\/h3>\n<p>Razvoj lo\u010dene spletne strani za mobilne naprave zahteva veliko dela, tako s postavitvijo spletne strani, kot z njenim vzdr\u017eevanjem. V primeru, da uporabljamo responsive design, imamo za urejati le eno spletno stran, saj ena spletna stran pokriva razli\u010dne vrste naprav.\u00a0<p>Vedno ve\u010d ljudi brska po spletu preko mobilnih naprav in tablic. In \u010de ni prilagojenega spletnega mesta, jo bo obiskovalec kaj hitro popihal od tam.<\/p><\/p>\n<h2>Slabosti responsive designa<\/h2>\n<h3>Dalj\u0161i \u010das nalaganja spletnega mesta<\/h3>\n<p>Za responsive design je potrebno spisati ve\u010d div-ov, ki se poka\u017eejo\/skrijejo glede na to s katero napravo pregledujete spletno mesto. Manj\u0161i problem se pojavi, \u010de spletno stran pregledujemo na telefonu, kateri ima tudi slabo povezavo, saj se \u00a0morajo nalo\u017eiti vsi div-i, \u010deprav so vbistvu nekateri skriti. Toda ta problem se manj\u0161a, saj se tudi na mobilnih omre\u017ejih hitrosti iz leta v leto ve\u010dajo, prav tako pa so mobilni telefoni vse bolj zmogljivi.<\/p>\n<h3>Slike<\/h3>\n<p>Eden izmed ve\u010dji problemov, ki se navezuje tudi na hitrost nalaganja, so slike. Le te morajo biti dovolj velike da so lepo prikazane na ve\u010djih zaslonih, obenem pa se morajo pomanj\u0161ati, \u010de nekdo gleda na manj\u0161em zaslonu. Toda v obeh primerih se mora nalo\u017eiti tudi tista najve\u010dja slika, kar pomeni da se pove\u010da prenos, in procesorska mo\u010d. Tega problema se spletni razvijalci zavedamo, zato so nekateri \u017ee na poti do <a href=\"http:\/\/picture.responsiveimages.org\/\" target=\"_blank\" rel=\"noopener\">re\u0161itve<\/a>, toda za standarizacijo bo potrebno \u0161e malo po\u010dakati.<\/p>\n<h3>Responsive design ote\u017ei optimizacijo za iskalnike (SEO)<\/h3>\n<p>Uporabniki na mobilnih napravah uporabljajo druge klju\u010dne besede kot na ra\u010dunalnikih. Ker pa SEO temelji na mnogih dejavnikih, kot so naslovi, klju\u010dne besede itd, nam responsive design v\u010dasih mogo\u010de\u00a0predstavlja problem, saj zelo te\u017eko nastavimo tak\u0161ne klju\u010dne besede, da bo stran dobro otimizirana tako za mobilne naprave, kot za ra\u010dunalnike.<\/p>\n<h3>Izdelava odzivne spletne strani vzame ve\u010d \u010dasa kot izdelava klasi\u010dne<\/h3>\n<p>Izdelava odzivne spletne strani vzame veliko ve\u010d \u010dasa kot izdelava klasi\u010dne spletne strani. Predelava klasi\u010dne spletne strani v odzivno se ni izkazala za dobro idejo, saj hitreje naredimo odzivno spletno stran od za\u010detka, kot pa predelamo klasi\u010dno.<\/p>\n<h3>Predstavlja problem za oblikovalce<\/h3>\n<p>Oblikovalci navadno oblikujejo videz spletne strani za glavne vrste in dimenzije naprav, ne pa tudi za vmesne verzije, saj bi to vzelo preve\u010d \u010dasa. Tako se lahko zgodi, da na dolo\u010denih napravah videz ni idealen, ampak glede na to, da obstaja ogromno razli\u010dnih naprav, je res te\u017eko poskrbeti za vse.<\/p>\n<h2>Nujno zlo?<\/h2>\n<p>Torej, \u010de povzamemo vse stvari in potegnemo \u010drto. Vemo da je nujno, da je spletno mesto lepo prikazano in funkcionalno tako na namiznih ra\u010dunalnikih, prenosnikih, tablicah, kot tudi\u00a0telefonih ter da pri tem ne smemo pozabiti na strukturo, poimenovanje URL naslovov in hitrost nalaganja.<\/p>\n<p>Trenutno je v Sloveniji responsive design \u0161e v povojih, defenitivno pa bo prej ali slej postal del vsake ponudbe, tako kot je pri nas. \u0160e zmeraj pa je potrebno omeniti, da obstajajo tudi projekti, kjer je strategija za pametne telfone druga\u010dna kot za ve\u010dje naprave in je \u0161e zmeraj bolj\u0161e narediti lo\u010deno spletno stran.<\/p>\n<p>Sicer pa, \u010de \u0161e dvomite v responsive design, gremo stavit da bo vsaj \u010detrtina ogledov tega \u010dlanka narejenih na mobilnih napravah ali tablicah? :)<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive design (odzivna oblika) je pristop izdelave spletne strani, ki cilja na optimalno izku\u0161njo uporabnikov ne glede na to, s katere naprave dostopajo do te spletne strani.<\/p>\n","protected":false},"author":1,"featured_media":15803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1032,1030,1031],"tags":[],"_links":{"self":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/3278"}],"collection":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/comments?post=3278"}],"version-history":[{"count":3,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/3278\/revisions"}],"predecessor-version":[{"id":19354,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/3278\/revisions\/19354"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media\/15803"}],"wp:attachment":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media?parent=3278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/categories?post=3278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/tags?post=3278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}