Cand este responsive web design-ul o solutie?

Ce este responsive web design-ul? Notiune aparuta relativ recent, din nevoia adaptarii site-urilor la nenumaratele variante de  accesare a acestora, responsive web design-ul se refera la conceptul de dezvoltare a unui website care sa permita layout-ului modificarea in concordanta cu dispozitivul vizitatorului, cu rezolutia si dimensiunile acestuia, fara modificari deranjante de  aspect.

Varianta clasica presupunea crearea mai multor site-uri adaptate fiecare unui anume tip de dispozitiv (desktop, notepad, iphone, smartphone, s.a.m.d.), situatie in care efortul si implicit costurile sunt destul de semnificative. Varianta propusa prin responsive web design, presupune adaptarea unui singur site la diferite dispozitive.

Conceptul este lansat incepand cu data de 25 mai 2010, data la care Ethan Marcotte, web designer cu o activitate deosebita, preocupat de dezvoltarea de concepte si metode noi, a publicat Responsive web design pe site-ul „A list apart”, articol de altfel foarte utilizat si care a starnit o serie intreaga de  dezbateri si discutii pro si contra acestui tip de design.

In august 2010, Adobe lanseaza update-ul 11.0.3Update, care include HTML5, media queries si un buton multiscreen care permitea vizualizarea in diferite formate, in functie de dispozitivul utilizatorului, urmata la aproape 10 luni de A book apart-Responsive Web Design a lui Marcotte.

Arma cu doua taisuri? Responsive web designul este varianta cea mai interesanta de creare a unui site, capabil sa gestioneze rezolutii diferite cu minim de efort, insa, asa cum s-a si constatat de altfel, lipsa de experienta si de profesionalism in acest  sens, face mai mult rau decat bine unui site, de altfel foarte interesant.

Care este principiul responsive web design-ului? In comparatie cu designul clasic, care utilizeaza griduri fixe, responsive web designul are griduri fluide, imagini flexibile si media queries care permit website-ului sa recunoasca tipul de dispozitiv de pe care este accesat, si sa modifice automat rezolutia si structura site-ului.

Nu este in nici un caz o solutie modificarea rezolutiei, unilateral, acest lucru ducand la afisarea unor pagini dificil de citit care trebuie  zoom-ate, si pentru care, utilizatorul este nevoie sa utilizeze scroll stanga-dreapta, sau sus-jos.

Imaginati-va alergand cu bagajele prin aeroport, incercand pe ultima suta de metrii sa aflati poarta de imbarcare, daca avionul are intarziere sau nu, sau alte detalii care va intereseaza si dati peste un site care va cere sa zoom-ati, sa miscati imaginea, si toate astea cu degetul mic de la mana stanga. Cat de comod v-ar fi?

In acest caz, gridurile fluide  sunt solutia. Daca gridurile fixe utilizate pana acum erau o solutie foarte buna, atata vreme cat rezolutia dispozitivelor era in limite rezonabile, de ceva vreme, mai exact din momentul in care putem accesa informatii pe display-uri de la dimensiunile propriului tv ( care poate avea si 0,5 m) si pana la display-ul smartphone-ului, gridurile fixe, nu mai sunt de folos.

Gridurile flexibile, nu se mai bazeaza pe dimensiuni exprimate in pixeli, ci aduc in atentie raportul intre diferitele griduri ale unui website, proportia intre elementele de layout, a caror redimensionare este realizata unul in functie de celelalte.

Pentru cei care simt nevoia sa ia contact cu bazele responsive web designului, sunt atat de multe site-uri care ofera un punct de plecare in aceasta directie doritorilor, ca de exemplu:

Build a responsive website

Responsive web design fundamentals

Daca vi se pare mai accesibila varianta tutorialelor video, puteti incerca aici :

Iar daca va doriti sa vedeti cateva exemple despre cum se adapteaza site-urile la diferitele dimensiuni ale dispozitivelor, veti gasi aici 70 dintre cele mai frumoase si sugestive  aspecte:

70 Stunning Responsive Sites for Your Inspiration