Responsive slo-tech

Tukaj še velja omeniti, da v Firefoxu včasih oglasna pasica na desni strani pokriva menije Hitre funkcije in moj osebni omeni (odjava, zsji, etc).

janig je 24. feb 2018 ob 20:51 izjavil:

marjan_h je 24. feb 2018 ob 20:47 izjavil:

Ali to pomeni da slo-tech ni responsive?

Da, ni responsive. Katastrofa je na telefonu :)

marjan_h je 24. feb 2018 ob 20:47 izjavil:

Ali bi se ga dalo popraviti?

Da

Kako bi se pa popravilo? Na w3schools je tutorial o media queries. Glede na to, da je več kot 100 naprav z različnimi resolucijami, bi to pomenilo, da za vsako resolucijo napišemo en media query? Ne vem ravno če je to smiselno... Kako se sicer rešuje te stvari?

Ali lahko kdo (če ima čas) malo opiše in razloži kako se streže tem zadevam na spletu. Kot programerju se mi zdi nesmiselno pisati 100 if stavkov.

Glede na to, da je več kot 100 naprav z različnimi resolucijami, bi to pomenilo, da za vsako resolucijo napišemo en media query? Ne vem ravno če je to smiselno... Kako se sicer rešuje te stvari?

če razmišljaš o pixlih in ločljivostih pri responsive dizajnu, potem narobe razmišljaš

najprej nastavis viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

1. zacnes pisat osnovni css, t.i. mobile first approach, torej naredis dizajn za telefon..vse delas z EM (ali podobnimi) enotami
2. dodas media query (min-width) za tablice.. min-width mora bit priblizno tak da se na povprecnem telefonu ne sprozi
3. dodas media query (min-width) za pc.. podobno kot zgoraj, min-width tak da se ne sprozi na tablici

Pa rumen theme pozabljate. Tistega bi lepo imeti nazaj.

SloTech vsekakor bi bilo potrebno modernizirat. Začasno bi lahko spisali ene css-je da bi delalo solidno na manjših napravah. Načeloma je na tem forumu dovolj znanja da bi to relativno in hitro lahko uredili.

Če se obeta kakšna prenova upam da ne bodo usekali mimo, kot so to naredili na internetmojster forumu ?

Sem jaz edini, ki ima tudi na mobilnih napravah raje desktop različico strani?

blackbfm je 24. feb 2018 ob 21:14 izjavil:

1. zacnes pisat osnovni css, t.i. mobile first approach, torej naredis dizajn za telefon..vse delas z EM (ali podobnimi) enotami
2. dodas media query (min-width) za tablice.. min-width mora bit priblizno tak da se na povprecnem telefonu ne sprozi
3. dodas media query (min-width) za pc.. podobno kot zgoraj, min-width tak da se ne sprozi na tablici

Postavljat breakpointe za telefone / tablice je brezveze. Enostavno se ubere fluid način kateri se prilagaja širini vidnega polja neglede na napravo. Držiš se enostavnega principa: postavi osnovo in začni širit. Ko rata grdo je čas za breakpoint, neglede ali bo na tablici ali na telefonu. To je to.

Generični breakpointi katere uporablja bootstrap ipd. css frameworki so do ene mere ok, vendar marsikdaj se ne obnesejo ravno najbolje. Odvisno od projekta, vendar vedno ko sem delal kakšen boj specifičen dizajn se breakpointi niso dobro obnesli in je bila custom postavitev boljši izbira.

Slo-tech je relativno enstaven in implementacija responsiva na en ali drugi način ne bi predstavljalo kakšnih težav. Če se bodo le kaj upravljalci zmigali.

Odvisno kako narediš. Kar se logotipov tiče ponavadi imaš desktop in mobile opcijo katero v nekem trenutku preklopiš in to je to. Lahko pa daš logo kot sliko percentualne velikosti da se pomanjšuje z stranjo. Ni nekega pravila.

Media query se naloži samo tam kjer to potrebuješ. Če delaš desktop first se naložijo vsi nepotrebni desktop stili in zatem se naložijo še potrebni media queri-ji.

Če narediš pa mobile first pomeni, da izven media querijev imaš tisti minimum za telefone in šele desktip verzija si naloži še media querije ki jih potrebuje.

Z mobile first načinom se hitreje in manj naloži kar prišpara na bandwithu in še čem...

kar pustite tako kot je
ko mi simobil zaradi omejitve spusti hitrost na 64k je slotech skoraj edina stran, ki deluje gladko.

Netrunner je 25. feb 2018 ob 13:51 izjavil:

Odvisno kako narediš. Kar se logotipov tiče ponavadi imaš desktop in mobile opcijo katero v nekem trenutku preklopiš in to je to. Lahko pa daš logo kot sliko percentualne velikosti da se pomanjšuje z stranjo. Ni nekega pravila.

Aha. Kako pa pri pisavi? Se naredi tako, da se spreminja font-size lastnost v media query?

Netrunner je 25. feb 2018 ob 17:14 izjavil:

yep

media query ni nič drugega kot pogoj s katerim zaobjameš vse stile katere želiš da se izvedejo.

Aha, torej če si web developer me zanima ali te breakpointe na githubu katero povezavo je delil janig. Ali uporabljaš to v vsakem svojem projektu? Torej, recimo da kopiram to kodo iz githuba v projekt, in za vsako breakpoint nastavim svojevrstno oblikovanje, bo to pokrilo čisto vse zaslone?

Predvsem me zanima to, ker se nočem zaletavati in po svoje razmišljati, da se ne bo kdaj zgodilo, da napišem pol kode potem pa na stackoverlow preberem, da se slednje dela drugače.

https://getbootstrap.com/

@DirectX11 => Ne se preveč obremenjevat z breakpointi. Če se učiš je najbolje da sam iz nule narediš da boš bolje razumel. Postavi si osnovo, odpri web developer toolse in si vklopi "mobile view". Tam si malo spremijnaj velikost okna in ko boš videl, da na določenem pogledu bi kaj izboljšaj preveri trenutno širino in le to uporabi v media query-ju kjer dodaš ustrezne css stile.

Jaz osebno ne uporabljam stila kot je oni na githubu in sicer istočasno min in max width. Raje postavim osnovo ki velja za vse širine in potem progresivno dodajam stile ki iz mobilne širine prilagodijo pogled do desktop različice.

Na netu imaš precej primerov in tutorialov kateri razložijo delovanje.

@smacker => kaj hočeš povedat s tistim linkom? bootstrap so fenomenalna jajca. Dobra stvar za nekaj zložit skupaj vendar za resne projekte odpade. Preveč balasta in neoptimizirano responsive delovanje. Če že, potem raje fundation 5 oz. še bolje skeleton.

Jst je 25. feb 2018 ob 22:48 izjavil:

A ni nekaj časa bil nek testen mobile.slo-tech.com? Se spomnim, da je veliko funkcij manjkalo, ampak stran je bila "mobile".

mogoče .. jaz nevem nič o tem

Vem pa da tako enostaven layout kot ga ima slo tech bi lahko en ki ve kaj dela hitro zložil nove CSS stile ki bi stran naredile fluid.

Če bodo avtorji strani povprašali po pomoči bom rade volje pomagal, ne nameravam pa nekaj delati v naprej z upanjem, da bi kdaj dejansko prišlo na sloTech. Če bi mi ostajal čas potem mogoče še... žal so pa tisti časi mimo :)