{"id":38304,"date":"2026-11-11T08:51:55","date_gmt":"2026-11-11T07:51:55","guid":{"rendered":"https:\/\/madwise.si\/blog\/?p=38304"},"modified":"2026-10-28T12:17:01","modified_gmt":"2026-10-28T11:17:01","slug":"responsive-dizajn-kaj-manjka","status":"publish","type":"post","link":"https:\/\/madwise.si\/blog\/responsive-dizajn-kaj-manjka\/","title":{"rendered":"Responsive dizajn ni dovolj \u2013 kaj \u0161e manjka?"},"content":{"rendered":"\n

Responsive dizajn ima danes skoraj vsaka novej\u0161a spletna stran, vsaj na papirju<\/strong>.<\/p>\n\n\n\n

Prilagaja se telefonu, tablici, prenosniku in \u0161irokemu monitorju, pa vseeno k nam redno pridejo marketinga\u0161i in lastniki podjetij z isto zgodbo: obisk raste<\/strong>, konverzija pa stagnira<\/strong>.<\/p>\n\n\n\n

Ko stran pogledamo, razlog skoraj nikoli ni v tem, da ni odzivna<\/strong>. Razlog je v tem, \u010desar responsive dizajn sam po sebi<\/strong> nikoli ne re\u0161i.<\/p>\n\n\n\n

Zbrali smo \u0161tiri stvari<\/strong>, ki jih odzivna postavitev najpogosteje pozabi<\/strong>, in predlagali u\u010dinkovite re\u0161itve.<\/p>\n\n\n\n

Responsive dizajn \u0161e ne pomeni, da je spletna stran hitra<\/h2>\n\n\n\n

Stran se lahko na telefonu postavi popolnoma pravilno<\/strong> in kljub temu grozljivo po\u010dasi<\/strong> nalaga.<\/p>\n\n\n\n

To je prva in najdra\u017eja te\u017eava<\/strong>, ki je responsive dizajn sam po sebi ne re\u0161i, marsikdo pa misli, da je s tem \u017ee opravil doma\u010do nalogo.<\/p>\n\n\n\n

Po podatkih o dele\u017eu mobilnega spletnega prometa<\/a> mobilne naprave danes generirajo skoraj 63\u00a0% vsega prometa na spletu<\/strong>, torej hitrost nalaganja na telefonu ni dodatek<\/strong>, ampak pogoj, da stran sploh deluje.<\/p>\n\n\n\n

Google mobilno razli\u010dico strani uporablja tudi za mobilno indeksiranje<\/strong>, zato po\u010dasna stran izgublja tako uporabnike kot pozicije v iskalniku.<\/p>\n\n\n\n

Hitrost meri prek Core Web Vitals<\/a>, natan\u010dneje prek metrike INP (Interaction to Next Paint). Googlova dokumentacija metrike INP<\/a> kot dober rezultat opredeljuje vrednost pod 200 milisekund<\/strong>.<\/p>\n\n\n\n

Odzivna postavitev tega ne popravi sama. Hitrost popravite z la\u017ejimi slikami<\/strong> in manj blokirajo\u010dim JavaScriptom<\/strong>.<\/p>\n\n\n\n

Preverite svoj rezultat v PageSpeed Insights<\/strong>, ne le v Googlovem testu za mobilne naprave, ki pove samo, ali je postavitev v redu, ne pa, kako hitro se stran nalo\u017ei v praksi<\/strong>.<\/p>\n\n\n\n

\"Dele\u017e
Mobilne naprave generirajo \u017ee 63 % svetovnega spletnega prometa, kar postavlja hitrost mobilne strani pred njen izgled. Vir statistike: Statista<\/a>.<\/figcaption><\/figure>\n\n\n\n

Gumbi, ki jih na telefonu te\u017eko zadanete<\/h2>\n\n\n\n

Gumb, ki je na monitorju videti ravno prav\u0161nje velikosti, je na telefonu pogosto premajhen za klik s prstom<\/strong>. Na pogled majhen detajl, ki pa prinese ogromno razliko v konverzijah.<\/p>\n\n\n\n

To ni kozmeti\u010dna podrobnost, ampak UX (uporabni\u0161ka izku\u0161nja): ali bo uporabnik uspe\u0161no dokon\u010dal nakup ali povpra\u0161evanje, ali pa bo vmes odnehal<\/strong>.<\/p>\n\n\n\n

WCAG 2.2 smernica za velikost tipk<\/a> zahteva vsaj 24 x 24 px<\/strong> na dotik, praksa pa gre \u0161e dlje: Google in Apple za mobilne gumbe priporo\u010data okoli 44 do 48 px<\/strong>, torej precej ve\u010d, kot marsikatera privzeta WordPress ali Shopify predloga sploh ponudi.<\/p>\n\n\n\n

V CSS-ju vsem klikljivim elementom na strani nastavite min-height<\/strong> in min-width<\/strong> na vsaj 44 px, med sosednjimi elementi pa pustite najmanj 8 px praznega prostora<\/strong>.<\/p>\n\n\n\n

\u010ce sta \u2018Naro\u010di\u2019 in \u2018Prekli\u010di\u2019 prilepljena drug ob drugem<\/strong>, bo prej ali slej nekdo pomotoma kliknil napa\u010dnega<\/strong>, ravno na napravi, kjer je popravljanje take napake najbolj nadle\u017eno.<\/p>\n\n\n\n

\"Priporo\u010dene
Standardi za velikost gumbov se razlikujejo, a vsi priporo\u010dajo precej ve\u010d od privzetih nastavitev marsikatere spletne predloge.<\/figcaption><\/figure>\n\n\n\n

Slike, ki se prilagodijo velikosti, ne pa te\u017ei<\/h2>\n\n\n\n

Slika se na telefonu lepo skr\u010di<\/strong>, v ozadju pa brskalnik vseeno prenese isto, te\u017eko datoteko<\/strong> kot na namiznem ra\u010dunalniku.<\/p>\n\n\n\n

Fotografija v lo\u010dljivosti za velik monitor lahko tehta tudi desetkrat ve\u010d<\/strong>, kot bi jo telefon sploh potreboval.<\/p>\n\n\n\n

Re\u0161itev je tehni\u010dno stara skoraj toliko kot sam responsive dizajn: atributa srcset in sizes<\/strong> brskalniku povesta, katero razli\u010dico slike<\/strong> naj nalo\u017ei glede na napravo.<\/p>\n\n\n\n

Te\u017eava je, da to podpira veliko predlog in vti\u010dnikov, nih\u010de pa tega ne preveri ali vklopi<\/strong>.<\/p>\n\n\n\n

Preverite sami: odprite stran v Chrome DevTools<\/strong> in vklopite mobilno simulacijo<\/strong>. V zavihku \u2018Network\u2019 poglejte, kolik\u0161na je velikost nalo\u017eene slike.<\/p>\n\n\n\n

\u010ce je datoteka ve\u010dja od 200 kilobajtov<\/strong> za sliko, ki na telefonu zavzame \u010detrtino zaslona, je \u010das, da v CMSju ali temi preverite nastavitve za responsive slike<\/a>.<\/p>\n\n\n\n

\u010ce razmi\u0161ljate o prenovi ali izdelavi nove spletne strani<\/a>, je to ena prvih stvari<\/strong>, ki jih pri nas preverimo, \u0161e preden se sploh lotimo dizajna<\/strong>.<\/p>\n\n\n\n

Mobilni obrazec ni pomanj\u0161an namizni obrazec<\/h2>\n\n\n\n

Obrazec, ki ima na vsaki strani 20 pik notranjega razmika<\/strong>, na monitorju deluje \u010disto normalno, na zaslonu \u0161irine 320 pik pa s tem izgubite osmino prostora<\/strong>.<\/p>\n\n\n\n

Dodajte rob okoli polj in dele\u017e izgubljenega prostora hitro naraste na \u010detrtino zaslona<\/strong>.<\/p>\n\n\n\n

Sli\u0161i se kot malenkost, dokler ne vidite, koliko ljudi obrazec zapusti<\/strong> prav na tej to\u010dki.<\/p>\n\n\n\n

Poleg razmika je pomembno tudi, kateri tip tipkovnice<\/strong> se odpre: <\/p>\n\n\n\n