Ce este Responsive Design?

Nu a trecut cu mult timp în urmă că designerii nu au avut nevoie să-și facă griji cu privire la modul în care arătau site-urile web pe telefoanele mobile și tablete. Telefoanele nu erau încă foarte practice pentru vizualizarea pe web, iar înainte de iPad, tabletele erau mai mult o noutate decât un esențial.

Evident, totul s-a schimbat, iar majoritatea experților în tehnologie prevăd că în următorii câțiva ani, probabil mai devreme decât mai târziu, navigarea pe mobil va depăși navigarea pe desktop ca modalitate dominantă de vizualizare a Web-ului.

Cu o gamă în continuă evoluție de dimensiuni de ecran și dispozitive, inclusiv console de jocuri video și televizoare pe internet, vechile moduri de web design pur și simplu nu mai sunt la înălțime. Și, odată ce companiile conștientizează nevoia de a-și optimiza experiența online pentru utilizatorii de telefonie mobilă, designerii care nu se adaptează vor rămâne în urmă.

Nota editorului: Următoarele este o introducere pentru începători în designul responsive, care nu este destinat designerilor web mai experimentați.

Componentele principale ale designului receptiv

Aici intervine Responsive Web Design, conținut și/sau aspect care se adaptează automat la dimensiunea ecranului pe care este vizualizat. Cel mai elementar, cele trei elemente principale ale Responsive Design sunt o grilă flexibilă, imagini flexibile și interogări media, acestea din urmă introduse ca parte a CSS3. Mai multe despre acestea într-o clipă.

Grile flexibile

Grilele flexibile sunt în principiu teme și șabloane în care elementele de design sunt setate în procente, mai degrabă decât în ​​pixeli. Cu procentele ca unitate de măsură, asta înseamnă că un element care este proiectat la 50% va ocupa întotdeauna jumătate din ecran, indiferent cât de mare sau mic este ecranul.

Imagini flexibile

Imaginile lor cele mai elementare și flexibile nu ar putea fi mai ușor de creat, scriind o regulă simplă care spune:

 img { max-width: 100%; }

În esență, aceasta înseamnă că, dacă un element este mai mare decât containerul său, regula îl obligă să se potrivească cu lățimea acelui container. Și deoarece browserele moderne redimensionează imaginile proporțional, raportul de aspect al imaginii este păstrat, de asemenea. În plus, regula 100% poate fi folosită și pentru aproape toate celelalte elemente, cum ar fi videoclipurile încorporate.

Interogarea media

De la introducerea Tipurilor Media în CSS 2.1, foile de stil au fost mult mai incluzive pentru dispozitive mobile și alte dispozitive. Tipurile media permit, în esență, stilul să vizeze anumite clase de dispozitive web, aceste tipuri incluzând dispozitive portabile, ecrane și televizor. Dar cu o standardizare redusă între dispozitive și cu puțin suport din partea producătorilor de dispozitive, Media Types nu și-a ridicat niciodată potențialul.

Interogările media sunt la înălțimea acestui potențial și apoi unele. Dar, în loc să se preocupe de tipul de dispozitiv așa cum o fac Tipurile Media, Interogările Media se uită la capabilitățile dispozitivului.

O interogare media simplă ar putea arăta astfel:

Cele două componente ale interogării sunt tipul media, setat ca ecran, și apoi interogarea reală – (max-device-width: 480px) – care, în esență, întreabă dacă lățimea dispozitivului este de 480px sau mai puțin. Dacă acesta este cazul, dispozitivul încarcă generic.css. Dacă nu, legătura este ignorată, la fel ca și altele, până când este identificată rezoluția corectă și este încărcată foaia de stil corespunzătoare.

Mai mult decât o simplă rezoluție

Dar rezoluția nu este în niciun caz singurul element de design care poate fi controlat prin utilizarea interogărilor media. Lățimea și înălțimea ferestrei browserului, orientarea peisaj și portret, chiar și aspectul, sunt câțiva dintre ceilalți parametri care pot fi setați.

De exemplu, dacă o interogare media detectează că un dispozitiv este un smartphone, un design care se poate încărca arătând trei coloane cu o zonă de text și două bare laterale verticale pe ecranul unui computer se poate încărca pe ecranul smartphone-ului ca o zonă de text cu lățime completă cu două bare laterale ca elemente orizontale dedesubt.

O mentalitate flexibilă

Desigur, o cerință cheie pentru proiectarea flexibilă este proiectanții cu o mentalitate flexibilă de design. Din păcate, majoritatea paginilor web încă nu sunt atât de prietenoase pe dispozitivele mobile, în principal pentru că majoritatea designerilor încă mai de obicei proiectează doar pentru desktop, cu smartphone-uri și tablete ca o idee ulterioară. Puțini designeri abordează designul având în vedere mai multe platforme.

Deși există o curbă de învățare în încorporarea interogărilor media în foile de stil, tranziția de la proiectarea cu pixeli la proiectarea cu procente îi oprește pe unii designeri web. În realitate, totuși, nu există prea multă diferență în proiectarea cu procente și este, de asemenea, mai ușor.

Luați în considerare, de exemplu, diferența dintre alocarea de lățimi de 100% și 100 de pixeli la două elemente identice. Într-una, poți fi sigur că elementul va umple ecranul, fie că este vorba de ecranul unui desktop, laptop sau iPhone. Dar un element care are o lățime de 100 de pixeli ar fi mare pe un ecran de iPhone de 480 de pixeli, dar relativ mic pe un ecran de desktop cu rezoluție de 1600×900.

Design responsiv înseamnă afaceri

Pentru companii, motivul principal pentru implementarea designului responsive este evident. Cu cât este mai ușor pentru clienții potențiali să navigheze și să găsească ceea ce caută, cu atât rata de conversie este mai mare. Dar pentru mulți designeri, designul responsive pentru un site web de afaceri a însemnat de obicei doar micșorarea dimensiunii conținutului pentru a se potrivi pe un ecran mai mic. Oricine a petrecut orice timp derulând și mărind și micșorând pentru a găsi informațiile pe care le caută știe că o versiune în miniatură a unui site web nu este răspunsul.

Un alt mod în care companiile și designerii au abordat problema proiectării pentru un dispozitiv mobil a fost crearea unui site separat pentru diferite dispozitive cu redirecționări automate în funcție de dispozitiv. Acest lucru permite furnizarea celei mai bune interfețe, precum și evitarea încărcării lente cauzate de JavaScript și imaginile mari.

Dar există mai multe dezavantaje ale acestei abordări. Desigur, una dintre ele este cheltuiala creării și întreținerii mai multor site-uri și coordonarea conținutului pe acele site-uri. Și, desigur, mai există un alt site nou care trebuie construit atunci când apare un nou dispozitiv. Din fericire, Responsive Design, dacă este realizat corect, poate aborda aproape toate problemele legate de proiectarea pentru dispozitive mobile.