Web-ul este în mod implicit creat să răspundă nevoilor utilizatorilor. Noi suntem cei care l-au stricat în toți acești ani, plasând conținut în container-e de dimensiuni fixe - Andy Hume, "Responsive by default", blog personal, iulie 2011
Pe măsură ce designul site-urilor într-o manieră sensibilă la nevoile utilizatorului devine o necesitate în ultima vreme, trebuie să ne reamintim că nu există o soluție universal corectă pentru nimic, nici măcar pentru web design. Deși poate constitui o funcționalitate atractivă pentru utilizator, se poate dovedi a fi un dezavantaj dacă nu e folosit așa cum trebuie. În acest articol propun o analiză a ceea ce semnifică responsive web design: cum ar trebui aplicat, când ar trebui aplicat și cel mai important: când trebuie evitat.
Importanța nivelului de prezentare se justifică prin implicarea în interacțiunea cu utilizatorul; este ceea ce user-ul final vede după toate procesările aplicației; prezentarea trebuie să se ridice la nivelul complexității aplicației. Trebuie să fie simplu și intuitiv, chiar dacă sistemul este unul complex, deoarece utilizatorului nu-i pasă de cât de încărcat este sistemul sau de cât de elaborată e structura sa; dorința lui este de a naviga în aplicație cât se poate de direct și de rapid.
În ceea ce privește aplicațiile web, interfața este conținutul redat de browser. Conținutul poate fi static, dinamic, dar în general este o combinație a acestor două. Sunt multe provocări pe care le implică dezvoltarea aplicațiilor web, datorită numeroaselor tipuri și versiuni de browser-e, multe dintre ele având particularități și excepții. Nu există un număr corect de principii de luat în calcul când se realizează interfața sau designul unui produs software, dar există unul central: simplicitatea.
Figura 1 - Exemplu de layoutresponsive pe un monitor, tabletă și telefon mobil
Un aspect important al stilizării conținutului web este verificarea pe mai multe browser-e și scrierea de cod concis, care este în același timp și specific și generic și care se afișează bine în cât mai multe dispozitive de redare posibil [Cod09].
Se poate folosi CSS pentru a afișa documentul diferit în funcție de dimensiunea ecranului sau în funcție de dispozitivul de pe care este vizualizat. Scrierea de cod în acest sens e cunoscută sub numele de design web responsive. Scopul este de a realiza site-uri care oferă o experiență vizuală optimă, independent de dimensiunea display-ului folosit. În plus, navigarea trebuie să poată fi făcută cu un minim de redimensionări, zoom-uri sau scroll-uri (preferabil fără nici una din aceste acțiuni).
Un website cu design responsive se adaptează layout-ului mediului în care e vizualizat (după cum se poate vedea în Figura 1) folosind grile fluide, imagini flexibile [Mar11] și media query-uri CSS3. Explicat simplu, media query-urile sunt "clauze IF" pentru browser-ul care redă pagina: browser-ul știe că unele stiluri trebuie aplicate doar atunci când o condiție e îndeplinită (de obicei condiția are legătură cu lățimea ecranului).
Principala dilemă cu acest concept este că designerii și dezvoltatorii definesc termenul "responsive" diferit, aspect care duce la probleme de comunicare. Să reactualizăm prima definiție a termenului din în 2010: Ethan Marcotte l-a definit ca un concept care oferă o experiență vizuală optimă pe o varietate largă de dispozitive folosind trei tehnici: grile fluide, imagini flexibile și interogări media ( media query- uri).
Trebuie să înțelegem că principalul scop al experienței web mobile este de a fi rapidă și de a oferi o experiență compatibilă pe toate dispozitivele precum și faptul că majoritatea site-urilor eșuează la prima parte a acestei afirmații: la capitolul performanță. Web design-ul responsive nu a avut menirea de a rezolva problemele de performanță, motiv pentru care nu poate fi învinuită tehnica. O nouă mișcare apărută recent, numită de unii "web design responsive responsabil", propune ca designul responsive să nu fie folosit ca unică soluție pentru dispozitivele mobile, ci folosit împreună cu alte tehnici, precum încărcarea condițională sau comportamentul responsive în conformitate cu un grup de dispozitive.
Încărcarea condițională a resurselor
Media query-urile sunt de obicei fie stocate într-un singur fișier CSS cu mai multe declarații @media, fie în mai multe fișiere CSS legate de pagina principală prin atribute media (ex. ).
Cu toate că majoritatea tutorialelor și site-urilor folosesc prima tehnică, aceasta este greșită. În plus, unii consideră că folosind a doua opțiune fiecare dispozitiv încarcă numai fișierul CSS corespunzător rezoluției sale - ceea de asemenea este greșit. Ambele tehnici sunt greșite din punct de vedere al performanței, deoarece forțează browser-ul să descarce tot conținutul CSS posibil și să-l traverseze pentru a ști ce stiluri să aplice. Acest lucru afectează performanța deoarece browser-ele mobile, pe lângă faptul că sunt mai încete, sunt nevoite să încarce și stiluri CSS destinate doar pentru rezoluții mari (desktop), iar în plus CSS-ul blochează redarea (rendering).
O soluție pentru încărcarea condițională a resurselor este înlocuirea media query-urilor cu query-uri Javascript matchMedia queries și încărcarea numai a stilurilor gândite a fi folosite pe rezoluția respectivă. Instrumente precum Modernizr ajută prin detectarea funcționaltăților și particularităților dispozitivelor prin metode ce nu depind doar de rezoluție.
Nu există o soluție concretă pentru web design responsive (încă), dar sunt câteva trucuri care ajută la sporirea performanței atunci când se dezvoltă soluții responsive:
Răspunsul este da, ar trebui să fim responsive când vine vorba de a face design și de a dezvolta site-uri, însă metodele de realizare trebuie schimbate. Caracterul responsive este important în special datorită creșterii exponențiale a utilizatorilor mobili, care încet dar sigur îi vor depăși pe cei desktop în anii ce urmează.
Răspunsul însă depinde mult de natura conținutului: dacă e prea mult conținut ce trebuie afișat pe un telefon de exemplu, o soluție mai bună ar fi păstrarea unei versiuni simplificate a site-ului pe mobil și crearea unei aplicații native pentru a oferi toate funcționalitățile sistemului complex (un exemplu în acest sens sunt băncile, care în general oferă aplicații native pentru managementul conturilor personale). A depinde de un website responsive versus de o aplicație mobilă e mai mult o decizie de business decât una tehnică.
Țelul suprem al unui site ar trebui să fie "utilizatori fericiți" și nu "a fi responsive". Când scopul este cunoscut, poți decide ce instrumente și tehnici să folosești pentru a-l atinge. Utilizatorii nu vor fi mulțumiți fără un website de mare performanță [Fri14].
Păstrând proaspete aceste informații, încheiem într-o notă veselă cu un citat din Brad Frost: "Pe vizitatorii tăi îi doare în cot dacă site-ul tău e sau nu responsive". Ei în general nu vor face resize la browser și nici nu-i interesează ce înseamnă responsive. Ei vor ceva rapid și ușor de folosit.
[Cod09] - Ivan Codesido, What is frond-end development, The Guardian, septembrie 2009
[Fri14] - Maximiliano Firtman, You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy, Smashing Magazine, iulie 2014
[Mar11] - Ethan Marcotte, Flexible Images, A List Apart 328, iunie 2011
de Ovidiu Mățan
