Nie ma nic gorszego niż świetnie wyglądająca witryna na komputery stacjonarne i witryna mobilna, która nie działa poprawnie.

Większość poprawek projektowych jest prosta, ale wymaga uwagi, jeśli chcesz, aby odwiedzający pozostali w Twojej witrynie podczas przeglądania na urządzeniu mobilnym.

W tym artykule przedstawimy siedem problemów z witryną przyjazną dla urządzeń mobilnych i ich rozwiązania.

• Wprowadzone zmiany nie są^(Are) wyświetlane na urządzeniu mobilnym^(Mobile)
• Nieprzyjazna nawigacja
• Responsywny układ^{(Responsive Layout)} nagle przestaje działać
• Ładowanie obrazów trwa zbyt długo
• Najważniejsza treść nie jest oczywista
• Za dużo informacji
• Dane dla małych ekranów

Nie wyświetlają się aktualizacje witryny przyjaznej dla urządzeń mobilnych^{(Mobile Friendly Website Updates Not Showing Up)}

Właśnie spędziłeś dużo czasu na aktualizowaniu swojej witryny. Świetnie wyglądają na komputerze, ale nie wyświetlają się na urządzeniu mobilnym.

Jednym z najczęstszych powodów jest buforowanie. Twoja przeglądarka mobilna może wyświetlać pobraną wcześniej starą wersję witryny. Innym powodem może być to, że witryna przechowuje starą wersję strony i nie wyświetla zmian.

Jeśli to jest problem, musisz wyczyścić pamięć podręczną, aby pobrać poprawioną wersję. W rozwiązaniu tego problemu może pomóc wtyczka buforująca, taka jak WP Super Cache , W3 Total Cache lub WP Fastest Cache .

Poniżej znajdują się cztery kroki, które pomogą Ci wyczyścić pamięć podręczną witryny i przeglądarkę, aby umożliwić wyświetlanie nowej wersji w witrynie dostosowanej do komórek.

1. Odśwież kilka razy przeglądarkę na komputerze stacjonarnym i urządzeniu mobilnym.
2. Przetestuj swoją witrynę na różnych urządzeniach mobilnych.
3. Wyczyść swoją witrynę za pomocą wtyczki buforującej.
4. Skontaktuj się z firmą hostingową, aby sprawdzić, czy na serwerze jest inny system buforowania, który wymaga wyczyszczenia.

Nieprzyjazna nawigacja^{(Unfriendly Navigation)}

Stworzenie menu nawigacyjnego, które działa dobrze na urządzeniach mobilnych, może być trudne. Jeśli nawigacja w Twojej witrynie zawiera wiele elementów i podmenu, jeszcze trudniej jest zmieścić wszystko na mniejszym ekranie.

Na przykład, jeśli masz tylko trzy lub cztery elementy w nawigacji w witrynie, powinno to wyglądać dobrze na telefonie komórkowym. Jeśli jednak masz więcej elementów i podmenu, będą one układać się jeden na drugim i będą wyglądać na zatłoczone.

Poniżej^(Below) znajduje się kilka sposobów rozwiązania tego problemu w przypadku witryny przyjaznej dla urządzeń mobilnych:

• Zmień swoją nawigację w rozwijane menu dla urządzeń mobilnych.
• Wyświetlaj menu nawigacyjne jako elementy blokowe, aby były wyświetlane pionowo.
• Użyj ikony menu, którą można przełączać, aby zajmowała mniej miejsca.
• Utwórz mobilne menu nawigacyjne za pomocą jQuery.
• Użyj menu Hamburger (wiele motywów zawiera to jako opcję lub możesz użyć wtyczki^{( use a plugin)} .)

Responsywny układ nagle przestaje działać^{(Responsive Layout Stops Working Suddenly)}

Jeśli Twoja witryna dostosowana do komórek nagle przestanie działać, może to być spowodowane wtyczką w Twojej witrynie.

Zainstalowanie nowej wtyczki lub aktualizacja istniejącej wtyczki może powodować konflikt z innymi, co wpływa na układ responsywny.

Zacznij od dezaktywacji każdej wtyczki pojedynczo, aby sprawdzić, czy to jest przyczyną. Nie dezaktywuj ich wszystkich na raz, bo nie będziesz wiedział, która wtyczka może być winowajcą.

^(Code)Inną możliwą przyczyną są zmiany w kodzie . Jeśli przypadkowo lub celowo zmodyfikowałeś jakikolwiek kod, przywróć oryginalną bazę kodu i sprawdź, czy Twoja responsywna witryna znów zacznie działać.

