Responsive Web Design

Conceptul de Responsive Design a fost introdus pentru prima oară de către Ethan Marcotte în 2010, în articolul său, Responsive Web Design, publicat pe A List Apart. Acesta se referă la capacitatea unui website de a se adapta la diferite rezoluţii şi dispozitive pe care este afişat (PC-uri, laptopuri, tablete, smartphones etc), fără a suferi degradări majore.

Această abordare vine în ajutorul celor care s-au văzut nevoiţi să facă o mulţime de versiuni ale site-ului, pentru ca acesta să poată fi accesat de pe iPad, Blackberry, Kindle, netbook, iPhone şi aşa mai departe. Odată adoptat acest concept, site-ul ar trebui să recunoască tipul dispozitivului pe care este afişat şi să răspundă automat la preferinţele utilizatorului. Astfel, nu ar mai fi nevoie de mai multe versiuni ale site-ului pentru fiecare gadget pe care îl folosim.

Cum se construieşte un site responsive?

Este nevoie de trei ingrediente principale pentru a avea un site responsive:

1. Griduri fluide
2. Imagini flexibile
3. Media Queries

Gridurile fluide

Cu ceva timp în urmă, înainte ca acest concept să devină popular, cele mai multe dintre site-uri aveau la bază griduri fixe şi funcţionau bine în acest mod, dat fiind că majoritatea calculatoarelor aveau aproximativ aceeaşi rezoluţie. În prezent, gridurile fixe nu mai reprezintă cea mai optimă variantă, luând în considerare toate rezoluţiile existente.

Sistemul flexibil de griduri se bazează pe calculul proporţiilor şi se asigură că toate elementele din layout sunt redimensionate unul faţă de celălalt. Nu se mai măsoară dimensiunile în pixeli, ci în unităţi relative şi procente.

Imaginile flexibile

Cel de-al doilea ingredient esenţial este reprezentat de imaginile flexibile. Acestea îşi pot modifica lăţimea şi înălţimea în funcţie de rezoluţia şi de dimensiunea gridului. Pentru a oferi informaţia repede şi frumos, imaginile pot fi salvate pe server în seturi de 3-4 dimensiuni, din care va fi încărcată mai apoi imaginea potrivită, în funcţie de dimensiunea ecranului pe care este afişat site-ul.

Media Queries

Acestea reprezintă o metodă eficientă de a încărca diferite stiluri CSS pentru diferite rezoluţii, pentru a oferi vizitatorului o experienţă cât mai bună. Găsiţi  un tutorial care dezvoltă foarte bine acest aspect aici.

Exemple de website-uri responsive

Am selectat mai multe articole în care puteţi găsi o mulţime de exemple foarte bune:

• 24 Excellent Examples of Responsive Web Design
• 60 Examples of Responsive Website Design
• Responsive Web Design: 50 examples and best practices
• 20 Amazing Examples of using Media Queries for Responsive Web Design
• 10 Incredible Examples of Responsive Web Design

3 avantaje aduse de Web Responsive Design

• O singură versiune de site care funcţionează bine pe orice dispozitiv.
• Posibilitatea de sharing a aceluiaşi URL între diverse dispozitive.
• Layout-ul se adaptează la browser, eliminând astfel scroll-ul orizontal.

3 dezavantaje aduse de Web Responsive Design

• Timp prelungit pentru dezvoltare, respectiv costuri mai mari.
• Dificultăţi datorate faptului că acest concept introduce un nou nivel de complexitate layout-urilor
• Apar mai multe probleme la compatibilitatea între browsere