Salutare tuturor. Sunt incepator in ale web design-ului si am ajuns la concluzia ca nu poti invata ceva concret decat practic si astfel m-am apucat sa lucrez la un website, insa m-am lovit de urmatoarea problema si nu am gasit nimic concret care sa ma ajute. Care este diferenta dintre un site responsive si un site care se poate adapta diverselor rezolutii de pe care este accesat? Aici ma refer la site-urile care cand sunt accesate de pe telefon sunt afisate ca pe calculator, fara modificari, se adapteaza la rezolutia calculatorului de pe care sunt accesate. De asemenea, ce unitati de masura ar trebui sa folosesc in css pentru a ajunge la un asemenea site?
Iar a doua intrebare este legata de imaginile de pe site-urile de aici Imagini HD gratis. Care este politica utilizarii lor? Se pot folosi neconditionat?
Eu cred ca un site responsive isi modifica elementele componente in functie de anumite criterii, uitate la framework-ul Bootstrap si o sa intelegi mai bine.
Ceea ce a zis si iamntz ;).
Iar site-urile care sunt afisate pe diferite dispozitive la fel cum sunt afisate si pe calculator nu au nimic special, pur si simplu asa sunt afisate( dar nu pe toate dispozitivele ).
Cred ca in prezent ai putea sa imparti site-urile in cele care au un design responsive (adica se adapteaza rezolutiei de pe fiecare device folosit de un user) si cele care au un design clasic sau non-responsive (adica nu se adapteaza la orice rezolutie, sunt construite pe un grid fix).
Referitor la unitatile de masura, ai de ales intre px, em si rem. Articole explicative:
In general se foloseste un grid de 12 coloane si 960 sau 1200 pixeli latime. Depinde pana la ce rezolutie vrei sa arate bine site-ul. Daca vrei sa arate ok pana la 1024x768 -> 960 grid, altfel -> 1200.
din experienta, daca vrei sa arate bine un site pe orice rezolutie, e de preferat sa il faci in procente, fara dimensiuni fixe. desigur, trebuie sa gandesti cum tai imaginile din bg in asa fel incat sa se repete la infinit cat e nevoie in functie de rezolutie (aici sunt cele mai multe probleme).
desigur, poti face si mai multe variante de template-uri pentru diferite rezolutii, dar asta inseamna multa munca in plus.
exista insa si variante separate de template bazate pe mobile ui care sunt gandite sa nu incarce prea mult banda la incarcarea paginii (mai ales ca pe telefon e banda mica si nu vrei sa isi piarda omul rabdarea pana se incarca o pagina).
deci, pe scurt, cand faci un template pentru un client, trebuie sa ti cont de mai multi factori
cele mai folosite rezolutii desktop care vor fi folosite pentru acel site
optimizare pentru dispozitivele mobile (cat mai putine poze sau cod care ar ocupa inutil banda)
daca template-ul contine poze in bd, verificat cum se adapteaza acele poze pe diferite rezolutii si diferite browsere (5 browsere cele mai folosite) si diferite versiuni de browsere (la ie mai ales sunt mari batai de cap intre versiuni)
daca te hotarasti sa il faci la o dimensiune fixa, poti jongla din jquery sa redimenzionezi box-urile in functie de rezolutia curenta (e ceva mai mult cod de scris in jquery dar e o varianta ok pentru template-urile fixe)
Recomandarea mea e sa nu iti bati prea mult capul, fa cum zice clientul (ca el da banu) si mergi mai departe.
Cred ca mai e pana la client, dar am prins ideea .
Pana acum am lucrat cu vh (mi s-a parut ca da un aer responsive website-ului) si am sfarsit prin a nu-l putea folosi decat la rezolutia de pe care lucrez. Am sa incerc sa redimensionez totul in functie de procente.
Ok. Am incercat sa folosesc procentele, dar bineinteles ca layout-ul arata bine numai pe rezolutia pe care am lucrat (1366x768), iar daca il deschid de pe calculator (1280x1024) lucrurile se strica putin. Am senzatia ca imi scapa ceva sau nu fac ceva cum trebuie. Stiti vreun ghid exact referitor la acest lucru?
Legat de acest punct s-ar putea să fie interesant următorul usecase din Project Oxford (Microsoft AI research):
Se lucrează la tăierea/redimensionarea automată a imaginilor de fundal, încât să genereze imagini potrivite pentru scenariile uzuale necesare unui site responsive.
Deciziile legate de cum vor fi tăiete/redimensionate imaginile se ia pe bază de machine learning.
Din păcate nu mai găsesc link-ul, dar am încărcat mai jos o captură de la un video în care era prezentat:
.