Sprawdzając swoją witrynę pod kątem responsywności na urządzeniach mobilnych, należy zawsze przetestować ją na urządzeniu mobilnym. 

Czasami wydaje się, że działa podczas zmiany rozmiaru okna przeglądarki na komputerze, ale nie wyświetla się poprawnie na telefonie komórkowym.

Brak jednego wiersza kodu w pliku nagłówka HTML może spowodować uszkodzenie responsywnego projektu. Ta jedna linijka brakującego kodu spowoduje, że Twoje urządzenie mobilne uzna, że ​​witryna, którą przeglądasz, jest pełnowymiarową witryną.

Wyrenderowana witryna będzie miała rozmiar widoku (rozmiar obszaru strony internetowej, który jest widoczny dla użytkownika).

Aby naprawić witrynę przyjazną dla urządzeń mobilnych, dodaj następujący wiersz kodu do sekcji nagłówka:

<meta name=”viewport” content=”width=device-width”>

Czasami, gdy motyw jest aktualizowany, ten kod może zniknąć.

Ładowanie obrazów trwa zbyt długo^{(Images Are Taking Too Long to Load)}

Optymalizacja obrazów i zmniejszanie rozmiaru pliku obrazu^{(reducing image file size)} ma sens. Duże obrazy, które nie są zoptymalizowane, mogą spowolnić ładowanie stron internetowych. Może to być frustrujące dla użytkowników mobilnych.

WordPress w wersji 4.4 i nowszych automatycznie wyświetla najmniejszą wersję obrazu na twoim serwerze.

Jeśli korzystasz już z najnowszej wersji WordPressa^(WordPress) , ale Twoja witryna nadal nie ładuje się wystarczająco szybko, możesz:

• Zainstaluj wtyczkę, taką jak Smush Image Optimization, Compression i Lazy Load,^{( Smush Image Optimization, Compression, and Lazy Load)} aby zmienić rozmiar i zoptymalizować swoje obrazy
• Przed przesłaniem obrazów do witryny użyj narzędzia do kompresji i optymalizacji, takiego jak TinyPNG , Compress JPEG lub Online Image Optimizer .

Najważniejsza treść nie jest oczywista^{(Most Important Content Isn’t Obvious)}

Niektóre strony internetowe są ładowane z dużą ilością niepotrzebnej zawartości, aby wypełnić pustą przestrzeń po otwarciu na pulpicie.

Strony internetowe opracowane bez świadomości użytkowników mobilnych zazwyczaj należą do tej kategorii. Wczytywanie tych witryn zajmuje więcej czasu i przepustowości.

Jeśli strony nie są odpowiednio zaprojektowane dla urządzeń mobilnych, część treści może nie pojawiać się na urządzeniach mobilnych bez częstego przewijania.

W większości przypadków element na Twojej stronie będzie wyglądał w ten sam sposób na komputerze, a zupełnie inaczej na urządzeniu mobilnym.

Na przykład strona z cenami z trzema kolumnami pokaże je obok siebie na komputerze.

Jednak na urządzeniu mobilnym kolumny są ułożone jedna na drugiej, ponieważ rozmiar ekranu jest mniejszy. Tego zachowania należy się spodziewać.

Upewnij^(Make) się, że tabela cen znajduje się na najwyższej pozycji na Twojej stronie internetowej, aby pojawiła się jako pierwsza podczas przeglądania na urządzeniach mobilnych. Jeśli masz dużo tekstu nad stołem, użytkownicy mobilni będą musieli przewinąć w dół, aby go zobaczyć, a może nie.

Aby uzyskać najbardziej optymalne wrażenia użytkownika mobilnego, umieść najbardziej krytyczne fragmenty treści u góry strony. Jeśli użytkownik musi dużo przewijać, zanim będzie mógł wyświetlić Twoje treści, prawdopodobnie tego nie zrobi.

Za dużo informacji^{(Too Much Information)}

Witryny ze skomplikowanymi elementami interfejsu użytkownika, takimi jak tabele, wieloetapowe formularze i zaawansowane funkcje wyszukiwania, mogą powodować słabsze wrażenia użytkownika mobilnego.

Elementy te zawierają zbyt dużo informacji, które mogą zapełnić ekran telefonu komórkowego i przeszkadzać użytkownikowi w znalezieniu potrzebnych informacji.

Jednym ze sposobów jest usunięcie lub ukrycie niektórych treści przed użytkownikami mobilnymi. Nie jest to jednak idealne rozwiązanie dla zwiedzających, którzy chcą mieć dostęp do tych elementów.

