Web design responsiv este o abordare de web design cu scopul de a crea site-uri pentru a oferi o vizualizare optimă, uşor de citit și navigare cu un minim de redimensionări, panning, și defilare, pe o gamă largă de dispozitive (de la telefoane mobile la monitoarele calculatoarelor de birou).
Un site conceput cu web design responsiv se adaptează structurii mediului de vizionare cu ajutorul unor rețele fluide, bazate pe proporții, imagini flexibile, și interogări media CSS3, o extindere a regulii @media.
-
Conceptul de grilă fluid necesită ca dimensionarea elementelor de pagină să fie în unități relative ca procente, în loc de unități absolute ca pixeli sau puncte.
-
Imaginile flexibile sunt, de asemenea, cu dimensiuni în unități relative, astfel încât să împiedice afișarea lor în afara elementului de conţinut.
-
Interogările media permit paginii să utilizeze reguli de stil CSS diferite pe baza caracteristicilor dispozitivului pe care este afişat site-ul, cel mai frecvent lățimea browserului.
Concepte înrudite
Mobil în primul rând, JavaScript discret, și îmbunătățire progresivă
Mobil în primul rând, JavaScript discret, și îmbunătățire progresivă (strategii pentru un nou design de site) sunt concepte conexe care au precedat web design responsiv: browserele de telefoane mobile de bază nu înţeleg JavaScript sau interogările media, astfel încât practica recomandată este de a crea un site web de bază, și a-l îmbunătăţi pentru telefoane inteligente și PC-uri, mai degrabă decât să se încerce o degradare lină pentru a face un site complex încărcat cu imagini care să funcţioneze pe telefoanele mobile cele mai de bază.
Îmbunătăţire progresivă bazată pe detecţia browserului, dispozitivului, sau caracteristicii
În cazul în care un site web trebuie să suporte dispozitive mobile de bază, care nu dispun de JavaScript, detecţia browser-ului („agent utilizator”) (de asemenea, numit „browser sniffing”), și detectarea dispozitivelor mobile sunt două modalități de a afla dacă anumite caracteristici HTML și CSS sunt acceptate (ca bază pentru îmbunătăţirea progresivă). Oricum, aceste metode nu sunt complet fiabile decât dacă sunt utilizate împreună cu o bază de date cu capabilități de dispozitiv.
Pentru telefoanele mobile mai capabile şi PC-uri, se folosesc mai ales şabloane JavaScript cum ar fi Modernizr, jQuery, și jQuery Mobile, care pot testa în mod direct suportul browser-ului pentru caracteristici HTML/CSS (sau identifică agentul dispozitiv sau utilizator). Polyfills poate fi folosit pentru a adăuga suport pentru caracteristici – de exemplu, pentru a suporta interogări media (necesare pentru web design responsiv), și de a spori suportul HTML5, pe Internet Explorer. Detectarea caracteristicii, de asemenea, s-ar putea să nu fie complet sigură. Unele pot raporta că o funcție este disponibilă, atunci când lipsește, sau este atât de prost implementată că este practic nefuncţională.
Provocări și alte abordări
Luca Wroblewski a rezumat unele dintre provocările designului web responsiv şi al telefoanelor mobile, și a creat un catalog de modele de layout multi-dispozitiv. El sugerează că, în comparație cu o abordare de web design responsiv simplu, abordarea experiențială a dispozitivelor sau a designului web responsiv cu componente de server poate oferi o experiență a utilizatorului care este mai bine optimizată pentru dispozitivele mobile. Implementarea „CSS dinamic” de server a limbajelor de stil, cum ar fi Sass sau MML de la Incentivated, poate fi parte a unei astfel de abordări, prin accesarea unui API bazat pe server care controlează diferenţele dispozitivului (telefonul mobil de obicei) în combinație cu o bază de date cu capabilități de dispozitiv, în scopul de a îmbunătăți gradul de utilizare. Designul web responsiv cu componente de server este mai scump de dezvoltat, fiind nevoie de mai mult decât doar de logica pe parte de client, și astfel tinde să fie folosit doar de organizațiile cu bugete mai mari.
Deși această provocare a devenit recent un subiect minor, mulţi editori începând să folosească responsivitatea, o problemă încă, cel puțin parțial, pentru web design responsiv, este că unele banere de reclame şi video nu sunt fluide. Oricum, publicitatea în motoarele de căutare și cea prin afişarea banerelor suportă ţintire pe platforme de dispozitive specifice și diferite formate de dimensiuni publicitate pentru desktop, smartphone-uri, și dispozitive mobile de bază. Diferite URL-uri ale paginilor de destinație pot fi utilizate pentru diferite platforme, sau poate fi folosit Ajax pentru a afișa diferite variante de publicitate de pe o pagină.
O alternativă a designului web responsiv este metoda de livrare web adaptivă, care este adoptată de branduri de consum la nivel mondial. Cu toate că este foarte similară cu designul web responsiv, cea mai semnificativă diferență la livrarea web adaptivă este că serverul care găzduiește site-ul detectează dispozitivele care fac interogare, și utilizează aceste informații pentru a livra seturi diferite de HTML și cod CSS pe baza caracteristicilor dispozitivului care a fost detectat.
Există acum mai multe moduri de validare și testare a designului web responsiv, de la validatoare de site mobil și emulatoare mobile până la instrumente de testare simultane, cum ar fi Adobe Edge Inspect. Browser-ul Firefox și consola Chrome oferă instrumente de redimensionare pentru design responsiv, la fel ca şi terțe părți.
Lasă un răspuns