Jak sprawić, by Twoja witryna WordPress była przyjazna dla urządzeń mobilnych

Opublikowany: 2023-02-12

Nie jest tajemnicą, że przyjazne dla urządzeń mobilnych witryny WordPress są nową normą, ale pomimo tego, jak powszechne mogą się wydawać, stworzenie pięknej, responsywnej witryny może wymagać trochę pracy. Ten przewodnik pomoże Ci zrozumieć, dlaczego ważne jest, aby mieć stronę przyjazną dla urządzeń mobilnych, jak ją zbudować na WordPressie, a także przedstawi najlepsze narzędzia do stworzenia responsywnej witryny.

Aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych, musisz:

  1. Zrozum, dlaczego responsywne projektowanie stron internetowych jest ważne
  2. Weź udział w teście optymalizacji mobilnej Google
  3. Użyj responsywnego motywu WordPress (lub stwórz własny)
  4. Rozważ przyjazne dla urządzeń mobilnych wtyczki WordPress
  5. Korzystaj z opcji opt-in dostosowanych do urządzeń mobilnych
  6. Myśl w kategoriach responsywnych mediów
  7. Nadaj priorytet wydajności witryny

Gotowy? Zanurzmy się!

1. Dlaczego witryny przystosowane do urządzeń mobilnych są ważne?

W IV kwartale 2019 r. 61% wyszukiwań w Google odbywało się na urządzeniach mobilnych. Oznacza to, że ponad połowa populacji korzysta z telefonów i tabletów zamiast tradycyjnych urządzeń stacjonarnych, więc aby za nimi nadążyć, Twoja witryna musi być gotowa do wyświetlania na dowolnym rozmiarze ekranu. Projekt przyjazny dla urządzeń mobilnych zapewnia pozytywne wrażenia użytkownika i pomaga użytkownikom znaleźć to, czego szukają w podróży.

Oprócz UX jest jeszcze jeden ważny powód, dla którego Twoja witryna powinna być dostosowana do urządzeń mobilnych: Google. Począwszy od 2015 r. (roku „Mobilegeddon”), Google wprowadził gruntowną przebudowę swojego algorytmu wyszukiwania, aby nagradzać witryny uważane za „przyjazne dla urządzeń mobilnych”. Zmiana sprowadzała się do jednego kluczowego punktu danych: czy Twoja witryna jest responsywna.

Oznacza to, że jeśli Twoja witryna jest dobrze czytana na urządzeniach mobilnych, będzie osiągać lepsze wyniki w wynikach wyszukiwania niż witryny, które tego nie robią. To całkiem miły dodatek, jeśli wykonałeś pracę, aby stworzyć witrynę przyjazną dla urządzeń mobilnych! Ale może to również zaszkodzić ruchowi w Twojej witrynie, jeśli nie radzi sobie z wyświetlaniem na mniejszych ekranach.

Na szczęście, jeśli Twoja witryna WordPress nie jest jeszcze przyjazna dla urządzeń mobilnych, istnieje wiele narzędzi, które pomogą Ci przyspieszyć i zbudować w pełni funkcjonalną, responsywną witrynę. Pierwszy krok? Porównaj swój obecny projekt.

2. Weź udział w teście dostosowania do urządzeń mobilnych

Twoja witryna może wyglądać świetnie na jednym urządzeniu mobilnym (takim jak Twój osobisty telefon komórkowy), ale naprawdę musisz przetestować ją na różnych rozmiarach ekranu, aby wiedzieć, czy jest naprawdę responsywna. Nawet jeśli masz wokół siebie całą masę starych telefonów, testowanie ich na każdym ekranie może być czasochłonne.

Aby uprościć sprawę, Google podarował nam wszystkim bezpłatne narzędzie do testowania dostosowania do urządzeń mobilnych, które powie Ci, czy Twoja witryna kwalifikuje się jako „przyjazna dla urządzeń mobilnych”, czy nie. Wystarczy wpisać adres URL swojej witryny, aby szybko ocenić jej mobilny wygląd. Jeśli Twoja witryna jest w pełni zoptymalizowana pod kątem urządzeń mobilnych, otrzymasz entuzjastyczny komunikat o sukcesie, który wygląda następująco:

Jeśli widzisz kolor czerwony, masz trochę pracy do wykonania. (Przejdziemy do tego za chwilę!)

Całkiem zgrabne małe narzędzie, prawda? Cóż, robi się jeszcze lepiej.

Dla wszystkich programistów firma Google udostępniła również interfejs API testów przyjaznych dla urządzeń mobilnych, który umożliwia testowanie adresów URL za pomocą zautomatyzowanych narzędzi. Zaletą tego jest to, że możesz szybko przetestować więcej stron, ale możesz także monitorować najważniejsze strony w swojej witrynie bez konieczności ręcznego włączania narzędzia przeglądarki przez cały czas. Wynik!

Po użyciu narzędzia Google dostosowanego do urządzeń mobilnych do porównania witryny nadszedł czas na wprowadzanie ulepszeń. Zacznijmy od motywu WordPress.

3. Użyj (lub utwórz) responsywnego motywu WordPress

Jeśli niedawno zainstalowałeś nowy motyw WordPress, istnieje spora szansa, że ​​wszystko jest w porządku w tym dziale. Jeśli Twój motyw istnieje już od jakiegoś czasu, być może nadszedł czas na małą aktualizację.

Po pierwsze: dokładnie sprawdź swoją wersję WordPress i aktualną wersję motywu. Jeśli istnieją oczekujące aktualizacje, zacznij od nich. Nie mogę wypowiadać się na temat każdego dostępnego motywu, ale niektóre aktualizacje będą zawierały elementy przyjazne dla urządzeń mobilnych i mogą wystarczyć do rozwiązania problemów. Na przykład WordPress 4.4 dodał kilka naprawdę fajnych funkcji dla responsywnych obrazów (możesz o tym przeczytać tutaj).

Jeśli aktualizacje nie pomogą, prawdopodobnie nadszedł czas, aby poszukać nowego motywu lub rozważyć utworzenie własnego. Zbadajmy obie opcje.

Najlepsze motywy WordPress przyjazne dla urządzeń mobilnych

Realistycznie rzecz biorąc, wiele motywów WordPress jest obecnie responsywnych – prawdopodobnie rzadko zdarza się, aby motyw nie był przyjazny dla urządzeń mobilnych. To powiedziawszy, przed zakupem motywu sprawdź dokładnie, czy wyświetla się dobrze na dowolnym rozmiarze ekranu. Przetestuj witrynę demonstracyjną, skaluj okno przeglądarki i czytaj wszelkie recenzje, które możesz znaleźć, aby poznać doświadczenia prawdziwych użytkowników.

Jeśli jesteś zadowolony z tego, co widzisz, idź na całość! Ale jeśli coś nie wygląda dobrze, unikaj. Nawet jeśli uważasz, że to idealne dopasowanie, jest tak wiele motywów WordPress do wyboru, że gwarantuję, że znajdziesz inny, który będzie pasował do Twojej witryny.

Jeśli szukasz bezpłatnych motywów, koniecznie zobacz, jak wygląda z własną zawartością – jak na pewno wiesz, rzeczy nie zawsze wyglądają tak samo, więc upewnij się, że wyświetlają Twoje treści tak, jak chcesz na telefonie komórkowym.

Nie wiesz, od czego zacząć? Gdy hostujesz swoją witrynę WordPress na WP Engine, uzyskasz bezpłatny dostęp do motywów StudioPress (w tym Genesis Framework!) w ramach swojego planu. Te motywy są w pełni responsywne, więc będą wyglądać świetnie na każdym urządzeniu, a ponadto możesz łatwo przełączać się między nimi (zamiast utknąć z „tym jedynym” motywem premium, który zdecydowałeś się kupić).

Jak stworzyć własny responsywny motyw WordPress

Jeśli wolisz zrobić to samodzielnie, aby stworzyć witrynę przyjazną dla urządzeń mobilnych, pamiętaj, aby zacząć od zera lub w środowisku testowym – nigdy nie należy wprowadzać tak drastycznych zmian w działającej witrynie.

