Нема ништа горе од тога да имате веб локацију за десктоп рачунаре која изгледа одлично и веб локацију за мобилне уређаје која не ради исправно.

Већина исправки дизајна су једноставне, али захтевају пажњу ако желите да посетиоци остану на вашој веб локацији док прегледавају на мобилном уређају.

Овај чланак ће истаћи седам проблема са веб локацијама прилагођеним мобилним уређајима и исправке за њих.

• Направљене промене се^(Are) не приказују на мобилном уређају^(Mobile)
• Непријатељска навигација
• Одговарајући распоред^{(Responsive Layout)} изненада престаје да ради
• Учитавање слика траје предуго
• Најважнији садржај није очигледан
• Превише информација
• Подаци за мале екране

Ажурирања веб локације прилагођене мобилним уређајима се не појављују^{(Mobile Friendly Website Updates Not Showing Up)}

Управо сте потрошили доста времена на ажурирање своје веб локације. Изгледају сјајно на вашој радној површини, али се не појављују на вашем мобилном уређају.

Један од најчешћих разлога је кеширање. Ваш мобилни претраживач можда приказује стару верзију вашег сајта коју сте претходно преузели. Други разлог може бити тај што ваша веб локација држи стару верзију ваше странице и не приказује ваше промене.

Ако је ово проблем, мораћете да обришете кеш меморију да бисте преузели ревидирану верзију. Додатак за кеширање као што је ВП Супер Цацхе^{(WP Super Cache)} , В3 Тотал Цацхе^{(W3 Total Cache)} или ВП Фастест Цацхе^{(WP Fastest Cache)} може помоћи у решавању овог проблема.

Испод су четири корака који ће вам помоћи да испразните кеш веб-сајта и прегледач да бисте омогућили да се нова верзија приказује на вашем сајту прилагођеном мобилним уређајима.

1. Освежите прегледач неколико пута на десктопу и мобилном уређају.
2. Тестирајте своју веб локацију на различитим мобилним уређајима.
3. Обришите своју веб локацију помоћу додатка за кеширање.
4. Проверите код своје хостинг компаније да ли постоји још један систем за кеширање на вашем серверу који треба да се обрише.

Непријатељска навигација^{(Unfriendly Navigation)}

Може бити изазовно направити мени за навигацију који добро функционише на мобилним уређајима. Ако навигација на вашој веб локацији има много ставки и подменија, још је теже стиснути све на мањем екрану.

На пример, ако имате само три или четири ставке у навигацији веб локације, требало би да изгледа добро на мобилном уређају. Међутим, ако имате више ставки и подменија, они ће се наслагати један на други и изгледати претрпано.

У наставку^(Below) је наведено неколико начина да решите овај проблем за веб локацију прилагођену мобилним уређајима:

• Претворите своју навигацију у падајући мени за мобилне уређаје.
• Прикажите свој навигациони мени као блок елементе, тако да се појављују вертикално.
• Користите икону менија која се може пребацити да заузме мање простора.
• Креирајте мобилни навигациони мени користећи јКуери.
• Користите мени Хамбургер^(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, 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 nоthing 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

• Како да подесите сопствену веб локацију налик на Твиттер користећи ВордПресс П2 тему

• 10 основних ВордПресс додатака за веб локацију за мала предузећа

• Како да учините ВордПресс сајт безбедним

• Рецензија књиге: Направите сопствену веб локацију: Стрип водич за ХТМЛ, ЦСС и Вордпресс

• Вик вс ВордПресс: Шта је најбоље за креирање ваше веб странице?

• Листа процесора за таблете и мобилне уређаје

• 8 бесплатних Премиум ВордПресс тема за инсталирање

• Како да повежете свој Виндовс лаптоп са мобилном приступном тачком

• Како очистити ред у Спотифи-у на десктопу и мобилном уређају

• Како направити снимак екрана на Нетфлик-у (Десктоп и мобилни)

• Како инсталирати ВордПресс на Гоогле Цлоуд Платформу

• Заштитите и заштитите ВордПресс веб локацију од хакера

• Како покренути невероватно брз ВордПресс на Мицрософт Азуре

• 7 доказаних начина за повећање промета на веб-сајту

• Приступите мобилним веб локацијама помоћу прегледача за рачунаре (ПЦ)

• 8 корака да будете усклађени са ГДПР-ом на својој веб локацији

• Брзо направите личну веб локацију користећи Гоогле сајтове

• Како инсталирати и подесити ВордПресс на Мицрософт Азуре

• Како додати Дисцорд виџет на своју веб локацију

• Савети за куповину обновљених мобилних телефона и лаптопа