{"id":29069,"date":"2020-07-07T11:45:47","date_gmt":"2020-07-07T09:45:47","guid":{"rendered":"https:\/\/madwise.si\/blog\/?p=29069"},"modified":"2023-04-28T09:07:55","modified_gmt":"2023-04-28T07:07:55","slug":"mobile-first-dizajn-kako-se-ga-lotiti-2-del","status":"publish","type":"post","link":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/","title":{"rendered":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)"},"content":{"rendered":"

\u017de v prvem \u010dlanku smo naslovili \u0161tevilne vidike, kako je mobile-first dizajn<\/a> spremenil zasnovo spletnih strani in uporabni\u0161ke izku\u0161nje na spletu. Najbolj izrazito seveda vpliva na vrstni red v oblikovanju, zato se mnogi oblikovalci in tudi naro\u010dniki spletnih strani spra\u0161ujejo, kako se ga sploh lotiti. V nadaljevanju z vami delimo, na kaj morate biti \u0161e posebej pozorni \u2013 od velikosti elementov na dotik do ustreznih pisav.<\/p>\n

 <\/p>\n

Zgradba in prilagoditev elementov<\/h2>\n

\u010ce \u0161e niste pre\u0161li na mobile-first oblikovanje, se vam morda zdi zahtevno in celo nesmiselno najprej osredoto\u010dati na izklju\u010dno mobilno uporabni\u0161ko izku\u0161njo, saj je ta bila doslej praviloma v drugem planu. A temeljit premislek o uporabni\u0161ki izku\u0161nji na mobilnih napravah v najzgodnej\u0161ih fazah oblikovanja ne prina\u0161a samo optimizacije spletne strani za telefone, temve\u010d vas pripravi k u\u010dinkovitemu na\u010drtovanju uporabni\u0161ke izku\u0161nje tako na mobilnih naparavah kot tudi namizju. Zato bodite tudi pri mobile-first dizajnu kar se da usmerjeni v celotno izku\u0161njo.<\/p>\n

Najprej preverite, katere funkcionalnosti bodo na voljo na mobilnem spletnem mestu, nato pa zbirko osnovnih funkcionalnosti raz\u0161irite \u0161e za ra\u010dunalnik in tablico<\/strong>. Predvidite tudi njihov na\u010din izvajanja \u2013 najbolje je, \u010de je v samo na\u010drtovanje vklju\u010den tudi programer. Pri njem lahko preverite, \u010de so vse predvidene funkcionalnosti res izvedljive. Nato na stopnji izvedbe z \u017ei\u010dnimi modeli predstavite mobilno postavitev in funkcionalnost, \u0161e preden jo dopolnite z vsebino.<\/p>\n

V nadaljevanju pa preverite klju\u010dne elemente in njihovo prilagoditev, da va\u0161a spletna stran ponudi odli\u010dno in nepozabno mobilno uporabni\u0161ko izku\u0161njo.<\/p>\n

 <\/p>\n

Design system (navigacija, pisave, velikost fontov, gumbi in velikost, razmiki, velikost ostalih elementov \u2013 ikon)<\/h2>\n

Ko oblikujemo za ve\u010d razli\u010dnih naprav, se ne moremo izogniti prilagoditvam velikosti pisav in elementov. Razlika pa je, katere velikosti so privzete. Pri klasi\u010dnem oblikovanju so privzete velikosti tiste za ra\u010dunalnik, medtem ko pri mobile-first oblikovanju uporabimo stile, \u017ee predvidene za mobile pogled.<\/p>\n

Stili vklju\u010dujejo velikosti pisav, obrazcev, fotografij, gumbov \u2026 Da nam ni potrebno vedno znova definirati vseh stilov, si lahko pomagamo s \u0161tevilnimi online knji\u017enicami, kjer so vsa standardna pravila in smernice oblikovanja zbrana na enem mestu. Najbolj priljubljena je trenutno Bootstrap<\/a>. Smernice najbolj\u0161ih praks oblikovanja komponent uporabni\u0161kega vmesnika pa so najbolje predstavljene na Material Design<\/a>.<\/p>\n

Dejstvo je, da imajo mobilni telefoni na splo\u0161no manj pomnilnika, procesne mo\u010di in pasovne \u0161irine kot druge naprave. Prav tako imamo na voljo tudi manj\u0161a vidna polja. Zato je potrebno uporabni\u0161ki vmesnik (angl. user interface<\/em>) in z njim celoten design system \u010dim bolj poenostaviti. V mislih moramo imeti, da ne pretiravamo z razli\u010dnimi vizualnimi u\u010dinki, kot so sence, animacije in gradienti. Prav tako pri mobile-first dizajnu odpade mo\u017enost hoverjev, saj ra\u010dunalni\u0161ka mi\u0161ka v tem primeru ni v uporabi.<\/p>\n

Tukaj je nekaj klju\u010dnih dizajnerskih elementov, na katere morate biti pozorni, ko oblikujete po principih mobile-first. Pri vsakem smo dodali \u0161e nasvet, kako ga naju\u010dinkoviteje zasnovati za mobilne naprave.<\/p>\n

 <\/p>\n

1. Optimizacija navigacije<\/h3>\n

Kompleksni navigacijski meniji vzamejo veliko prostora na va\u0161ih mobilnih straneh, s \u010dimer je uporabni\u0161ka izku\u0161nja bistveno slab\u0161a. Kar zadeva kategorije in podkategorije, vedno uporabljajte preproste in informativne naslove. Na\u010din, s katerim lahko optimiziramo navigacijo, je tudi uporaba sticky menija. To uporabnikom pomaga, da se la\u017eje orientirajo in hitreje najdejo pravo vsebino.<\/p>\n

 <\/p>\n

2. Pisave<\/h3>\n

Pri izboru pisav moramo biti pazljivi, da jih za na\u0161 dizajn spletne strani ne izberemo preve\u010d; dve do tri razli\u010dne vrste pisav so povsem dovolj.<\/p>\n

Najbolj optimalno je, da pisave izberemo iz knji\u017enice Google Fonts<\/a>, saj jih po ve\u010dini podpirajo vsi brskalniki. Vkolikor niste prepri\u010dani o kombinacijah pisav, lahko pose\u017eete po razli\u010dnih platformah, kjer so nanizane preverjene kombinacije pisav za naslove in ostalo besedilo. Ena izmed teh strani je tudi FontPair<\/a>.<\/p>\n

 <\/p>\n

3. Velikosti pisav<\/h3>\n

Po smernicah Material Designa<\/a> naj bi bila velikost privzete pisave (angl. body text<\/em>) 16 dp. Pri dolo\u010danju privzete pisave ne smemo pozabiti na dejstvo, da so razli\u010dne pisave lahko bolj ali manj \u010ditljive tudi pri povsem isti velikosti. Zato je velikost 16 dp dobro izhodi\u0161\u010de za prikaz na mobilnih napravah. Glavni cilj za dobro uporabni\u0161ko izku\u0161njo na telefonu je, da je body text na va\u0161em telefonu (na naravni razdalji) enako berljiv kot besedilo v dobro natisnjeni knjigi.<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

Prikaz razli\u010dnih pisav pri enaki velikosti. Vir: <\/em>Learn UI Design Blog<\/em><\/a><\/p>\n

 <\/p>\n

V zadnjih letih je postala zelo priljubljena uporaba velikih naslovov v digitalni tipografiji. Pri tem je vseeno treba biti zelo previden, saj uporaba ve\u010djih velikosti naslovov v mobilnih aplikacijah in spletnih straneh povzro\u010di, da se naslov lahko razteza na 3 do 4 vrstice, hkrati pa vsebuje 1 ali 2 besedi na vrstico. Tak\u0161ni naslovi uporabnika zmedejo in jih je te\u017eko brati. Naslovi, ki bodo kontrastni ostalemu besedilu in lepo berljivi, imajo priporo\u010dljivo dol\u017eino 2\u20133 vrstice.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Prikaz najbolj optimalne dol\u017eine vrstic na mobilnih telefonih za uporabnika. Vir: <\/em>UX Collective<\/em><\/a><\/p>\n

 <\/p>\n

4. Razmik<\/h3>\n

Razmik (angl. leading<\/em>) je prostor med vrsticami. Zaslon za mobilne naprave je manj\u0161i, zato je razmik obi\u010dajno manj\u0161i od namizne razli\u010dice. Pri oblikovanju je praksa, da je razmik enak 120 % velikosti to\u010dke pisave.<\/p>\n

In \u0161e en nasvet; v kolikor je vrstica z besedilom kraj\u0161a, le-ta opti\u010dno zahteva tudi manj razmika.<\/p>\n

 <\/p>\n

5. CTA gumbi<\/h3>\n

Pri oblikovanju design systema po principu mobile-first je oblika gumbov zelo pomembna. Kot pri klasi\u010dnem oblikovanju mora biti izgled gumbov tipi\u010den, kar pomeni, da je uporabnikom \u017ee poznan. Pri tem pazimo tako na velikost, obliko kot tudi razmik (angl. padding<\/em>).<\/p>\n

Z ustrezno velikostjo in obliko gumba lahko bistveno pove\u010damo interakcijo uporabnika na spletni strani. Velik problem se pojavi, \u010de uporabnik ne prepozna elementa, ki ga je mogo\u010de klikniti.<\/p>\n

Kadar je klik glavni na\u010din interakcije za va\u0161o mobilno aplikacijo, je najbolj optimalna velikost gumba na dotik vsaj 48 x 48 dp. Med posameznimi gumbi mora biti razmika vsaj 8 dp. Seveda je za bolj\u0161o preglednost razmik lahko tudi ve\u010dji.<\/p>\n

 <\/p>\n

6. Ikone in elementi na dotik<\/h3>\n

Pri oblikah ikon moramo paziti na krepkost in geometri\u010dnost. Prav tako je za njih priporo\u010dljiv simetri\u010den in skladen videz, kar zagotavlja berljivost in jasnost \u2013 tudi pri majhnih velikostih. Pri tem se moramo ravnati oblikovnih smernic<\/a> in paziti, da imajo ikone zelo prepoznavno obliko. Tako poskrbimo, da uporabnik takoj prepozna pomen posamezne ikone.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Razlika med enostavno (levo) in zahtevnej\u0161o (desno) obliko ikone fotoaparata.<\/em><\/p>\n

 <\/p>\n

Najbolj optimalna velikost ikon<\/a> po Material designu je 24 x 24 px, velikost elementa na dotik pa mora biti najmanj 48 x 48 px.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Velikosti ikon po Material Designu. Vir: Material Design<\/a>.<\/em><\/p>\n

 <\/p>\n

7. Formati datotek elementov<\/h3>\n

Pozorni morate biti tudi pri izboru formata datoteke za posamezne elemente na strani. Za bitne slike uporabite .jpg, .png ali .gif, za elemente, kot so ikone in logotipo, pa je najbolj\u0161a izbira format .svg. Vsak izmed formatov ima nekaj prednosti in nekaj pomanjkljivosti.<\/p>\n

Pri slikovnem materialu vedno poskrbite na velikost datoteke \u2013 nobena slika ne sme biti uporabljena brez optimizacije za spletno uporabo.<\/strong> Svetovni splet nam nudi \u0161tevilna orodja za kompresijo slik. TinyPNG<\/a> in Jpeg.io<\/a> nam npr. omogo\u010data kompresijo slike, ob tem pa ohranjata zadosten nivo kvalitete slikovnega materiala za uporabo na spletu. Vektorske oblike grafik so sicer manj\u0161ih velikosti, a te\u017eava je, ker jih nekateri starej\u0161i brskalniki ne podpirajo. \u010ce ima grafika veliko krivulj, je morda te\u017eja od bitne slike, zato bodite pri formatih zelo pozorni tudi na to.<\/p>\n

Ko je le mo\u017eno, uporabite datoteke v formatu .jpg namesto .png. Pri .png gre obi\u010dajno za ve\u010dje datoteke. Skrb za ustrezno velikost datotek je pomembna za zagotavljanje hitrej\u0161ega nalaganja spletne strani.<\/p>\n

 <\/p>\n

Mre\u017ea in \u0161irina dokumenta<\/h2>\n

Preden za\u010dnemo z oblikovanjem design systema, moramo v izbranem programu najprej nastaviti velikost delovnega prostora, ki je \u2013 po ve\u010dini \u2013 \u0161irok 360 dp. Seveda se velikosti posameznih modelov telefonov med seboj razlikujejo, a ta \u0161irina je ena izmed manj\u0161ih, zato jo vzamemo kot osnovo. Nato sledi tudi nastavitev marginov, stolpcev in gutterja.<\/p>\n

 <\/p>\n

1. Margin<\/h3>\n

Margini so prostori med vsebino in levim in desnim robom zaslona. Opredeljeni so kot fiksne vrednosti na vsaki prelomni to\u010dki. \u0160irine robu so opredeljene kot fiksne vrednosti v vsakem obmo\u010dju preloma. Za bolj\u0161o prilagoditev zaslonu se lahko \u0161irina robu spreminja v razli\u010dnih to\u010dkah preloma. \u0160ir\u0161a polja so primernej\u0161a za ve\u010dje zaslone, saj ustvarijo ve\u010d praznega prostora pri posamezni vsebini.<\/p>\n

\"\"<\/p>\n

Margin pri mobilnih telefonih z zaslonom \u0161irokim 360 dp je 16 dp na vsaki strani. Vir: <\/em>Material Design<\/em><\/a><\/p>\n

 <\/p>\n

2. Stolpci<\/h3>\n

Vsebina je postavljena na obmo\u010dja zaslona, ki vsebujejo stolpce. \u0160irina stolpca je dolo\u010dena z odstotki, ne pa s fiksnimi vrednostmi. \u0160tevilo stolpcev, prikazanih v omre\u017eju, je dolo\u010deno glede na obmo\u010dje prelomne to\u010dke (angl. breakpoint<\/em>), na katerem se zaslon gleda, ne glede na to, ali je prelomna to\u010dka za mobilne naprave, tabli\u010dni ra\u010dunalnik ali drugo velikost.<\/p>\n

\u0160tevilo stolpcev je na namiznih ra\u010dunalnikih delitelj \u0161tevila 12 (npr. 2, 3, 4, 6 ali 12). Pri mobile-first na\u010dinu se zaradi o\u017ejega zaslona po navadi uporabi maksimalno 6 stolpcev.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Prikaz \u0161tirih stolpcev na zaslonu, \u0161irokem 360 dp. Vir: <\/em>Material Design<\/em><\/a><\/p>\n

 <\/p>\n

3. \u017dleb ali gutter<\/h3>\n

Gutter je angle\u0161ki izraz za presledke med stolpci in pomagajo lo\u010diti vsebino, v sloven\u0161\u010dini jih imenujemo tudi \u017elebovi. \u0160irine \u017elebov so fiksne vrednosti v vsakem obmo\u010dju preloma. Za bolj\u0161o prilagoditev zaslonu se lahko \u0161irina \u017eleba spreminja na razli\u010dnih to\u010dkah preloma.<\/p>\n

\u0160ir\u0161i gutterji so primernej\u0161i za ve\u010dje zaslone, saj ustvarijo ve\u010d praznega prostora med stolpci. V primeru zaslona, ki je \u0161irok 360 dp, se poslu\u017eujemo gutterja v velikosti 16 dp. Tako zagotovimo vsakemu stolpcu 8 dp dodatnega prostora.<\/p>\n

 <\/p>\n

4. Beli prostor ali padding<\/h3>\n

Padding ali beli prostor je v oblikovalskem svetu zelo pomemben, saj z njim dose\u017eemo jasnost in preglednost na strani. Veliko oblikovalcev se razmikov loti po ob\u010dutku, vseeno pa je za mobile-first predvideno, da so elementi med seboj v razmaku vsaj 30 dp. \u010ce se le da, pazimo, da so velikosti paddingov zaokro\u017eene na 10.<\/p>\n

Z uporabo belega prostora lahko zelo izbolj\u0161amo tudi uporabni\u0161ko izku\u0161njo, saj z njim pomagamo ohraniti fokus. Beli prostor uporabljamo za ustvarjanje fokusnih to\u010dk za na\u0161e uporabnike, ki opozarjajo na dolo\u010dene elemente. Ve\u010dji kot je padding okoli dolo\u010denega elementa na strani, ve\u010dji je poudarek na tem elementu. <\/strong><\/p>\n

 <\/p>\n

5. Hierarhija elementov<\/h3>\n

Hierarhija pomeni poudarek klju\u010dnih elementov na celotni spletni strani in ustvarjanje kontrasta. Hierarhija vsebine pri klasi\u010dnih zaslonih je obi\u010dajno razporejena v stolpce po 2, 3, 4 ali 6. Zasloni za mobilnih napravah imajo v primerjavi z zasloni ra\u010dunalnikov bolj omejen prostor, zato mnogi oblikovalci uporabljajo le 2 stolpca, kar posledi\u010dno povzro\u010di manj\u0161o koli\u010dino vsebine.<\/p>\n

Pri razporejanju elementov je potrebo paziti tudi na to, da so pomembna vsebina in glavni elementi med uporabo mobilne naprave dostopni s palcem<\/strong>.<\/p>\n

Va\u0161e mobilne ciljne strani morajo biti uporabniku prijazne. Kot take ne bi smele vklju\u010devati vse vsebine, ki jo ponavadi predvidevate za namizje. Za za\u010detek se osredoto\u010dite na najbolj kriti\u010dne to\u010dke. Vedno pazite, da vrednost in kakovost va\u0161e vsebine nista ogro\u017eeni. Uporabite tudi naslove in podnaslove ter pustite dovolj belega prostora, da bo va\u0161a vsebina la\u017eje sledljiva. Pri organizaciji vsebine za mobile si lahko pomagate tudi z razpredelnico. Vanjo vpi\u0161ite vso vsebino in funkcionalnosti, za katero se vam zdi, da bi jo morala va\u0161a stran vsebovati, nato pa naredite selekcijo. Tako se boste veliko la\u017eje organizirali.<\/p>\n

 <\/p>\n

Povzetek<\/h2>\n

S spletnim mestom, ki je prilagojeno mobilnim napravam, zagotovimo odli\u010dno uporabni\u0161ko izku\u0161njo uporabnikov. \u010ce spletna stran ni prilagojena mobilnim napravam, zahteva, da uporabniki vsebino in elemente ustrezno pove\u010dujejo, da bi prebrali vsebino, kar privede do nezadovoljstva in velike verjetnosti, da bodo spletno mesto zapustili. Mobilna razli\u010dica spletne strani je enostavno berljiva in hitro uporabna, da uporabnik v \u010dim kraj\u0161em \u010dasu izvede akcijo, ki je njegov cilj.<\/p>\n

\u010ce va\u0161a spletna stran \u0161e ne nudi odli\u010dne mobilne uporabni\u0161ke izku\u0161nje<\/strong>, je morda \u010das, da premislite o prenovi ali novi spletni strani. Pri tem vam lahko pomaga na\u0161a ekipa ekspertov za UX in mobile-first dizajn. Samo en klik stran smo \u2013 pi\u0161ite nam<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

Z vami delimo prakti\u010dne vidike, kako se lotiti mobile-first dizajna: od velikosti pisav in velikosti gumbov na dotik do orodij za kompresijo slik za hitrej\u0161e nalaganje spletne strani. V \u010dlanku boste na\u0161li tudi namige, \u010demu se \u017eelite pri dizajnu za mobilne naprave izogniti.<\/p>\n","protected":false},"author":23,"featured_media":29075,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-29069","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uporabniska-izkusnja-ux","entry"],"acf":{"izpostavljen_vodic_shortcode":"","drugi_del_vsebine":""},"yoast_head":"\nMobile-first dizajn \u2013 kako se ga lotiti? (2. del)<\/title>\n<meta name=\"description\" content=\"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\" \/>\n<meta property=\"og:locale\" content=\"sl_SI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)\" \/>\n<meta property=\"og:description\" content=\"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\" \/>\n<meta property=\"og:site_name\" content=\"Madwise Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madwisecc\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-07T09:45:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-28T07:07:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eva \u0160tirn\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eva \u0160tirn\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\"},\"author\":{\"name\":\"Eva \u0160tirn\",\"@id\":\"https:\/\/madwise.si\/blog\/#\/schema\/person\/fde851f7eed5404b2634e544c6cd3376\"},\"headline\":\"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)\",\"datePublished\":\"2020-07-07T09:45:47+00:00\",\"dateModified\":\"2023-04-28T07:07:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\"},\"wordCount\":2053,\"publisher\":{\"@id\":\"https:\/\/madwise.si\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg\",\"articleSection\":[\"Uporabni\u0161ka izku\u0161nja (UX)\"],\"inLanguage\":\"sl-SI\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\",\"url\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\",\"name\":\"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)\",\"isPartOf\":{\"@id\":\"https:\/\/madwise.si\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg\",\"datePublished\":\"2020-07-07T09:45:47+00:00\",\"dateModified\":\"2023-04-28T07:07:55+00:00\",\"description\":\"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.\",\"breadcrumb\":{\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#breadcrumb\"},\"inLanguage\":\"sl-SI\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sl-SI\",\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage\",\"url\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg\",\"contentUrl\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg\",\"width\":1440,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/madwise.si\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/madwise.si\/blog\/#website\",\"url\":\"https:\/\/madwise.si\/blog\/\",\"name\":\"Madwise Blog\",\"description\":\"Blog zapisi z najnovej\u0161imi informacijami s podro\u010dja marketinga\",\"publisher\":{\"@id\":\"https:\/\/madwise.si\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/madwise.si\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sl-SI\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/madwise.si\/blog\/#organization\",\"name\":\"Madwise\",\"url\":\"https:\/\/madwise.si\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sl-SI\",\"@id\":\"https:\/\/madwise.si\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/08\/madwise-logo@3x.png\",\"contentUrl\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/08\/madwise-logo@3x.png\",\"width\":150,\"height\":111,\"caption\":\"Madwise\"},\"image\":{\"@id\":\"https:\/\/madwise.si\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madwisecc\/\",\"https:\/\/www.instagram.com\/madwise_agency\/\",\"https:\/\/www.linkedin.com\/company\/madwise\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/madwise.si\/blog\/#\/schema\/person\/fde851f7eed5404b2634e544c6cd3376\",\"name\":\"Eva \u0160tirn\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sl-SI\",\"@id\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png\",\"url\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png\",\"contentUrl\":\"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png\",\"caption\":\"Eva \u0160tirn\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)","description":"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/","og_locale":"sl_SI","og_type":"article","og_title":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)","og_description":"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.","og_url":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/","og_site_name":"Madwise Blog","article_publisher":"https:\/\/www.facebook.com\/madwisecc\/","article_published_time":"2020-07-07T09:45:47+00:00","article_modified_time":"2023-04-28T07:07:55+00:00","og_image":[{"width":1440,"height":720,"url":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg","type":"image\/jpeg"}],"author":"Eva \u0160tirn","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Eva \u0160tirn","Est. reading time":"10 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#article","isPartOf":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/"},"author":{"name":"Eva \u0160tirn","@id":"https:\/\/madwise.si\/blog\/#\/schema\/person\/fde851f7eed5404b2634e544c6cd3376"},"headline":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)","datePublished":"2020-07-07T09:45:47+00:00","dateModified":"2023-04-28T07:07:55+00:00","mainEntityOfPage":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/"},"wordCount":2053,"publisher":{"@id":"https:\/\/madwise.si\/blog\/#organization"},"image":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage"},"thumbnailUrl":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg","articleSection":["Uporabni\u0161ka izku\u0161nja (UX)"],"inLanguage":"sl-SI"},{"@type":"WebPage","@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/","url":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/","name":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)","isPartOf":{"@id":"https:\/\/madwise.si\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage"},"image":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage"},"thumbnailUrl":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg","datePublished":"2020-07-07T09:45:47+00:00","dateModified":"2023-04-28T07:07:55+00:00","description":"Na kaj je treba paziti pri mobile-first dizajnu? Poglejte si na\u0161a najnovej\u0161a prakti\u010dna priporo\u010dila za oblikovanje za mobilne naprave.","breadcrumb":{"@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#breadcrumb"},"inLanguage":"sl-SI","potentialAction":[{"@type":"ReadAction","target":["https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/"]}]},{"@type":"ImageObject","inLanguage":"sl-SI","@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#primaryimage","url":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg","contentUrl":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/07\/mobile_first_dizajn_madwise5.jpg","width":1440,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/madwise.si\/blog\/mobile-first-dizajn-kako-se-ga-lotiti-2-del\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/madwise.si\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile-first dizajn \u2013 kako se ga lotiti? (2. del)"}]},{"@type":"WebSite","@id":"https:\/\/madwise.si\/blog\/#website","url":"https:\/\/madwise.si\/blog\/","name":"Madwise Blog","description":"Blog zapisi z najnovej\u0161imi informacijami s podro\u010dja marketinga","publisher":{"@id":"https:\/\/madwise.si\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/madwise.si\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sl-SI"},{"@type":"Organization","@id":"https:\/\/madwise.si\/blog\/#organization","name":"Madwise","url":"https:\/\/madwise.si\/blog\/","logo":{"@type":"ImageObject","inLanguage":"sl-SI","@id":"https:\/\/madwise.si\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/08\/madwise-logo@3x.png","contentUrl":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/08\/madwise-logo@3x.png","width":150,"height":111,"caption":"Madwise"},"image":{"@id":"https:\/\/madwise.si\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madwisecc\/","https:\/\/www.instagram.com\/madwise_agency\/","https:\/\/www.linkedin.com\/company\/madwise\/"]},{"@type":"Person","@id":"https:\/\/madwise.si\/blog\/#\/schema\/person\/fde851f7eed5404b2634e544c6cd3376","name":"Eva \u0160tirn","image":{"@type":"ImageObject","inLanguage":"sl-SI","@id":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png","url":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png","contentUrl":"https:\/\/madwise.si\/blog\/wp-content\/uploads\/2020\/05\/image-10-150x150.png","caption":"Eva \u0160tirn"}}]}},"custom_fields":{"blog_duration":"<div class=\"blog-duration\"><i class=\"icon-duration\"><\/i> Branje: <strong>11 min<\/strong><\/div>","formatted_date":"07\/07\/2020"},"_links":{"self":[{"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/posts\/29069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/comments?post=29069"}],"version-history":[{"count":5,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/posts\/29069\/revisions"}],"predecessor-version":[{"id":29086,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/posts\/29069\/revisions\/29086"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/media\/29075"}],"wp:attachment":[{"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/media?parent=29069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/categories?post=29069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/madwise.si\/blog\/wp-json\/wp\/v2\/tags?post=29069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}