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

Opublikowany: 2020-10-02

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 posiadanie witryny przyjaznej dla urządzeń mobilnych, jak zbudować ją na WordPressie i przedstawi najlepsze narzędzia do tworzenia 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. Rozwiąż test optymalizacji mobilnej w Google
  3. Użyj responsywnego motywu WordPress (lub utwórz własny)
  4. Rozważ wtyczki WordPress przyjazne dla urządzeń mobilnych
  5. Korzystaj z opcji akceptacji dla urządzeń mobilnych
  6. Myśl w kategoriach responsywnych mediów
  7. Priorytetowe działanie witryny

Gotowy? Zanurzmy się!

1. Dlaczego witryny dostosowane do komórek są ważne?

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

Oprócz UX jest jeszcze jeden ważny powód, dla którego Twoja witryna powinna być przyjazna dla urządzeń mobilnych: Google. Począwszy od 2015 roku (roku „Mobilegeddon”), Google wdrożył gruntowny przegląd 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 działać lepiej w wynikach wyszukiwania niż witryny, które go nie czytają. To całkiem niezła korzyść, jeśli wykonałeś pracę nad stworzeniem witryny przyjaznej dla urządzeń mobilnych! Ale może to również zaszkodzić ruchowi w Twojej witrynie, jeśli nie jest w stanie wyświetlić się 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 działającą, responsywną witrynę. Pierwszy krok? Porównaj swój obecny projekt.

2. Zrób test przyjazności dla urządzeń mobilnych

Twoja witryna może wyglądać świetnie na jednym urządzeniu mobilnym (np. na osobistym telefonie komórkowym), ale naprawdę musisz przetestować ją na wielu różnych rozmiarach ekranu, aby wiedzieć, czy rzeczywiście reaguje. Nawet jeśli zdarzy ci się mieć całą masę starych telefonów, testowanie ich na każdym ekranie może być czasochłonnym procesem.

Aby uprościć sprawę, Google podarował nam wszystkim bezpłatne narzędzie do testowania przyjazne dla 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 projekt mobilny. Jeśli Twoja witryna jest w pełni zoptymalizowana pod kątem urządzeń mobilnych, otrzymasz entuzjastyczny komunikat o sukcesie, który wygląda tak:

Jeśli widzisz czerwony kolor, masz trochę pracy. (Dojdziemy do tego za sekundę!)

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

Dla wszystkich programistów Google udostępnił również interfejs API testowy przyjazny dla urządzeń mobilnych, który umożliwia testowanie adresów URL za pomocą automatycznych 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 ciągłego ręcznego korzystania z narzędzia przeglądarki. Wynik!

Po użyciu przyjaznego dla urządzeń mobilnych narzędzia Google do analizy porównawczej witryny nadszedł czas na wprowadzenie ulepszeń. Zacznijmy od twojego motywu WordPress.

3. Użyj (lub utwórz) responsywny motyw WordPress

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

Po pierwsze: sprawdź dokładnie swoją wersję WordPressa i aktualną wersję motywu. Jeśli są oczekujące aktualizacje, zacznij od nich. Nie mogę mówić o każdym motywie, ale niektóre aktualizacje będą zawierać 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 rozwiążą problemu, prawdopodobnie nadszedł czas, aby poszukać nowego motywu lub rozważyć stworzenie własnego. Zbadajmy obie opcje.

Najlepsze motywy WordPress przyjazne dla urządzeń mobilnych

Realistycznie rzecz biorąc, obecnie wiele motywów WordPress jest responsywnych – prawdopodobnie rzadziej motyw nie jest przyjazny dla urządzeń mobilnych. Biorąc to pod uwagę, przed zakupem motywu sprawdź, czy wyświetla się dobrze na dowolnym rozmiarze ekranu. Przetestuj witrynę demonstracyjną, skaluj okno przeglądarki i przeczytaj wszelkie recenzje, które możesz znaleźć, aby uzyskać wrażenia od prawdziwych użytkowników.

Jeśli jesteś zadowolony z tego, co widzisz, zrób to! Ale jeśli coś nie wygląda dobrze, trzymaj się z daleka. Nawet jeśli myślałeś, ż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 darmowych motywów, koniecznie zobacz, jak to wygląda z własnymi treściami – jestem pewien, że wiesz, że rzeczy nie zawsze wyglądają tak samo, więc upewnij się, że wyświetlają one Twoje treści tak, jak chcesz na telefonie komórkowym.

Nie wiesz, od czego zacząć? Hostując swoją witrynę WordPress na Flywheel, uzyskasz dostęp do ponad 30 motywów premium StudioPress (w tym Genesis Framework!) za darmo w ramach swojego planu. Te motywy są w pełni responsywne, dzięki czemu będą wyglądać świetnie na dowolnym urządzeniu, a ponadto możesz łatwo przełączać się między nimi (zamiast utknąć w „jedynym” motywie premium, który zdecydowałeś się kupić).

Jak stworzyć własny responsywny motyw WordPress

Jeśli wolisz samodzielnie stworzyć witrynę przyjazną dla urządzeń mobilnych, zacznij od zera lub w środowisku testowym – nigdy nie powinieneś wprowadzać tak drastycznych zmian w swojej aktywnej witrynie.

Polecam użycie Local, aby uruchomić lokalną witrynę WordPress bezpośrednio na swoim komputerze. Ta bezpłatna aplikacja pozwoli Ci eksperymentować do woli, nigdy nie psując bieżącej witryny (co jest niezbędne , gdy przechodzisz przez przeprojektowanie). Możesz nawet zaimportować swoją istniejącą witrynę do lokalnego, więc wystarczy zacząć od zera, jeśli chcesz.

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 pobrać na telefonie, dzięki czemu możesz łatwo przetestować, jak wygląda witryna na urządzeniu mobilnym.

