Responzive web, good tips

Dizajn HTML i CSS
#1

Kao što naslov kaže…tražim dobrih savjeta oko izrade respozivnosti, ili ti ga, mobilne prilagodbe.

Znači, ako vam je poznat neki dobar tutorijal, preporučite. Bilo kakav vlastiti savjet također objeručke prihvaćam.

Imam i nekih konkretnih pitanja.
Do sad sam sve radio skalabilno, u postotcima…izradio različite kosture za mobile i destkop, kako nebi prikazivao nepotrebne stvari na mobile verziji.
U grubo, mislim da su stvari dobro postavljene jer se ništa ne raspada i ponaša se po zamislima. Ali nešto bitno (nadam se trivijalno) mi nedostaje. Svi elementi su jako sitni…povećalom ih moram tražiti xd. Velika rezolucija mobitela je jednostavno sve umanjila, ono što je 50px na destkopu, to je bome puno manja udaljenost kad se zbroji 50px na mobitelu. To je očito problem, a kako ga rješiti.

Za font vjerujem da sam spetljao jer neznam iz kojeg razloga ne koristim to po postotcima. (nekako mi to nije još leglo, a nisam siguran niti da je ključ ovog problema u tim postotcima)
…jer osim fonta i ikone i visine boxeva…sve je to umanjeno kao kućice sedam patuljaka iza sedam brda.
Ako uvećavam sliku, sve uspije sjesti na svoje mjesto, osim širine koja izleti van. (Poanta, sve mi je skalabilno umanjeno). No naravno, kad tako uvećam, onda stvari bježe van iz ekrana…što logično, glavna širina mora ostati 100%, a ostatak se treba samo uvećati.
I ta mogućnost uvećavanja od korisnika je također neprihvatljiva…kao što je to kod ostalih mobilnih verzija kakve srećem na netu.
Osjećam da samo nešto treba podesiti i da sve sjedne na svoje mjesto…pitanje je što? Bit će da mi nedostaje neki dobar tutorijal …stoga preporučite nešto dobro.

Hvala.

#2

Krenuo sam pisati na dugo i siroko o principima RWD-a, a onda sam se sjetio da je mozda problem u samo jednoj liniji koda.

Reci mi, jesi li podesio viewport meta tag na vrijednost 1.0?

1 Like
#3

Zgooglao to u medjuvremenu…biti će da je to! No, treba vidjeti što će reći gospodin sutra xd

#4

Ovo u <head> ubaci.

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

i ovo na vrh CSS file-a.

@-ms-viewport {
    width: device-width;
}

Just set it and forget it :grinning:

Ako nisi upoznat ovo ti je vrlo bitno za ubacit jer osim što ispravlja taj problem što imaš, na nekim preglednicima uklanja dosadni 300ms tap delay, tako da dobivaš besplatan performance boost na mobitelima.

1 Like
#5

Ti spominješ mobile i destkop verzije “kostura”.
Ako neki sajt ima mobile verziju i desktop verziju to više nije
RWD layout.

Ne trebaju ti dva različita kostura da sakriješ elemente za mobile.
To se sve radi sa media queries.

Brake points u kombinaciji sa min-width, max-width su ključna stvar, kao i planiranje
RWD procesa već i pri samom dizajnu.

U trenutku kada zbog dužine izražene u postotcima elementi postaju
preširoki (ili preuski) onda ih “lomiš”, odnosno umjesto da stoje jedan do drugoga,
lome se da idu jedan ispod drugoga.

Ja koristim samo tri, najviše četri najosnovnijie prijelomne točke.

Taođer, kažeš da sve izražavaš u postocima. To je totalno nepotrebno.
Zbog toga na kraju dobijaš minijaturnu, neupotrebljivu verziju elemenata/stranice.

Logika slaganja 960 layouta nije priladna za RWD. Tu sam i ja dosta griješio
na početku, kada sam navike iz slaganja 960 layouta htjeo primjeniti na RWD.

#6

