ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 143
Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 30
Abonament PDF

A fi sau a nu fi responsive

Raul Rene Lepsa
UI Developer
@SF AppWorks



PROGRAMARE


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.

Ce este Web Design-ul Responsive

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).

A fi sau a nu fi responsive? - aceasta este întrebarea

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.

Cum dezvolt responsive?

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:

Concluzii

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.

Bibliografie

[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

LANSAREA NUMĂRULUI 143

Railroads

miercuri, 29 mai, ora 18:00

Târgu-Mureș, Studium Hub

Facebook Meetup StreamEvent YouTube

Conferință

NUMĂRUL 142 - Robotics & AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • Yardi
  • P3 group
  • Ing Hubs
  • Colors in projects

INTERVIURI VIDEO