Wersja mobilna strony: jak projektować pod telefon od pierwszej makiety

Co oznacza projektowanie strony od małego ekranu

Projektowanie od małego ekranu, nazywane po angielsku mobile first, polega na tym, że pierwsza makieta powstaje dla telefonu, a szersze układy są jej rozwinięciem. Kolejność ma znaczenie praktyczne: na wąskim ekranie mieści się jedna kolumna, więc od początku trzeba rozstrzygnąć, co jest na stronie najważniejsze, co może znaleźć się niżej i z czego odwiedzający będzie korzystał palcem, a nie kursorem myszy.

Odwrotna kolejność, czyli najpierw rozbudowany projekt na duży monitor, a potem jego ściskanie do szerokości telefonu, zwykle kończy się kompromisami. Trzy kolumny układają się jedna pod drugą w przypadkowym porządku, a formularz zaprojektowany na szeroki ekran wymaga przesuwania strony w bok. Makieta zaczynana od telefonu wymusza dyscyplinę, która wychodzi na dobre również wersji na komputer.

Jest też powód związany z widocznością w wyszukiwarce. Z dokumentacji Google o indeksowaniu zoptymalizowanym pod kątem urządzeń mobilnych wynika, że do indeksowania i ustalania rankingu wyszukiwarka używa mobilnej wersji treści, pobranej przez robota udającego smartfon. Jeżeli więc w wersji na telefon brakuje części tekstu, nagłówków albo opisów zdjęć, wyszukiwarka ocenia stronę uboższą niż ta, którą właściciel ogląda na monitorze w biurze.

Dla firmy oznacza to zmianę w sposobie zamawiania i odbierania projektu. Już w briefie na stronę internetową warto zapisać, że makiety mają powstać najpierw dla telefonu, a akceptacja kolejnych etapów odbywa się na jego ekranie. Hydraulik z Łodzi, do którego większość osób trafia z wyszukiwarki w chwili awarii, powinien zobaczyć swoją stronę tak, jak zobaczy ją klient stojący w zalanej łazience.

Czym układ responsywny różni się od osobnej wersji mobilnej

Układ responsywny to jedna strona pod jednym adresem, która dopasowuje wygląd do szerokości ekranu, natomiast osobna wersja mobilna to druga strona, zwykle pod innym adresem, z własnym kodem HTML. Google opisuje trzy sposoby przygotowania serwisu dla telefonów i wprost zaleca pierwszy z nich, czyli elastyczne projektowanie, jako najprostszy we wdrożeniu i utrzymaniu.

Przy układzie responsywnym treść i metadane są z natury takie same na każdym urządzeniu, dlatego szczegółowe zalecenia Google kieruje głównie do właścicieli dwóch pozostałych rozwiązań. Wersja mobilna powinna zawierać tę samą główną treść co wersja na komputer, te same nagłówki, tytuł i opis strony, znaczniki meta robots, dane strukturalne oraz teksty alternatywne zdjęć. Treść wolno schować w rozwijanych blokach lub zakładkach, ale nie wolno jej usuwać.

Osobne adresy wymagają dodatkowej pracy technicznej. Według Google adres wersji na komputer jest zawsze kanoniczny, a każda podstrona z odmienną treścią powinna mieć własny odpowiednik mobilny, ponieważ przekierowanie wielu adresów na jedną stronę mobilną powoduje, że strony te są pomijane.

Jak ustalić kolejność treści na ekranie telefonu

Kolejność treści na telefonie ustala się, układając wszystkie elementy podstrony w jednej kolumnie od najważniejszego do najmniej ważnego z punktu widzenia odwiedzającego. To zadanie redakcyjne, a nie graficzne: zanim pojawią się kolory i zdjęcia, powinna powstać zwykła lista bloków z odpowiedzią na pytanie, po co dany blok jest na stronie i komu służy.

