Jak zrobić stronę internetową responsywną na telefony

Aby zrobić stronę responsywną na telefony, dodaj metaznacznik viewport, buduj układ mobile-first z elastycznymi szerokościami i użyj punktów załamania CSS, aby przestawić go na większych ekranach — układając kolumny jedna pod drugą, zwijając menu i skalując obrazy, by się mieściły. Następnie sprawdź każdą stronę w szerokości telefonu pod kątem przewijania w bok, zbyt małego tekstu i przycisków, których trudno dotknąć. Na stronie zbudowanej przez AI jeden jasny prompt i przegląd w podglądzie w rozmiarze telefonu zwykle naprawia większość problemów.

Czym jest naprawdę responsywny design

Responsywna strona używa jednego zestawu stron i adresów URL, które dostosowują się do ekranu. Zamiast osobnej strony „m.", CSS zmienia układ przy określonych szerokościach, zwanych punktami załamania (breakpoints). Podstawowe elementy:

• Metaznacznik viewport mówi przeglądarkom mobilnym, by używały rzeczywistej szerokości urządzenia.
• Płynne układy wykorzystują procenty, flexbox i grid zamiast stałych szerokości w pikselach.
• Zapytania o media (media queries) lub klasy frameworka, jak md: w Tailwind, zmieniają układ powyżej danej szerokości.
• Elastyczne media — obrazy i wideo, które kurczą się, by zmieścić się w swoim kontenerze.

Ma to znaczenie, bo duża część ruchu prawdopodobnie pochodzi z telefonów, a Google indeksuje wersję mobilną stron. Jeśli treść lub linki istnieją tylko na komputerze, Google też może ich nie zobaczyć.

Opcje i kompromisy

Podejście mobile-first zwykle jest prostsze: pojedyncza kolumna to najłatwiejszy układ, a dodawanie kolumn, gdy przybywa miejsca, wymaga mniej pracy niż ich usuwanie.

Elementy, które zwykle się psują

Znacznik viewport

Jeśli strona na telefonie wygląda jak mała wersja strony desktopowej, brakuje znacznika viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nie dodawaj maximum-scale=1 ani user-scalable=no. Blokowanie powiększania utrudnia korzystanie z witryny osobom ze słabym wzrokiem.

Stałe szerokości i przewijanie w poziomie

Najczęstszy błąd responsywności to coś szerszego niż ekran: stały kontener width: 1200px, szeroka tabela, długi adres URL lub blok kodu, obraz bez max-width: 100%. Cała strona przewija się wtedy w bok. Używaj max-width zamiast width, pozwól tekstowi się zawijać i daj szerokim elementom osobny obszar przewijania.

Nawigacja

Pięć linków z menu desktopowego rzadko mieści się na telefonie. Typowa odpowiedź to przycisk menu, który otwiera panel. Zostaw widoczne dwie lub trzy najważniejsze akcje — „Zarezerwuj", „Koszyk", „Zaloguj" — i upewnij się, że menu działa z klawiaturą i łatwo się zamyka.

Tekst i elementy dotykowe

• Tekst główny około 16 px to rozsądne minimum na telefonach. Pola z mniejszym tekstem powodują przybliżanie na iPhone po dotknięciu.
• Przyciski i linki powinny być łatwe do trafienia. WCAG 2.2 AA wyznacza minimum 24 na 24 piksele CSS (lub odpowiednie odstępy); około 44 pikseli jest wygodniejsze dla kciuka.
• Zostaw odstępy między sąsiednimi linkami, żeby nikt nie trafił w niewłaściwy.

Tabele i dane

Szerokie tabele to najtrudniejsza część responsywnej aplikacji. Opcje, w kolejności preferencji: pokaż mniej kolumn na telefonach, zamień każdy wiersz w kartę lub umieść tabelę w poziomo przewijanym kontenerze z przypiętą pierwszą kolumną. Wybierz w zależności od tego, co ludzie muszą porównywać.

Obrazy i media

Używaj max-width: 100% i height: auto, serwuj mniejsze pliki na małych ekranach za pomocą srcset i ustaw szerokość oraz wysokość, by uniknąć przeskakiwania układu. Osadzone filmy i mapy potrzebują responsywnego opakowania, by zachować proporcje. Mniejsze obrazy przyspieszają też stronę — zobacz jak przyspieszyć swoją stronę.

Formularze

Ustawiaj etykiety nad polami, rób pola na pełną szerokość i używaj odpowiednich typów pól (type="email", type="tel", inputmode="numeric"), aby telefony pokazywały pasującą klawiaturę. Umieść przycisk wysyłania tam, gdzie kciuk go sięgnie, i zachowaj jego widoczność, gdy otworzy się klawiatura.

Interakcje tylko po najechaniu

Telefony nie mają najechania kursorem. Podpowiedzi, rozwijane listy i podglądy, które pojawiają się tylko po najechaniu, są niewidoczne dla użytkowników dotykowych. Spraw, by działały także po stuknięciu.

