Przyjazna dla urządzeń mobilnych lista kontrolna do śledzenia na każdej tworzonej stronie internetowej

Opublikowany: 2017-08-10

Stworzenie strony internetowej, która działa dobrze na urządzeniach mobilnych, nie jest łatwe, ale można to zrobić. Dopóki dokładnie sprawdzisz swoją witrynę przed jej wysłaniem, nie ma powodu, dla którego użytkownicy mobilni nie mieliby być zadowoleni. Jednak możesz się zastanawiać, jakie elementy najbardziej wymagają Twojej uwagi.

W tym artykule przedstawimy prostą listę kontrolną zawierającą siedem kryteriów, które powinna spełniać Twoja witryna. Jeśli tak, Twoi użytkownicy prawdopodobnie będą mieli świetne wrażenia na urządzeniach mobilnych, a jeśli nie, podpowiemy Ci, jak to zmienić. Zacznijmy od punktu numer jeden!

Znaczenie posiadania strony internetowej przyjaznej dla urządzeń mobilnych

Przykład testu przyjazności mobilnej Google.

Posiadanie witryny przyjaznej dla urządzeń mobilnych jest obecnie ważniejsze niż kiedykolwiek.

Termin „przyjazny dla urządzeń mobilnych” brzmi nieco niejasno. Mówiąc prościej, witrynę można uznać za przyjazną dla urządzeń mobilnych, jeśli możesz z łatwością korzystać z jej treści i wchodzić z nią w interakcję za pomocą dowolnego rodzaju urządzeń mobilnych.

Jak zapewne wiesz, przeglądanie mobilne rośnie, co oznacza, że ​​wiele osób używa ich jako podstawowego sposobu poruszania się po sieci. Jeśli Twoja witryna nie jest łatwa w użyciu, użytkownicy mogą szukać alternatywy. Na szczęście istnieje kilka sposobów sprawdzenia, czy Twoja witryna jest przyjazna dla urządzeń mobilnych. Na przykład Google oferuje test, z którego może skorzystać każda witryna, po prostu wklejając jej adres URL:

Test przyjazny dla urządzeń mobilnych Google.

Pamiętaj jednak, że żaden automatyczny test nie jest doskonały – musisz więc również zachować zdrowy rozsądek. W tym celu podajemy kilka wskazówek, które pomogą Ci zapewnić, że Twoja witryna jest tak przyjazna, jak to tylko możliwe dla użytkowników mobilnych.

7-etapowa lista kontrolna przyjazna dla urządzeń mobilnych, którą należy śledzić na każdej tworzonej stronie internetowej

Biorąc pod uwagę znaczenie ruchu mobilnego, bardzo ważne jest, aby każda tworzona przez Ciebie witryna była od samego początku przyjazna dla urządzeń mobilnych. Ta lista kontrolna pomoże Ci upewnić się, że trafi na każdy krok. Spójrzmy!

1. Przetestuj swoją witrynę w wielu rozdzielczościach

Mobilna strona internetowa eleganckiego motywu.

Testowanie witryny w wielu rozdzielczościach jest łatwe dzięki odpowiedniemu narzędziu.

Jedną z najważniejszych rzeczy w przypadku witryn mobilnych jest to, że Twoja witryna nie wygląda tak, jakby została zmniejszona z wersji na komputery. Oznacza to, że każdy z twoich elementów powinien dobrze wyglądać w wielu rozdzielczościach.

Z drugiej strony, jeśli żaden z Twoich elementów nie wygląda dobrze na urządzeniach mobilnych, może to negatywnie wpłynąć na współczynnik odrzuceń. Mądrą rzeczą jest wcześniejsze przetestowanie witryny w wielu rozdzielczościach i sprawdzenie, czy pojawiają się jakieś problemy.

Na szczęście ten proces nie jest tak skomplikowany, jak się wydaje, i nie musisz posiadać wielu urządzeń, aby to zrobić. Istnieje wiele usług, które umożliwiają szybkie przetestowanie dowolnej witryny w różnych rozdzielczościach, takie jak:

  • Narzędzia programistyczne Chrome: ta wbudowana funkcja przeglądarki Chrome zawiera pasek narzędzi urządzenia, za pomocą którego możesz testować swoją witrynę w różnych rozdzielczościach.
  • Usługi takie jak Screenfly i BrowserStack: Te usługi stron trzecich umożliwiają testowanie witryny w znacznie szerszej gamie rozdzielczości.

Wszystkie wymienione przez nas narzędzia są bezpłatne, więc budżet nie powinien stanowić problemu i nie ma wymówki, aby pominąć ten krok!

2. Upewnij się, że menu i nawigacja wyświetlają się dobrze na mniejszych ekranach

Mobilne menu.

Zapewnienie dobrego wyświetlania menu na urządzeniach mobilnych jest ważne, aby witryna była użyteczna.

W większości przypadków menu to główny sposób, w jaki ludzie poruszają się po Twojej witrynie. Jeśli linki są trudne do kliknięcia lub odczytania w mniejszych rozdzielczościach, wpłynie to na użyteczność. Ponadto chcesz mieć pewność, że wszystkie pozycje menu są łatwo dostępne, niezależnie od urządzenia używanego do przeglądania.