Jeśli utworzysz motyw potomny na podstawie responsywnego motywu nadrzędnego, będziesz w całkiem dobrej formie. Jeśli zaczynasz od zupełnie pustej planszy i tworzysz własny motyw, po prostu użyj zapytań o media, aby ustalić granice projektu i przemyśl elementy pojedynczo.

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

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

4. Korzystaj z responsywnych wtyczek

Wtyczki dodają funkcjonalność do Twojej witryny WordPress, więc nie zawsze dodają niczego wizualnie do interfejsu. Ale w przypadku dodania fizycznego elementu do Twojej witryny (takiego jak widżet lub przycisk wezwania do działania), upewnij się, że skaluje się dobrze 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, ale jeśli dominuje w projektowaniu mobilnym lub nie zmniejsza się, nie zapewnia bardzo dobrego doświadczenia użytkownika.

Podobnie jak motywy, po prostu zwróć uwagę na funkcje wtyczki i spróbuj przeczytać recenzje lub znaleźć demo przed zakupem. Za każdym razem, gdy aktywujesz nową wtyczkę, pamiętaj, aby szybko sprawdzić jakość swojej witryny, aby upewnić się, że skaluje się poprawnie na różnych rozmiarach ekranu.

Dopóki 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, przypuszczam, że masz różne opcje w swojej witrynie. Większość formularzy zgody na pocztę 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. Firma Google zaczęła nakładać kary na witryny z natrętnymi reklamami pełnoekranowymi, czyli opcjami opt-in, które obejmują treść witryny. Obejmuje to wyskakujące okienka (niezależnie od tego, czy wyświetlają się natychmiast, czy po tym, jak użytkownik był w witrynie przez pewien czas) oraz wszelkie inne rodzaje zgody, które użytkownik musi odrzucić przed uzyskaniem dostępu do treści na stronie. Tutaj możesz przeczytać wszystko o stanowisku Google w tej sprawie.

Przykład wyskakującego okienka na pulpicie, którego używamy tutaj w Layout. Wyłączyliśmy je jednak na telefonie komórkowym, w przeciwnym razie zajęłyby cały ekran telefonu!

Aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych i przestrzegała najlepszych praktyk, unikaj wyskakujących okienek w projekcie mobilnym. Sposób, w jaki sobie z tym poradzisz, będzie zależeć 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ą handlu elektronicznego, ważnym elementem 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 jest odpowiednio skalowany, może utracić cały kontekst i utrudnić oglądanie na telefonie. Czyli zasada numer jeden dla responsywnych mediów? Pomyśl o tym, jak sprawy się skalują.

Jeśli skalowanie nie jest najlepszym rozwiązaniem dla Twojej witryny, możesz również rozważyć ukrywanie 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 pliku multimediów, które umieszczasz w swojej witrynie. Poprawi to nie tylko wrażenia na urządzeniach mobilnych, ale także czas ładowania pulpitu! Pliki multimedialne są często jednymi z największych w witrynie, co sprawia, że ​​są przyczyną wczytywania się pasków i długiego czasu oczekiwania. Aby usprawnić działanie witryny i zwiększyć wydajność urządzeń mobilnych, spróbuj zoptymalizować obrazy, korzystając z najmniejszego możliwego rozmiaru pliku, przy jednoczesnym zachowaniu wymaganej jakości. (Może na przykład Twoja witryna mobilna wczytuje mniejszą wersję obrazu niż komputer stacjonarny!)

7. Nadaj priorytet wydajności witryny

Szybkość strony była od dawna 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, że ponad 60% wyszukiwań internetowych korzysta z 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 kod, rozważ działania takie jak minifikacja (zwłaszcza jeśli pracujesz z motywem niestandardowym). Zrób spis wszystkich wtyczek zainstalowanych w Twojej witrynie oraz dezaktywuj i odinstaluj te, które nie są już potrzebne. Zasadniczo, im lepiej zorganizujesz elementy napędzające Twoją witrynę, tym lepiej będzie Ci się powodziło.

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 infrastruktura obsługiwana przez niezawodnych dostawców, takich jak Google Cloud Platform. Jeśli hostujesz swoją witrynę na Flywheel, jesteś ustawiony we wszystkich tych obszarach. Dodatkowo oferujemy nawet nasz dodatek Performance Insights, który pomoże Ci pójść o krok dalej w rozwiązywaniu problemów, aby upewnić się, że Twoja witryna działa najlepiej na każdym urządzeniu.

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 dla użytkowników mobilnych? Jakie aspekty Twojej 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 motywów premium (i przyjaznych dla urządzeń mobilnych!) StudioPress

Zaoszczędź trochę czasu (i pieniędzy!), hostując za pomocą Flywheel i uzyskując dostęp do motywów StudioPress i Genesis Framework. Motywy są w pełni responsywne i łatwe do dostosowania, co pozwala zaoszczędzić czas podczas tworzenia witryny przyjaznej dla urządzeń mobilnych. Dodatkowo potężna platforma Flywheel utrzyma wydajność Twojej witryny, pomagając utrzymać szybkość stron i dobrą pozycję witryny.

ZACZYNAJ

Artykuł został pierwotnie opublikowany w dniach 22-17-2017. Ostatnia aktualizacja 10-2-2020.