Prompty, które działają

Przy nowym projekcie powiedz to od razu:

Zbuduj to w podejściu mobile-first. Jedna kolumna na telefonach, dwie kolumny od szerokości tabletu, pełny układ na komputerze. Bez przewijania w poziomie przy szerokości 320 px, tekst główny co najmniej 16 px, elementy dotykowe co najmniej 44 px, przycisk menu na małych ekranach i tabele zamieniające się w karty na telefonach.

Przy istniejącej stronie opisz, co widzisz:

Na telefonach strona /pricing przewija się w bok, a trzy karty planów są ściśnięte obok siebie. Poniżej 768 px ułóż karty pionowo, sprawiaj, by tabela porównania przewijała się w poziomie w swoim kontenerze z przypiętą kolumną funkcji, i zachowaj układ desktopowy bez zmian.

Sprawdź każdą stronę przy szerokości 375 px. Wypisz wszystko, co wychodzi poza ekran, nachodzi na siebie, ma tekst mniejszy niż 16 px lub elementy dotykowe mniejsze niż 44 px albo działa tylko po najechaniu, a potem napraw każdy z tych problemów.

Krok po kroku

1. Potwierdź metaznacznik viewport w sekcji head strony.
2. Testuj przy szerokości 320–375 px w trybie urządzenia w przeglądarce lub w podglądzie w rozmiarze telefonu. Przewiń każdą stronę od góry do dołu.
3. Najpierw napraw przewijanie w poziomie. Znajdź element, który jest za szeroki; reszta jest trudna do oceny, dopóki go nie usuniesz.
4. Uporządkuj nawigację: przycisk menu, kluczowe akcje widoczne.
5. Sprawdź tekst, elementy dotykowe i formularze w każdym kluczowym przepływie — rejestracja, wyszukiwanie, zakup, kontakt.
6. Obsłuż tabele i media: karty lub kontenery przewijania, responsywne obrazy i osadzenia.
7. Sprawdź rozmiary pośrednie. Powoli przeciągaj szerokość od telefonu do komputera; układy często się psują w okolicach szerokości tabletu.
8. Testuj na prawdziwym telefonie. Emulatory nie pokażą takich rzeczy jak klawiatura ekranowa zasłaniająca przycisk, wycięcia w ekranie czy szybkość strony przy mobilnej transmisji danych.

Częste błędy

• Testowanie tylko przy jednym rozmiarze telefonu. Sprawdź mały telefon, duży telefon i tablet.
• Ukrywanie treści na telefonie, by się zmieściła. Google indeksuje wersję mobilną, a użytkownicy telefonów chcą tych samych informacji.
• Wyłączanie powiększania w znaczniku viewport.
• Obrazy w rozmiarze desktopowym na telefonach, które kosztują czas ładowania i transfer danych.
• Nakładające się elementy stałe: przyklejony nagłówek, baner cookies i dymek czatu mogą zasłonić pół ekranu telefonu.
• Wyskakujące okna, których nie da się zamknąć na małym ekranie, bo przycisk zamknięcia jest poza ekranem.

Lista kontrolna dla telefonów

• Metaznacznik viewport obecny; powiększanie nie jest wyłączone
• Brak przewijania w poziomie przy 320 px na każdej stronie
• Tekst główny ok. 16 px; pola nie powodują przybliżenia
• Elementy dotykowe wystarczająco duże i rozstawione
• Menu działa na telefonach i z klawiaturą
• Tabele czytelne na telefonach (karty, mniej kolumn lub kontener przewijania)
• Obrazy i osadzenia się skalują; serwowane są odpowiednio dobrane pliki
• Formularze używają właściwych typów pól; przycisk wysyłania jest dostępny
• Nic ważnego nie zależy od najechania kursorem
• Przetestowano na co najmniej jednym prawdziwym telefonie

Responsywny układ to też część dostępności: WCAG wymaga, by treść działała przy szerokości 320 px i przy powiększeniu 200%. Jeśli budujesz aplikację, z której ludzie będą codziennie korzystać na telefonach, jak zbudować mobilną aplikację webową idzie dalej, włącznie z instalowalnymi PWA.

Responsywny design w Mythex

Mythex buduje responsywne aplikacje webowe, a w planie Pro może je opakować jako aplikacje na Androida i iPhone'a. W przestrzeni roboczej kliknij ikonę telefonu nad Podglądem (Przełącz na mobilny), aby zobaczyć aplikację w ramce w rozmiarze telefonu, i przeciągnij krawędź ramki, by wypróbować inne szerokości (Podgląd i kod). W dokumentacji jest krótki prompt startowy do poprawiania układu na małych ekranach w promptach responsywnych dla telefonów. Sprawdź też na prawdziwym telefonie — otwórz opublikowany adres URL lub udostępnij link do podglądu i otwórz go na telefonie.

Pytania