Responsywne projektowanie stron: praktyczny przewodnik
Responsywność przestała być osobną techniką, a stała się normalnym sposobem budowania. To, co nadal odróżnia dobre efekty, to kolejność pracy i testowanie na realnych urządzeniach.
Ten przewodnik obejmuje podejście, decyzje techniczne i problemy widoczne dopiero na prawdziwym telefonie.
Najpierw mobile, i dlaczego#
Projektowanie najpierw pod mały ekran to nie preferencja estetyczna, tylko ograniczenie prowadzące do lepszych decyzji.
- Mieści się mniej, więc trzeba rozstrzygnąć, co jest niezbędne.
- Co przetrwa mały ekran, to naprawdę liczy się na stronie.
- Dodać przestrzeń dla większych ekranów jest łatwo; usunąć treść boli.
- Większość ruchu w większości branż przychodzi z telefonu — sprawdź własną analitykę.
- Wydajność wychodzi lepiej przy okazji, bo domyślnie ładuje się mniej.
- Uproszczona nawigacja mobilna okazuje się zwykle lepsza także na desktopie.
Odwrotny schemat — zaprojektować desktop i «dostosować» na końcu — daje dorobione mobile, które rozpoznaje się natychmiast.
Punkty graniczne i układ#
Punkty graniczne powinny wynikać z treści, a nie z modeli urządzeń zmieniających się co roku.
| Decyzja | Zalecenie |
|---|---|
| Gdzie umieścić punkty graniczne | Tam, gdzie układ się psuje, nie na szerokościach urządzeń |
| Ile ich potrzeba | Trzy do czterech wystarczy większości stron |
| System siatki | CSS Grid dla strony, flexbox dla komponentów |
| Szerokości | Względne z maksimum, nie wartości stałe |
| Typografia | Płynna z clamp między minimum a maksimum |
| Odstępy | Spójna skala, nie przypadkowe wartości |
| Kontenery | Maksymalna szerokość, by tekst nie rozciągał się na szerokich ekranach |
Elementy, które zwykle się psują#
Odpowiadają za większość problemów wizualnych na małych ekranach.
- Tabele. Nie kurczą się. Albo przewijają poziomo we własnym kontenerze, albo zamieniają się w karty.
- Obrazy. Potrzebują srcset i sizes, żeby telefon nie pobierał wersji desktopowej.
- Długie tytuły. Testuj najdłuższym, jaki wystąpi, a nie tym z przykładu.
- Formularze. Pola na całą szerokość, właściwa klawiatura dla typu pola, widoczne etykiety.
- Nawigacja. Zwinięte menu musi się zamykać i działać z klawiatury.
- Modale i nakładki. Muszą mieścić się na ekranie i przewijać wewnętrznie.
- Elementy przyklejone. Przyklejony pasek na niskim ekranie potrafi zająć połowę powierzchni.
- Osadzone filmy i mapy. Potrzebują kontenera o określonych proporcjach.
Testowanie jak należy#
Symulator przeglądarki wyłapuje problemy układu i ukrywa całą resztę.
- Testuj na realnych telefonach, w tym na starym i wolnym.
- Testuj na ograniczonym łączu, nie na sieci biurowej.
- Testuj w orientacji poziomej — tam zwykle zawodzą przyklejone paski.
- Testuj z powiększonym tekstem w ustawieniach systemu.
- Testuj dotyk kciukiem, a nie myszą na symulowanym ekranie.
- Sprawdź, czy coś powoduje poziome przewijanie; to najbardziej widoczna wada.
- Sprawdź cele dotyku: minimum 44 px, z odstępem między nimi.
Poziome przewijanie to wada, którą odwiedzający zauważają natychmiast, a symulatory ukrywają ją z łatwością.
Najczęstsze pytania
Ile punktów granicznych potrzebuję?
Trzy do czterech wystarczy większości stron. Kryterium to miejsce, w którym układ przestaje działać, a nie szerokość konkretnego telefonu. Szerokości urządzeń zmieniają się co roku; treść nie. Zmniejszaj okno powoli i dodaj punkt graniczny tam, gdzie coś zaczyna wyglądać źle.
Czy potrzebuję osobnej wersji mobilnej?
Nie. Osobne wersje mobilne wymagają podwójnego utrzymania, dzielą sygnały wyszukiwarki i są podejściem praktycznie porzuconym. Strona responsywna obsługuje wszystkie ekrany z tych samych adresów, czego zresztą wyszukiwarki dziś oczekują.
Jak obsłużyć tabele na małych ekranach?
Działają dwa rozwiązania: przewijanie poziome wewnątrz kontenera tabeli, co zachowuje porównywanie kolumn, albo zamiana każdego wiersza w kartę. Wybór zależy od tego, czy ludzie muszą porównywać wartości między kolumnami. Nigdy nie działa pozostawienie tabeli rozpychającej stronę na boki.
Czy responsywność spowalnia stronę?
Sama w sobie nie. Spowalnia, jeśli wysyła obrazy desktopowe na telefony, co dzieje się przy braku srcset. Przy obrazach serwowanych we właściwym rozmiarze i uporządkowanym CSS strona responsywna jest na mobile lżejsza niż źle utrzymywana osobna wersja.
responsywna stronamobile firstpunkty graniczne cssstrona na telefonobrazy responsywnetypografia płynna
