Responsive Web Design

Ce este Responsive Web Design? RWD este o abordare noua in materie de web design, care permite o vizualizare optima pe aproape orice tip de ecran: desktop, tableta sau telefon mobil. RWD are cateva avantaje clare: desi pretul este mai mare, un site fully Responsive va acomoda aproape orice ecran, de la un monitor widescreen, cu o latime de peste 2400 pixeli, la un telefon mobil mai vechi, cu o rezolutie de 240 pixeli (latime). Astfel, clientul primeste teoretic 3 sau 4 variante ale aceluiasi site: varianta desktop, tableta, smartphone si mobil. Practic se plateste un site putin mai scump, si se primesc 3 sau 4 variante pentru acelasi pret.

Responsive Web Design

For the record, un site creat pe principii Fully Responsive poate prezenta o experienta de smartphone la fel de bogata ca o varianta dedicata pentru smartphone-uri. Tehnologiile si frameworkurile Responsive nu ofera doar un minim de unelte pentru ca site-ul sa se poate redimensiona in functie de marimea ecranului. Multe dintre ele ofera o multitudine de elemente pentru interfete mobile: butoane, liste, dropdown-uri optimizate pentru vizualizare pentru mobil. Astfel, un site redimensionat pentru mobil nu va prezenta aceleasi butoane/meniu, ca pe desktop, ci odata deschis pe un gadget, navigatia desktop va disparea, si vor aparea elementele de navigatie optimizate pentru vizualizare pe gadgeturi sau mobil, in cazul unui site fully Responsive.

RWD este totodata o abordare web design care propune ca varianta mobil sa fie in prim plan, dupa principiul “Mobile First”, si afiseaza elemente ale interfetei de utilizare dupa posibilitatile ci capabilitatile gadget-ului pe care este rulat (Feature Detection).

Echipa Marconi Media urmareste de mult timp blogurile si forumurile de SEO pentru a afla raspunsul la intrebarea: Care este cea mai potrivita abordare, daca se doreste un site care sa se poata vizualiza si folosi si pe gadgeturi. Nu de mult, am aflat raspunsul la aceasta intrebare pe Blogul SEORoundtable, al carui proprietar primeste raspunsuri personale de la echipa Google SPAM: Google recomanda Responsive Design. Acest lucru inseamna ca ei prefera un site Responsive, in locul unui site care are o varianta desktop si una pentru mobil, tocmai pentru ce Responsive Design inseamna o abordare unificata, si nu se servesc variante diferite ale codului HTML pentru aparate diferite: https://developers.google.com/webmasters/smartphone-sites/details

Tehnicalitati

Tehnic vorbind, Responsive Web Design inseamna introducerea asa-numitelor break points, adica latimi ale ecranului, masurate in pixeli, la care site-ul aplica o redimensionare mai drastica a site-ului. Un site Responsive isi redimensioneaza elementele si intre aceste break point-uri, daca deschideti intr-un Browser un site Responsive si redimensionati in continuu browserul (pe latime), veti vedea ca textele, pozele si cea mai mare parte a elementelor de pe pagina incep sa se “adapteze” latimii modificate, se redimensioneaza si ele in mod continuu. Insa modificarea majora se intampla cand se ajunge la un breakpoint. Sa luam ca exemplu latimea de 990 pixeli. Cand se ajunge la aceasta latime, intreg layout-ul paginii se micsoreaza (in cazul in care micsoram browserul) sau se mareste (in cazul in care mrim browserul). Pagina sare de la o latimea maxima (ex. 1170 pixeli) la una intermediara (ex.: 990 pixeli), si toate elementele de pe pagina se redimensioneaza, acomodand noua latime.

Browserele detecteaza latimea ecranului, folosindu-se de asa-numitele media query-uri, introduse in CSS3. Frameworkurile responsive se ocupa de toate aceste redminesionari, citind latimea ecranului, si ajustand continutul paginii, folosindu-se de reguli CSS responsive si de cod javascript scris in acest scop. Fiecare framework de Responsive Web Design are o abordare putin diferita a RWD, diferenta cea mai mare fiind de obicei in numarul de break points, dar si la nivel de grid layout. Un framework responsive are intotdeauna un responsive grid layout, adica niste reguli CSS pentru impartirea latimii maxime folosibile intr-un anumit numar de coloane. Cele mai multe grid layouturi propun 12 coloane (de aceeasi latime), cea ce inseamna ca putem folosi un design cu elemente dispuse pe maxim 12 coloane, sau elemente care se intind pe orice numar de coloane de la 1 pana la 12.