Pierwszy ekran, czyli to, co widać bez przewijania, powinien mówić, czym zajmuje się firma, gdzie działa i jak się z nią skontaktować. Kancelaria z Krakowa, która na telefonie pokazuje najpierw duże zdjęcie budynku, a numer telefonu dopiero po kilku przesunięciach palcem, traci osoby szukające szybkiej pomocy. Te same zasady porządkowania bloków opisujemy szerzej we wpisie o tym, jakie sekcje są potrzebne na stronie głównej firmy.

W serwisie web.dev, prowadzonym przez zespół Chrome, znajduje się ważna przestroga: treści nie należy ukrywać tylko dlatego, że nie mieści się na małym ekranie, ponieważ rozmiar ekranu nie mówi nic o tym, czego odwiedzający potrzebuje. Zamiast usuwać, lepiej uporządkować: długie opisy podzielić śródtytułami, pytania i odpowiedzi umieścić w rozwijanych blokach, a szerokie tabele przygotować tak, aby dały się przesuwać w poziomie wewnątrz własnej ramki.

Osobnej decyzji wymaga menu. Na telefonie zwykle chowa się ono pod ikoną, więc najważniejsze czynności, takie jak połączenie telefoniczne czy przejście do formularza, warto pozostawić widoczne poza nim. Trzeba też zadbać, aby treści rozwijane po dotknięciu znajdowały się w kodzie strony od razu. Google zastrzega, że nie wczytuje treści, które pojawiają się dopiero po przewinięciu, kliknięciu lub wpisaniu tekstu, dlatego głównej treści nie wolno ładować z opóźnieniem uzależnionym od działania odwiedzającego.

Jaka wielkość pisma sprawdza się na telefonie

Na telefonie sprawdza się pismo, które da się czytać bez powiększania ekranu palcami, przy czym tekst mniejszy niż 12 pikseli narzędzia Google traktują jako nieczytelny. Dokumentacja Lighthouse, czyli narzędzia do audytu stron wbudowanego w Chrome, opisuje test, w którym strona uzyskuje ocenę pozytywną, gdy co najmniej 60 procent tekstu ma rozmiar 12 pikseli lub większy. W tej samej dokumentacji zaznaczono, że test usunięto z najnowszych wersji Lighthouse, jednak próg pozostaje użytecznym minimum. To dolna granica, a nie zalecenie: tekst główny warto projektować wyraźnie większy.

Warunkiem czytelności jest poprawny znacznik viewport, czyli informacja dla przeglądarki, jak szeroki ma być obszar strony. Bez niego, jak wyjaśnia omówienie podstaw układu responsywnego w serwisie web.dev, przeglądarki mobilne rysują stronę zwykle w szerokości około 980 pikseli, a następnie ją pomniejszają, przez co litery stają się drobne.

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

Pierwsza część wartości dopasowuje szerokość strony do szerokości ekranu, druga ustala skalę początkową jeden do jednego, dzięki czemu po obróceniu telefonu strona wykorzystuje całą szerokość. Ten sam materiał odradza dopisywanie ustawień ograniczających skalowanie, ponieważ mogą one zablokować powiększanie strony i utrudnić korzystanie z niej osobom słabiej widzącym.

Długość wiersza i punkty zmiany układu

Sama wielkość liter to nie wszystko. Według web.dev wygodna długość wiersza to 70 do 80 znaków, co w języku angielskim odpowiada mniej więcej 8 do 10 słowom. Na telefonie wiersze są krótkie same z siebie, więc kłopot pojawia się raczej na szerokich monitorach, gdzie tekst bez ograniczenia szerokości rozciąga się od krawędzi do krawędzi.

Z tym wiąże się pojęcie punktów przerwania, czyli szerokości okna, przy których układ się zmienia. Zalecenie brzmi, aby nie wyznaczać ich według klas urządzeń, marek czy modeli, lecz według treści: zacząć od projektu na mały ekran, stopniowo poszerzać okno i ustawić zmianę układu w miejscu, w którym treść przestaje dobrze wyglądać. Pytanie do wykonawcy nie powinno więc brzmieć, na jakich modelach telefonów strona działa, lecz czy wygląda poprawnie przy każdej szerokości okna, także pośredniej.

