Czy otworzyłeś swoją stronę na telefonie i zobaczyłeś coś, co w niczym nie przypomina tego, co zbudowałeś? Strona zepsuta na telefonie to jedna z najczęstszych skarg właścicieli marek, którzy zaprojektowali stronę na komputerze i nigdy nie sprawdzili, jak działa na mniejszym ekranie. Ten artykuł wyjaśnia, co powoduje problem, jak zdiagnozować, który błąd dotyczy Twojej strony, i co zrobić, żeby go naprawić.
Ponad połowa całego ruchu w sieci pochodzi dziś z urządzeń mobilnych. Ten udział rośnie od lat i nadal rośnie. Jeśli odwiedzający wchodzi na Twoją stronę z telefonu i trafia na tekst za mały do przeczytania, obrazy wychodzące poza ekran albo menu, które nie reaguje na dotknięcie, szanse, że zostanie, są niewielkie. Wysoki współczynnik odrzuceń na telefonach to często pierwszy mierzalny sygnał, że coś jest zepsute, a wielu właścicieli marek łączy jedno z drugim dopiero po sprawdzeniu analityki.
Frustrujące jest to, że problemy z wyświetlaniem na telefonie nie zawsze są widoczne w widoku komputerowym, którego używasz do zarządzania stroną. Problemy ujawniają się dopiero na prawdziwym ekranie telefonu, więc mogą pozostawać niezauważone przez tygodnie lub miesiące, gdy odwiedzający po cichu odchodzą.
Dlaczego strona wygląda na zepsutą na telefonie?
Nie ma jednej przyczyny zepsutej strony na telefonie. Problem to zwykle jedna z pięciu podstawowych przyczyn, a czasem połączenie kilku. To, która przyczyna dotyczy Twojej strony, decyduje o tym, jakie rozwiązanie zadziała.
Strona nie została zbudowana jako responsywna
Responsywna strona automatycznie dostosowuje układ do szerokości ekranu, na którym jest wyświetlana. Na komputerze treść może układać się w trzy kolumny. Na tablecie w dwie. Na telefonie w jedną przewijaną kolumnę. Dostosowanie odbywa się przez reguły CSS zwane media queries, które mówią przeglądarce, jak przestawić treść przy różnych rozmiarach ekranu.
Jeśli strona została zbudowana bez responsywności, pokazuje ten sam stały układ niezależnie od rozmiaru ekranu. Strona zaprojektowana dla monitora o szerokości 1440 pikseli spróbuje wyświetlić się w tej szerokości na ekranie telefonu o szerokości około 390 pikseli. Efekt to zmniejszona, oddalona strona, na której tekst jest nieczytelny, a przyciski za małe, by w nie kliknąć. Treść technicznie tam jest, ale nie da się z niej korzystać.
Starsze strony, zwłaszcza zbudowane w edytorach typu przeciągnij i upuść, które nie dbały o wynik na telefonach, często mają ten problem. Do tej kategorii mogą też należeć strony pisane ręcznie bez myślenia o telefonach w pierwszej kolejności.
Obrazy nie są dopasowane do ekranów telefonów
Obraz wgrany w szerokości 3000 pikseli i wyświetlany bez ograniczeń spróbuje wyświetlić się w pełnym rozmiarze, niezależnie od tego, gdzie go oglądasz. Na komputerze przeglądarka może go zmniejszyć, by pasował. Na urządzeniu mobilnym bez reguł responsywnego skalowania obraz może wychodzić poza krawędź ekranu, powodując poziome przewijanie lub rozsypanie układu.
Nawet gdy obrazy nie wychodzą poza ekran, duże, nieoptymalizowane obrazy wpływają na to, dlaczego szybkość strony ma znaczenie, także na telefonie. Wolno ładujący się obraz, który blokuje pojawienie się reszty strony, to też rodzaj zepsutego działania, nawet gdy układ technicznie się trzyma. Osoby na łączach mobilnych są na to szczególnie wrażliwe.
Elementy o stałej szerokości wychodzą poza ekran
Elementy o stałej szerokości to kontenery, bloki div, tabele i inne elementy HTML, którym w arkuszu stylów nadano konkretną szerokość w pikselach zamiast procentów lub jednostek elastycznych. Kontener o szerokości 900 pikseli wyświetli się poprawnie na komputerze, ale wyjdzie poza krawędź ekranu telefonu, zmuszając użytkownika do przewijania w poziomie, by zobaczyć całą treść. Poziome przewijanie na stronie niemal zawsze wskazuje na problem z elementem o stałej szerokości.
Częstym winowajcą są tabele. Tabela cen albo porównania zbudowana w HTML ze stałymi kolumnami może na telefonie dramatycznie się rozsypać, a tekst układa się w sposób niemożliwy do przeczytania. To samo dotyczy pasków bocznych, osadzonych widżetów i każdego elementu zakodowanego z jawną szerokością w pikselach, która przekracza dostępne miejsce na ekranie telefonu.
Czcionki są za małe, by czytać bez powiększania
Tekst, który dobrze się czyta w rozmiarze 14 pikseli na ekranie komputera, może stać się nieczytelny na telefonie, zwłaszcza na ekranach o dużej gęstości, gdzie fizyczna liczba pikseli jest znacznie większa niż logiczny rozmiar wyświetlacza. Jeśli odwiedzający musi powiększać stronę palcami, żeby przeczytać treść, doświadczenie jest zepsute, nawet jeśli układ technicznie jest w porządku.
Zalecany minimalny rozmiar czcionki tekstu podstawowego na telefonach to 16 pikseli. Wszystko poniżej niesie ryzyko, że tekst będzie nieczytelny na znacznej części urządzeń. Mniejszy tekst sygnalizuje też wyszukiwarkom, że strona nie jest zoptymalizowana pod telefony, co może wpłynąć na jej pozycje i indeksowanie.
Nawigacja źle się zwija lub nie działa na dotyk
Menu nawigacji na komputerach często są budowane jako poziome paski z rozwijanymi pozycjami, które pojawiają się po najechaniu kursorem. Na ekranie dotykowym nie ma najechania. Menu zależne od najechania po prostu nie działa na telefonie. Odwiedzający dotykają pozycji menu i nic się nie dzieje albo trafiają na złą stronę, bo stan najechania, który miał pokazać podmenu, nigdy się nie aktywuje.
Nawet nawigacja, która technicznie działa na dotyk, może być zepsuta w praktyce, jeśli elementy do dotknięcia są za małe lub za blisko siebie. Ogólna zasada dla elementów dotykowych na telefonach to minimum 44 na 44 piksele. Mniejsze elementy prowadzą do nietrafionych dotknięć, przypadkowych przejść i frustracji odwiedzających, którym łatwiej wyjść, niż znaleźć to, po co przyszli.
Jak sprawdzić, czy Twoja strona jest przyjazna dla telefonów
Najszybszym sprawdzeniem jest otwarcie strony na prawdziwym telefonie. Użyj własnego urządzenia, a jeśli to możliwe, także innej marki i modelu. To, co wygląda dobrze na jednym telefonie, może wyświetlać się inaczej na innym z powodu różnic w rozdzielczości ekranu, silniku renderowania przeglądarki i wersji systemu operacyjnego.
Narzędzia deweloperskie przeglądarki oferują wbudowaną symulację urządzeń mobilnych. W większości przeglądarek na komputerze naciśnięcie F12 otwiera panel deweloperski. Ikona paska urządzeń pozwala symulować różne rozmiary ekranu i typy urządzeń. Jest to przydatne do szybkich sprawdzeń, ale nie zastępuje w pełni testów na prawdziwym sprzęcie, bo symulowane środowiska nie odtwarzają prawdziwego działania dotyku, renderowania czcionek ani warunków sieciowych.
Test przyjazności dla urządzeń mobilnych od Google, dostępny przez Google Search Console, ocenia Twoje strony i oznacza konkretne problemy z użytecznością na telefonach. Wskazuje takie problemy jak tekst za mały do przeczytania, klikalne elementy zbyt blisko siebie i treść, która nie mieści się w obszarze widoku. Raport podaje szczegóły na poziomie strony, więc widzisz, które konkretne strony nie przechodzą testu, a które przechodzą.
Sprawdzenie danych analitycznych dodaje do obrazu technicznego warstwę behawioralną. Jeśli Twój współczynnik odrzuceń na telefonach jest wyraźnie wyższy niż na komputerach, ta różnica często wskazuje na problem z wyświetlaniem lub użytecznością na telefonach. Artykuł o wysokim współczynniku odrzuceń na telefonach wyjaśnia, jak czytać te sygnały i co powoduje natychmiastowe wychodzenie z małych ekranów.
Jak naprawić stronę, która wygląda na zepsutą na telefonie
Właściwe rozwiązanie zależy od tego, która przyczyna powoduje problem. Każda z pięciu przyczyn opisanych wyżej ma odpowiadające jej rozwiązanie.
Przejdź na układ responsywny
Jeśli strona w ogóle nie jest responsywna, rozwiązaniem jest przebudowa na responsywnym frameworku albo przejście na platformę, która domyślnie generuje responsywny HTML. Dodanie responsywności do nieresponsywnej strony po fakcie jest możliwe, ale często bardziej pracochłonne niż przebudowa od responsywnej podstawy. Jeśli strona działa na nowoczesnej platformie obsługującej responsywne motywy lub szablony, zmiana na responsywny szablon jest zwykle szybszą drogą.
Zmień rozmiar obrazów i ogranicz ich szerokość
Obrazy należy wgrywać w rzeczywistym rozmiarze wyświetlania, a nie w oryginalnej rozdzielczości eksportu. Dla większości obrazów na stronach maksymalna szerokość 1200 pikseli wystarcza dla ekranów o dużej gęstości, a pliki pozostają rozsądnych rozmiarów. Reguły CSS ustawiające max-width: 100% dla obrazów gwarantują, że nigdy nie wyjdą poza swój kontener, niezależnie od szerokości ekranu. Ta jedna reguła rozwiązuje większość problemów z wychodzeniem obrazów poza ekran, bez ręcznej zmiany rozmiaru każdego z nich.
Zamień stałe szerokości na jednostki elastyczne
Stałe szerokości w pikselach dla kontenerów, tabel i innych elementów układu należy zastąpić szerokościami procentowymi lub elastycznymi jednostkami CSS, takimi jak em, rem lub vw. Kontener o szerokości width: 90% zamiast width: 900px skaluje się odpowiednio przy każdym rozmiarze ekranu. W przypadku tabel dodanie reguły CSS, która czyni je przewijalnymi w poziomie wewnątrz kontenera, zapobiega psuciu całego układu na wąskich ekranach.
Zwiększ rozmiary czcionek na telefonach
Tekst podstawowy na telefonach powinien mieć co najmniej 16 pikseli. Jeśli arkusz stylów dla komputerów definiuje mniejszy rozmiar, media query dla szerokości ekranów telefonów może go nadpisać. Warto też przejrzeć rozmiary nagłówków, bo wiele stylów nagłówków, które na komputerze wyglądają proporcjonalnie, na telefonie stają się zbyt duże i spychają resztę treści poniżej pierwszego ekranu, zanim odwiedzający cokolwiek przeczyta.
Zastąp nawigację opartą na najechaniu menu mobilnym
Standardowym rozwiązaniem nawigacji na telefonach jest zwijane menu, często nazywane menu hamburgerem, uruchamiane dotknięciem, a nie najechaniem. Większość responsywnych frameworków i kreatorów stron ma ten wzorzec domyślnie. Jeśli obecna nawigacja Twojej strony nie ma odpowiednika mobilnego, jego dodanie wymaga modyfikacji arkusza stylów i JavaScriptu albo przejścia na motyw, który ma nawigację mobilną wbudowaną. Warto też sprawdzić rozmiary elementów dotykowych, by wszystkie pozycje menu spełniały minimum 44 pikseli.
Jeśli Twoja strona ma uszkodzone strony obok problemów z wyświetlaniem, naprawienie układu wizualnego w pierwszej kolejności często ułatwia przechodzenie do każdej strony i testowanie jej podczas audytu.
Jak WEMASY radzi sobie z telefonami
Kreator stron WEMASY generuje responsywny HTML na każdej stronie bez konfiguracji. Układy automatycznie dopasowują się do ekranów telefonów, obrazy są ograniczone w obrębie kontenerów, a nawigacja przełącza się na menu przyjazne dotykowi na telefonach i tabletach. Rozmiary czcionek, elementy dotykowe i odstępy są ustawione w systemie projektowym platformy tak, by spełniały standardy użyteczności mobilnej, więc marki uruchamiające się w WEMASY zaczynają od strony gotowej na telefony, zamiast dorabiać ją później.
Zobacz, co zawiera kreator stron WEMASY, albo sprawdź dostępne pakiety na stronie z cennikiem.
Najczęściej zadawane pytania
Dlaczego moja strona wygląda dobrze na komputerze, a na telefonie jest zepsuta?
Zwykle dzieje się tak, bo strona została zbudowana lub zaprojektowana głównie z myślą o komputerze, bez responsywnych reguł CSS dostosowujących układ do mniejszych ekranów. Przeglądarka komputerowa ma dość szerokości, by wyświetlić stały układ tak, jak zamierzono. Ekran telefonu nie ma, więc elementy wychodzą poza ekran, nakładają się albo zmniejszają się do nieczytelności. Sprawdzenie strony w trybie symulacji mobilnej przeglądarki lub na prawdziwym urządzeniu to najszybszy sposób, by zobaczyć, co widzą odwiedzający na telefonach. Dzięki kreatorowi stron WEMASY możesz to skonfigurować bezpośrednio na swojej stronie.
Czy zepsuty układ na telefonie wpływa na moją pozycję w Google?
Tak. Google stosuje indeksowanie mobile-first, czyli to wersja mobilna strony jest tym, co Google ocenia przede wszystkim przy ustalaniu pozycji. Strona z problemami wyświetlania na telefonach, małym tekstem lub treścią wychodzącą poza obszar widoku otrzyma niższe oceny użyteczności, co wpływa na ogólne wyniki w wyszukiwarce. Naprawa problemów mobilnych poprawia zarówno doświadczenie użytkowników, jak i SEO.
Co powoduje poziome przewijanie na stronie mobilnej?
Poziome przewijanie na telefonie niemal zawsze wskazuje na element o stałej szerokości w pikselach, który przekracza szerokość ekranu telefonu. Typowi winowajcy to tabele, paski boczne, osadzone treści, obrazy bez ograniczeń szerokości i kontenery z konkretną szerokością w pikselach zamiast procentów. Znalezienie elementu wychodzącego poza ekran w narzędziach deweloperskich przeglądarki, a następnie zastąpienie stałej szerokości procentem lub dodanie kontroli przepełnienia w kontenerze nadrzędnym zwykle rozwiązuje problem.
Jak sprawdzić, czy moja strona jest przyjazna dla telefonów?
Otwórz stronę na prawdziwym telefonie i przewiń każdą ważną podstronę. Potem otwórz ją w narzędziach deweloperskich przeglądarki na komputerze i użyj trybu symulacji urządzeń, by obejrzeć ją w kilku szerokościach ekranu. Do uporządkowanego audytu przepuść strony przez raport użyteczności mobilnej w Google Search Console, który wskazuje konkretne problemy, takie jak za mały tekst, klikalne elementy zbyt blisko siebie i problemy z konfiguracją obszaru widoku. Oba podejścia razem dają najpełniejszy obraz.
Czy mogę naprawić zepsutą stronę mobilną bez przebudowy całej strony?
To zależy od tego, jak strona została pierwotnie zbudowana. Jeśli działa na platformie obsługującej responsywne motywy, zmiana na responsywny motyw jest często najszybszym rozwiązaniem i nie wymaga budowania treści od zera. Jeśli strona jest napisana ręcznie z nieresponsywnym układem, ukierunkowane zmiany CSS z użyciem media queries mogą rozwiązać konkretne problemy bez pełnej przebudowy. Jeśli jednak układ opiera się na tabelach albo wszędzie mocno polega na stałych szerokościach, pełna przebudowa na responsywnej podstawie jest zwykle skuteczniejsza niż łatanie pojedynczych problemów.
Dlaczego odwiedzający wychodzą z mojej strony po kilku sekundach na telefonie?
Gdy odwiedzający trafiają na stronę z problemami z wyświetlaniem, nieczytelnym tekstem, zepsutą nawigacją lub wolno ładującymi się obrazami, wychodzą szybko, bo strona nie spełnia ich podstawowych oczekiwań co do użyteczności. Osoby na telefonach mają mniejszą tolerancję na utrudnienia niż osoby na komputerach. Jeśli układ jest zepsuty lub wolny, wrócą do wyników wyszukiwania i klikną wynik konkurencji. Artykuł o odwiedzających, którzy opuszczają Twoją stronę omawia pełen zakres powodów szybkiego wychodzenia i pokazuje, jak zdiagnozować, który dotyczy Twojej strony.