Dostosowane do urządzeń mobilnych
Silktide ładuje każdą stronę na symulowanym urządzeniu mobilnym i sprawdza, czy została zaprojektowana do działania na takim urządzeniu — czy dostosowuje się do wąskiego ekranu, czy jedynie wyświetla pomniejszoną wersję strony komputerowej.
Dlaczego to ważne
Ponad połowa ruchu w sieci pochodzi z urządzeń mobilnych, więc strona działająca wyłącznie na komputerach zawodzi większość odbiorców już przy pierwszym dotknięciu ekranu. Odwiedzający, którzy widzą drobny tekst i muszą bez końca powiększać widok gestem szczypania, opuszczają stronę; wyszukiwarki, które najpierw indeksują mobilną wersję stron, odpowiednio pozycjonują witrynę.
Ta kontrola wykrywa podstawowy problem — stronę całkowicie pozbawioną wersji mobilnej — a nie kwestie dopracowania. Strona, która przejdzie kontrolę, może nadal mieć mniejsze problemy na urządzeniach mobilnych, wykrywane przez inne kontrole.
Jak to naprawić
Trwałym rozwiązaniem jest , dzięki któremu ta sama strona dostosowuje się do każdej szerokości ekranu. Jeśli Twoja witryna powstała przed upowszechnieniem projektowania responsywnego, zwykle oznacza to konieczność przebudowy lub zastosowania nowego motywu — większość współczesnych motywów jest domyślnie responsywna. W szczególności:
- Zadeklaruj mobilny w sekcji head każdej strony:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Używaj elastycznych układów i zapytań medialnych , aby treść przeorganizowywała się w jedną kolumnę na wąskich ekranach, zamiast ustalać stałą szerokość strony dla komputerów.
- Zachowaj czytelny rozmiar tekstu głównego na urządzeniach mobilnych — unikaj projektów, które pomniejszają całą stronę, aby ją dopasować.
- Testuj na prawdziwym telefonie lub za pomocą emulacji urządzenia w przeglądarce, przy szerokościach do około 320 pikseli.
Jak Silktide to testuje
- Ładuje stronę na symulowanym urządzeniu mobilnym.
- Sprawdza, czy strona deklaruje użyteczny viewport. Brak viewportu lub viewport o stałej szerokości większej niż 480 pikseli powoduje niepowodzenie kontroli strony — jest to absolutne minimum obsługi urządzeń mobilnych.
- Mierzy widoczny tekst: jeśli ponad 35% tekstu jest renderowane w nieczytelnym rozmiarze (poniżej 10 pikseli po powiększeniu), kontrola strony kończy się niepowodzeniem.
- Sprawdza, jak bardzo strona jest pomniejszana, aby zmieścić się na ekranie: powiększenie poniżej 60% normalnego rozmiaru oznacza, że strona w praktyce ma układ komputerowy, więc kontrola kończy się niepowodzeniem.
- Strona przechodzi kontrolę, jeśli nie występuje żaden z tych problemów. Silktide raportuje również z biegiem czasu, ile stron nie jest dostosowanych do urządzeń mobilnych.
Rozwiązywanie problemów
Moja strona wygląda dobrze na moim telefonie
Niektóre strony mogą wyglądać poprawnie, a mimo to nie przejść kontroli z powodu jednego z opisanych wyżej sygnałów —
na przykład tagu viewport wygenerowanego przez starsze narzędzie ze stałą szerokością. Wyświetl
źródło strony i sprawdź, czy tag <meta name="viewport"> odpowiada
zalecanej formie.
Kontrola przechodzi, ale korzystanie z witryny na urządzeniu mobilnym jest słabe
Przejście kontroli oznacza, że strona spełnia podstawowe wymagania, a nie że jest optymalna. Zapoznaj się z powiązanymi kontrolami dotyczącymi małego tekstu, małych obszarów dotykowych i wyłączonego powiększania.