Aby uniknąć tego problemu, zoptymalizuj swoją witrynę dostosowaną do komórek tak bardzo, jak to możliwe. Usuń również wszelkie niepotrzebne elementy, koncentrując się na podstawowej strukturze swojej witryny.

Dane dla małych ekranów^{(Data For Small Screens)}

Złożone tabele z wieloma wierszami i kolumnami mogą stanowić problem podczas przeglądania na małych ekranach mobilnych. Najlepszym rozwiązaniem jest użycie responsywnych tabel.

Wtyczka, taka jak WP Responsive Table , może to ułatwić.

Podobnie jak w przypadku powyższej tabeli cen, podczas przeglądania na urządzeniu mobilnym kolumny zostaną ułożone w stos, aby zmieściły się na mniejszym ekranie.

Inne sposoby wyświetlania danych na urządzeniach mobilnych obejmują:

• Tworzenie mniejszej tabeli bez układu siatki, aby uniknąć konieczności przewijania w poziomie.
• Odwracanie stołu na bok, aby lepiej zmieścił się na mniejszym ekranie.
• Zastąpienie większych tabel mniejszymi, które prowadzą do pełnej wersji.
• Konwersja tabel na wykresy kołowe.

Ponieważ korzystanie z urządzeń mobilnych rośnie wykładniczo, konieczne jest zoptymalizowanie witryn biznesowych za pomocą wersji przyjaznych dla urządzeń mobilnych. Popraw^(Enhance) wygodę użytkownika bez poświęcania funkcjonalności, wykonując powyższe kroki.

Powinieneś również zawsze monitorować wydajność swojej witryny i wprowadzać poprawki, gdy jest to konieczne, aby poprawić wydajność i wygodę użytkownika.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking dеsktоp website and a mоbile site that doesn’t wоrk correctly.

Most design fixes are simple but do require attention if you want visitors to stay on your site while browsing on a mobile device.

This article will highlight seven mobile friendly website issues and fixes for them.

• Changes Made Are Not Showing on Mobile
• Unfriendly Navigation
• Responsive Layout Stops Working Suddenly
• Images Are Taking Too Long to Load
• Most Important Content Isn’t Obvious
• Too Much Information
• Data for Small Screens

Mobile Friendly Website Updates Not Showing Up

You have just spent a lot of time making updates to your website. They look great on your desktop but don’t show up on your mobile device.

One of the most common reasons is caching. Your mobile browser could be showing an old version of your site which you previously downloaded. Another reason can be that your website is holding onto the old version of your page and not showing your changes.

If this is the problem, you will need to clear the cache to download the revised version. A caching plugin such as WP Super Cache, W3 Total Cache, or WP Fastest Cache can help solve this problem.

Below are four steps to help you flush your website cache and browser to enable the new version to show on your mobile friendly site.

1. Refresh your browser several times on your desktop and mobile device.
2. Test your website on different mobile devices.
3. Clear your site with a caching plugin.
4. Check with your hosting company to see if there is another caching system on your server that needs to be cleared.

Unfriendly Navigation

It can be challenging to create a navigation menu that works well on mobile devices. If your website navigation has many items and submenus, it is even more tricky to squeeze everything on a smaller screen.

For example, if you only have three or four items in your website navigation, it should look fine on mobile. However, if you have more items and submenus, they will stack up on top of each other and look crowded.

Below are a few ways to fix this problem for a mobile friendly website:

• Turn your navigation into a dropdown menu for mobile devices.
• Display your navigation menu as block elements, so they appear vertically.
• Use a menu icon that can be toggled to take up less space.
• Create a mobile navigation menu using jQuery.
• Use the Hamburger menu (Many themes include this as an option or you can use a plugin.)

Responsive Layout Stops Working Suddenly

If your mobile friendly site suddenly stops working, it could be due to a plugin on your site.

Installing a new plugin or an update to an existing plugin could be causing a conflict with others that affects your responsive layout.

Start by deactivating each plugin one at a time to see if it is the cause. Don’t deactivate them all at once or you won’t know which plugin could be the culprit.

Code changes are another possible cause. If you have modified any code accidentally or intentionally, restore the original codebase and see if your responsive website starts working again.

When checking your site for mobile responsiveness, you should always test it on a mobile device. 

Sometimes it appears to work when resizing the browser window on your desktop but doesn’t display correctly on mobile.

If one line of code is missing from an HTML header file, it can break the responsive design. This single line of missing code will cause your mobile device to assume the site you are viewing is a full-sized website.

The site rendered will be the size of the viewport (the size of the area of the web page that is visible to the user).

To fix your mobile friendly site, add the following line of code to the header section:

<meta name=”viewport” content=”width=device-width”>