Neznam, vidjet ćemo.
I ja očekujem da ću imati prijelomne točke…no želim da ih sam dizajn zahtjeva čim manje. A dva kostura neće biti u potpunosti različita, samo neke elemente koji su nepotrebni na mobu, jednostavno ih neću ni generirati za mob što je optimizacijski poželjno. Kad bi to sve radio sa media queries, samo bi sakrivao elemente koji bi i dalje bili tamo. (ako se ne varam…jer prilično sam siguran da CSS ne može preventirati na serveru)
S druge strane, elementi koji su u potpunosti različiti, učitavat će se mobile ili destkop verzija po potrebi.

Ali šta je da je, prvi put čujem riječ RWD, no intuitivno vidim da je to kratica za “responzive web design”. Ocke, kužim sad iz tvog posta da RWD nije isto što i mobilna prilagodba …no meni treba mobilna prilagodba. Hoće li to biti sa RWD ili sa nekim drugim rješenjima …to je manje bitno.

#7

RWD jest mobilna prilagodba.

Ali OK, kužim.
Tebi iz nekog razloga više odgovara da imaš odvojenu desktop i mobile verziju.

To je OK, jer RWD nije uvijek najbolje riješenje, ima prednosti ali i mane.
Pristup prilagodbe za mobile zavisi naravno o tome što radiš, za koju publiku/rezolucije…

Proguglaj pojmove poput: mobile first, content first, adaptive/elastic/liquid layout.

#8

Odlično je :blush:

Bit će potrebno manjih izmjena, ali baš je odlično! “meta” tag je bio the key…i baš sam se nadao da se tako neka sitnica mora dodati da sve sjedne na svoje mjesto.

Naravno da jeste…ali ako sam ja tebe dobro skužio, ne spadaju svi elementi mobilne prilagodbe pod kategoriju responzivnog dizajna…što sam ja krivo izjednačio ta dva pojma u uvodnom postu :wink:

Nego, back to good tips.
Neznam zašto mi se nakon ovoga ne učita svaki put stranica najbolje. Imam neke onload funkcije…i negdje nešto pukne i ne završi se akcija. Ne svaki puta, nego samo par puta nakon uploada nove scripte. Mislim, ili nek čita stare scripte ili nove, hehe…on zapne negdje između.
Pitanje je, kako najbolje debugirati mobilnu verziju, ima li nešto kao firebug za mobile?

#9

Imaš remote debugging na svim preglednicima.
Enejblaš developer mode na mobitelu, spojiš laptop i mobitel preko usb-a i to je to.
Guglaj chrome remote debugging. Mislim da ćeš ako si na windowsu morat neki ■■■■■ od 400MB skidat barem je trebalo kad sam ja to htio radit, ali davno je to bilo. Na linuxu radi bez ičega samo spojiš i šibaš.

1 Like
#10

Cool :wink: …

#11

Palo mi nešto na pamet. Zašto svi webovi stavljaju header s osnovnim funkcijama/linkovima na vrh? Nebi li logičnije bilo za mobilno korištenje da se header premjesti na dno, kako bi osnovne funkcije bile na “prstohvat”.

Ili drugim riječima da se osnovne funkcije premjeste u footer .

#12

Ti si rodjeni pronalazač i inovator. :slight_smile: Sve pršti od novih ideja i zamisli. Oklen ti ispiracija?

#13

Nego uleti mi miš u kuću i ja responsive šta ću napravim zamku. No nije to klasična zamka mišolovka nego sistem koji ga neće ubiti i ozlijediti već samo zarobiti pa ga ondak’ mogu fino pustiti negdje daleko van.
I tako ti ja postavim kantu od jupola u nju stavim vrećicu (po kojoj se kliže i ne bi trebao izići) i u to stavim komad slanine (mali). Na kantu stavim letvicu od poda do vrha kako bi se mogao popeti i uskočiti. rub namažem tom slaninom da miriši i da je neodoljiv. lanina dobra neka i dobro miriši .Sve responsive. i tako ti se ja probudim ujutro kad ono u kanti miš sve pojo’ dobro se isro’ i pobijego.
Sori na of topik al i ovo je inoviranje :slight_smile:

1 Like
#14

