Twój przewodnik po responsywnym projektowaniu stron internetowych na WordPress
Opublikowany: 2022-09-29Szanse są takie, że ponad połowa ruchu w Twojej witrynie pochodzi z urządzeń mobilnych. Czy korzystasz z responsywnego projektowania stron internetowych na WordPress?
Jednym z największych błędów, jakie możesz popełnić podczas tworzenia strony internetowej, jest projektowanie i tworzenie tylko dla przeglądarek komputerowych. Rozumiemy. Wszyscy byliśmy wcześniej tego winni. Większość z nas nie tworzy stron internetowych na swoich telefonach. Budujemy je z naszej preferowanej konfiguracji, czy to na laptopie przed telewizorem, czy w biurze z dwoma gigantycznymi monitorami obok siebie.
Jednak budowanie na komputery i traktowanie urządzeń mobilnych jako refleksja zraziło większość odwiedzających Twoją witrynę. Nie prowadzisz restauracji typu fast food, w której większość twoich klientów byłaby w drive-thru i spędzała cały czas czekając na ludzi w jadalni. Ponad połowa Twoich przychodów będzie pochodzić z usług drive-thru, więc musisz zoptymalizować swoje operacje, jednocześnie obsługując klientów.
Ten post pokazuje, jak i dlaczego Twoja witryna musi działać dla ludzi na wszystkich rozmiarach ekranu. Dowiesz się również, jak najlepiej wykorzystać responsywne projektowanie stron internetowych dla witryn WordPress.
Dlaczego responsywne projektowanie stron internetowych ma kluczowe znaczenie
Znasz frustrację związaną z pracą z drobnymi przedmiotami, takimi jak próba otwarcia zapięcia naszyjnika lub zakładanie butów Barbie? Tak to wygląda dla użytkowników mobilnych, gdy Twoja witryna nie reaguje.
Gdy Twoja witryna nie dostosowuje się do rozmiaru ekranu, odwiedzający częściej napotykają trudności. Responsive design to sposób budowania stron internetowych tak, aby projekt i układ dopasowywały się do wielkości ekranów użytkowników.
Problemy z nieresponsywnymi projektami stron internetowych obejmują:
- Przyciski i elementy nawigacyjne witryny są za małe, aby je kliknąć
- Tekst jest za mały, aby go przeczytać
- Obrazy, tabele lub inne treści są zbyt szerokie dla ekranu i są ucinane
Odwiedzający witrynę internetową mogli kiedyś przeoczyć te wyzwania. Ale teraz ludzie oczekują, że Twoja witryna będzie działać bezbłędnie na ich telefonach. Jeśli Twoja witryna nie jest dostosowana do urządzeń mobilnych, użytkownicy opuszczą witrynę konkurenta, która działa na ich telefonach.
Nie tylko klienci będą Cię karać za brak optymalizacji mobilnej. Wyszukiwarki również regularnie sprawdzają witryny pod kątem przyjazności dla urządzeń mobilnych. Będą karać Twoją witrynę z niższym rankingiem wyszukiwania, jeśli nie jest zaprojektowana do pracy na małych ekranach.
Jak sprawdzić przyjazność mobilną Twojej witryny?
Google tak poważnie traktuje przyjazność dla urządzeń mobilnych, że stworzyło specjalne narzędzie, za pomocą którego możesz przetestować swoją witrynę.
Oto jak sprawdzić, czy witryna jest przyjazna dla urządzeń mobilnych:
- Przejdź do https://search.google.com/test/mobile-friendly
- Wpisz domenę swojej witryny
- Kliknij testowy adres URL
- Poczekaj na wyniki. To może potrwać kilka minut.
- Zobacz swój raport. Jeśli narzędzie znajdzie błędy, wyświetli listę, co należy naprawić, aby witryna była przyjazna dla urządzeń mobilnych.
Jak wdrożyć responsywne projektowanie stron internetowych dla WordPress
Korzystanie z responsywnego projektu strony internetowej dla witryny WordPress jest proste. Możesz wybrać responsywny motyw lub zmodyfikować istniejący motyw lub projekt, aby był responsywny.
Wybór responsywnego motywu
Jeśli wybierzesz nowoczesny motyw, który jest regularnie aktualizowany, prawdopodobnie jest to motyw responsywny. Twórcy motywów nie będą tracić czasu na tworzenie nieresponsywnych motywów. Wiedzą, że większość użytkowników WordPressa chce motywu, który działa na różnych rozmiarach ekranu.
Przeglądając motywy, nie oglądaj ich tylko na pulpicie. Użyj telefonu lub symulatora, aby zobaczyć, jak wygląda na urządzeniu mobilnym.
Modyfikowanie istniejącego motywu lub projektu
Motyw lub projekt, który nie jest responsywny, można modyfikować, dostosowując CSS motywu. Ten samouczek od W3Schools to świetne miejsce, aby dowiedzieć się, jak pisać własny CSS, aby zaimplementować responsywny projekt strony internetowej.
Jeśli korzystasz z niestandardowego kodu CSS, przeczytaj ten post , aby dowiedzieć się, jak zachować niestandardowy kod CSS podczas aktualizowania motywu .
Rozważania na temat projektowania responsywnego w WordPress
Niezależnie od tego, czy wybierzesz responsywny motyw, czy sam zakodujesz, szukaj rzeczy, które mogą sprawić, że Twoja witryna będzie nieprzyjazna dla urządzeń mobilnych.
Sprawdź swoje wtyczki
Wtyczki mogą modyfikować wygląd lub układ witryny. Gdy używasz nowej wtyczki do dodawania funkcji do swojej witryny, przetestuj je na małych ekranach. Nie pozwól, aby opcje wtyczek osłabiły responsywność Twojego motywu.
Uważaj na wyskakujące okienka
Wyskakujące okienka mogą stanowić problem na urządzeniach mobilnych. Każdy, kto szuka przepisu w Internecie, może potwierdzić problemy, które powodują. Gdy przeglądasz chaotyczną historię niezwiązaną z przepisem, wyskakujące okienko zachęca do subskrypcji biuletynu lub pobrania książki kucharskiej. Problem polega na tym, że wyskakujące okienko jest większe niż ekran telefonu komórkowego i nie widać opcji zamknięcia. Nie bądź taką osobą. Wyłącz duże wyskakujące okienka na mniejszych ekranach, aby zachować przyjazność dla urządzeń mobilnych.
Uważaj na długości menu
Wiele motywów jest domyślnie responsywnych, ale nie oznacza to, że wszystkie projekty na komputery można łatwo przełożyć na responsywne witryny mobilne. Menu nawigacyjne mogą powodować wiele problemów. Jeśli Twoje menu jest niewiarygodnie długie i ma wiele poziomów, korzystanie z rozwijanego menu mobilnego może być kłopotliwe. Rozważ użycie odchudzonej wersji nawigacji dla urządzeń mobilnych.
Jak jakość hosta wpływa na przyjazność dla urządzeń mobilnych
Oprócz responsywnego projektowania stron internetowych, szybkość witryny odgrywa ważną rolę w tym, co użytkownicy mobilni myślą o Twojej witrynie. Przeglądarki mobilne, które nie są połączone z Wi-Fi, często radzą sobie ze znacznie wolniejszymi połączeniami internetowymi. Wolno ładująca się strona z wolnym połączeniem internetowym to recepta na katastrofę.
Niewiele możesz zrobić, aby naprawić wolne połączenia internetowe i słaby zasięg sieci komórkowej, ale możesz zadbać o to, by Twoja witryna działała tak szybko, jak to możliwe. Szybkość ładowania witryny zależy w dużej mierze od jakości usługodawcy hostingowego. W Pressable nasze serwery zostały zbudowane przez tych samych geniuszy, którzy stoją za WordPress.com, WordPress VIP i WooCommerce. Znamy WordPressa od podszewki i zbudowaliśmy najlepsze i najszybsze serwery dla witryn WordPress .
Zarejestruj się już dziś i zacznij doświadczać różnicy Pressable.