Mając to na uwadze, przejdźmy przez kilka kroków, aby upewnić się, że niczego nie przegapisz, gdy nadejdzie czas testowania menu mobilnych:

  1. Sprawdź, czy wszystkie elementy menu są widoczne. Jeśli nie, sprawdź, czy można do nich dotrzeć, przewijając.
  2. Upewnij się, że każdy link jest wyrównany, a podmenu są zagnieżdżone.
  3. Sprawdź dwukrotnie, czy możesz przeczytać każdą pozycję menu, a także ją kliknąć.

Większość nowoczesnych motywów WordPress, takich jak Divi, automatycznie tworzy dla Ciebie responsywne menu. Jeśli masz problemy z tym aspektem swojej witryny, warto rozważyć aktualizację do nowego motywu.

3. Sprawdź, czy Twoje obrazy wyglądają dobrze w mniejszych rozdzielczościach

Witryna mobilna skupiająca się na obrazie.

Obrazy Twojej witryny powinny wyglądać równie oszałamiająco, niezależnie od ich rozdzielczości.

Obrazy są kluczowym elementem każdej witryny, ale czasami grafika może nie wyglądać najlepiej w niższych rozdzielczościach. Na przykład, jeśli Twoje logo nie jest czytelne, gdy ktoś uzyskuje dostęp do Twojej witryny przez telefon komórkowy, wyraźnie wpłynie to na Twoją markę.

W większości przypadków ludzie bardziej martwią się „wypaczeniem” swoich obrazów, ale zmniejszenie ich może również stanowić problem. Nie każdy obraz może być dostosowany do doskonały wygląd w każdej rozdzielczości, ale można podjąć kroki, aby uczynić go mniej o numerze:

  1. Skoncentruj swoje wysiłki na obrazach ważnych dla Twojej marki.
  2. Poszukaj skalowalnych alternatyw dla popularnych typów obrazów, takich jak SVG.
  3. Jeśli to możliwe, wybieraj lepiej przycięte obrazy, aby wyglądały lepiej w mniejszych rozmiarach.

Tak długo, jak pamiętasz o tych wskazówkach, powinieneś być gotowy. Pamiętaj tylko, że jeśli chodzi o bardzo złożone obrazy, takie jak infografiki, całkowite dostosowanie ich do niskich rozdzielczości może nie być możliwe.

4. Przetestuj swoją treść pod kątem czytelności

Zrzut ekranu artykułu Elegant Themes.

Małe ekrany mogą wpływać na czytelność, ale łatwo się do nich dostosować.

Jednym z aspektów, który najbardziej wpływa na użyteczność urządzeń mobilnych, jest czytelność. Gdy pracujesz z mniejszym formatem, musisz to zrekompensować, upewniając się, że tekst nadal wyświetla się w czytelnym rozmiarze, a nie po prostu się zmniejsza. Cel tutaj jest prosty – Twoi użytkownicy nie powinni mieć możliwości powiększania i ściskania swojej witryny. W końcu to doskonały przepis na zirytowanego gościa.

Na szczęście czytelność to aspekt, z którym stosunkowo łatwo się uporać:

  • Wybierz bardzo czytelną czcionkę podstawową dla treści treści.
  • Używaj podtytułów, gdy tylko jest to możliwe, aby podzielić treść na łatwe do skanowania sekcje.
  • Wybierz motyw, który zapewnia większą kontrolę nad sposobem wyświetlania tekstu.

W odniesieniu do naszego ostatniego punktu, wiele nowoczesnych motywów powinno oferować kontrolę, której szukasz. Na przykład Divi umożliwia precyzyjne dostosowanie rozmiaru dowolnego tekstu modułu zarówno dla komputerów stacjonarnych, jak i urządzeń przenośnych.

5. Upewnij się, że elementy Twojej witryny są łatwe do interakcji

CTA i przycisk czatu na żywo.

Interakcja z elementami za pomocą palców może być trudna, więc będziesz musiał dostosować swoje projekty.

Ten krok mógłby zająć dużo miejsca, ale wytrzymaj z nami. Do tej pory omówiliśmy, jak ważne jest, aby menu było łatwe w użyciu, ale to samo dotyczy także pozostałych elementów interaktywnych witryny. Przyciski, linki, formularze i nie tylko – wszystkie muszą pozostać dostępne na urządzeniach mobilnych.

Kluczową kwestią jest oczywiście rozmiar. W miarę zmniejszania rozdzielczości większość elementów, o których mówiliśmy, również się kurczy. Twoim zadaniem jest sprawdzenie, czy interakcja z nimi jest zbyt trudna, ponieważ może to wpłynąć na użyteczność Twojej witryny.

Jeśli chodzi o to, jak to zrobić, zalecamy używanie tutaj prawdziwych urządzeń mobilnych zamiast usług, o których wspominaliśmy wcześniej. W końcu musisz wiedzieć, czy Twoje elementy są łatwe w obsłudze za pomocą palców zamiast myszy. Oto, na co musisz zwrócić uwagę:

  • Upewnij się, że wezwania do działania (CTA), formularze i elementy menu są łatwe do kliknięcia.
  • Sprawdź, czy elementy krytyczne nie nakładają się na siebie, co może spowodować, że użytkownicy klikną niewłaściwy.

Gdy już wiesz, które elementy sprawiają Ci problemy, wystarczy zmienić ich rozmiar w razie potrzeby. Jeśli używasz motywu takiego jak Divi, możesz to zrobić na ekranie ustawień każdego modułu.

6. Upewnij się, że nie polegasz nadmiernie na wyskakujących okienkach

Wyskakujący ekran.

Wyskakujące okienka mogą być skuteczne, ale mają też wpływ na użyteczność Twojej witryny.

Wyskakujące okienka i tym podobne często powodują bardzo znaczny wzrost konwersji. Jednak mają również tendencję do denerwowania przynajmniej tylu osób, ile się nawracają.

Trudno wskazać dokładnie, ilu ludzi odstraszyć jeśli używasz natrętne telefony pop-upy, ale możemy powiedzieć, że niektóre wyszukiwarki - takie jak Google - będzie karać za to. Jeśli użyjesz wyskakujących okienek, które zasłaniają główne treści lub zmuszają użytkowników do ich przeglądania przed uzyskaniem do nich dostępu, ucierpi na tym Twoja optymalizacja pod kątem wyszukiwarek (SEO).

Wiemy, że wyskakujące okienka mogą być przydatne, ale istnieją mniej inwazyjne alternatywy, takie jak:

  • Stylowe formularze zgłoszeniowe.
  • Zoptymalizowane CTA.

Nie jest to przełomowe, ale optymalizacja formularzy i CTA może przynieść większe korzyści w dłuższej perspektywie, ponieważ zrazisz mniej użytkowników. Ponadto nie wpłynie to również na rankingi w wyszukiwarkach.

7. Sprawdź czasy ładowania swojej witryny

Test prędkości Pingdom.

Jeśli Twoja witryna ładuje się w mniej niż sekundę, możesz być bardzo zadowolony ze swoich wyników.

Jeśli regularnie korzystasz z eleganckich motywów, wiesz, że zawsze kładziemy nacisk na wydajność, gdy tylko jest to możliwe. Szybko ładująca się witryna nie jest czymś, co wiele osób zauważa, ale z pewnością zwracają uwagę, gdy dzieje się odwrotnie.

Długie czasy wczytywania często prowadzą do wzrostu współczynnika odrzuceń i sprawiają, że witryna jest mniej użyteczna. Co więcej, są one szczególnie ważne dla użytkowników mobilnych, ponieważ niektórzy z nich mogą przeglądać Twoją witrynę przy użyciu połączeń, które nie są optymalne.

Optymalizacja witryny WordPress to temat, który może zająć cały artykuł sam w sobie, ale oto kilka krótkich wskazówek:

  • Jeśli to możliwe, wypróbuj motyw zoptymalizowany pod kątem urządzeń mobilnych, taki jak Divi.
  • Zoptymalizuj swoje obrazy, aby zajmowały mniej miejsca.
  • Zaimplementuj rozwiązanie do buforowania dla swojej witryny.

To wszystko są solidne kroki, ale to nie wszystko, co możesz zrobić, aby skrócić czas ładowania. Aby uzyskać więcej informacji, zapoznaj się z tym pełnym artykułem, który opublikowaliśmy jakiś czas temu, na temat optymalizacji konfiguracji WordPressa.

Wniosek

Upewnienie się, że Twoja witryna jest przyjazna dla urządzeń mobilnych, jest ważniejsze niż kiedykolwiek. Jeśli obecny trend się utrzyma, większość ruchu będzie pochodzić ze źródeł mobilnych w ciągu najbliższych kilku lat (jeśli jeszcze się nie stało). Najmądrzejszą rzeczą, jaką możesz teraz zrobić, jest zapewnienie równie bogatego doświadczenia zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych.

Jeśli nie masz pewności, czy Twoja witryna może być uznana za przyjazną dla urządzeń mobilnych, oto prosta lista kontrolna, która pomoże Ci się dowiedzieć:

  1. Przetestuj swoją witrynę w wielu rozdzielczościach.
  2. Upewnij się, że menu i nawigacja dobrze wyświetlają się na mniejszych urządzeniach.
  3. Sprawdź, czy Twoje obrazy wyglądają dobrze w niższych rozdzielczościach.
  4. Przetestuj swoją treść pod kątem czytelności.
  5. Upewnij się, że elementy Twojej witryny są łatwe w interakcji.
  6. Upewnij się, że nie polegasz nadmiernie na wyskakujących okienkach.
  7. Przetestuj czasy ładowania swojej witryny.

Czy masz pytania o to, jak upewnić się, że Twoja witryna jest przyjazna dla urządzeń mobilnych? Porozmawiajmy o nich w sekcji komentarzy poniżej!

Obraz miniatury artykułu w 32 pikselach / shutterstock.com.