Nie je nič horšie ako mať skvelo vyzerajúcu webovú stránku pre počítače a mobilnú stránku, ktorá nefunguje správne.

Väčšina opráv dizajnu je jednoduchá, ale vyžadujú si pozornosť, ak chcete, aby návštevníci zostali na vašom webe počas prehliadania na mobilnom zariadení.

Tento článok poukáže na sedem problémov s webovými stránkami prispôsobenými pre mobilné zariadenia a ich opravy.

• Vykonané zmeny sa^(Are) nezobrazujú na mobile
• Nepriateľská navigácia
• Responzívne rozloženie^{(Responsive Layout)} zrazu prestane fungovať
• Načítanie obrázkov trvá príliš dlho
• Najdôležitejší obsah nie je zrejmý
• Príliš veľa informácií
• Údaje pre malé obrazovky

Aktualizácie webových stránok vhodných pre mobilné zariadenia sa nezobrazujú^{(Mobile Friendly Website Updates Not Showing Up)}

Práve ste strávili veľa času aktualizáciou svojich webových stránok. Vyzerajú skvele na vašom počítači, ale nezobrazujú sa na vašom mobilnom zariadení.

Jedným z najbežnejších dôvodov je ukladanie do vyrovnávacej pamäte. Váš mobilný prehliadač môže zobrazovať starú verziu vašej lokality, ktorú ste si predtým stiahli. Ďalším dôvodom môže byť, že váš web drží starú verziu vašej stránky a nezobrazuje vaše zmeny.

Ak je to problém, budete musieť vymazať vyrovnávaciu pamäť, aby ste si mohli stiahnuť revidovanú verziu. Tento problém môže pomôcť vyriešiť doplnok ukladania do vyrovnávacej pamäte, ako napríklad WP Super Cache , W3 Total Cache alebo WP Fastest Cache .

Nižšie sú uvedené štyri kroky, ktoré vám pomôžu vyčistiť vyrovnávaciu pamäť a prehliadač vašej webovej lokality, aby sa nová verzia zobrazovala na vašej lokalite vhodnej pre mobilné zariadenia.

1. Niekoľkokrát obnovte svoj prehliadač na počítači a mobilnom zariadení.
2. Otestujte svoj web na rôznych mobilných zariadeniach.
3. Vyčistite svoj web pomocou doplnku pre ukladanie do vyrovnávacej pamäte.
4. Overte si u svojej hostiteľskej spoločnosti, či na vašom serveri nie je iný systém vyrovnávacej pamäte, ktorý je potrebné vyčistiť.

Nepriateľská navigácia^{(Unfriendly Navigation)}

Môže byť náročné vytvoriť navigačnú ponuku, ktorá dobre funguje na mobilných zariadeniach. Ak má navigácia na vašom webe veľa položiek a podmenu, je ešte zložitejšie všetko vtesnať na menšiu obrazovku.

Ak máte napríklad v navigácii na webe iba tri alebo štyri položky, na mobile by to malo vyzerať dobre. Ak však máte viac položiek a podmenu, naukladajú sa na seba a vyzerajú preplnené.

Nižšie uvádzame^(Below) niekoľko spôsobov, ako vyriešiť tento problém pre webové stránky vhodné pre mobilné zariadenia:

• Premeňte svoju navigáciu na rozbaľovaciu ponuku pre mobilné zariadenia.
• Zobrazte navigačnú ponuku ako prvky bloku, takže sa zobrazujú vertikálne.
• Použite ikonu ponuky, ktorú možno prepínať, aby zaberala menej miesta.
• Vytvorte mobilnú navigačnú ponuku pomocou jQuery.
• Použite ponuku Hamburger (Mnoho tém to zahŕňa ako možnosť alebo môžete použiť doplnok^{( use a plugin)} .)

Responzívne rozloženie zrazu prestane fungovať^{(Responsive Layout Stops Working Suddenly)}

Ak váš web vhodný pre mobilné zariadenia náhle prestane fungovať, môže to byť spôsobené doplnkom na vašom webe.

