Responsive design — jedna strona, która działa na wszystkich ekranach

Użytkownicy pochodzą ze wszystkiego, od małych telefonów po duże ekrany, a dobra strona powinna działać na wszystkich bez oddzielnej wersji dla każdego. To się nazywa responsive design: układ płynie i dostosowuje się do dostępnej przestrzeni, zamiast być zablokowany na jedną stałą szerokość.

Ogólna idea to unikanie blokowania celów w pikselach tam, gdzie można tego unikać. Zamiast tego używa się jednostek względnych i pozwala elementom zajmować część dostępnej przestrzeni. Obraz, który może zajmować co najwyżej szerokość swojego kontenera, zmniejsza się ładnie na małym ekranie zamiast wylewać się poza krawędź. Względne rozmiary tekstu sprawiają, że zawartość skaluje się spójnie.

Kwerenda mediów pozwala CSS pytać o warunki ekranu – zwykle szerokość – i stosować konkretne reguły tylko wtedy, gdy warunek jest spełniony. W ten sposób menu może leżeć poziomo na szerokim ekranie i zapaść się na przycisk na wąskim. Szerokości ekranów, gdzie układ się zmienia, się zwanych punkty przerwania; wybierz je z sytuacji, gdy treść zaczyna wyglądać źle, a nie po określonych urządzeniach.

Często najłatwiej jest zacząć od małego ekranu i budować w górę. Gdy zaczynacie mobilnie jako pierwszym, zmuszeni jesteście priorytetyzować najważniejszą treść najpierw, a następnie dodajecie dodatkowy układ i kolumny, gdy pojawia się więcej miejsca. Coś wręcz przeciwnego — rozpoczęcie od dużego i próba wciśnięcia wszystkiego na mały ekran później — kończy się chaosem.

• 01Używaj elastycznych szerokości i względnych jednostek zamiast stałych pikseli
• 02Pozwól obrazom i mediom skalować się wraz z ich kontenerem
• 03Używaj zapytań mediów do zmiany układu na rozsądnych punktach przerwania
• 04Wybierz punkty przerwy na podstawie zawartości, a nie określonych urządzeń
• 05Buduj w podejściu mobile-first i rozszerzaj układ, gdy jest więcej miejsca

Narzędzia programistyczne przeglądarki mogą emulować różne rozmiary ekranu i to dobre miejsce do rozpoczęcia. Ale testuj również na prawdziwym telefonie, gdzie dotyk, wolniejsze połączenie i mały ekran ujawniają rzeczy, które wyglądają dobrze na komputerze. Layout, który działa dla palców, a nie tylko dla kursora myszy, jest częścią rzemiosła.

“Projektowanie responsywne nie polega na przerabianiu strony dla każdego ekranu — ale na tym, aby ta sama strona oddychała i dostosowywała się do przestrzeni.”

— Zwykła reguła nauczania w tworzeniu stron internetowych