Pozdrav!
Kako smo svi vec na veliko upoznati da je 2013.godina responsive web-a (barem tako stara zavrsava), odlucio sam se otvoriti temu na spomenuto.Zanimaju me Vasa iskustva, problemi(ako ih ima) tokom dizajna ili slice-a…odabir layouta…itd…
Takodjer nije na odmet “objesiti” pokoji link Vasih gotovih radova ili link uspjesnih timova ili pojedinaca koje bi mogli svakako preporuciti.
Hvala unaprijed.
Meni je najveći problem bio sa fixed columnom, iako je kolumna do njega bila responsive sa margin:-100% cakom, nikad se nije 100% pravilno smanjivala, tako da sam je morao lomiti na više neoubičajenih mjesta da u svakom trenutku je cijeli sadržaj unutar nje.
Izbjegavaj sakrivati elemente za tablet i mobile na desktop-u.
Problema uvijek ima.
Podrška za IE, lightbox za fotogaleriju koji dobro radi na mobitelima, prikaz podataka u širokoj tablici na malim ekranima, CSS3 prefiksi za Android 2.3 i za Android 4.0, testiranje na većem broju uređaja (stvarnih, ne simulatora)…
[quote=“gambo”]Problema uvijek ima.
Podrška za IE, lightbox za fotogaleriju koji dobro radi na mobitelima, prikaz podataka u širokoj tablici na malim ekranima, CSS3 prefiksi za Android 2.3 i za Android 4.0, testiranje na većem broju uređaja (stvarnih, ne simulatora)…[/quote]
kolka je razlika u isprobavanju na simulatorima kao npr… The Responsinator i na stvarnim uređajima
jer realno nemam mogučnosti isprobati… i o kakvim css3 prefiksima je riječ za android 2.3 i 4.0 ?
hvala
Ono što se vidi na Responsinatoru i sličnome, nema puno veze sa onime što se stvarno vidi na mobitelu.
Uostalom, isto se može postići i jednostavnim bookmarkletom: Responsive design testing tool – Viewport Resizer – Device simulation tool
Za emulaciju Androida, tko ne želi instalirati Android SDK, postoji odličan online emulator:
https://app.manymo.com/emulators
Pisao sam o tome ovdje:
http://www.webmajstori.net/forum/31117-web-stranice-koje-se-mora-vidjeti-7#post286808
Kod ovog online emulatora nije moguće mijenjati hardversku konfiguraciju, no za testiranje RWD nije ni potrebno.
Što se tiče CSS zajebancija sa prefiksima, mislio sam na ovo:
Primjer 1:
IE i Opera od samog početka, kad je izmišljen box-shadow property, podržavaju ga bez prefiksa.
Firefox, Chrome i Safari da odavno podržavaju bez prefiksa.
Stare verzije browsera koje zahtijevaju -webkit- ili -moz- prefiks imaju ukupno manje od 1% udjela.
Zaključak: možemo zaboraviti prefikse i pisati jednostavno.
box-shadow: 10px 10px 5px #888;
Zajeb je što Android 3 browser i stariji (i Safari na starijem iOS-u) zahtijeva -webkit- prefiks.
A to je bar polovica aktivnih smartphonea.
I ako se želi da CSS radi na Androidu, treba se sjetiti gornji kod promijeniti u:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
I umjesto da prefikse zauvijek ostavimo za sobom, zbog Androida ih moramo vraćati.
Primjer 2:
Za linear-gradient je finalna sintaksa (valjda finalna) ovakva:
background: linear-gradient(to bottom, #fff, #000);
Naravno, na Androidu 4 to neće raditi.
Treba dodati i verziju sa prefiksom i drugačijom sintaksom:
background: -webkit-linear-gradient(top, #fff, #000);
Isprobaš na emulatoru - sve OK. Isprobaš na mobitelu - sve OK.
Zaključiš da je sve u redu i ne misliš više o tome.
Onda za par dana isprobavaš na Androidu 2.3.3 nešto drugo i - ček malo… gdje nestade gradient?
Eh da, za Android 2.3 treba dodati:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
Responzivno je ok za neke manje projekte i tako to, nešto kompleksnije - ne hvala.
[quote=“gambo”]Ono što se vidi na Responsinatoru i sličnome, nema puno veze sa onime što se stvarno vidi na mobitelu.
Uostalom, isto se može postići i jednostavnim bookmarkletom: Responsive design testing tool – Viewport Resizer – Device simulation tool
Za emulaciju Androida, tko ne želi instalirati Android SDK, postoji odličan online emulator:
https://app.manymo.com/emulators
Pisao sam o tome ovdje:
http://www.webmajstori.net/forum/31117-web-stranice-koje-se-mora-vidjeti-7#post286808
Kod ovog online emulatora nije moguće mijenjati hardversku konfiguraciju, no za testiranje RWD nije ni potrebno.
Što se tiče CSS zajebancija sa prefiksima, mislio sam na ovo:
Primjer 1:
IE i Opera od samog početka, kad je izmišljen box-shadow property, podržavaju ga bez prefiksa.
Firefox, Chrome i Safari da odavno podržavaju bez prefiksa.
Stare verzije browsera koje zahtijevaju -webkit- ili -moz- prefiks imaju ukupno manje od 1% udjela.
Zaključak: možemo zaboraviti prefikse i pisati jednostavno.
box-shadow: 10px 10px 5px #888;
Zajeb je što Android 3 browser i stariji (i Safari na starijem iOS-u) zahtijeva -webkit- prefiks.
A to je bar polovica aktivnih smartphonea.
I ako se želi da CSS radi na Androidu, treba se sjetiti gornji kod promijeniti u:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
I umjesto da prefikse zauvijek ostavimo za sobom, zbog Androida ih moramo vraćati.
Primjer 2:
Za linear-gradient je finalna sintaksa (valjda finalna) ovakva:
background: linear-gradient(to bottom, #fff, #000);
Naravno, na Androidu 4 to neće raditi.
Treba dodati i verziju sa prefiksom i drugačijom sintaksom:
background: -webkit-linear-gradient(top, #fff, #000);
Isprobaš na emulatoru - sve OK. Isprobaš na mobitelu - sve OK.
Zaključiš da je sve u redu i ne misliš više o tome.
Onda za par dana isprobavaš na Androidu 2.3.3 nešto drugo i - ček malo… gdje nestade gradient?
Eh da, za Android 2.3 treba dodati:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
[/quote]
hvala na informacijama 
te ako nije problem da mi kažete na koje sve css detalje treba paziti kod responsiv dizajna, mislim na koje osim
box shadow, border i sl… treba dodavati te dodatke da bi radilo kako spada ?
Ovo što je gambo naveo nema veze sa responsive web dizajnom nego više sa podrškom ili ne podrškom nekih CSS svojstava koja su predstavljena sa CSS verzijom 3. To su prefiksi specifični za pojedine vrste preglednika i nemaju veze sa tim da li ih korisnik posjećuje stranicu preko pametnog telefona, tableta ili kućnog računala.
Kod responsive dizajna je najpotrebnije to da utvrdiš koji je sadržaj najvažniji i oko njega poćneš razvijati stranicu ovisno o rezoluciji koju korisnik koji ti je posjetio stranicu koristi. To je najnoviji trend i zove se mobile first development. A Book Apart, Mobile First
Inače koliko se o tome raspisalo, a ja u cijeloj godini imao jedan zahtjeva za responsive designom, tako da i nije baš nešto da je 2013 ili ova godina “godina responsive desgina”.
My two cents.
Hvala na odgovorima
još jedno pitanje, dali vama navedena stranica
https://app.manymo.com/emulators
radi sporo tj. kad odabere uređaj preko kojeg bi testirali ? meni nakon toga je sve jako usporeno.
bok,
malo dižem temu radi sljedećega, gdje mogu vidjeti nekakav popis prefiksa na koje trebam obratiti pažnju
kod responsiv dizajna za Android i Iphone uređaje tj. prefikse koje obavezno trebam koristiti da bi određeni
detalji bili vidljivi kod navedenih uređaja ?
hvala
List of css vendor prefixes? - Stack Overflow
Inače ne moraš posebno obračati pažnju na njih jer su ti browseri ubiti webkit based, pa ono što radi na desktopu radi i na smartphoneu. Responsive design nije ništa drugo nego prilagođavanje sadržaja različitim rezolucijama, a ne različitim mobitelima. Kako se tvoj dizajn ponaša na različitim rezolucijama možeš provjeriti jednostavno mijenjajući velićinu prozora u kojem je otvoren browser.
Imam osjećaj da se diže velika fama oko tog responsive dizajna bez velike potrebe.
[quote=“CreatifCode”]List of css vendor prefixes? - Stack Overflow
Inače ne moraš posebno obračati pažnju na njih jer su ti browseri ubiti webkit based, pa ono što radi na desktopu radi i na smartphoneu. Responsive design nije ništa drugo nego prilagođavanje sadržaja različitim rezolucijama, a ne različitim mobitelima. Kako se tvoj dizajn ponaša na različitim rezolucijama možeš provjeriti jednostavno mijenjajući velićinu prozora u kojem je otvoren browser.
Imam osjećaj da se diže velika fama oko tog responsive dizajna bez velike potrebe.[/quote]
hvala na odgovoru.
nego za koje najčešće detalje treba ipak dodati prefiks , da bi normalno radilo na npr… android 2.3 ili sl. ?
Za detalji koji su uvedeni u CSS ver 3. a koji nisu podržani u standardnim starijim preglednicima, tipa background-shadow, border-radius, text-shadow itd. itd. Dakle sve što i za obične desktop browsere. Opet naglašavam da ti detalji nemaju veze sa responsive designom, nego sa podrškom određenog browsera CSS3 pravila.
Imam pitanje vezano uz responsive design. Naime pokušao sam prilagoditi web sportski-rezultati.info ->NOGOMET za mobilne uređaje. Testirao sam na Iphone 3g i na Opera Mini mi prikazuje dobro stranicu. Dok u Safari pregledniku pokaže stranicu sa bijelim prostorom širine cca. 300px sa desne strane.
@media screen and (max-device-width: 610px){
body{
width: 605px;
overflow: hidden;
}
…
Ovo je kod, prvo sam mislio da ću sa deklaracijom body na fiksnu širinu srediti stvar, ali ne radi.
kužim hvala na objašnjenju
evo i primjer za border-radius : border-radius | CSS-Tricks
te imam još jedno pitanje, na koji način testirati stranicu u browserima Google Chrome i Opera ali u starijim verzijama ?
hvala
Za prefixe koristi ovo: Nettuts+ Prefixr
Što se tiče Chrome-a i Opere, uglavnom ih korisnici redovito nadograđuju tako da nemaš puno brige, a i ako radi u najnovijoj verziji, velika je vjerojatnost da će raditi i u onim malo starijim.
Ta stranica koliko ja vidim uopce nije responzivna
Ukoliko si pokušao samo resize desktop browsera neće biti responzivna. Jer je u kodu navedeno
@media screen and (max->>>device<<<<-width: 610px){
body{
width: 605px;
overflow: hidden;
}
…
Ako može pokušaj na smartphonu pa javi.