Inštalácia nového doplnku alebo aktualizácia existujúceho doplnku môže spôsobiť konflikt s ostatnými, čo ovplyvňuje vaše responzívne rozloženie.

Začnite tým, že deaktivujete každý doplnok jeden po druhom, aby ste zistili, či je to príčina. Nedeaktivujte ich všetky naraz, inak nebudete vedieť, ktorý plugin môže byť vinníkom.

^(Code)Ďalšou možnou príčinou sú zmeny kódu . Ak ste nejaký kód upravili náhodne alebo úmyselne, obnovte pôvodnú kódovú základňu a zistite, či vaša responzívna webová stránka opäť začne fungovať.

Pri kontrole odozvy webu pre mobilné zariadenia by ste ho mali vždy otestovať na mobilnom zariadení. 

Niekedy sa zdá, že funguje pri zmene veľkosti okna prehliadača na pracovnej ploche, ale na mobile sa nezobrazuje správne.

Ak v súbore hlavičky HTML chýba jeden riadok kódu , môže to narušiť responzívny dizajn. Tento jediný riadok chýbajúceho kódu spôsobí, že vaše mobilné zariadenie bude predpokladať, že web, ktorý si prezeráte, je web v plnej veľkosti.

Vykreslená stránka bude mať veľkosť zobrazovanej oblasti (veľkosť oblasti webovej stránky, ktorá je viditeľná pre používateľa).

Ak chcete opraviť svoj web vhodný pre mobilné zariadenia, pridajte do sekcie hlavičky nasledujúci riadok kódu:

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

Niekedy pri aktualizácii témy môže tento kód zmiznúť.

Načítanie obrázkov trvá príliš dlho^{(Images Are Taking Too Long to Load)}

Optimalizácia obrázkov a zmenšenie veľkosti súboru obrázkov^{(reducing image file size)} má zmysel. Veľké obrázky, ktoré nie sú optimalizované, môžu spomaliť rýchlosť načítania vašich webových stránok. Pre používateľov mobilných zariadení to môže byť frustrujúce.

WordPress vo verzii 4.4 a vyššej automaticky zobrazí najmenšiu verziu obrázka na vašom serveri.

Ak už používate najnovšiu verziu WordPress , ale vaša stránka sa stále nenačítava dostatočne rýchlo, môžete:

• Nainštalujte doplnok ako Smush Image Optimization, Compression a Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} na zmenu veľkosti a optimalizáciu obrázkov
• Pred odovzdaním obrázkov na vašu stránku použite nástroj na kompresiu a optimalizáciu, ako je TinyPNG , Compress JPEG alebo Online Image Optimizer .

Najdôležitejší obsah nie je zrejmý^{(Most Important Content Isn’t Obvious)}

Niektoré webové stránky sú nabité množstvom zbytočného obsahu, ktorý zapĺňa prázdne miesto pri otvorení na pracovnej ploche.

Webové stránky vyvinuté bez vedomia mobilných používateľov vo všeobecnosti patria do tejto kategórie. Načítanie týchto stránok si vyžaduje viac času a väčšiu šírku pásma.

Ak stránky nie sú navrhnuté vhodne pre mobilné zariadenia, potom sa časť obsahu nemusí zobraziť na mobile bez veľkého posúvania.

Väčšinu času bude prvok na vašej webovej stránke vyzerať inak na počítači a úplne inak na mobilnom zariadení.

Napríklad cenová stránka s tromi stĺpcami ich zobrazí vedľa seba v počítači.

Na mobilnom zariadení sú však stĺpce naukladané na seba, pretože veľkosť obrazovky je menšia. Toto správanie sa dá očakávať.

Uistite^(Make) sa, že vaša cenová tabuľka je na vašej webovej stránke na najvyššej pozícii, aby sa pri zobrazení na mobilnom zariadení zobrazila ako prvá. Ak máte nad tabuľkou veľa textu, používatelia mobilných zariadení sa budú musieť posunúť nadol, aby ho videli, ale nemusia.

Pre čo najoptimálnejšiu používateľskú skúsenosť na mobilných zariadeniach umiestnite najkritickejšie časti obsahu do hornej časti stránky. Ak používateľ potrebuje pred zobrazením vášho obsahu veľa posúvať, pravdepodobne to neurobí.

