Responsive design sau responsive web design (RWD) este o colectie de tehnici pentru a construi un site web astfel incat acesta sa se adapteze si sa functioneze optim pe orice fel de dispozitiv indiferent de rezolutia si dimensiunea ecranului. Asta inseamna ca site-ul va fi functional si placut pe telefoane, tablete, laptop-uri, monitoare normale, televizoare, etc.
Intr-o perioada era la moda sa existe o varianta pentru mobil (de obicei m.site.ro) dar este greu sa intretii 2 versiuni ale aceluiasi site. Iar cand au aparut tabletele oamenii inteligenti si-au dat seama ca inca o versiune gen t.site.ro este exclusa. Mai apar probleme de indexare in motoare de cautare, probleme redirectionari din varianta mobila in varianta desktop si invers iar detectarea browserului poate da batai de cap. Intr-un cuvant rezolutia mobila
Cu un site responsive se serveste mereu acelasi continut html si este treaba CSS-ului sa il prezinte corespunzator in functie caracterisiticile ecranului. Mereu este acelasi URL si acelasi continut (dispar problemele de indexare in Google de exemplu), doar afisarea difera.
Tehnic acest lucru se realizeaza (printre altele) cu asa numitele media queries. Inca din CSS 2.1 exista suport pentru diferite tipuri de medii (screen, print, etc) dar n-au prea fost folosite si nici implementate in browsere.
O regula media query arata ceva de genul:
@media screen and (max-device-width: 480px) { }
Este practic o conditie ca in programare (un if) care atunci cand este ideplinita se aplica regulile de CSS continute intre paranteze. In cazul de fata este destul de simplu: cand mediu este ecran (screen) si dimensiunea pe orizontala este de maximum 480 px, aplica regulile date. O lista completa cu regulile poate fi gasita aici si documentatia oficiala aici.
Dar totusi cum?
Din punct de vedere al design-ului lucrurile sunt mai complicate pentru ca trebuie gandit fluid, pentru fiecare breakpoint, unde se ascunde ce se ascunde, ce buton se mareste ce se micsoreaza.
In principal odata cu modificarea dimensiunii ecranului se modifica layout-ul site-ului de la 3 coloane pe desktop la 1 coloana pe mobil (de exemplu). Imaginile se redimensioneaza sau dispar, unele elemente de interfata (mai putin importante) se ascund si apar doar la actiunea userului.
Mediaqueri.es este un site cu exemple de site-uri responsive perfecte pentru inspiratie, dar trebuie spus ca nu exista o solutie universala, fiecare site este unic ce merge pentru unii poate fi dezastruos pentru altii.
Poate ca cel mai greu este sa scapi de mindset-ul webdesignerul de acum 10 ani cand totul trebuia sa arate la fel si perfect (pixel perfect) pe orice browser si pe orice rezolutie.
Daca pe vremuri se vorbea de pixeli si se gandea in pixeli acum este vorba de procentaje si proportii (de asta spuneam de gandit fluid).
Site-ul nu trebuie sa arate la fel dar trebuie sa functioneze la fel, experienta utilizatorului trebuie sa fie identica. Intre noi fie vorba prea putin il doare cum arata site-ul cat timp isi atinge scopul si isi rezolva problema.
Dar nu sunt costuri mai mari?
Poate, dar sunt mult mai mici comparativ cu intretinerea a 2 versiuni (mobil si desktop). Fata de alternativa renuntarii la utilizatorii mobili (in crestere incontinuu), adica renuntarea la un procent din clienti, este chiar ieftin.
Poate parea enorm de mult de munca sa sa dezvolti un site pentru orice rezolutii chiar imposibil ar spune unii, dar nu e chiar asa. Sunt doar cateva rezolutii importante, mai bine spus intervale de rezolutii pentru care trebuie facuta dezvoltarea iar daca se foloseste abordarea mobile-first totul devine mult mai simplu.
Conform Bootstrap (cel mai folosit framework de front-end development) dimensiunile principale pentru care trebuie gandit un site sunt:
- extra-small – telefoane mobile (<768px),
- small – tablete (>768px),
- medium – laptop-uri si desktop-uri mici (>992px),
- large – desktop-uri mici, televizoare (>1200px).
Sa vorbim un pic despre pixeli
Dezvoltatorii de aplicatii mobile isi permit lux-ul de a renunta la pixeli, au unitati relative precum precum dp (densitiy independent pixels) sau vw (viweport width) cu care sa se joace. Momentan, pe web, suntem blocati cu pixelii (sau cei mai curajosi cu em-urile) pana vor suportul browserelor pentru unitati relative precum vw este mai mare.
In ultimii ani rezolutiile dispozitivelor mobile au crescut constant s-a ajuns la rezolutii de 1920×1080 (FullHD) sau chiar mai mari dar dimensiunea ecranului este este relativ mica (a crescut dpi-ul). Aceeasi rezolutie am si pe monitorul de 24 de inchi cat si pe telefonul de 5 inchi, daca site-ul incape asta nu inseamna ca se poate citi ceva sau apasa ceva fara sa fii nevoit sa dai zoom.
Apropo, acest compartament nu este considerat mobile-friendly de catre Google care incepand cu 21 aprilie 2015 ia in considerare cat de utilizabil este un site pe mobil in afisarea rezultatelor de cautare.
Revenind la pixeli, browserele dispozitivelor mobile dau un fel de zoom ca site-ul sa se afiseze corect iar textul sa fie lizibil.
Se impare rezolutia in functie de dpi-ul dispozitivului ca sa rezulte o rezolutie comparabila cu cea de pe desktop. Astfel 1080px este impartit la 3 si rezulta latime de 360px. Acesta este targetul dezvoltarii unui site ca sa arate bine pe un mobil cu rezolutie (FullHD ex Samsung S4 sau HTC One). Alte dimensiuni (pe orizontala) sunt 320px (iPhone 3 4 si 5 si cele mai multe mobile), 375px iPhone 6 si 415px iPhone 6 Plus ( asta pentru ca … Apple).
Pentru a se declansa acest comportament trebuie sa se includa in sectiunea head a site-ului urmatorul cod:
<meta name="viewport" content="width=device-width, initial-scale=1">Astfel browserul va face calcule si va randa site-ul la o rezolutie mai mica chiar daca de fapt latimea reala in pixeli a ecranului este mai mare.
Nici pixelii nu mai sunt ce au fost odata :).
Asta are ca rezultat pastrarea dimensiunilor textului (pentru a fi usor de citit) si a marimii butoanelor (pentru a fi usor de apasat, cu degetul) indiferent de marimea fizica a ecranului!
Stiu ca e un articol lung si iti multumesc ca l-ai citit pana la capat, ar mai fi multe de spus dar ma opresc aici momentan. Daca ai ceva intrebari, le astept mai jos.
Un gând despre “Ce este responsive design?”