Otwórz stronę internetową na telefonie, następnie na laptopie, a następnie na telewizorze. Jeśli strona wyświetla się poprawnie na wszystkich trzech urządzeniach bez efektu „szczypania” i mrużenia oczu, oznacza to, że została zaprojektowana w technologii responsywnego projektowania. Takie podejście pozwala pojedynczej bazie kodu dostosować układ, obrazy i typografię do dowolnego ekranu, na którym się znajduje.

Ethan Marcotte ukuł ten termin w 2010 roku, gdy przeglądanie stron na urządzeniach mobilnych przeżywało rozkwit, a projektanci stanęli przed wyborem: stworzyć osobne strony dla każdego urządzenia czy taką, która będzie elastyczna. Zwyciężył responsywny design. Głównymi narzędziami są płynne siatki, elastyczne obrazy i zapytania o media. Zapytanie o media pyta przeglądarkę o szerokość pola widzenia i stosuje różne reguły CSS w zależności od odpowiedzi.

Co sprawia, że ​​projekt jest responsywny

• Płynne siatki wykorzystujące procenty zamiast stałych pikseli
• Elastyczne obrazy skalowalne w obrębie kontenerów
• Zapytania multimedialne stosujące punkty przerwania dla różnych rozmiarów ekranu
• Przyjazne dla dotyku elementy docelowe na układach mobilnych

Celem nie jest tylko dopasowanie treści do małego ekranu. Chodzi o zachowanie czytelności, hierarchii i użyteczności w każdym kontekście. Trzykolumnowy układ na komputerze może zostać zredukowany do jednej kolumny na telefonie. Menu hamburgerowe zastępuje pełny pasek nawigacji. Dobry, responsywny projekt wydaje się nieunikniony, jakby strona zawsze miała tak wyglądać na Twoim urządzeniu.