Polecam użycie Local, aby uruchomić lokalną witrynę WordPress bezpośrednio na twoim komputerze. Ta bezpłatna aplikacja pozwoli Ci eksperymentować do woli, nie psując jednocześnie bieżącej witryny (co jest niezbędne podczas przebudowy). Możesz nawet zaimportować istniejącą witrynę do Lokalnie, więc jeśli chcesz, musisz zacząć od zera.

Dostępna jest również funkcja o nazwie Live Links, która generuje udostępniany adres URL do witryny lokalnej. Dzięki temu możesz wysłać go do klienta lub wyświetlić na telefonie, dzięki czemu możesz łatwo przetestować, jak strona wygląda na urządzeniu mobilnym.

Jeśli utworzysz motyw potomny oparty na responsywnym motywie nadrzędnym, będziesz w całkiem dobrej formie. Jeśli zaczynasz od zupełnie pustej karty i tworzysz własny motyw, pamiętaj, aby użyć zapytań o media, aby ustalić granice projektu i przemyśleć elementy pojedynczo.

Zadaj sobie pytanie, jak powinny się skalować obrazy, jak powinna wyglądać nawigacja i czy jakakolwiek zawartość będzie się ukrywać na urządzeniu mobilnym. Oto kilka samouczków, które mogą ci w tym pomóc:

  • Jak stworzyć responsywne menu nawigacyjne w WordPress
  • 7 wskazówek dotyczących najlepszych praktyk dotyczących responsywnego projektowania stron internetowych
  • Praca z responsywnymi obrazami w WordPress

4. Używaj responsywnych wtyczek

Wtyczki dodają funkcjonalność do Twojej witryny WordPress, więc nie zawsze dodają coś wizualnie do interfejsu. Ale jeśli dodadzą element fizyczny do Twojej witryny (taki jak widżet lub przycisk wezwania do działania), upewnij się, że dobrze skaluje się na wszystkich rozmiarach ekranu lub przynajmniej daje możliwość wyłączenia go na mniejszych rozmiarach ekranu.

Na przykład widżet paska bocznego jest wspaniałym dodatkiem do witryny na komputery stacjonarne, ale jeśli dominuje w projekcie mobilnym lub nie zmniejsza się, nie zapewni użytkownikom zbyt dobrego doświadczenia.

Podobnie jak motywy, po prostu zwróć uwagę na funkcje wtyczki i spróbuj przeczytać recenzje lub znaleźć wersję demonstracyjną przed zakupem. Za każdym razem, gdy aktywujesz nową wtyczkę, pamiętaj o szybkim sprawdzeniu jakości witryny, aby upewnić się, że skaluje się ona prawidłowo do różnych rozmiarów ekranu.

Tak długo, jak masz responsywny motyw i wtyczki, które dobrze zachowują się na urządzeniach mobilnych, Twoja witryna będzie w naprawdę dobrym stanie do wyświetlania na mniejszych ekranach.

5. Unikaj dodawania wyskakujących okienek na urządzeniach mobilnych

Jeśli próbujesz zbudować listę e-mailową za pomocą swojej witryny WordPress, zgaduję, że masz w swojej witrynie różne opcje opt-in. Większość formularzy zgody na e-mail działa dobrze na urządzeniach mobilnych (zakładając, że są skalowalne i łatwe w użyciu).

Wyskakujące okienka to jednak inna bestia. Google zaczął karać witryny za pomocą natrętnych reklam pełnoekranowych, czyli opcji opt-in, które zakrywają zawartość witryny. Obejmuje to wyskakujące okienka (wyświetlane natychmiast lub po pewnym czasie przebywania użytkownika w witrynie) oraz wszelkie inne typy zgody, które użytkownik musi odrzucić przed uzyskaniem dostępu do treści na stronie. O stanowisku Google w tej sprawie można przeczytać tutaj.

Aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych i zgodna z najlepszymi praktykami, unikaj wyskakujących okienek w projekcie mobilnym. Sposób, w jaki to zrobisz, będzie zależał od usługi, z której korzystasz, ale większość dostawców powinna mieć możliwość wyłączenia natrętnych wyskakujących okienek na urządzeniach mobilnych.

6. Opracuj strategię dla responsywnych mediów

