Deschide un site web pe telefon, apoi pe laptop, apoi pe televizor. Dacă arată corect pe toate trei ecranele, fără a miji sau a ciupi degetele, înseamnă că a fost construit cu un design responsiv. Abordarea permite unei singure baze de cod să își adapteze aspectul, imaginile și tipografia la orice ecran pe care apare.

Ethan Marcotte a inventat termenul în 2010, când navigarea mobilă era în plină expansiune, iar designerii se confruntau cu o alegere: să construiască site-uri separate pentru fiecare dispozitiv sau să construiască unul flexibil. Designul responsiv a câștigat. Instrumentele de bază sunt grilele fluide, imaginile flexibile și interogările media. O interogare media întreabă browserul cât de lățime este viewport-ul și aplică diferite reguli CSS în funcție de răspuns.

Ce face ca un design să fie responsiv

• Grile fluide care utilizează procente în loc de pixeli ficși
• Imagini flexibile care se scalează în cadrul containerelor lor
• Interogări media care aplică puncte de întrerupere pentru diferite dimensiuni ale ecranului
• Ținte tactile pe machete mobile

Scopul nu este doar de a potrivi conținutul pe un ecran mic. Ci și de a păstra lizibilitatea, ierarhia și ușurința în utilizare în orice context. Un aspect desktop cu trei coloane s-ar putea restrânge la o singură coloană pe un telefon. Un meniu hamburger înlocuiește o bară de navigare completă. Un design responsiv bun pare inevitabil, ca și cum site-ul ar fi fost întotdeauna menit să arate așa pe dispozitivul dvs.