Responsive web design: da ali ne

scorpion

Majstr
25. apr 2008
2.029
198
63
Google tretira spletne strani prilagojene mobilnim napravam višje kot pa navadne strani. Zanima me, katere pluse in minuse pri odzivnih spletnih straneh vidite vi.
 

Numy

Majstr
1. jan 2008
9.858
392
83
Meni gredo na živce razne 'prilagojene' zadeve.
Npr, greš s fonom na neko poznano spletno stran, namesto da bi pogledal kar te zanima, bum, drugačen vmesnik, brez veze... telefoni imajo zdaj že boljšo ločljivost kot večina monitorjev.
Ali greš na kak forum pa ti vsiljuje tisti tapatalk ali pa ti spletna stran mori, da je na voljo tudi kot aplikacija, pa kaj? Bom imel za vsako spletno stran svoj app?
Same oslarije, da imajo programerji delo.
 

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.860
689
113
Citat:
Uporabnik Numy pravi:
Meni gredo na živce razne 'prilagojene' zadeve.
Npr, greš s fonom na neko poznano spletno stran, namesto da bi pogledal kar te zanima, bum, drugačen vmesnik, brez veze... telefoni imajo zdaj že boljšo ločljivost kot večina monitorjev.
Ali greš na kak forum pa ti vsiljuje tisti tapatalk ali pa ti spletna stran mori, da je na voljo tudi kot aplikacija, pa kaj? Bom imel za vsako spletno stran svoj app?
Same oslarije, da imajo programerji delo.

Ne morem brez nekaj opazk
rolleyes-1.gif


Ti očitno zamenjuješ "mobilno" spletno stran z "responsive" spletno stranjo. Ker pri responsive spletni strani vmesnik ni povsem drugačen, ampak so samo nekateri elementi prerazporejeni, nepotrebni pa skriti oz. dostopni s klikom. Da smo na jasnem: primer mobilne spletne strani: www.engadget.com.

Resolucija je povsem nepomembna. Kaj potem če imaš na 65" TVju enako resolucijo kot na 5" telefonu. Boš videl brati pisavo veliko 12px na telefonu? Ne boš, ker bo črka velika ~1mm. Boš videl brati na TVju? Seveda boš, saj bo črka velika ~9mm. Iz tega je očitno, da je vsebino nujno potrebno prilagoditi, saj brez zoomiranja in scrolanja levo/desno/gor/dol sicer ne bo šlo. Scrollanje levo/desno je namreč no-go, ne glede na napravo (računalnik, telefon, tablica, mikrovalovna ipd.).

Glede aplikacij se strinjam, da je zelo moteče ko ti ob odpiranju strani vedno znova "zagnjavi". Ampak določene namenske aplikacije so boljše kot njihove spletne strani. Zakaj potem obstaja aplikacija Facebook, če pa lahko vse opraviš na njihovi mobilni strani (tudi preko telefona, se razume).

In še glede "dela programerjev": z responsive stranmi imajo programerji manj dela, kot pa vzdrževati več različic strani in po možnosti še mobilne aplikacije za vse možne platforme.

Responsive web je prihodnost, mora pa biti pravilno implementiran.
 

KLuka

Fizikalc
7. sep 2007
1.710
0
36
Jaz se tudi strinjam, da je responsive dizajn prihodnost za web strani namenjene široki publiki. Itak je vedno več uporabnikov na mobilnih napravah...

Ta je recimo meni super primer. In se vidi kako je lahko spletna stran lahko uporabna hkrati na majhnih in velikih resolucijah.
 

scorpion

Majstr
25. apr 2008
2.029
198
63
Naša firma ima kar precej obsežno spletno stran, ki bi se jo moral spraviti prilagoditi responsive designu. Po eni strani je samo ena inačica spletne strani, ki je prilagojena za vse naprave boljša, kar se kasnejšega urejanja tiče. Po drugi strani pa ne vem, ali bi bilo mogoče bolje ustvariti še novo, prilagojeno mobilnim napravam.
Vsekakor je dela za začetek veliko, kasnejše urejanje pa veliko lažje s samo eno stranjo.

Mene osebno neprilagojena spletna stran, kjer je treba zoomirati in scrolati levo-desno, niti ne moti preveč.