Hahaha, krenimo redom:
-još u osnovnoj školi krivotvorio žetone za autiće u lunaparku (vozilo se pola Gospića dok cigani nisu poludili xd)
-kasnije redovito krivotvorio žetone za biljar, za stolni nogomet sam isto imao hebenu shemu koja nikad nije zaštekala.
-krajem srednje krivotvorio čepove za koncert bijelog dugmeta. Naprodavali se karata…koje su cijenom sezale i do 600kn dok nije otvorena tribina iza leđa izvođačima…no i onda su bile po 300kn. (O da, posjetio sam i murju zbog toga…ali se i izvukao jer sam si pripremio back up plan xd) Prošlo je vrijeme zastare, ako mislite da sam glasan…šutio sam godinama o tome :smile: I to fakat nije bila mala igra, s krivotvorenim čepovima sam bio toliko konkurentan s cijenom, da mi je mobitel toliko zvonio da nismo nas četvero imali šanse napraviti čepova koliko je bilo narudžbi. A u određena vremena dana, jedan je morao biti samo tajnica na mobitelu da prima narudžbe xd.
-dalje, cijelo studiranje sam si smislio kako mogu besplatno klopat na vrlo elegantan način (nebum rekao kako)
I to su stvari koje smijem reći, koje ne smijem nebudem…a imam puno boljih :smiley:

Ekšuali, iako me ironično sprdaš…ali za svaku krivotvorinu treba biti inovativan, pogotovo kad si klinac i nemaš odgovarajućeg alata :smiley:

A o gornjem prijedlogu niti ne mislim da je neka inovacija…jer Google je već dobrano toga premjestio na andoridu iz headera u footer. No zanimljivo mi je da to nije već više prisutno na webu (mobilnom) …jer ja i dalje uglavnom viđam te funkcije gore, daleko od prstiju. Vjerujem da će kroz par godina biti standard donja pozicija.
Ne kužim koje su negativne strane donje pozicije? …osim kontradiktiranja već stečenom user experiencu.

1 Like
#15

Koja je razlika između refresh page, i ako se klikne link na stranici koji vodi ka istoj stranici na kojojoj jesmo?

Nije isto…po ponašanju DOM-a, ali zašto nije isto ako netko slučajno zna?

(Kod refresha imam bug, kod ovog drugog nemam xd)

#16

Osim navika korisnika, responzivne navigacije su večinom padajući izbornici. Ako je dolje nemaju gdje padati, nezgrapno je i neprirodno navigirati, pogotovo ako je izbornik scroll. Prirodna putanja čitanja ljudskog oka (večina, zapadna civilizacija) je sa lijeva na desno, od gore prema dolje.

Uz to, niti jedan uređaj nema hradverske gumbe na vrhu ali neki ih imaju na dnu, pa dolazi do preklapanja funkcija.

#17

Ne mislim na padajući izbornik…nego na header traku kakvu recimo ima facebook stranica, u kojoj se nalaze 6 inline gumbića…od kojih svaki vodi negdje. Recimo imaš gumbić za poruke…i dolje ti je na dohvat da odeš na poruke…ili bilo gdje već želiš navigirati.

Ovo te ne kužim, kako misliš da bi se preklapali hradverski gumbi sa tim footerom?

A to zašto nijedan uređaj nema gumbove gore…zato se ja baš i pitam zašto stranice onda stavljaju gumbe gore :D, kad je očito praktičnije dolje. (Dok se radi samo o gumbovima kao što je primjer header na facebooku)
+primjeti da je google počeo sa selidbom osnovnih funkcija u donji desni kut… bilo na androidu, bilo na aplikacijama poput gmaila…

#18

Uspio sam to instalirati…doduše, nije išlo baš previše glatko…jer nisu svi programi kompatibilni sa win8.1.

No sad sam zapeo sa localhostom, uspjevam sinhronizirati rad mobitela i računala ukoliko dohvaćam sadržaj sa online servera, ukoliko pokušam sa lokalnog servera, onda neće.

Vidim da se trebaju podesiti opcije u post forwarding kao što je ovdje lijepo objašnjeno: https://developer.chrome.com/devtools/docs/remote-debugging?hl=FR#port-forwarding

No meni je port 80, a to input polje me forsira da unesem port od četiri znamenke…ne kužim u čemu je kvaka, pa možda znaš?

#19

Uglavnom, uspio sam rješiti promjenom porta localhosta u četveroznamenkasti broj…


Copyright © 2020 WM Forum - About | Contact - Sponsored by: Mydataknox & Profit Monkey