Un site web, mai multe ecrane. Designul responsiv face ca un singur layout să se adapteze la diferite dimensiuni și orientări ale dispozitivelor. Termenul a fost inventat de Ethan Marcotte în 2010, bazându-se pe idei anterioare despre grile flexibile și imagini fluide. În loc să construiască site-uri separate pentru desktop și mobil, designerii creează o singură bază de cod care se rearanjează în funcție de lățimea viewport-ului.

Trei ingrediente tehnice îl fac să funcționeze. Grilele fluide folosesc procente în loc de pixeli ficși, astfel încât coloanele se întind și se micșorează. Imaginile flexibile se scalează în cadrul containerelor lor. Interogările media detectează dimensiunea ecranului și aplică diferite reguli CSS la puncte de întrerupere definite. Un layout de desktop cu trei coloane s-ar putea restrânge la o singură coloană pe un telefon, navigarea mutându-se într-un meniu hamburger. Scopul nu este controlul perfect la nivel de pixel, ci o adaptare elegantă.

Tehnici de bază

• Grile fluide bazate pe procente.
• Imagini și suporturi media flexibile.
• Interogări media la puncte de întrerupere definite.
• Prioritizarea conținutului mobil-first.

Designul responsiv este acum o practică standard. Utilizatorii se așteaptă ca un site să funcționeze indiferent dacă îl deschid pe telefon, tabletă, laptop sau televizor.