Príliš veľa informácií^{(Too Much Information)}

Stránky s komplikovanými prvkami používateľského rozhrania, ako sú tabuľky, formuláre s viacerými krokmi a pokročilé funkcie vyhľadávania, môžu spôsobiť zlú používateľskú skúsenosť s mobilnými zariadeniami.

Tieto prvky obsahujú príliš veľa informácií, ktoré môžu zaplniť obrazovku mobilného telefónu a brániť používateľovi nájsť požadované informácie.

Jedným z prístupov je odstrániť alebo skryť určitý obsah pred používateľmi mobilných zariadení. Nie je to však ideálne riešenie pre návštevníkov, ktorí chcú mať prístup k týmto prvkom.

Ak sa chcete tomuto problému vyhnúť, optimalizujte čo najviac svoj web vhodný pre mobilné zariadenia. Odstráňte tiež všetky nepotrebné prvky a zamerajte sa na základnú štruktúru svojho webu.

Údaje pre malé obrazovky^{(Data For Small Screens)}

Zložité tabuľky s množstvom riadkov a stĺpcov môžu byť problémom pri prezeraní na malých obrazovkách mobilov. Najlepšou opravou je použitie responzívnych tabuliek.

Doplnok, ako napríklad WP Responsive Table , to môže uľahčiť.

Rovnako ako v cenovej tabuľke vyššie, pri zobrazení na mobilnom zariadení budú stĺpce naskladané tak, aby sa zmestili na menšiu obrazovku.

Medzi ďalšie spôsoby zobrazenia údajov na mobilných zariadeniach patria:

• Vytvorenie menšej tabuľky bez rozloženia mriežky, aby ste sa vyhli potrebe horizontálneho rolovania.
• Preklopenie stola na bok, aby sa lepšie zmestil na menšiu obrazovku.
• Nahradenie väčších tabuliek menšími, ktoré odkazujú na plnú verziu.
• Prevod tabuliek na koláčové grafy.

Keďže používanie mobilných zariadení exponenciálne rastie, je nevyhnutné, aby boli webové stránky firiem optimalizované pomocou verzií vhodných pre mobilné zariadenia. Vylepšite^(Enhance) používateľskú skúsenosť bez obetovania funkčnosti vykonaním krokov vyššie.

Mali by ste tiež vždy monitorovať výkon svojich stránok a v prípade potreby vykonať vylepšenia na zlepšenie výkonu a používateľskej skúsenosti.

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

• Ako si vytvoriť svoj vlastný web podobný Twitteru pomocou témy P2 WordPress

• 10 základných doplnkov WordPress pre webovú stránku pre malé firmy

• Ako zaistiť bezpečnosť stránky WordPress

• Recenzia knihy: Vytvorte si svoj vlastný web: Komiksový sprievodca HTML, CSS a Wordpress

• Wix vs WordPress: Čo je najlepšie na vytvorenie vášho webu?

• Ako odstrániť upozornenia z Facebooku na mobile a počítači

• Ako nakonfigurovať súkromie vo WordPress a prečo je to dôležité

• Ako vykonať DDoS útok na webovej stránke pomocou CMD

• 10 tipov a trikov Gboard na zlepšenie mobilného písania

• Ako chrániť heslom stránky na vašom webe WordPress

• Vytvorte si rýchlo osobnú webovú stránku pomocou lokality Google

• Ako pripojiť prenosný počítač so systémom Windows k mobilnému hotspotu

• Ako zmeniť heslo na Netflix (mobil a počítač)

• Ako spustiť bleskovo rýchly WordPress na Microsoft Azure

• Zmeňte hlas rýchleho rozhovoru na PUBG Mobile

• Ako pridať widget Discord na váš web

• Ako nainštalovať a nastaviť WordPress na Microsoft Azure

• Zoznam procesorov pre tablety a mobilné zariadenia

• Použite novú funkciu Excel Mobile „Vložiť údaje z obrázku“.

• Ako sledovať zmeny v programe Word (online, mobil a počítač)