Trzecim częstym źródłem kłopotów jest przewijanie w poziomie. Powodują je elementy o stałej szerokości, najczęściej zdjęcie lub tabela szersze od ekranu. Zalecane rozwiązanie to szerokości względne oraz ustawienie maksymalnej szerokości obrazów na sto procent szerokości ich otoczenia. Makiety warto przy tym oglądać z prawdziwym tekstem: polskie słowa są długie, więc nagłówek z właściwą nazwą usługi potrafi zająć kilka wierszy i zepchnąć resztę treści poza pierwszy ekran.

Jak duże powinny być przyciski i gdzie je umieszczać

Przycisk na telefonie powinien mieć około 48 na 48 pikseli niezależnych od urządzenia i być oddalony od sąsiednich elementów o około 8 pikseli w pionie i w poziomie. Takie wartości podaje materiał web.dev o dostępnych elementach dotykowych, wyjaśniając, że kwadrat tej wielkości odpowiada mniej więcej 9 milimetrom, czyli powierzchni opuszki palca. Większe cele dotyku ułatwiają korzystanie ze strony wszystkim, a szczególnie osobom z ograniczoną sprawnością rąk.

Wymiar dotyczy obszaru reagującego na dotyk, nie samego rysunku. Ikona o boku 24 pikseli może pozostać niewielka, jeżeli otrzyma dodatkowy margines wewnętrzny, który powiększy pole dotyku do 48 pikseli. Podobnie odsyłacze w stopce czy pozycje menu: nie muszą wyglądać jak duże przyciski, wystarczy, że wiersz ma odpowiednią wysokość, a między pozycjami jest odstęp.

.menu a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .menu a {
    padding: .8em;
  }
}

Zapytanie o media użyte w przykładzie rozpoznaje, że urządzenie ma niedokładny wskaźnik, czyli palec na ekranie dotykowym. Dzięki temu na komputerze z myszą menu pozostaje zwarte, a na telefonie odstępy rosną.

Zasięg kciuka i efekty po najechaniu kursorem

Wiele osób obsługuje telefon jedną ręką, a ekran dotyka kciukiem. To obserwacja z praktyki projektowej, a nie reguła zapisana w dokumentacji Google, lecz prowadzi do rozsądnych decyzji: najważniejsze działanie, takie jak połączenie telefoniczne, przejście do koszyka czy wysłanie zapytania, wygodniej umieścić w dolnej i środkowej części ekranu niż w górnym rogu. W sklepach dobrze sprawdza się pasek z przyciskiem zakupu widoczny u dołu podczas przewijania karty produktu, pod warunkiem że nie zasłania treści ani komunikatu o plikach cookie.

Na ekranie dotykowym nie ma kursora, więc wszystko, co na komputerze pojawia się po najechaniu myszą, wymaga innego rozwiązania. Rozwijane menu, podpowiedzi przy ikonach i ceny pokazywane dopiero po wskazaniu zdjęcia muszą być dostępne po dotknięciu albo widoczne od razu. Sklep z Poznania, w którym warianty koloru były opisane wyłącznie w dymkach nad próbkami, na telefonie pokazywał klientom same kolorowe kwadraty bez nazw.

Numer telefonu warto zapisać jako odsyłacz uruchamiający połączenie, a adres jako odsyłacz do mapy. O tym, jak takie udogodnienia wpływają na widoczność i sprzedaż, piszemy we wpisie UX a SEO.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Jak przygotować formularz, aby telefon podsunął właściwą klawiaturę

Telefon podsuwa właściwą klawiaturę wtedy, gdy każde pole formularza ma w kodzie poprawnie określony typ. Pole typu email wywołuje klawiaturę ze znakiem małpy, pole typu tel wyświetla klawiaturę numeryczną jak w telefonie, a atrybut inputmode z wartością numeric przydaje się przy kodach złożonych z samych cyfr. Zalecenia te pochodzą z zestawu dobrych praktyk dla formularzy w serwisie web.dev, który odradza jednocześnie używanie typu number dla identyfikatorów i numerów, ponieważ przeglądarka dokłada wtedy strzałki do zwiększania wartości.

<label for="imie">Imię i nazwisko</label>
<input id="imie" name="imie" type="text">

<label for="telefon">Numer telefonu</label>
<input id="telefon" name="telefon" type="tel">

<label for="email">Adres e-mail</label>
<input id="email" name="email" type="email" autocomplete="email">

<button type="submit">Wyślij zapytanie</button>

Atrybut autocomplete, widoczny w przykładzie przy polu poczty, podpowiada przeglądarce, jakie zapisane dane może zaproponować, co web.dev opisuje w lekcji o autouzupełnianiu. Na telefonie oznacza to wstawienie adresu jednym dotknięciem zamiast pisania go na małej klawiaturze.

Drugą sprawą są etykiety. Każde pole powinno mieć widoczny podpis powiązany z nim w kodzie, a tekst podpowiedzi wyświetlany wewnątrz pola nie zastępuje etykiety. Etykiety najlepiej umieszczać nad polami: pola zajmują wtedy pełną szerokość ekranu i układ jest jednakowy na telefonie i komputerze.

Autorzy tych zaleceń podają też konkretne wymiary. Pola i przyciski na telefonie powinny mieć margines wewnętrzny około 15 pikseli, a między polami warto zostawić odstęp mniej więcej szerokości palca. Dla tekstu w formularzu na telefonie sugerowany rozmiar to około 20 pikseli. Obramowanie pól powinno być na tyle ciemne, aby pole było widoczne na białym tle.

Klawiatura ekranowa zasłania część ekranu

Po dotknięciu pola klawiatura ekranowa zajmuje znaczną część ekranu i potrafi zasłonić przycisk wysyłki. W przytoczonym materiale opisano przypadek, w którym przycisk był zasłonięty na starszych, mniejszych modelach telefonów, a na nowszym już nie. Stąd zalecenie, aby najważniejsze pola i przycisk umieszczać u góry, a pozostałą treść pod nimi, oraz testować formularz na różnych urządzeniach.

Przycisk wysyłki powinien nazywać czynność, którą wykonuje, na przykład wysłanie zapytania lub założenie konta. Komunikaty o błędach muszą pojawiać się przy polu, którego dotyczą, i mówić, co poprawić. Im mniej pól, tym mniej pisania na małej klawiaturze, dlatego liczbę pytań warto ograniczyć do niezbędnych, co omawiamy we wpisie o tym, ile pól powinien mieć formularz kontaktowy.

Jak ograniczyć ciężar grafik na telefonie

Ciężar grafik ogranicza się przede wszystkim przez wysyłanie na telefon mniejszych plików niż na komputer. Według materiału web.dev o obrazach responsywnych podawanie telefonom obrazów w rozmiarze przeznaczonym na komputer może zużywać od 2 do 4 razy więcej danych, niż jest to potrzebne. Rozwiązaniem jest przygotowanie tego samego zdjęcia w kilku szerokościach i pozostawienie wyboru przeglądarce.

Służą do tego dwa atrybuty znacznika obrazu. Atrybut srcset zawiera listę plików wraz z ich szerokością, a atrybut sizes informuje, jaką szerokość obraz zajmie na stronie. Przeglądarka zestawia te dane z szerokością ekranu oraz gęstością pikseli i pobiera najlepiej pasujący plik. Nie istnieje jedna właściwa liczba wersji, ale powszechnie przygotowuje się od 3 do 5 rozmiarów każdego zdjęcia. Jak podaje dokumentacja WordPressa, system ten sam tworzy kilka rozmiarów każdego obrazu wgranego do biblioteki mediów i obsługuje obrazy responsywne, natomiast w rozwiązaniach pisanych na zamówienie trzeba to zaplanować w projekcie.

<img src="realizacja-duza.jpg"
     srcset="realizacja-mala.jpg 480w, realizacja-duza.jpg 1080w"
     sizes="100vw"
     width="1080" height="720"
     alt="Łazienka po remoncie z nową kabiną prysznicową">

<img src="galeria-4.jpg" loading="lazy"
     width="400" height="300"
     alt="Montaż grzejnika w salonie">

Ładowanie z opóźnieniem i wymiary obrazów

Drugim sposobem jest ładowanie z opóźnieniem, po angielsku lazy loading. Atrybut loading z wartością lazy sprawia, że przeglądarka pobiera obraz dopiero wtedy, gdy odwiedzający zbliża się do niego podczas przewijania. Opis tego mechanizmu w web.dev zawiera jednak ważne zastrzeżenie: obrazów widocznych od razu po otwarciu strony, a zwłaszcza największego elementu pierwszego ekranu, nie należy opóźniać.

Każdy obraz powinien mieć w kodzie podaną szerokość i wysokość. Dzięki temu przeglądarka rezerwuje miejsce, zanim plik się pobierze, i treść nie przeskakuje podczas czytania. Bez wymiarów przeglądarka nie zna rozmiaru obrazów, co może sprawić, że cała galeria zostanie pobrana naraz, mimo ustawionego opóźnienia.

Google dodaje do tego zalecenia związane z indeksowaniem: adresy obrazów nie powinny zmieniać się przy każdym wczytaniu strony, a teksty alternatywne, podpisy i nazwy plików powinny być takie same w wersji mobilnej i na komputerze. Zależność między ciężarem strony a widocznością opisujemy we wpisie o tym, ile szybkość strony znaczy w rankingu Google.

Jak testować stronę w narzędziach Chrome i na prawdziwych telefonach

Stronę testuje się w dwóch etapach: najpierw w trybie urządzenia przeglądarki Chrome na komputerze, co pozwala szybko obejrzeć układ przy różnych szerokościach, a następnie na prawdziwych telefonach, bo tylko one pokazują rzeczywistą wygodę obsługi. Dokumentacja trybu urządzenia w Chrome sama zastrzega, że jest to przybliżona symulacja: kod nie działa na telefonie, a komputer nie odda wszystkich cech sprzętu mobilnego.

Tryb urządzenia uruchamia się w Narzędziach deweloperskich Chrome. Na pasku u góry narzędzi znajduje się przycisk przełączania paska narzędzi urządzenia, oznaczony ikoną urządzeń. Po jego kliknięciu strona wyświetla się w zmniejszonym oknie, a nad nią pojawia się pasek z ustawieniami.

1. Lista Wymiary w ustawieniu Elastyczny

   Domyślny tryb pozwala przeciągać krawędzie okna albo wpisać szerokość i wysokość ręcznie. Warto powoli poszerzać okno od 320 pikseli w górę i obserwować, w którym miejscu układ przestaje dobrze wyglądać.

2. Gotowe szerokości i profile urządzeń

   Pasek nad stroną zawiera gotowe szerokości, między innymi 320, 375 i 425 pikseli dla telefonów, 768 dla tabletu i 1024 dla laptopa. Lista Wymiary zawiera też profile konkretnych modeli.

3. Obrót ekranu

   Przycisk obracania przełącza widok na poziomy, w którym na formularz zostaje najmniej miejsca.

4. Ograniczenie sieci i procesora

   Lista ograniczania ma dwa gotowe ustawienia: urządzenie mobilne średniej klasy, czyli szybka sieć 3G i procesor spowolniony czterokrotnie, oraz urządzenie niskiej klasy, czyli wolna sieć 3G i procesor spowolniony sześciokrotnie.

