Responsive Web Design

Dezvoltare magazin online, site de prezentare, securizare site-uri

Responsive Web Design

noiembrie 6, 2018 Diverse 0

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

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

  1. 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.
  2. Simple sharing – un singur URL pentru toata lumea!
  3. 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

  1. Costuri! – creste volumul de munca, dupa cum am specificat mai sus, prin urmare, cresc si costurile.
  2. Compatibilitate – pot aparea mai usor incompatibilitati intre browsere sau erori de afisare.

 

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *