Nową stronę zatwierdzono na dużym monitorze i wszystkim się podobała. Pierwszy klient otwiera ją na telefonie, w przerwie między spotkaniami: menu zasłania pół ekranu, tabela z parametrami ucieka za krawędź, a w przycisk „Zapytaj o ofertę” nie da się trafić kciukiem.
Responsywna strona ma jeden adres i jeden kod, ale kilka układów. Na szerokim ekranie trzy kolumny stoją obok siebie, na telefonie jedna pod drugą. Menu chowa się pod ikoną, tabela zamienia się w karty, zdjęcie dostaje inny kadr.
Więcej niż węższy układ
Telefon obsługuje się kciukiem, często jedną ręką, w ruchu i przy słabszym zasięgu. Dlatego na telefonie:
- przyciski są na tyle duże, żeby trafić w nie palcem,
- formularze proszą o minimum danych i otwierają właściwą klawiaturę, np. numeryczną przy numerze telefonu,
- zdjęcia ładują się w rozmiarze dopasowanym do ekranu, a nie w pełnej rozdzielczości z sesji,
- nic ważnego nie chowa się pod najechaniem kursorem, bo kursora nie ma.
Ostatni punkt łatwo przeoczyć. To, co na komputerze uruchamia kursor, na telefonie musi zadziać się samo. Animacje włączamy przy przewijaniu, a opisy schowane pod kursorem pokazujemy od razu. Inaczej spora część mikrointerakcji na telefonie przepada.
Stronę sprawdza się na prawdziwych telefonach. Zwężone okno przeglądarki nie pokaże, jak strona działa pod kciukiem i na słabym zasięgu. Ciężkie zdjęcia i skrypty wyjdą też w pomiarach Core Web Vitals.
Responsywność a mobile first
Responsywność opisuje efekt: strona działa na każdym ekranie. Mobile first opisuje kolejność pracy: najpierw projekt na telefon, potem rozbudowa na większe ekrany. Responsywną stronę można zaprojektować od komputera, tylko wtedy wersja na telefon często wychodzi okrojonym dodatkiem.
