Strona może wyglądać świetnie na monitorze, a mimo to być niewygodna na smartfonie. Za małe litery, przyciski ustawione zbyt blisko siebie, zdjęcia wychodzące poza ekran i formularz, którego nie da się wysłać, potrafią skutecznie przerwać kontakt z firmą. Dlatego widoku mobilnego nie warto traktować jako pomniejszonej wersji projektu komputerowego. To osobny sposób korzystania ze strony: jedną ręką, często w pośpiechu i przy słabszym połączeniu.
Dobra wiadomość jest taka, że zwykle nie trzeba budować drugiej witryny. Responsywny projekt dopasowuje ten sam układ do szerokości ekranu. Poniżej znajdziesz konkretne kroki, dzięki którym poprawisz stronę na telefonach i sprawdzisz efekty bez specjalistycznego laboratorium.
Zacznij od najważniejszych zadań użytkownika
Na małym ekranie nie ma miejsca na przypadkowe elementy. Najpierw ustal, po co potencjalny klient wchodzi na stronę. Może chcieć zadzwonić, sprawdzić zakres usług, zobaczyć przykłady prac albo wysłać krótkie zapytanie. Te czynności powinny być dostępne szybko, najlepiej bez szukania w rozbudowanym menu.
Otwórz stronę na własnym telefonie i wykonaj trzy proste zadania:
- znajdź konkretną usługę,
- przejdź do danych kontaktowych,
- wyślij formularz lub rozpocznij połączenie.
Zapisz każde miejsce, w którym trzeba się zatrzymać i zastanowić. Jeśli numer telefonu jest zwykłym tekstem, zamień go w link tel:. Jeżeli przycisk kontaktowy pojawia się dopiero po kilku ekranach przewijania, dodaj go wcześniej. Przejrzyj też realizacje stron internetowych pod kątem sposobu prezentacji prac na mniejszych ekranach: zdjęcia powinny być czytelne, ale nie mogą spychać opisu zbyt daleko w dół.
Użyj responsywnego układu zamiast osobnej wersji mobilnej
Responsywny układ opiera się na elastycznych szerokościach, siatce i punktach przełamania, czyli regułach zmieniających wygląd przy określonej szerokości ekranu. Ten sam adres i ta sama treść działają na komputerze, tablecie i telefonie. Łatwiej wtedy utrzymać aktualne informacje i uniknąć różnic między wersjami.
W WordPressie zacznij od sprawdzenia, czy motyw jest responsywny. Większość współczesnych motywów ma podgląd dla komputerów, tabletów i telefonów. Sam podgląd w edytorze jednak nie wystarczy. Urządzenia różnią się wysokością, proporcjami ekranu i przeglądarką, dlatego gotową podstronę trzeba otworzyć także na fizycznym telefonie.
Dopasuj kolumny i kolejność treści
Układ trzech lub czterech kolumn sprawdza się na szerokim ekranie, lecz na telefonie zwykle powinien przejść w jedną kolumnę. Sprawdź kolejność elementów po ich ułożeniu jeden pod drugim. Zdjęcie przypisane do drugiej usługi nie może wylądować przy opisie pierwszej.
Nie ukrywaj na telefonie ważnych informacji tylko po to, aby projekt wyglądał lżej. Google korzysta z mobilnej wersji treści przy indeksowaniu, a użytkownik potrzebuje na smartfonie tego samego zakresu informacji co na komputerze. Możesz skrócić ozdobne wstępy, ale oferta, ceny, warunki i dane kontaktowe powinny pozostać dostępne.
Zadbaj o czytelny tekst i wygodne przyciski
Tekst musi dać się przeczytać bez powiększania dwoma palcami. Dla zwykłych akapitów rozsądnym punktem wyjścia jest 16 px, choć ostateczny efekt zależy od kroju pisma. Ważne są również odstępy między wierszami, kontrast i długość linii. Na telefonie akapit złożony z kilkunastu zdań wygląda ciężko, więc dziel treść na krótsze fragmenty.
Przyciski powinny mieć wyraźny opis. „Wyślij zapytanie” mówi więcej niż „Kliknij tutaj”. Zostaw wokół nich tyle miejsca, aby palec nie uruchamiał sąsiedniego elementu. Dotyczy to także ikon w nagłówku, zgód pod formularzem oraz rozwijanego menu.
Sprawdź ponadto:
- czy menu można otworzyć i zamknąć jednym dotknięciem,
- czy rozwijane pozycje nie wymagają precyzyjnego najechania kursorem,
- czy komunikaty o błędach formularza pojawiają się przy właściwych polach,
- czy przycisk zamykający baner cookies nie jest zasłonięty,
- czy linki tekstowe można odróżnić od zwykłego tekstu.
Uporządkuj zdjęcia, tabele i formularze
Duże zdjęcie przesłane prosto z aparatu może niepotrzebnie obciążyć transfer. Przed dodaniem zmniejsz jego wymiary, skompresuj plik i wybierz współczesny format, jeśli obsługuje go Twoje środowisko. Ustaw też prawidłowe proporcje, aby strona nie przesuwała się podczas wczytywania grafiki.
Tabele są trudniejsze. Jeżeli zawierają wiele kolumn, na małym ekranie robią się nieczytelne. Można umożliwić przewijanie tabeli w poziomie, ale czasem lepsza będzie lista cech lub kilka prostych bloków. Nie zmuszaj użytkownika do przesuwania całej strony na boki.
Formularz mobilny powinien pytać tylko o dane potrzebne do odpowiedzi. Długie formularze z wieloma wymaganymi polami zwiększają ryzyko porzucenia. Ustaw odpowiedni typ pola dla telefonu i adresu e-mail, aby smartfon wyświetlał właściwą klawiaturę. Po wysłaniu pokaż jasne potwierdzenie, a błędnie wypełnione pola zachowaj wraz z wpisaną treścią.
Jeśli nie wiesz, które problemy są techniczne, a które wynikają z projektu, pomocny może być audyt strony internetowej. Lista błędów ma sens dopiero wtedy, gdy prowadzi do konkretnych poprawek i ponownego testu.
Testuj na kilku szerokościach i prawdziwych urządzeniach
W narzędziach deweloperskich przeglądarki można szybko przełączać szerokość widoku. Sprawdź nie tylko popularne gotowe modele, lecz także wartości pomiędzy nimi. To właśnie przy nietypowej szerokości często łamie się nagłówek albo przycisk wychodzi poza kartę.
Potem użyj co najmniej jednego telefonu z Androidem i jednego iPhone’a, jeśli masz do nich dostęp. Przetestuj pionowy i poziomy układ ekranu. Warto też włączyć wolniejsze połączenie w narzędziach przeglądarki, bo strona działająca dobrze przez Wi-Fi może sprawiać problemy w sieci komórkowej.
Na koniec przejdź wszystkie ważne podstrony, nie tylko stronę główną. Obejrzyj ofertę, wpis blogowy, kontakt, politykę prywatności i stronę z błędem 404. Po każdej większej zmianie motywu lub wtyczek powtórz ten krótki test. Więcej praktycznych materiałów o rozwijaniu witryny znajdziesz na blogu o stronach internetowych.
Najczęstsze pytania
Czy responsywna strona potrzebuje osobnego adresu dla telefonów?
Nie. W typowym responsywnym projekcie ten sam adres zwraca tę samą treść, a układ dopasowuje się do ekranu. Ułatwia to administrację i ogranicza ryzyko, że wersja mobilna będzie nieaktualna.
Jak sprawdzić stronę mobilną bez wielu telefonów?
Zacznij od trybu urządzeń w narzędziach deweloperskich Chrome, Firefox lub Edge. To dobry test układu, ale przed publikacją użyj też prawdziwego telefonu, ponieważ symulacja nie odwzorowuje wszystkich zachowań przeglądarki i dotyku.
Czy na telefonie można ukryć część treści?
Można ograniczyć elementy czysto ozdobne, lecz nie warto usuwać informacji potrzebnych klientowi ani treści istotnej dla wyszukiwarki. Lepszym rozwiązaniem bywa skrócenie sekcji, zmiana kolejności lub zastosowanie rozwijanych bloków.
Co poprawić najpierw, gdy budżet jest ograniczony?
Najpierw usuń poziome przewijanie, popraw menu, powiększ tekst i pola formularza oraz dodaj łatwy kontakt. Następnie zmniejsz ciężkie obrazy i sprawdź szybkość. Te poprawki dotyczą podstawowej możliwości skorzystania ze strony.
Potrzebujesz strony wygodnej na każdym ekranie?
Mogę sprawdzić projekt, wskazać problemy w widoku mobilnym i przygotować zakres potrzebnych poprawek. Wycena nic nie kosztuje. Zadzwoń: 789 782 832.