Niezależnie od tego, czy pracujesz z witryną portfolio, codziennym blogiem, czy witryną eCommerce, ważnym elementem responsywnej układanki jest rozważenie mediów w Twojej witrynie. Ten duży obraz tła na Twojej stronie głównej może wyglądać świetnie na komputerze stacjonarnym, ale jeśli nie skaluje się prawidłowo, może utracić cały kontekst i utrudniać przeglądanie na telefonie. Więc zasada numer jeden dla responsywnych mediów? Pomyśl o skali rzeczy.

Jeśli skalowanie nie jest najlepszym rozwiązaniem dla Twojej witryny, możesz również rozważyć ukrycie niektórych elementów, gdy witryna jest ładowana na urządzeniu mobilnym. Pomogłoby to uprościć obsługę i szybciej dotrzeć do najważniejszych treści.

Na koniec musisz również pamiętać o rozmiarze plików multimedialnych, które umieszczasz w swojej witrynie. Poprawi to nie tylko wygodę korzystania z urządzeń mobilnych, ale także czas ładowania pulpitu! Pliki multimedialne są często jednymi z największych na stronie internetowej, co sprawia, że ​​są przyczyną pasków ładowania i długiego czasu oczekiwania. Aby usprawnić swoją witrynę i zwiększyć wydajność mobilną, spróbuj zoptymalizować obrazy, używając najmniejszego możliwego rozmiaru pliku przy jednoczesnym zachowaniu wymaganej jakości. (Może na przykład Twoja witryna mobilna wczytuje mniejszą wersję obrazu niż wersja na komputery!)

7. Nadaj priorytet wydajności witryny

Szybkość strony była przez długi czas ważna pod względem pozycji Twojej witryny w wynikach wyszukiwania Google na komputery, ale od lipca 2018 r. dotyczy to również rankingów mobilnych. Połącz to z powyższymi statystykami, które pokazują, że ponad 60% wyszukiwań w Internecie odbywa się za pomocą urządzeń mobilnych, a wydajność Twojej witryny (na każdym urządzeniu) jest teraz ważniejsza niż kiedykolwiek.

Obrazy są dużą częścią równania wydajności, ale twój kod i host WordPress również odgrywają dużą rolę.

Jeśli chodzi o Twój kod, rozważ działania takie jak minimalizacja (zwłaszcza jeśli pracujesz z niestandardowym motywem). Zrób inwentaryzację wszystkich wtyczek zainstalowanych w Twojej witrynie oraz dezaktywuj i odinstaluj te, które nie są już potrzebne. Zasadniczo im lepiej uporządkujesz elementy napędzające Twoją witrynę, tym lepiej dla Ciebie.

Jeśli chodzi o hosta WordPress, upewnij się, że korzystasz z wysokiej jakości partnera, który obejmuje usługi takie jak technologia buforowania, CDN i infrastrukturę obsługiwaną przez niezawodnych dostawców, takich jak Google Cloud Platform. Jeśli hostujesz swoją witrynę w WP Engine, jesteś ustawiony we wszystkich tych obszarach.

Ponieważ coraz więcej osób korzysta ze smartfonów lub tabletów, aby uzyskać dostęp do Internetu, projektanci witryn muszą dostosować się do tych wzorców użytkowania. Czy Twoja witryna jest gotowa na użytkowników mobilnych? Jakie aspekty witryny musiałeś zmienić? Jakich narzędzi użyłeś do stworzenia responsywnego projektu? Podziel się swoim doświadczeniem w komentarzach!

Uzyskaj dostęp do ponad 30 premium (i przyjaznych dla urządzeń mobilnych!) motywów

Zaoszczędź sobie trochę czasu (i pieniędzy!) dzięki hostingowi WordPress przez WP Engine i uzyskaniu dostępu do motywów StudioPress i Genesis Framework. Motywy są w pełni responsywne i łatwe do dostosowania, oszczędzając czas podczas próby zbudowania witryny przyjaznej dla urządzeń mobilnych. Dodatkowo potężna platforma WP Engine zapewni optymalizację wydajności Twojej witryny, pomagając utrzymać szybkie prędkości strony i dobrze pozycjonować witrynę.