Utilizarea dispozitivelor mobile pentru a naviga pe web continuă să crească într-un ritm astronomic, iar aceste dispozitive sunt adesea limitate de dimensiunea afișajului și necesită o abordare diferită a modului în care conținutul este prezentat pe ecran. Site-ul web responsive, definit inițial de Ethan Marcotte în A List Apart, răspunde nevoilor utilizatorilor și dispozitivelor pe care le utilizează. Aspectul se modifică în funcție de dimensiunea și capacitățile dispozitivului. De exemplu, pe un telefon utilizatorii ar vedea conținutul afișat într-o singură coloană; o tabletă poate afișa același conținut în două coloane.
Există o multitudine de dimensiuni diferite de ecran pe telefoane, „phablete”, tablete, desktop-uri, console de jocuri, televizoare și chiar portabile. Dimensiunile ecranului se schimbă întotdeauna, deci este important ca site-ul dvs. să se poată adapta la orice dimensiune a ecranului, astăzi sau în viitor. În plus, dispozitivele au funcții diferite cu care interacționăm cu ele. De exemplu, unii dintre vizitatorii dvs. vor folosi un ecran tactil. Designul modern receptiv ia în considerare toate aceste lucruri pentru a optimiza experiența pentru toată lumea.
Site web responsive prezinta o singura versiune si deci o singura adresa URL. Site-urile web responsive isi adapteaza continutul la rezolutia dispozitivului pe care sunt vizualizate. Acest lucru este obtinut cu ajutorul regulilor CSS Media Queries (Interogari Media) care stabilesc pozitia variilor elemente de layout pentru principalele puncte de intrerupere.
Se poate intui deci ca aceasta tipologie de site web este de preferat site-urilor mobile. Pe langa avantajul ce deriva din faptul ca actualizarea site-ului se face o singura data iar url-ul site-ului este unic, avantajul cel mai important este ca aceasta tipologie de site poate fi vizualizata pe toate tipurile de dispozitive, independent de rezolutie, vizualizarea corecta nefiind ingradita numai la rezolutiile clasice ale telefoanelor mobile.
Avand in vedere aceste avantaje, site-urile web responsive s-au impus deja ca standard in industrie. Astfel, toate noile template-uri pentru site-urile CMS: WordPress, Joomla etc sunt responsive.
Ce presupune crearea unui design responsive?
Gridurile fluide ale unui site web responsive 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 ale unui site web responsive 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) ale unui site web responsive 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 site-ului responsiv
- 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 site-ului responsiv
- 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.