Няма нищо по-лошо от това да имате страхотно изглеждащ настолен уебсайт и мобилен сайт, който не работи правилно.

Повечето поправки в дизайна са прости, но изискват внимание, ако искате посетителите да останат на сайта ви, докато сърфират от мобилно устройство.

Тази статия ще подчертае седем проблема с уебсайт, удобен за мобилни устройства, и поправките за тях.

• Направените промени не се^(Are) показват на мобилни устройства^(Mobile)
• Недружелюбна навигация
• Отзивчивото оформление^{(Responsive Layout)} спира да работи внезапно
• Изображенията се зареждат твърде дълго
• Най-важното съдържание не е очевидно
• Твърде много информация
• Данни за малки екрани

Актуализациите на уебсайта, подходящи за мобилни устройства, не се показват^{(Mobile Friendly Website Updates Not Showing Up)}

Току-що сте прекарали много време в актуализиране на уебсайта си. Те изглеждат страхотно на вашия работен плот, но не се показват на вашето мобилно устройство.

Една от най-честите причини е кеширането. Вашият мобилен браузър може да показва стара версия на сайта ви, която сте изтеглили преди това. Друга причина може да бъде, че уебсайтът ви държи старата версия на страницата ви и не показва промените ви.

Ако това е проблемът, ще трябва да изчистите кеша, за да изтеглите ревизираната версия. Плъгин за кеширане като WP Super Cache , W3 Total Cache или WP Fastest Cache може да помогне за решаването на този проблем.

По-долу са дадени четири стъпки, които да ви помогнат да изчистите кеша и браузъра на вашия уебсайт, за да активирате новата версия да се показва на вашия сайт, удобен за мобилни устройства.

1. Обновете браузъра си няколко пъти на вашия настолен компютър и мобилно устройство.
2. Тествайте уебсайта си на различни мобилни устройства.
3. Изчистете сайта си с плъгин за кеширане.
4. Консултирайте се с вашата хостинг компания, за да видите дали има друга система за кеширане на вашия сървър, която трябва да бъде изчистена.

Недружелюбна навигация^{(Unfriendly Navigation)}

Може да бъде предизвикателство да създадете меню за навигация, което работи добре на мобилни устройства. Ако навигацията на вашия уебсайт има много елементи и подменюта, е още по-трудно да стиснете всичко на по-малък екран.

Например, ако имате само три или четири елемента в навигацията на уебсайта си, трябва да изглежда добре на мобилни устройства. Въпреки това, ако имате повече елементи и подменюта, те ще се нареждат един върху друг и ще изглеждат претъпкани.

По-долу^(Below) са дадени няколко начина за отстраняване на този проблем за уебсайт, удобен за мобилни устройства:

• Превърнете навигацията си в падащо меню за мобилни устройства.
• Покажете вашето навигационно меню като блокови елементи, така че да се показват вертикално.
• Използвайте икона на менюто, която може да се превключва, за да заема по-малко място.
• Създайте мобилно навигационно меню с помощта на jQuery.
• Използвайте менюто Хамбургер^(Hamburger) (много теми включват това като опция или можете да използвате плъгин^{( use a plugin)} .)

Отзивчивото оформление спира да работи внезапно^{(Responsive Layout Stops Working Suddenly)}

Ако вашият удобен за мобилни устройства сайт изведнъж спре да работи, това може да се дължи на плъгин на вашия сайт.

Инсталирането на нов плъгин или актуализация на съществуващ плъгин може да причини конфликт с други, което засяга вашето адаптивно оформление.

Започнете, като деактивирате всеки плъгин един по един, за да видите дали това е причината. Не ги деактивирайте всички наведнъж или няма да знаете кой плъгин може да е виновникът.

Промените в кода^(Code) са друга възможна причина. Ако сте променили код случайно или умишлено, възстановете оригиналната кодова база и вижте дали вашият отзивчив уебсайт започва да работи отново.

Когато проверявате сайта си за мобилна реакция, винаги трябва да го тествате на мобилно устройство. 

Понякога изглежда, че работи при преоразмеряване на прозореца на браузъра на вашия работен плот, но не се показва правилно на мобилно устройство.

Ако един ред код липсва от HTML заглавен файл, това може да наруши адаптивния дизайн. Този единствен ред от липсващ код ще накара мобилното ви устройство да приеме, че сайтът, който разглеждате, е уебсайт с пълен размер.

Изобразеният сайт ще бъде с размера на изгледа (размерът на областта на уеб страницата, която е видима за потребителя).

За да коригирате вашия сайт, удобен за мобилни устройства, добавете следния ред код към заглавната секция:

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

Понякога, когато темата се актуализира, този код може да изчезне.

Изображенията се зареждат твърде дълго^{(Images Are Taking Too Long to Load)}

Оптимизирането на изображения и намаляването на размера на файла с изображения^{(reducing image file size)} има смисъл. Големите изображения, които не са оптимизирани, могат да забавят скоростта на зареждане на вашите уеб страници. Това може да бъде разочароващо за мобилните потребители.

WordPress версия 4.4 и по-нова автоматично обслужва най-малката версия на изображение на вашия сървър.

Ако вече използвате най-новата версия на WordPress , но сайтът ви все още не се зарежда достатъчно бързо, можете:

• Инсталирайте плъгин като Smush Image Optimization, Compression и Lazy Load,^{( Smush Image Optimization, Compression, and Lazy Load)} за да преоразмерите и оптимизирате вашите изображения
• Използвайте инструмент за компресиране и оптимизиране, преди да качите изображения на вашия сайт, като TinyPNG , Compress JPEG или Online Image Optimizer .

Най-важното съдържание не е очевидно^{(Most Important Content Isn’t Obvious)}

Някои уебсайтове са заредени с много ненужно съдържание, за да запълнят празното пространство при отваряне на работния плот.

Уебсайтовете, разработени без да са наясно с мобилните потребители, обикновено попадат в тази категория. Зареждането на тези сайтове отнема повече време и честотна лента.

Ако страниците не са проектирани подходящо за мобилни устройства, тогава част от съдържанието може да не се появи на мобилни устройства без много превъртане.

През повечето време елемент на вашата уеб страница ще изглежда еднопосочно на компютър и напълно различно на мобилно устройство.

Например страница с цени с три колони ще ги показва една до друга на компютър.

Въпреки това, на мобилно устройство колоните са подредени една върху друга, тъй като размерът на екрана е по-малък. Това поведение е очаквано.

Уверете^(Make) се, че таблицата ви с цените е на челна позиция на вашата уеб страница, така че да се показва първа, когато се гледа на мобилно устройство. Ако имате много текст над таблицата си, мобилните потребители ще трябва да превъртят надолу, за да го видят, а може и да не.

За най-оптималното мобилно потребителско изживяване поставете най-критичните части от съдържанието в горната част на страницата. Ако потребителят трябва да превърта много, преди да може да види съдържанието ви, вероятно няма да го направи.

Твърде много информация^{(Too Much Information)}

Сайтове със сложни елементи на потребителския интерфейс, като таблици, многоетапни формуляри и разширени функции за търсене, могат да доведат до лошо изживяване на мобилния потребител.

Тези елементи съдържат твърде много информация, която може да претрупва мобилен екран и да попречи на потребителя да намери информацията, която иска.

Един подход е да премахнете или скриете някакво съдържание от мобилни потребители. Това обаче не е идеално решение за посетители, които искат да имат достъп до тези елементи.

За да избегнете този проблем, оптимизирайте вашия сайт, удобен за мобилни устройства, доколкото е възможно. Също така премахнете всички ненужни елементи, като се фокусирате върху основната структура на вашия уебсайт.

Данни за малки екрани^{(Data For Small Screens)}

Сложните таблици с много редове и колони могат да бъдат проблем, когато се гледат на малки мобилни екрани. Най-доброто решение е да използвате адаптивни таблици.

Плъгин като WP Responsive Table може да направи това лесно за постигане.

Както при таблицата с цените по-горе, когато се гледа на мобилно устройство, колоните ще бъдат подредени, за да паснат на по-малкия екран.

Други начини за показване на данни на мобилни устройства включват:

• Създаване на по-малка таблица без оформлението на мрежата, за да се избегне необходимостта от хоризонтално превъртане.
• Обръщане на маса отстрани, за да пасне по-добре на по-малък екран.
• Замяна на по-големи таблици с по-малки, които се свързват с пълната версия.
• Преобразуване на таблици в кръгови диаграми.

Тъй като използването на мобилни устройства нараства експоненциално, е наложително бизнес уебсайтовете да бъдат оптимизирани с версии, удобни за мобилни устройства. Подобрете^(Enhance) потребителското изживяване, без да жертвате функционалността, като следвате стъпките по-горе.

Вие също трябва винаги да наблюдавате ефективността на сайта си и да правите промени, когато е необходимо, за да подобрите производителността и потребителското изживяване.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking desktop website and a mobile site that doesn’t work 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

• Как да настроите свой собствен уебсайт, подобен на Twitter, като използвате тема P2 на WordPress

• 10 основни приставки за WordPress за уебсайт за малък бизнес

• Как да направим WordPress сайт сигурен

• Рецензия на книга: Създайте свой собствен уебсайт: Комикс ръководство за HTML, CSS и Wordpress

• Wix срещу WordPress: Кое е най-доброто за създаване на вашия уебсайт?

• Променете гласа за бърз чат на PUBG Mobile

• Как да видите всички в Zoom (на настолен компютър и мобилно устройство)

• 8 безплатни премиум теми за WordPress за инсталиране

• Списък на таблети и мобилни процесори

• Как да предавате на Roku TV от компютър или мобилен телефон

• Топ 10 места за намиране на безплатни HD изображения и видеоклипове за вашия уебсайт

• Как да наблюдавате кога даден уебсайт се актуализира

• Как да промените паролата в Netflix (мобилен и настолен)

• Как да изчистите опашката в Spotify на настолен и мобилен телефон

• Как да защитите с парола страници на вашия WordPress уебсайт

• Как да свържете вашия лаптоп с Windows към мобилна гореща точка

• 10 Gboard съвета и трика за подобряване на писането от мобилни устройства

• Използвайте новата функция на Excel Mobile „Вмъкване на данни от картина“.

• Как да преместите WordPress сайт от един хост на друг

• Как да активирате тъмен режим в Microsoft Outlook (Windows, Mac и Mobile)