Responsive Grid

 

Astfel, putem vorbi de un mare numar de combinatii posibile: coloane de meniu pe stanga, pe dreapta, site impartit pe 6 coloane egale, site care se intinde pe intreaga latime a ecranului, impartit intr-un numar de coloane dupa preferinte, deci Responsive design deschide calea spre o multitudine de layout-uri de site, rezolvand totodata eterna problema a clientului care intreaba “Dar nu putem sa mergem pe tot ecranul?”:

Ecrane

 

Un feature foarte folositor pe care il ofera multe frameworkuri responsive este un layout fluid, prin care, facand unele setari in markup, randarea coloanelor devine fluida, latimile coloanelor fiind setate in procente si nu in pixeli. Astfel putem avea spre exemplu un layout alcatuit din 2 coloane, o coloana pentru meniu si una pentru continut, iar a doua coloana poate contine din nou, un numar maxim de 12 coloane:

Fluid Layout

 

In imaginea de mai sus sunt reprezentate 6 coloane inserate intr-una, reprezentand spre exemplu produsele unui webshop. Astfel, putem vedea ca folosind fluid layout, putem insera din nou si din nou maximum 12 coloane de latime egala in orice coloana, intr-un design responsive.

Posibilitatile sunt nelimitate, dar bineinteles ca trebuie sa procedam cu moderatie in privinta uneltelor oferite de frameworkurile responsive, pentru ca ele se folosesc de media queries si de javascript, iar acestea pot incetini functionarea site-ului, cel putin a interfetei de utilizare.

Responsive Web Design este suportat de versiunile relativ noi ale browserelor moderne precum Google Chrome, Mozilla Firefox, Apple Safari, iar Internet Explorer este codas la acest capitol, ca de obicei, avand cel mai bun suport pentru RWD doar in varianta 10 a browserului. Dar atentie, logic, nu avem nevoie de suport pe Internet Explorer mai vechi, pentru ca tabletele si smartphone-urile care ruleaza variante mai vechi ale IE sunt prea putine.

Elemente media responsive

Faptul ca un site este responsive nu inseamna neaparat ca toate elementele lui sunt si ele responsive. La crearea unui astfel de site, trebuie sa se foloseasca slideshow-uri responsive, galerii de poze responsive, elemente de poze/imagini responsive. Partea buna este ca acestea sunt din ce in ce mai multe, creatorii de pluginuri jQuery si alte platforme javascript axandu-se mai nou pe plugin-uri responsive, care si ele se redimensioneaza in functie de latimea div-ului/elementului in care sunt. Un element non-responsive pe un site responsive poate cauza anomalitati, daca nu se redimensioneaza automat, dupa dimensiunile acelei pagini.

Cateva frameworkuri responsive

Cateva dintre framework-urile responsive:

– Twitter Bootstrap
– Less Framework
– Skeleton
– Foundation
– Responsive Grid System
– Gumby Framework
– Base
– Semantic Grid System
– Compass

Adaptive Web Design vs Responsive Web Design

Daca va intrebati care este cea mai buna solutie pentru site-ul Dvs., exista o alternativa la RWD, denumita Adaptive Web Design. Aceasta alternativa propune servirea variantelor diferite pentru aparate si ecrane diferite, direct de pe server, adaptarea la posibilitatile utilizatorului se intampla deja pe server, si nu pe aparatul utilizatorului. Acest lucru inseamna economie de resurse, poate si o rulare mai rapida, insa presupune si costuri mult mai mari, fiind varianta preferata de firme mari, corporatii.

Concluzie

Concluzia noastra este ca merita sa optati pentru RWD, chiar daca presupune costuri putin mai mari, pentru ca s-ar putea ca pagina Dvs. sa nu fie foarte usor de vizualizat pe o tableta sau un telefon mobil si crearea unei variante special pentru smartphone-uri presupune costuri mult mai mari, fiind nevoie de o interfata total separata de cea pentru desktop. Mai ales daca este vorba de un webshop sau un portal, veti beneficia de folosirea intregii latimi a ecranului, putand afisa mult mai multe produse pe aceeasi inaltime.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>