Responsive web design: da ali ne
- Ustvarjalec teme scorpion
- Začetni datum
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.
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
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.
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.
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.
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.).
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.).
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
/* 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
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).
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).
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.
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.
Č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.
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.
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.
