Ce inseamna responsive web design?
In zilele noastre sa detineti un website cu design responsive a devenit nu numai o moda, ci si o necesitate datorita evolutiei dispozitivelor mobile. Sa ne oprim si sa va definim acest termen pentru a intelege restul detaliilor din acest articol.
Responsive Web Design provine de la acronimul englez RWD si reprezinta capacitatea unui website de a isi adapta layout-urile (imagini, texte etc.) in functie de rezolutia display-ului dispozitivului prin intermediul caruia este accesat. Cu alte cuvinte daca vizitam un website responsive dupa diferite dispozitive (desktop, tableta, telefon mobil etc.) el nu va suferi deteriorari majore, ci isi va adapta continutul in asa fel sa poata oferi vizitatorului o experienta de navigare si vizualizare a continutului cat mai usoara (vedeti poza de mai jos pentru a intelege mai bine).
Dupa cum reiese din poza de mai sus continutul si sistemul de navigare se restrange in functie de rezolutia dispozitivului folosit, astfel ajungandu-se la telefonul mobil unde isi va pozitiona continutul unul sub altul.
Daca va intrebati de cand a aparut acest concept de responsive design, este bine sa stiti ca totul a pornit prima data in 2010 cand Ethan Marcotte a publicat pe website-ul AListApart articolul „Responsive Web Design” si in care explica despre aceasta metoda noua de realizare a website-urilor.
Elementele necesare in realizarea unui website cu design responsive
Pentru crearea unui website responsive avem nevoie de 3 elemente principale: griduri fluide, imagini flexibile si media queries. Fara aceste elemente website-ul nu s-ar adapta diferitelor rezolutii ale dispozitivelor si de exemplu daca ati accesa un website pe telefonul mobil, care nu este realizat folosind aceste elemente, o sa fiti nevoiti sa folositi metode gen zoom pentru a putea vedea continutul si a putea naviga prin pagini.
Gridurile fluide – fata de gridurile fixe care erau folosite pentru realizarea site-urilor vechi, acestea redimensioneaza elementele dintr-un layout in functie de dimensiunile in procente setate in CSS. De exemplu daca dorim doua coloane egale o sa impartim dimensiunea total care este 100% la 2 si astfel o sa avem doua coloane a cate 50% din rezolutia display-ului dispozitivului. In CSS o sa avem codul „.coloana {width: 50%;}„.
Imaginile flexibile – aceste imagini isi modifica dimensiunea (latimea si inaltimea) in functie de dimensiunea gridului in care se afla. Daca avem de exemplu o pagina web cu doua griduri fluide de 50% fiecare si dorim sa vizulalizam acea pagina pe un display cu o rezolutie de 1280px, atunci fiecare grid va avea 640px. Cand inseram o imagine flexibila intr-unul din griduri, va avea rezolutia de 640px datorita rezolutiei display-ului, chiar daca poza are o rezolutie mult mai mare (sa zicem 2000px).
Media Queries – reprezinta un procedeu ce poate incarca diferite stiluri CSS in functie de rezolutia dispozitivului. Sa va dam un exemplu mai jos ca sa intelegeti mai bine.
Avem o pagina web si dorim sa schimbam culoare textului pentru a arata diferit pe desktop fata de telefon. Pentru aceasta vom scrie in CSS urmatoarele coduri:
body { color: white;}
@media screen and (max-width: 800px) {
body { color: blue;}
}
Astfel textul care se afiseaza pe desktop va avea culoarea alba, iar pe telefonul mobil va avea culoarea albastra.
Concluzia Responsive Web Design
Detinerea unui website cu design responsive are un impact foarte mare asupra afacerii dumneavoastra, datorita cresterii numarului de vizitatori prin intermediul dispozitivelor mobile. Trebuie sa luati in calcul faptul ca, Google este influentat pozitiv daca aveti un website responsive si o sa fiti mai bine punctati in pozitionarea in cadrul rezultatelor organice, cat si in reclamele platite AdWords.
Daca aveti un website vechi sau doriti sa aveti unul nou, nu ezitati sa apelati la serviciile de web design Bucuresti si Romania oferite de noi. Va vom dezvolta o imagine remarcabila a afacerii dumneavoastra prin intermediul website-ului realizat si astfel clientii dumneavoastra va vor putea vedea produsele si serviciile de pe orice dispozitiv mobil.