Responsive Web Design

Nu confundați cu Receptivitatea.

Un web design personalizat, poate fi cunoscut sub acronimul englez RWD (responsive web design) si este o filozofie de design și dezvoltare destinată adaptării apariției de pagini web pentru dispozitivul utilizat pentru vizualizare. Astăzi paginile web sunt afișate pe mai multe tipuri de dispozitive, cum ar fi tablete, Smartphone-uri, cărți electronice, calculatoare, și asa mai departe. Mai mult, fiecare dispozitiv are caracteristicile sale specifice: dimensiunea ecranului, rezoluție, putere CPU, capacitatea de memorie, printre altele. Această tehnologie își propune ca, deși cu un design unic sa poată fi vizualizată de pe orice dispozitiv.

O captură de ecran a Wikipedia cu un înveliș receptiv (Timeless).

Proiectantul american și autor Ethan Marcotte a creat și furnizat această tehnică printr-o serie de articole publicate pe A List Apart, o publicație specializată în design și dezvoltare web, pentru ca apoi sa includă ideea în cartea sa Responsive Web Design.

Sursa RWD

Atât idea cât și rolul responsive web design au fost discutate și descrise în prealabil de World Wide Web Consortium (W3C) în iulie 2008 în recomandarea sa "Mobile Web Best Practices" având subtitlul "One Web".

Această recomandare, deși specifica pentru dispozitive mobile, subliniază ca este făcuta în contextul One Web, și, prin urmare include nu numai experiența de navigare pe dispozitive mobile, ci și pe dispozitive cu rezoluție a ecranului mai mare cum ar fi desktop-ul.

Conceptul One Web face referire la idea de a realiza un “Web pentru Toți” (Web for All) și accesibil de pe orice tip de dispozitiv (Web on Everything).

În ziua de azi, varietatea tipurilor de dispozitive existente pe piață a făcut ca informația sa nu fie accesibilă pe toate tipurile de dispozitive, sau, mai bine spus, este accesibilă, dar navigarea pe acestea este foarte greoaie.

Avantajele RWD

Utilizarea de dispozitive mobile este în creștere, dispozitivele de genul tabletelor și telefoanelor inteligente mărindu-și vânzările în ultimii ani și în acest fel, navigarea pe internet pe astfel de dispozitive a devenit din ce în ce mai comuna. Acesta este motivul pentru care responsive web design a devenit atât de popular, deoarece aceasta este o tehnologie ce propune o soluție web ce permite vizualizarea web atât pe un dispozitiv desktop cât și pe unul mobil.

Cu o singura versiune în HTML și CSS se acoperă toate versiunile de ecran, adică, site-ul web creat va fi optimizat pentru toate tipurile de dispozitive: PC, tablete, telefoane mobile, etc. Acest lucru va îmbunătăți experiența utilizatorului spre deosebire de ceea ce se întâmplă cu site-urile fixe atunci când sunt accesate de pe dispozitive mobile.

În acest fel se reduc costurile de creație și administrare atunci când design-ul ecranului este similar pe dispozitive de mărimi diferite.

Se presupune de asemenea ca evita dezvoltarea de aplicații ad-hoc pentru versiuni mobile, sau nu, de exemplu o aplicație specifica pentru iPhone, alta pentru mobile Android, etc, deși în ziua de azi site-urile pentru mobile nu pot realiza aceleași funcții ca și aplicațiile native.

Din punctul de vedere al optimizării pe motoarele de căutare, ar apărea doar un URL în rezultatele de căutare, prin intermediul cărora se șterg redirectările și erorile ce deriva din acestea. Se evită de asemenea erorile la accesarea site-urilor web, în special de pe social links, adică, de pe link-urile pe care utilizatorii le distribuie pe rețelele sociale de genul Facebook sau Twitter și care pot sa sfârșească eronat, depinzând de link-ul ce a fost copiat (de pe ce dispozitiv a fost copiat) și de dispozitivul de pe care se accesează.

Modul de funcționare al RWD

Web Design-ul Responsiv este posibil datorita introducerii de Media Queries în proprietățile stilurilor CSS în versiunea numărul 3. Media querie-urile sunt o serie de comenzi ce se includ în pagina de stiluri ce face indica documentului HTML cum trebuie sa se comporte pe diferite tipuri de ecrane.

Pentru a înțelege mai bine această tehnologie, design-ul paginii web, ca și ziarele și revistele, se bazează pe coloane. Astfel că, după filozofia design-ului responsive, dacă o pagina web la rezoluția de PC (1028x768 px) are 5 coloane, pentru o tabletă (800x600 px) ar fi necesare doar 4 și în cazul unui telefon inteligent care are de obicei o lățime de 320 pana la 480 pixeli ar folosi doar 3 coloane.