Sometimes when a theme is updated, this code can disappear.

Images Are Taking Too Long to Load

Optimizing images and reducing image file size makes sense. Large images that are not optimized can slow down the loading speed of your webpages. This can be frustrating to mobile users.

WordPress version 4.4 and above automatically serves up the smallest version of an image on your server.

If you are already running the latest version of WordPress, but your site is still not loading fast enough, you can:

• Install a plugin such as Smush Image Optimization, Compression, and Lazy Load to resize and optimize your images
• Use a compression and optimization tool before uploading images to your site such as TinyPNG, Compress JPEG, or Online Image Optimizer.

Most Important Content Isn’t Obvious

Some websites are loaded with a lot of unnecessary content to fill the empty space when opened on a desktop.

Websites developed without being conscious of mobile users generally fall under this category. These sites take more time and bandwidth to load.

If the pages aren’t designed appropriately for mobile devices, then part of the content may not appear on mobile without a lot of scrolling.

Most of the time, an element on your webpage will look one way on a computer and completely different on a mobile device.

For example, a pricing page with three columns will show them side by side on a computer.

However, on a mobile device, the columns are stacked on top of each other because the screen size is smaller. This behavior is to be expected.

Make sure your pricing table is in a top position on your webpage so that it will appear first when viewed on mobile. If you have a lot of text over your table, mobile users will have to scroll down to see it and might not.

For the most optimal mobile user experience, put the most critical pieces of content towards the top of the page. If a user needs to scroll a lot before they can view your content, they probably won’t.

Too Much Information

Sites with complicated user-interface elements such as tables, multi-step forms, and advanced search features can produce a poor mobile user experience.

These elements contain too much information that can crowd a mobile screen and interfere with a user finding the information they want.

One approach is to remove or hide some content from mobile users. However, this is not an ideal solution for visitors who want to have access to these elements.

To avoid this problem, optimize your mobile friendly site as much as possible. Also, remove any unnecessary elements while focusing on the core structure of your website.

Data For Small Screens

Complex tables with many rows and columns can be a problem when viewed on small mobile screens. The best fix is to use responsive tables.

A plugin such as WP Responsive Table can make this easy to accomplish.

As with the pricing table above, when viewed on a mobile device, the columns will be stacked to fit the smaller screen.

Other ways to show data on mobile devices include:

• Creating a smaller table without the grid layout to avoid the need for horizontal scrolling.
• Flipping a table on its side to fit better on a smaller screen.
• Replacing larger tables with smaller ones that link to the full version.
• Converting tables into pie charts.

As mobile usage is growing exponentially, it is imperative that business websites are optimized with mobile friendly versions. Enhance user experience without sacrificing functionality by following the steps above.

You should also always monitor your site’s performance and make tweaks when necessary to improve performance and user experience.

Related posts

• Jak założyć własną witrynę podobną do Twittera za pomocą motywu WordPress P2?

• 10 niezbędnych wtyczek WordPress dla witryny dla małych firm

• Jak sprawić, by witryna WordPress była bezpieczna?

• Recenzja książki: Zbuduj własną stronę internetową: komiksowy przewodnik po HTML, CSS i Wordpress

• Wix vs WordPress: który jest najlepszy do stworzenia Twojej witryny?

• 19 najlepszych porad dotyczących aplikacji mobilnych Outlook na Androida i iOS

• Jak zainstalować WordPress na Google Cloud Platform

• Jak uruchomić niesamowicie szybki WordPress na Microsoft Azure

• Jak odwołać dostęp do stron internetowych osób trzecich na Facebooku, Twitterze i Google?

• Jak zobaczyć wszystkich w Zoom (na komputerze i urządzeniu mobilnym)

• 7 technicznych wskazówek dotyczących optymalizacji SEO dla dowolnej witryny internetowej

• Jak skonfigurować prywatność w WordPressie i dlaczego jest to ważne

• Monitoruj ukrytą stronę internetową i połączenia internetowe

• Jak tworzyć kanały telegramu na urządzeniach mobilnych i w Internecie?

• Zmień głos szybkiego czatu w PUBG Mobile

• Jak usunąć powiadomienia z Facebooka na urządzeniach mobilnych i komputerach stacjonarnych?

• Jak podłączyć laptopa z systemem Windows do mobilnego punktu dostępu?

• Jak zrobić zrzut ekranu w serwisie Netflix (komputer stacjonarny i mobilny)

• Jak korzystać z torrentów na urządzeniach mobilnych Apple

• Jak otrzymywać powiadomienia z Twittera w Internecie i na urządzeniach mobilnych?