Forum » Izdelava spletišč » Responsive slo-tech
Responsive slo-tech
marjan_h ::
Pozdravljeni,
ker je forum slo-tech na mobitelu (sploh stranski meni in prijava) viden zelo na majhno. Ali to pomeni da slo-tech ni responsive? Ali bi se ga dalo popraviti? Na splošno me zanima responsive design spletnih strani, to lahko dosežemo z media query ali pa s prilagajanjem število odstotkov elementov.
Kaj pravijo na to web developer guruji?
ker je forum slo-tech na mobitelu (sploh stranski meni in prijava) viden zelo na majhno. Ali to pomeni da slo-tech ni responsive? Ali bi se ga dalo popraviti? Na splošno me zanima responsive design spletnih strani, to lahko dosežemo z media query ali pa s prilagajanjem število odstotkov elementov.
Kaj pravijo na to web developer guruji?
Mitja223 ::
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 ::
marjan_h ::
Ali to pomeni da slo-tech ni responsive?
Da, ni responsive. Katastrofa je na telefonu :)
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.
blackbfm ::
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
kuall ::
Ni responsive in to je njegova največja pomanjkljivost. Večji font rabimo, pa zasebnih sporočil in odgovorov tudi ni ne moreš delat na dokaj naprednem telefonu. Jest vam lahko to zrihtam zastonj, če mi date naziv moderatorja, da bom lahko jypetove blodnje brisal.
To se da vse s CSS naredit.
To se da vse s CSS naredit.
Zgodovina sprememb…
- spremenilo: kuall ()
Blinder ::
Pa rumen theme pozabljate. Tistega bi lepo imeti nazaj.
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija
bobby ::
Uporabite Opera browser na telefonih in pa uporaba word wrap, doubble tap za povečanje ali vsaj 2 finger in bo čisto sprejemljivo.
ostali browserji pa no no. in ja, je problem.
ostali browserji pa no no. in ja, je problem.
Ce eksplicitno ne odgovorim osebam PNG ali PR,..I dont care about your opinion.
Netrunner ::
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 ?
Če se obeta kakšna prenova upam da ne bodo usekali mimo, kot so to naredili na internetmojster forumu ?
kuall ::
Samo responsive stvar bi bilo treba popravit, drugo pa pustit pri miru, kar deluje ne spreminjaj.
pirlo ::
Ne rabiš kaj veliko media querijev pisat. Vzameš samo en css grid (ogromno knjižnic obstaja), daš levo stran, sredinsko in desno v stolpce, nastaviš vsakemu določen odstotek (od 1 do 12) pa bo vse avtomatsko delalo. Prilagodiš še velikost pisave pa je to že precej užitno.
Bi pa bilo fajn naredit kot pwa. Se pravi da bi se cachirala cela statika in pushi za nova sporočila v "mojih temah".
Zelo verjetno, če je mobilna uporabna. Drugače ne :)
Bi pa bilo fajn naredit kot pwa. Se pravi da bi se cachirala cela statika in pushi za nova sporočila v "mojih temah".
Sem jaz edini, ki ima tudi na mobilnih napravah raje desktop različico strani?
Zelo verjetno, če je mobilna uporabna. Drugače ne :)
Zgodovina sprememb…
- spremenil: pirlo ()
Netrunner ::
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.
kuall ::
Sem jaz edini, ki ima tudi na mobilnih napravah raje desktop različico strani?
Ko bi bila, ampak ni. Skrijejo nekatere stvari tam, nekaj na pol narejeno.
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.
Un način je bolj natančen, ker pač rečeš: od te do te širine zaslona bodo velikosti elementov teh absolutnih vrednosti. Tvoj način je tudi v redu, v bistvu ker je z njim manj dela, je pa vseeno ali širiš in gledaš kdaj začne izgleda grdo ali ožiš.
Netrunner ::
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.
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.
marjan_h ::
Ni responsive in to je njegova največja pomanjkljivost. Večji font rabimo, pa zasebnih sporočil in odgovorov tudi ni ne moreš delat na dokaj naprednem telefonu. Jest vam lahko to zrihtam zastonj, če mi date naziv moderatorja, da bom lahko jypetove blodnje brisal.
To se da vse s CSS naredit.
Kot je omenil blackbfm potem začneš razvijati stran najprej za telefone. Me pa zanima (se zahvaljujem za povezavo do githuba glede media queries), ali potem recimo za logotip (Slo-tech) moraš v vsakem breakpointu, napisati novo željeno širino (višina se potem sama popravi) logotipa? Ali se to tako dela, ali kako drugače?
Hvala.
Netrunner ::
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.
kuall ::
Ne moreš začet razvijati stran najprej za telefone, ker desktop stran že obstaja. Se da čist ok tudi obratno.
In zakaj točno to pravilo ponavljate, kje je zadaj logika? To je neka teoretična stvar, ki se ji daje preveč pomena, modna muha.
In zakaj točno to pravilo ponavljate, kje je zadaj logika? To je neka teoretična stvar, ki se ji daje preveč pomena, modna muha.
Netrunner ::
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...
Č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...
Zgodovina sprememb…
- spremenilo: Netrunner ()
blackbfm ::
Z bandwidthom ma to bolj malo veze
Bistvo mobile first je da naredis osnovo in stvari postopoma dodajas oz prikazujes, vecas elemente.. Je tezje in manj intuitivno it kontra.. In ne ni to modna muha, to je zadeva ki funkcionira..
Bistvo mobile first je da naredis osnovo in stvari postopoma dodajas oz prikazujes, vecas elemente.. Je tezje in manj intuitivno it kontra.. In ne ni to modna muha, to je zadeva ki funkcionira..
Vazelin ::
kar pustite tako kot je
ko mi simobil zaradi omejitve spusti hitrost na 64k je slotech skoraj edina stran, ki deluje gladko.
ko mi simobil zaradi omejitve spusti hitrost na 64k je slotech skoraj edina stran, ki deluje gladko.
Netrunner ::
Z bandwidthom ma to bolj malo veze
Bolj malo, vendar ima :) Če imaš vse v eni datoteki potem nima, če pa imaš media querije ločeno pa ima. Pa danes je to zanemarljivo.
Je tezje in manj intuitivno it kontra
O tem bi lahko razpravljali. Marsikdaj moram narediti osnutek strani in stranka hoče videti desktop verzijo katero ni 100% da bo odobrena. Če delam mobile first je težje in več časa vzame kot kontra.
marjan_h ::
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 ::
yep
media query ni nič drugega kot pogoj s katerim zaobjameš vse stile katere želiš da se izvedejo.
media query ni nič drugega kot pogoj s katerim zaobjameš vse stile katere želiš da se izvedejo.
marjan_h ::
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.
Jst ::
A ni nekaj časa bil nek testen mobile.slo-tech.com? Se spomnim, da je veliko funkcij manjkalo, ampak stran je bila "mobile".
Islam is not about "I'm right, you're wrong," but "I'm right, you're dead!"
-Wole Soyinka, Literature Nobelist
|-|-|-|-|Proton decay is a tax on existence.|-|-|-|-|
-Wole Soyinka, Literature Nobelist
|-|-|-|-|Proton decay is a tax on existence.|-|-|-|-|
Netrunner ::
@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.
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.
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.
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.
Zgodovina sprememb…
- spremenilo: Netrunner ()
Looooooka ::
Firefox in Chrome omogočata, da povozite css in skripte katerekoli strani.
Glede na to, da eni trdite, da bi sami pomagali, lahko mirno čez vikend spišete tak css. Ga bomo ostali testirali pa če se izkaže, da deluje ga morda nekega dne webdesignerji slo-techa celo uporabijo.
V najslabšem primeru lahko nastane lep github projekt pa si bodo tisti, ki jih to zanima zadevo sami naložili v omenjene brskalnike ?
Glede na to, da eni trdite, da bi sami pomagali, lahko mirno čez vikend spišete tak css. Ga bomo ostali testirali pa če se izkaže, da deluje ga morda nekega dne webdesignerji slo-techa celo uporabijo.
V najslabšem primeru lahko nastane lep github projekt pa si bodo tisti, ki jih to zanima zadevo sami naložili v omenjene brskalnike ?
Netrunner ::
Č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 :)
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | [HTML/CSS] Kako naprej?Oddelek: Programiranje | 2080 (1932) | smacker |
» | Pomoč pri centriranjuOddelek: Izdelava spletišč | 1341 (931) | s1l3 |
» | Centriranje elementov menujaOddelek: Izdelava spletišč | 1625 (1450) | Jerry000 |
» | Ne zazna css responsive media-queryOddelek: Izdelava spletišč | 979 (865) | D-monLord |