Projektowanie stron mobile-first: co to jest i jak to robić

Projektowanie stron mobile-first oznacza projektowanie najpierw pod ekran telefonu i dodawanie układu dla większych ekranów później. Co zmienia, kompromisy dla małej firmy, wypełniony przykład i lista kontrolna do skopiowania.

Najczęściej zadawane pytania

Czym jest projektowanie stron mobile-first?

Projektowaniem każdej strony najpierw pod ekran telefonu, a potem dodawaniem układu dla większych ekranów. Dzięki temu najważniejsza treść i działanie znajdują się na górze na telefonach.

Czy mobile-first to to samo co projektowanie responsywne?

Nie. Projektowanie responsywne to technika, która pozwala jednej stronie dostosować się do każdego ekranu. Mobile-first to kolejność projektowania: najpierw najmniejszy ekran.

Czy Google używa wersji mobilnej mojej strony?

Tak. Google podaje, że w przeważającej mierze używa wersji mobilnej treści strony do indeksowania i rankingu.

Projektowanie stron w podejściu mobile-first oznacza, że każdą stronę planujesz i budujesz najpierw dla małego ekranu telefonu, a potem dodajesz kolumny i dodatkowy układ w miarę powiększania ekranu. Zmusza to do zdecydowania, co jest najważniejsze, bo telefon pokazuje naraz tylko jedną rzecz. Odpowiada to też temu, jak Google patrzy na strony: Google w przeważającej mierze używa wersji mobilnej strony do indeksowania i rankingu.

Mobile-first a „responsywność”

Projektowanie responsywne to technika: jedna strona, której układ dostosowuje się do ekranu, z użyciem znacznika viewport i zapytań o media. Mobile-first to kolejność, w jakiej projektujesz. Responsywna strona zaczynana od komputera ściska szeroki układ; strona mobile-first zaczyna wąsko i rozbudowuje się. Obie mogą być responsywne; mobile-first zwykle daje mniej bałaganu na telefonach.

Kryteria decyzji dla małej firmy

PytanieWybór mobile-firstKompromis
Do czego służy pierwszy ekran?Nazwa, czym się zajmujesz, gdzie i jeden przyciskMniej miejsca na hasła i duże obrazy
Główne działanieTelefon jednym dotknięciem lub krótki formularz, w zasięgu kciukaDługie formularze są porzucane na telefonach; pytaj o mniej
NawigacjaKilka linków najwyższego poziomu; przycisk menu na małych ekranachUkryte menu łatwo przeoczyć, więc powtarzaj kluczowe linki na stronie
ObrazySkompresowane, dopasowane do ekranuBardzo duże zdjęcia spowalniają telefony w sieci komórkowej
Tabele i szeroka treśćUkład w karty lub przewijanie wewnątrz własnego polaWymaga więcej pracy projektowej niż tabela na komputerze

Cele dotyku i rozmiar tekstu to także kwestie dostępności; rozmiar celu w WCAG 2.2 wyznacza minimum 24 na 24 piksele CSS.

Przykład krok po kroku (oznaczona demonstracja)

Fikcyjna piekarnia „Flour Lane Bakery” planuje swoją stronę główną najpierw pod telefon. To nie jest prawdziwa firma; nie podajemy żadnych wyników.

Ekran telefonu 1: "Flour Lane Bakery - zakwas i ciasta, Leith"
                przycisk: "Zamów tort" | link: "Dzisiejsze godziny"
Ekran telefonu 2: trzy karty: Chleb / Torty okolicznościowe / Hurt
Ekran telefonu 3: kroki zamówienia (wybierz, wskaż datę, zapłać zaliczkę przy odbiorze)
Ekran telefonu 4: adres, link do mapy, godziny, telefon (jednym dotknięciem)
Tablet+:        karty stają się 3 kolumnami; godziny obok mapy
Komputer+:      nagłówek pokazuje wszystkie linki; sekcja główna dodaje drugie zdjęcie
Wycięte z telefonu: siatka z Instagrama (zamiast tego link), długa historia firmy (strona O nas)
Przykładowy projekt strony piekarni wykonany w We.Inc
Przykładowy projekt piekarni wykonany w We.Inc (projekt z szablonu, a nie strona klienta).
Przełącznik urządzeń w kreatorze We.Inc pokazujący podgląd strony w szerokości telefonu
Podgląd projektu w szerokości telefonu w kreatorze We.Inc.

Lista kontrolna mobile-first do skopiowania

[ ] Jedno główne działanie, widoczne na pierwszym ekranie telefonu
[ ] Nazwa firmy, czym się zajmujesz i gdzie, na pierwszym ekranie
[ ] Link do wykonania połączenia jednym dotknięciem przy numerze telefonu
[ ] Tekst co najmniej 16px; do czytania nie trzeba powiększać palcami
[ ] Przyciski i linki łatwe do dotknięcia, z odstępami między nimi
[ ] Formularze: tylko potrzebne pola; właściwa klawiatura (tel, email)
[ ] Obrazy skompresowane i dopasowane; nic szerszego niż ekran
[ ] Brak przewijania poziomego przy szerokości 360px
[ ] Menu działa jednym kciukiem; kluczowe linki powtórzone na stronie
[ ] Przetestowane na prawdziwym telefonie w sieci komórkowej, a nie tylko w oknie na komputerze

Znane ograniczenia

Kolejny krok

Zacznij od szablonu biznesowego w kreatorze stron We.Inc; szablony są responsywne i możesz zobaczyć podgląd na telefonie, tablecie i komputerze. Następnie uruchom ocenę strony. Plan Free daje do 3 stron z szablonów pod adresem we.inc (bez kredytów AI i bez własnej domeny); Starter za $20/miesiąc dodaje budowanie z AI i własne domeny (cennik). Planujesz budżet budowy? Użyj kalkulatora kosztów strony.

Zacznij budować stronę swojej firmy

Zacznij za darmo · Bez karty kredytowej

Product

Who It's For

Features

Resources

Company

View Sitemap