Katere breakpointe pa se najbolj splača uporabiti, da bi bilo zajeto čimveč naprav? Originalna širina spletne strani je 970 px.
 

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.860
689
113
Torej v vašem primeru imaš dve opciji: razvoj responsive strani (t.j. spreminjanje obstoječe) in kreiranje dodatne (mobilne) strani. Mislim da je veliko boljše iti v responsive varianto, čeprav je obstoječe strani včasih težko adaptirati - idealno je, da uporabljaš kakšno Grid "tehnologijo", kar pa včasih ni trivialno uvesti na že obstoječo stran (vse je seveda odvisno od tega, kako "zakomplicirana" je trenutna stran).

Za breakpointe se navadno uporabljajo resolucije iNaprav, torej iPad in iPhone (ležeče in pokončno). Najboljše pa da uporabiš nek Grid (recimo od Bootstrapa) in uporabljaš samo logična imena zaslonov (medium, large, small ipd.).
 

KLuka

Fizikalc
7. sep 2007
1.710
0
36
Glede break pointov ima Bootstrap takole:
/* Small devices (tablets, 768px and up) */
/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

PA še recimo za Pure CSS:
sm @media screen and (min-width: 35.5em) ≥ 568px
md @media screen and (min-width: 48em) ≥ 768px
lg @media screen and (min-width: 64em) ≥ 1024px
xl @media screen and (min-width: 80em) ≥ 1280px
 

scorpion

Majstr
25. apr 2008
2.029
198
63
Kakor sem si pogledal, naj bi nekako najbolj uporabljeni breakponti bili za tablice 768 px, za telefone pa 320 in 480 px.
 

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.860
689
113
Citat:
Uporabnik KLuka pravi:
Glede break pointov ima Bootstrap takole:
/* Small devices (tablets, 768px and up) */
/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

Bootstrap ima načeloma 5 breakpointov. Zraven omenjenih treh sta še 320px in 480px.

Ampak glede na to, da je stran od OP široka 970px, potem 1200px breakpoint odpade in so potrebni le štirje breakpointi: 320, 480, 786 in 992 (ne uporabiti 970 kot je max širina strani - potrebuješ še malo dodatnega prostora zaradi scrollerja).
 

Ganesh

Fizikalc
14. avg 2009
2.921
0
36
Allarround
rescue.facelock.net
Zavedajte se, da responsive design ni uporaben le za dostopnost z različnimi napravami temveč tudi za dostopnost z različnimi povečavami, kar je pomembno za slabovidne (teh je pa vedno več - staranje prebivalstva).
 

Numy

Majstr
1. jan 2008
9.858
392
83
Zadnjič sem obiskal eno t.i. odzivno spletno stran. Hočem povečati tekst, ki me je zanimal, hkrati se je tako fino odzivno povečalo še vse ostalo (razne izbire) da ni bilo več uporabno. Odzivne spletne strani so sranje.

Torej hočeš povečati tekst, povečajo se še vsi elementi, ne moreš se jih znebiti, ker se tako fino prilagajajo in nočejo iz vidnega dela ekrana. Beda.
 

scorpion

Majstr
25. apr 2008
2.029
198
63
Če si gledal na telefonu in zoomiral, normalno, da se je povečalo še vse ostalo. Namen odzivnih strani je ravno v tem, da tudi na majhnih ekranih tekst po defaultu ostane berljiv, ne da ga je treba zoomirati. Drugače pa stran ni dobro narejena.
Pa saj ima recimo tudi firefox, ko ga gledaš na PC-ju, opcijo zoomiranja (Ctrl in +), pa se poveča tudi vse ostalo. Nekatere strani imajo vdelane tudi plugine, kjer lahko povečuješ samo besedilo.

Če ti ni pretežko, lahko posreduješ link do strani, ki si jo gledal, pa bomo pogledali še mi.
 

KillaKHAN

Guru
27. avg 2008
17.805
1.121
113
Valjda responsive. Odkar delam vse na 27" me še bolj motijo neresponsive strani, ko imam na vsaki strani pol monitorja praznega (primer, alter).
 

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.860
689
113
Spet ne mešati responsive in fluid design. Alter ni responsive, je pa fluid (v kolikor zgoraj desno klikneš na tisti gumb). Tudi vse responsive strani niso fluid. Bi rekel da jih celo večina ni fluid, saj je težko ohraniti nek privlačen izgled, ko stran raztegneš na 2000+px.