5. Podgląd zapytań o media

   W menu z dodatkowymi opcjami można włączyć pokazywanie zapytań o media. Nad stroną pojawiają się wtedy kolorowe paski z punktami przerwania.

Wielkość przycisków da się zmierzyć w tym samym miejscu: po wskazaniu elementu zakładka z wartościami obliczonymi pokazuje jego rzeczywiste wymiary w pikselach. Całościową ocenę strony w wariancie mobilnym daje audyt opisany we wpisie o tym, jak uruchomić Lighthouse w Chrome, oraz publiczne narzędzie PageSpeed Insights, w którym wystarczy wpisać adres strony i uruchomić analizę.

Test na prawdziwym telefonie

Symulacja nie pokaże, czy przycisk jest wygodny dla kciuka, czy tekst jest czytelny w słońcu i jak zachowuje się klawiatura konkretnego systemu. Dlatego przed publikacją stronę trzeba otworzyć na kilku prawdziwych urządzeniach: co najmniej na jednym telefonie z Androidem i jednym iPhonie, najlepiej także na starszym, mniejszym modelu. Warto wyłączyć sieć bezprzewodową i skorzystać z transmisji danych, a całą ścieżkę, od wejścia na stronę po wysłanie formularza lub złożenie zamówienia, przejść jedną ręką.

Gdy na telefonie z Androidem pojawia się błąd, którego nie widać na komputerze, wykonawca może skorzystać ze zdalnego debugowania. Wymaga to włączenia debugowania USB w opcjach programisty telefonu, połączenia go kablem z komputerem i otwarcia w Chrome na komputerze adresu chrome://inspect#devices. Po zaakceptowaniu sesji na ekranie telefonu narzędzia na komputerze pokazują kod strony działającej na telefonie i podświetlają wskazane elementy na jego ekranie.

Jakie pomyłki zdarzają się najczęściej i kiedy potrzebna jest pomoc

Najczęstszą pomyłką jest akceptowanie projektu wyłącznie na dużym monitorze i traktowanie widoku na telefon jako formalności do sprawdzenia na końcu. Pozostałe błędy zwykle z niej wynikają: treści usunięte z wersji mobilnej, drobne odsyłacze ustawione jeden przy drugim, okna zasłaniające cały ekran tuż po wejściu, ciężkie zdjęcia w pokazie slajdów oraz zablokowane powiększanie strony. Google przypomina też, że zbyt duże reklamy u góry strony mobilnej pogarszają odbiór treści.

Przy odbiorze strony od wykonawcy pomocna jest krótka lista, którą da się przejść samodzielnie z telefonem w ręku.

• Na pierwszym ekranie widać, czym zajmuje się firma, gdzie działa i jak się z nią skontaktować.
• Wersja na telefon zawiera te same teksty, nagłówki i zdjęcia co wersja na komputer.
• Strony nie trzeba przesuwać w bok ani powiększać, aby przeczytać tekst.
• W każdy przycisk i odsyłacz da się trafić kciukiem za pierwszym razem.
• Pole numeru telefonu wywołuje klawiaturę z cyframi, a pole adresu poczty klawiaturę ze znakiem małpy.
• Przycisk wysyłki formularza pozostaje widoczny po wysunięciu klawiatury.
• Strona otwiera się sprawnie przy transmisji danych, bez sieci bezprzewodowej.

Pomoc specjalisty jest potrzebna wtedy, gdy poprawki wykraczają poza wygląd: przy łączeniu osobnej wersji mobilnej z wersją główną, przy przebudowie szablonu sklepu, a także gdy po zmianie projektu spada liczba zapytań z telefonów. Przy nowych serwisach układ mobilny planujemy od pierwszej makiety w ramach usługi tworzenia stron i projektowania UX.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl