Projektowanie stron mobile-first: praktyczny poradnik
Co naprawdę oznacza projektowanie mobile-first, czym różni się od responsywnego i jak zaprojektować i zbudować stronę mobile-first: kolejność treści, obszary dotyku, punkty przełamania CSS min-width, obrazy i testy, plus uwagi dla firm z wieloma lokalizacjami.
Najczęściej zadawane pytania
Jaka jest różnica między mobile-first a projektem responsywnym?
Projekt responsywny oznacza jedną stronę dostosowującą układ do dowolnego rozmiaru ekranu. Mobile-first to kolejność, w której projektujesz i kodujesz: zacznij od małego ekranu i dodawaj układ dla większych. Strona mobile-first jest responsywna, ale strona responsywna zbudowana najpierw pod komputer często kończy z ciasną, przemyślaną na końcu wersją mobilną.
Dlaczego mobile-first ma znaczenie dla SEO?
Google używa indeksowania mobile-first, co oznacza, że do indeksowania i pozycjonowania używa głównie wersji mobilnej strony. Jeśli treść, nagłówki, dane strukturalne lub linki brakują na urządzeniach mobilnych, Google może ich nie widzieć.
Jakich punktów przełamania użyć w stronie mobile-first?
Pozwól, by decydowała treść: poszerzaj okno przeglądarki, aż układ wygląda na rozciągnięty, i dodaj punkt przełamania tam. Częste punkty startowe to ok. 640px, 768px, 1024px i 1280px, których używa wiele frameworków CSS, zapisane jako zapytania medialne min-width.
Jak duże powinny być przyciski na urządzeniach mobilnych?
WCAG 2.2 ustala minimalny rozmiar celu 24 na 24 piksele CSS (poziom AA) i zaleca 44 na 44 (poziom AAA). Wytyczne Apple używają 44 punktów, a wytyczne Material Google 48dp. Celuj w ok. 44 do 48 pikseli dla głównych przycisków i linków w menu.
Jak franczyzy powinny obsługiwać strony mobile-first?
Użyj jednego wspólnego szablonu ze stroną lokalizacji dla każdej franczyzy, każda z połączeniem jednym dotknięciem, dotknięciem po wskazówki dojazdu, godzinami i działaniem rezerwacji lub zamówienia specyficznym dla sklepu na górze. Odwiedzający mobilni szukający „w pobliżu” chcą działać natychmiast, więc wyszukiwarka lokalizacji i główne działanie muszą działać jednym kciukiem.
Krótka odpowiedź: projektowanie stron mobile-first oznacza, że najpierw projektujesz i budujesz wersję strony na telefon, a potem dodajesz układ dla tabletów i komputerów, gdy ekran się poszerza. W kodzie bazowy CSS to układ mobilny, a używasz zapytań medialnych min-width, by go wzbogacać. Zmusza to do decyzji, co jest najważniejsze na każdej stronie, i pasuje do sposobu, w jaki Google indeksuje dziś strony.
Mobile-first vs responsywny: prawdziwa różnica
Ludzie używają tych terminów zamiennie, ale odpowiadają na różne pytania.
Projekt responsywny
Projekt mobile-first
Czym jest
Jedna strona, której układ dostosowuje się do rozmiaru ekranu
Proces: zacznij od małego, wzbogacaj w górę
Styl CSS
Może być max-width (zmniejszanie komputerowej w dół) lub min-width
min-width (rozszerzanie mobilnej w górę)
Priorytet treści
Często ustalany na komputerze, potem ściskany
Ustalany na najmniejszym ekranie
Typowa porażka
Ukryta treść, malutkie obszary dotyku, ciężkie strony na telefonach
Układ komputerowy wydaje się rzadki, jeśli nie jest wzbogacony
Najlepsza praktyka to oba: strona responsywna, zbudowana mobile-first.
Krok 1: Ustal kolejność treści na telefonie
Na wąskim ekranie wszystko jest w jednej kolumnie, więc kolejność to cały Twój układ. Dla każdej strony napisz numerowaną listę sekcji w kolejności, jakiej potrzebuje odwiedzający na telefonie.
Dla strony głównej lokalnej usługi może to być:
Czym się zajmujesz i gdzie (jedna linia)
Główne działanie: zadzwoń lub zarezerwuj
Dowód: ocena, opinie lub rozpoznawalni klienci
Usługi, jako krótkie karty do dotknięcia
Obszar usług lub lokalizacje
Dowód drugorzędny: zdjęcia, przed i po
FAQ
Stopka z godzinami, adresem i kontaktem
Wszystko, co nie zasługuje na miejsce na tej liście, prawdopodobnie nie pasuje też na komputerze.
Krok 2: Projektuj pod kciuki
Obszary dotyku: spraw, by przyciski i linki menu miały co najmniej 44 do 48 pikseli wysokości, z odstępami między nimi. Minimum WCAG 2.2 to 24 na 24 piksele CSS; to podłoga, a nie cel.
Główne działanie w zasięgu: przyklejony dolny pasek z „Zadzwoń” i „Zarezerwuj” dobrze działa dla firm lokalnych. Utrzymaj go krótkim, by nie zasłaniał treści.
Nawigacja: przycisk menu otwierający listę na cały ekran jest w porządku. Utrzymaj listę do pięciu–siedmiu pozycji i umieść główne działanie poza menu.
Formularze: jedna kolumna, etykiety nad polami i właściwe typy pól (tel, email, number), aby telefony pokazywały właściwą klawiaturę. Używaj atrybutów autocomplete, by przeglądarki mogły wypełniać imiona i adresy.
Tekst: tekst główny 16px to częste minimum i powstrzymuje iOS Safari przed powiększaniem pól formularzy. Utrzymaj wygodną długość linii i kontrast co najmniej 4.5:1 dla tekstu głównego (WCAG AA).
Krok 3: Zbuduj to mobile-first w kodzie
Zacznij od tagu viewport w nagłówku każdej strony:
Płynna typografia i odstępy z clamp(), na przykład font-size: clamp(1.75rem, 5vw, 3rem) dla nagłówka, aby potrzebować mniej punktów przełamania.
Flexbox i Grid z auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) tworzy kolumny tylko, gdy jest miejsce.
Zapytania kontenerowe (obsługiwane w obecnych głównych przeglądarkach) pozwalają karcie zmieniać układ według szerokości jej kontenera, a nie całego ekranu, co jest przydatne dla komponentów wielokrotnego użytku.
Frameworki narzędziowe jak Tailwind CSS są domyślnie mobile-first: klasy bez prefiksu dotyczą wszystkich rozmiarów, a prefiksy jak md: działają od tej szerokości w górę.
Wybieraj punkty przełamania tam, gdzie łamie się treść, a nie dla konkretnych modeli telefonów.
Krok 4: Spraw, by było szybkie na prawdziwym połączeniu telefonu
Telefony mają wolniejsze procesory i mniej niezawodne sieci niż laptop, na którym projektujesz. Core Web Vitals Google to mierzą: Largest Contentful Paint (ładowanie), Interaction to Next Paint (responsywność) i Cumulative Layout Shift (stabilność wizualna).
Obrazy responsywne: używaj srcset i sizes, aby telefony pobierały mniejsze pliki, i nowoczesnych formatów jak WebP czy AVIF.
Zawsze ustawiaj width i height (lub aspect-ratio) dla obrazów i osadzeń, by zapobiec przesunięciom układu.
Leniwe ładowanie obrazów poniżej linii zgięcia z loading="lazy", ale nie głównego obrazu hero.
Ogranicz czcionki do jednej lub dwóch rodzin i kilku grubości.
Tnij skrypty zewnętrzne: widżety czatu, trackery i osadzenia to częste przyczyny wolnej interakcji na telefonach. Ładuj je późno lub tylko tam, gdzie potrzeba.
Krok 5: Wzbogać dla większych ekranów
Gdy układ telefonu działa, poszerz przeglądarkę i dodaj wartość, a nie tylko szerokość:
Wielokolumnowe siatki usług i produktów
Pełny pasek nawigacji zamiast przycisku menu
Tekst i obrazy obok siebie
Przyklejony pasek boczny dla długich artykułów lub podsumowań rezerwacji
Stany najechania, ale nigdy informacje tylko przy najechaniu, bo ekrany dotykowe nie mogą najeżdżać
Krok 6: Testuj jak odwiedzający
Tryb urządzenia w narzędziach deweloperskich przeglądarki do szybkich kontroli przy szerokości 360px, 390px i 414px, plus rozmiary tabletów.
Co najmniej jeden prawdziwy Android i jeden prawdziwy iPhone, bo emulatory pomijają dziwactwa przewijania, klawiatury zasłaniające pola i wolne procesory.
Lighthouse w Chrome DevTools i PageSpeed Insights, który pokazuje też dane terenowe od prawdziwych użytkowników Chrome, gdy strona ma dość ruchu.
Obróć do poziomu i sprawdź, czy przyklejone paski nie zasłaniają połowy ekranu.
Wykonaj główne zadanie (zarezerwuj, kup, zadzwoń) jednym kciukiem na danych mobilnych.
Sprawdź Search Console pod kątem problemów mobilnych po starcie. Nasz poradnik Google Search Console omawia, gdzie szukać.
Mobile-first dla franczyz i firm z wieloma lokalizacjami
Strony franczyz i firm wielolokalowych mają specyficzny problem mobilny: większość odwiedzających przychodzi z wyszukiwania „w pobliżu” na telefonie i chce natychmiast danych jednej lokalizacji.
Najpierw wyszukiwarka lokalizacji: „Użyj mojej lokalizacji” plus wyszukiwanie kodu pocztowego lub miasta, z wynikami jako karty do dotknięcia.
Strona na lokalizację zbudowana z jednego wspólnego szablonu: adres, godziny, telefon, link mapy, usługi i lokalne działanie rezerwacji lub zamówienia, z przyciskiem połączenia na górze.
Lokalne szczegóły, które się różnią: każda strona potrzebuje własnych zdjęć, pracowników lub opinii tam, gdzie to możliwe, a nie tylko podmienionej nazwy miasta.
Spójna marka, lokalna kontrola: franczyzobiorcy powinni móc aktualizować godziny i oferty bez dotykania układu.
Dane strukturalne: schemat LocalBusiness na każdej stronie lokalizacji z poprawną nazwą, adresem i telefonem.
Lista kontrolna mobile-first
[ ] Tag meta viewport na każdej stronie
[ ] Kolejność treści zapisana dla jednej kolumny
[ ] Główne działanie widoczne bez przewijania na telefonie
[ ] Obszary dotyku ok. 44 do 48px, z odstępami
[ ] Tekst główny 16px+, kontrast 4.5:1
[ ] Bazowy CSS dla urządzeń mobilnych, zapytania min-width dla większych ekranów
[ ] Obrazy responsywne z ustawionymi wymiarami
[ ] Ta sama treść i dane strukturalne na urządzeniach mobilnych i komputerze
[ ] Przetestowane na prawdziwych urządzeniach iOS i Android
Budowa bez zaczynania od zera
Każda strona zbudowana przez We.Inc jest responsywna od początku, a układ telefonu możesz podejrzeć w edytorze, a potem dostosować wizualnie lub w kodzie. Przeglądaj szablony, by zobaczyć, jak układy zwijają się do jednej kolumny, albo opisz firmę i dostań pierwszy szkic do przetestowania na własnym telefonie.