Ne postoji ništa gore od web stranice za stolno računalo sjajnog izgleda i web-lokacije za mobilne uređaje koja ne radi ispravno.

Većina popravaka dizajna je jednostavna, ali zahtijeva pažnju ako želite da posjetitelji ostanu na vašoj web-lokaciji dok pregledavaju na mobilnom uređaju.

Ovaj članak će istaknuti sedam problema s web-lokacijom prilagođenom mobilnim uređajima i popravcima za njih.

• Učinjene promjene se^(Are) ne prikazuju na mobilnom uređaju^(Mobile)
• Neprijateljska navigacija
• Responzivni izgled^{(Responsive Layout)} iznenada prestaje raditi
• Slike se predugo učitavaju
• Najvažniji sadržaj nije očit
• Previše informacija
• Podaci za male zaslone

Ažuriranja web stranice prilagođene mobilnim uređajima se ne pojavljuju^{(Mobile Friendly Website Updates Not Showing Up)}

Upravo ste potrošili puno vremena na ažuriranje svoje web stranice. Izgledaju sjajno na vašem stolnom računalu, ali se ne pojavljuju na vašem mobilnom uređaju.

Jedan od najčešćih razloga je predmemorija. Vaš mobilni preglednik možda prikazuje staru verziju vaše web-lokacije koju ste prethodno preuzeli. Drugi razlog može biti taj što vaša web stranica drži staru verziju vaše stranice i ne prikazuje vaše promjene.

Ako je to problem, morat ćete očistiti predmemoriju da biste preuzeli revidiranu verziju. Dodatak za predmemoriju kao što je WP Super Cache , W3 Total Cache ili WP Fastest Cache može pomoći u rješavanju ovog problema.

U nastavku su četiri koraka koji će vam pomoći da ispraznite predmemoriju web-mjesta i preglednik kako biste omogućili prikazivanje nove verzije na web-lokaciji prilagođenoj mobilnim uređajima.

1. Osvježite preglednik nekoliko puta na stolnom računalu i mobilnom uređaju.
2. Testirajte svoju web stranicu na različitim mobilnim uređajima.
3. Očistite svoju web stranicu pomoću dodatka za predmemoriju.
4. Provjerite kod svoje hosting tvrtke postoji li na vašem poslužitelju drugi sustav za predmemoriju koji treba obrisati.

Neprijateljska navigacija^{(Unfriendly Navigation)}

Može biti izazovno stvoriti navigacijski izbornik koji dobro funkcionira na mobilnim uređajima. Ako navigacija vaše web stranice ima mnogo stavki i podizbornika, još je teže sve stisnuti na manji zaslon.

Na primjer, ako imate samo tri ili četiri stavke u navigaciji web-mjesta, to bi trebalo izgledati dobro na mobilnom uređaju. Međutim, ako imate više stavki i podizbornika, oni će se naslagati jedan na drugi i izgledati pretrpano.

U nastavku^(Below) je nekoliko načina za rješavanje ovog problema za web stranicu prilagođenu mobilnim uređajima:

• Pretvorite svoju navigaciju u padajući izbornik za mobilne uređaje.
• Prikažite svoj navigacijski izbornik kao blok elemente, tako da se pojavljuju okomito.
• Upotrijebite ikonu izbornika koja se može prebaciti da zauzima manje prostora.
• Izradite mobilni navigacijski izbornik pomoću jQueryja.
• Koristite izbornik Hamburger (mnoge teme uključuju ovo kao opciju ili možete koristiti dodatak^{( use a plugin)} .)

Responzivni izgled iznenada prestaje raditi^{(Responsive Layout Stops Working Suddenly)}

Ako vaša web-lokacija prilagođena mobilnim uređajima iznenada prestane raditi, to može biti zbog dodatka na vašoj web-lokaciji.

Instaliranje novog dodatka ili ažuriranje postojećeg dodatka moglo bi uzrokovati sukob s drugima koji utječe na vaš responzivni izgled.

Počnite tako da deaktivirate svaki dodatak jedan po jedan da vidite je li to uzrok. Nemojte ih deaktivirati sve odjednom ili nećete znati koji bi dodatak mogao biti krivac.

Promjene koda^(Code) su još jedan mogući uzrok. Ako ste slučajno ili namjerno izmijenili bilo koji kod, vratite izvornu bazu koda i provjerite hoće li vaša responzivna web stranica ponovno raditi.

Kada provjeravate mobilnu reakciju svoje stranice, uvijek je trebate testirati na mobilnom uređaju. 

Ponekad se čini da radi kada mijenjate veličinu prozora preglednika na radnoj površini, ali se ne prikazuje ispravno na mobilnom uređaju.

Ako nedostaje jedan redak koda u datoteci HTML zaglavlja, to može narušiti responzivni dizajn. Ovaj jedan redak koda koji nedostaje navest će vaš mobilni uređaj da pretpostavi da je web-mjesto koje gledate web-mjesto pune veličine.

Prikazana stranica bit će veličine okvira za prikaz (veličina područja web stranice koje je vidljivo korisniku).

Da biste popravili svoju web-lokaciju prilagođenu mobilnim uređajima, dodajte sljedeći redak koda u odjeljak zaglavlja:

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

Ponekad kada se tema ažurira, ovaj kod može nestati.

Slike se predugo učitavaju^{(Images Are Taking Too Long to Load)}

Optimiziranje slika i smanjenje veličine slikovne datoteke^{(reducing image file size)} ima smisla. Velike slike koje nisu optimizirane mogu usporiti brzinu učitavanja vaših web stranica. To može biti frustrirajuće za mobilne korisnike.

WordPress verzija 4.4 i novije automatski prikazuje najmanju verziju slike na vašem poslužitelju.

Ako već koristite najnoviju verziju WordPressa^(WordPress) , ali vaša se stranica još uvijek ne učitava dovoljno brzo, možete:

• Instalirajte dodatak kao što je Smush Image Optimization, Compression i Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} da promijenite veličinu i optimizirate svoje slike
• Upotrijebite alat za kompresiju i optimizaciju prije učitavanja slika na svoju web stranicu kao što je TinyPNG^(TinyPNG) , Compress JPEG ili Online Image Optimizer .

Najvažniji sadržaj nije očit^{(Most Important Content Isn’t Obvious)}

Neke su web-stranice pune puno nepotrebnog sadržaja kako bi popunile prazan prostor kada se otvore na radnoj površini.

Web-mjesta razvijena bez svjesnosti mobilnih korisnika općenito spadaju u ovu kategoriju. Za učitavanje ovih stranica potrebno je više vremena i propusnosti.

Ako stranice nisu dizajnirane prikladno za mobilne uređaje, dio sadržaja se možda neće pojaviti na mobilnom uređaju bez puno pomicanja.

Većinu vremena, element na vašoj web stranici izgledat će jednosmjerno na računalu, a potpuno drugačije na mobilnom uređaju.

Na primjer, stranica s cijenama s tri stupca prikazat će ih jedan pored drugog na računalu.

Međutim, na mobilnom uređaju stupci su naslagani jedan na drugi jer je veličina zaslona manja. Ovakvo ponašanje je za očekivati.

Provjerite^(Make) je li tablica s cijenama na najvišoj poziciji na vašoj web-stranici kako bi se prva pojavila kada se gleda na mobilnom uređaju. Ako imate puno teksta iznad tablice, korisnici mobilnih uređaja morat će se pomaknuti prema dolje da bi ga vidjeli, a možda i ne.

Za najoptimalnije mobilno korisničko iskustvo, stavite najkritičnije dijelove sadržaja na vrh stranice. Ako korisnik treba puno pomicati prije nego što može vidjeti vaš sadržaj, vjerojatno neće.

Previše informacija^{(Too Much Information)}

Web-mjesta sa kompliciranim elementima korisničkog sučelja kao što su tablice, obrasci u više koraka i napredne značajke pretraživanja mogu dovesti do lošeg mobilnog korisničkog iskustva.

Ovi elementi sadrže previše informacija koje mogu zatrpati zaslon mobitela i ometati korisnika da pronađe željene informacije.

Jedan pristup je uklanjanje ili skrivanje nekog sadržaja od mobilnih korisnika. Međutim, ovo nije idealno rješenje za posjetitelje koji žele imati pristup ovim elementima.

Kako biste izbjegli ovaj problem, optimizirajte svoju web stranicu prilagođenu mobilnim uređajima što je više moguće. Također, uklonite sve nepotrebne elemente dok se usredotočite na temeljnu strukturu vaše web stranice.

Podaci za male zaslone^{(Data For Small Screens)}

Složene tablice s mnogo redaka i stupaca mogu predstavljati problem kada se gledaju na malim mobilnim zaslonima. Najbolje rješenje je korištenje responzivnih tablica.

Dodatak kao što je WP Responsive Table može to učiniti lakim za postizanje.

Kao i u gornjoj tablici cijena, kada se gledaju na mobilnom uređaju, stupci će biti složeni tako da odgovaraju manjem zaslonu.

Ostali načini prikazivanja podataka na mobilnim uređajima uključuju:

• Izrada manje tablice bez rasporeda mreže kako bi se izbjegla potreba za vodoravnim pomicanjem.
• Okretanje stola na stranu kako bi se bolje uklopio na manji ekran.
• Zamjena većih tablica s manjim koje povezuju na punu verziju.
• Pretvaranje tablica u tortne grafikone.

Kako upotreba mobilnih uređaja eksponencijalno raste, imperativ je da poslovne web stranice budu optimizirane verzijama prilagođenim mobilnim uređajima. Poboljšajte^(Enhance) korisničko iskustvo bez žrtvovanja funkcionalnosti slijedeći gornje korake.

Također biste uvijek trebali nadzirati izvedbu svoje web-lokacije i napraviti izmjene kada je to potrebno za poboljšanje izvedbe i korisničkog iskustva.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse thаn 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

• Kako postaviti vlastitu web stranicu nalik Twitteru koristeći WordPress P2 temu

• 10 osnovnih WordPress dodataka za web stranicu male tvrtke

• Kako učiniti WordPress web mjesto sigurnim

• Recenzija knjige: Izgradite vlastitu web stranicu: Strip vodič kroz HTML, CSS i Wordpress

• Wix vs WordPress: Što je najbolje za izradu vaše web stranice?

• Kako uočiti lažnu web stranicu ili pokušaj krađe identiteta u ovo blagdansko vrijeme

• Kako omogućiti tamni način rada u programu Microsoft Outlook (Windows, Mac i Mobile)

• Kako dodati Discord widget na svoju web stranicu

• 10 najboljih mjesta za pronalaženje besplatnih HD slika i videozapisa za svoju web stranicu

• Kako instalirati WordPress na Google Cloud Platformu

• Kako koristiti torrente na Apple mobilnim uređajima

• Kako napraviti snimku zaslona na Netflixu (stolni i mobilni)

• Kako pratiti promjene u Wordu (online, mobilni i stolna računala)

• 10 Gboard savjeta i trikova za poboljšanje kucanja na mobilnom uređaju

• Kako izbrisati Facebook obavijesti na mobitelu i stolnom računalu

• 3 načina za uklanjanje dijaprojekcije s bilo koje web stranice

• Kako pratiti kada se web stranica ažurira

• Kako očistiti red čekanja u Spotifyju na stolnim i mobilnim uređajima

• Promijenite Quick Chat Voice na PUBG Mobile

• Kako vidjeti sve na Zoomu (na stolnom računalu i mobilnom uređaju)