Adaptabilitate – Ce inseamna design responsive?

Toata lumea vorbeste in ultima vreme despre responsive web design. Practic, nu mai facem versiune de mobil a website-ului sau magazinului online, ci il gandim cu totul responsive, de la inceput.

 

Ce este web design responsive?

Un website este responsive daca are capacitatea sa-si adapteze layout-urile (designul) paginilor in functie de mediul de vizionare (mai precis de rezolutia ecranului – desktop, laptop, tableta, telefon), fara a suferi degradari majore, pentru a le oferi utilizatorilor o experienta excelenta de navigare.

Conceptul de Responsive Design a fost prima data introdus in 2010 de Ethan Marcotte in articolul sau scris pe AListApart insa a castigat popularitate in ultimii 2 ani. El se bazeaza pe 3 elemente esentiale:

  • Griduri fluide, care iau in considerare o paleta larga de rezolutii. Pe masura ce rezolutia se schimba, elementele din pagini se redimensioneaza / rearanjeaza
  • Imagini flexibile, care isi pot modifica inaltimea sau latimea in functie de grid,
  • Media queries

Exemplu website responsive

homer

 

Ce presupune crearea unui design responsive?

Gridurile fluide au luat inevitabil locul celor fixe datorita multitudinii de rezolutii existente in prezent. Acestea se bazeaza pe calculul proportiilor si isi pot modifica latimea si inaltimea in functie de rezolutie. Dimensiunile nu se mai masoara in pixeli, ci in procente si unitati relative.

Imaginile flexibile isi pot modifica dimensiunile in functie de rezolutia dispozitivului si dimensiunea gridului. Este indicat sa fie salvate pe server mai multe dimensiuni pentru fiecare poza, iar mai apoi sa fie incarcata dimensiunea potrivita rezolutiei.

Interogarile media (media queries) reprezinta un procedeu eficient de a incarca diferite proprietati CSS in functie de rezolutie. Site-ul recunoaste automat tipul dispozitivului si rezolutia acestuia incarcand proprietatile CSS corespunzatoare. Ca modalitate de lucru, ce presupune crearea unui design responsive? Se mareste timpul alocat crearii designului si implementarii acestuia HTML CSS. In loc sa se creeze o singura versiune de layout, se creeaza de la 3 la 5, fiecare dintre ele trebuind si implementate. In loc sa ai o singura imagine (o singura dimensiune) pentru un anume loc in layout, ai aceeasi imagine la mai multe dimensiuni, uploadate pe server, de unde se va incarca imaginea potrivita in functie de rezolutie.

Avantajele

Accesibilitate – exista o versiune de site functionala pe toate dispozitivele! Nu mai sunt necesare versiuni speciale de mobil, care trebuie dezvoltate separat, prin urmare se eficentizeaza costurile.

Simple sharing – un singur URL pentru toata lumea!

Experienta buna de navigare– fiindca se adapteaza rezolutiei, se elimina erorile de nagivare, aparitia scroll-urilor orizontale, intalnirea butoanelor prea mici pentru a fi apasate, etc

Dezavantajele

Costuri!– creste volumul de munca, dupa cum am specificat mai sus, prin urmare, cresc si costurile.

Compatibilitate – pot aparea mai usor incompatibilitati intre browsere sau erori de afisare.

Resurse

  • Gasiti pe Mashable un ghid al bunelor practici cand vine vorba de design responsive. Din acel articol, va invitam sa cititi si 85 Top Responsive Web Design Tools;
  • SmashingMagazine a publicat o colectie de guidelines si tutoriale pentru design responsive;
  • Pe Awwwards, gasiti exemple de site-uri responsive care arata excelent!

Exemple de website-uri responsive

Exista o multime de topuri pe net cu cele mai bune website-uri responsive realizate pana acum, insa noi ne gandim sa va aratam cateva exemple realizate de echipa BWI. Putem colabora fie pentru crearea website-ului direct responsive, de la inceput, fie pentru adaptarea unui website deja existent pentru a deveni responsive.

Blog Support

Smarsoft

Babylon Consult

Mashable a scris candva ca 2013 va fi anul responsive web design, datorita cresterii in popularitate a mediilor mobile (tablete si smartphone-uri), insa nu am vazut o evolutie extraordinara pe piata din Romania in acest sens pana acum. Sa speram ca 2015 va aduce un web cu mai multe proiecte responsive!