Mikään ei ole pahempaa kuin upean näköinen työpöytäsivusto ja mobiilisivusto, joka ei toimi oikein.

Useimmat suunnittelun korjaukset ovat yksinkertaisia, mutta vaativat huomiota, jos haluat vierailijoiden pysyvän sivustollasi mobiililaitteella selattaessa.

Tässä artikkelissa tuodaan esiin seitsemän mobiiliystävällisten verkkosivustojen ongelmaa ja korjauksia niihin.

• Tehdyt muutokset eivät^(Are) näy mobiilissa^(Mobile)
• Epäystävällinen navigointi
• Responsiivinen asettelu^{(Responsive Layout)} lakkaa toimimasta yhtäkkiä
• Kuvien lataaminen kestää liian kauan
• Tärkein sisältö ei ole ilmeistä
• Liian paljon tietoa
• Tiedot pienille näytöille

Mobiiliystävälliset verkkosivustopäivitykset eivät näy^{(Mobile Friendly Website Updates Not Showing Up)}

Olet juuri käyttänyt paljon aikaa päivittääksesi verkkosivustoasi. Ne näyttävät hyvältä työpöydälläsi, mutta eivät näy mobiililaitteellasi.

Yksi yleisimmistä syistä on välimuisti. Mobiiliselaimesi saattaa näyttää vanhan version sivustostasi, jonka olet ladannut aiemmin. Toinen syy voi olla se, että verkkosivustosi pitää kiinni sivusi vanhasta versiosta eikä näytä muutoksiasi.

Jos tämä on ongelma, sinun on tyhjennettävä välimuisti, jotta voit ladata tarkistetun version. Välimuistilaajennus, kuten WP Super Cache , W3 Total Cache tai WP Fastest Cache , voi auttaa ratkaisemaan tämän ongelman.

Alla on neljä vaihetta, joiden avulla voit tyhjentää verkkosivustosi välimuistin ja selaimen, jotta uusi versio voidaan näyttää mobiiliystävällisellä sivustollasi.

1. Päivitä selaimesi useita kertoja työpöydälläsi ja mobiililaitteellasi.
2. Testaa verkkosivustoasi eri mobiililaitteilla.
3. Tyhjennä sivustosi välimuistilaajennuksella.
4. Tarkista isännöintiyritykseltäsi, onko palvelimellasi muuta välimuistijärjestelmää, joka on tyhjennettävä.

Epäystävällinen navigointi^{(Unfriendly Navigation)}

Mobiililaitteilla hyvin toimivan navigointivalikon luominen voi olla haastavaa. Jos verkkosivustosi navigaatiossa on monia kohteita ja alivalikoita, on vielä vaikeampaa puristaa kaikki pienemmälle näytölle.

Jos sinulla on esimerkiksi vain kolme tai neljä kohdetta verkkosivustosi navigaatiossa, sen pitäisi näyttää hyvältä mobiililaitteella. Jos sinulla on kuitenkin enemmän kohteita ja alivalikoita, ne pinoutuvat päällekkäin ja näyttävät tungosta.

Alla^(Below) on muutamia tapoja korjata tämä ongelma mobiiliystävällisessä verkkosivustossa:

• Muuta navigointisi avattavaksi valikoksi mobiililaitteille.
• Näytä navigointivalikko lohkoelementteinä, jotta ne näkyvät pystysuunnassa.
• Käytä valikkokuvaketta, jota voidaan vaihtaa, jotta se vie vähemmän tilaa.
• Luo mobiilinavigointivalikko jQueryn avulla.
• Käytä Hampurilainen^(Hamburger) - valikkoa (Monet teemat sisältävät tämän vaihtoehtona tai voit käyttää laajennusta^{( use a plugin)} .)

Responsiivinen asettelu lakkaa toimimasta yhtäkkiä^{(Responsive Layout Stops Working Suddenly)}

Jos mobiiliystävällinen sivustosi lakkaa yhtäkkiä toimimasta, se voi johtua sivustosi laajennuksesta.

Uuden laajennuksen tai päivityksen asentaminen olemassa olevaan laajennukseen voi aiheuttaa ristiriidan muiden kanssa, mikä vaikuttaa reagoivaan asetteluun.

Aloita poistamalla jokainen laajennus käytöstä yksi kerrallaan nähdäksesi, onko se syy. Älä deaktivoi niitä kaikkia kerralla tai et tiedä mikä laajennus voi olla syyllinen.

Koodimuutokset^(Code) ovat toinen mahdollinen syy. Jos olet muokannut jotain koodia vahingossa tai tarkoituksella, palauta alkuperäinen koodikanta ja katso, alkaako responsiivinen verkkosivustosi toimia uudelleen.

Kun tarkistat sivustosi mobiiliresponsiivisuuden, sinun tulee aina testata sitä mobiililaitteella. 

Joskus se näyttää toimivan, kun selainikkunan kokoa muutetaan työpöydällä, mutta se ei näy oikein mobiililaitteella.

Jos HTML^(HTML) - otsikkotiedostosta puuttuu yksi koodirivi , se voi rikkoa responsiivisen suunnittelun. Tämä yksittäinen puuttuva koodirivi saa mobiililaitteesi olettamaan, että katsomasi sivusto on täysikokoinen verkkosivusto.

Sivusto on näkymän kokoinen (käyttäjälle näkyvän verkkosivun alueen koko).

Korjaa mobiiliystävällinen sivustosi lisäämällä seuraava koodirivi otsikkoosioon:

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

Joskus tämä koodi voi kadota, kun teemaa päivitetään.

Kuvien lataaminen kestää liian kauan^{(Images Are Taking Too Long to Load)}

Kuvien optimointi ja kuvatiedoston koon^{(reducing image file size)} pienentäminen on järkevää. Suuret kuvat, joita ei ole optimoitu, voivat hidastaa verkkosivujesi latausnopeutta. Tämä voi olla turhauttavaa mobiilikäyttäjille.

WordPress -versio 4.4 ja uudemmat näyttävät automaattisesti palvelimellasi olevan kuvan pienimmän version.

Jos käytät jo WordPressin^(WordPress) uusinta versiota , mutta sivustosi ei vieläkään lataudu tarpeeksi nopeasti, voit:

• Asenna laajennus, kuten Smush Image Optimization, Compression ja Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} kuvien kokoa ja optimointia varten.
• Käytä pakkaus- ja optimointityökalua, ennen kuin lataat kuvia sivustollesi, kuten TinyPNG , Pakkaa JPEG^{(Compress JPEG)} tai Online Image Optimizer .

Tärkein sisältö ei ole ilmeistä^{(Most Important Content Isn’t Obvious)}

Jotkut verkkosivustot ovat täynnä tarpeetonta sisältöä täyttämään tyhjän tilan, kun ne avataan työpöydällä.

Verkkosivustot, jotka on kehitetty tietämättä mobiilikäyttäjistä, kuuluvat yleensä tähän luokkaan. Näiden sivustojen lataaminen vie enemmän aikaa ja kaistanleveyttä.

Jos sivuja ei ole suunniteltu mobiililaitteille sopivasti, osa sisällöstä ei välttämättä näy mobiililaitteella ilman paljon vierittämistä.

Suurimman osan ajasta verkkosivusi elementti näyttää samalta tietokoneella ja täysin erilaiselta mobiililaitteella.

Esimerkiksi hintasivu, jossa on kolme saraketta, näyttää ne vierekkäin tietokoneessa.

Mobiililaitteessa sarakkeet pinotaan kuitenkin päällekkäin, koska näytön koko on pienempi. Tämä käyttäytyminen on odotettavissa.

Varmista^(Make) , että hinnoittelutaulukkosi on verkkosivusi kärjessä, jotta se näkyy ensimmäisenä mobiililaitteella katsottaessa. Jos taulukossasi on paljon tekstiä, mobiilikäyttäjien on vieritettävä alas nähdäkseen sen, mutta eivät välttämättä.

Parhaan mobiilikäyttökokemuksen saavuttamiseksi aseta kriittisimmät sisällön osat sivun yläosaan. Jos käyttäjän on vieritettävä paljon, ennen kuin hän voi tarkastella sisältöäsi, hän ei todennäköisesti tee sitä.

Liian paljon tietoa^{(Too Much Information)}

Sivustot, joissa on monimutkaisia ​​käyttöliittymäelementtejä, kuten taulukoita, monivaiheisia lomakkeita ja tarkennettuja hakutoimintoja, voivat tuottaa huonon mobiilikäyttökokemuksen.

Nämä elementit sisältävät liikaa tietoa, joka voi tunkeutua mobiilinäytölle ja häiritä käyttäjää löytämään haluamansa tiedot.

Yksi tapa on poistaa tai piilottaa sisältöä mobiilikäyttäjiltä. Tämä ei kuitenkaan ole ihanteellinen ratkaisu vierailijoille, jotka haluavat päästä käsiksi näihin elementteihin.

Vältä tämä ongelma optimoimalla mobiiliystävällinen sivustosi mahdollisimman paljon. Poista myös kaikki tarpeettomat elementit ja keskity samalla verkkosivustosi ydinrakenteeseen.

Data pienille näytöille^{(Data For Small Screens)}

Monimutkaiset taulukot, joissa on useita rivejä ja sarakkeita, voivat olla ongelmallisia pienillä mobiilinäytöillä. Paras ratkaisu on käyttää responsiivisia taulukoita.

Plugin, kuten WP Responsive Table , voi tehdä tämän helpoksi.

Kuten yllä olevassa hinnoittelutaulukossa, mobiililaitteella katsottaessa sarakkeet pinotaan niin, että ne mahtuvat pienempään näyttöön.

Muita tapoja näyttää dataa mobiililaitteissa ovat:

• Pienen taulukon luominen ilman ruudukkoasettelua vaakasuuntaisen vierityksen välttämiseksi.
• Pöydän kääntäminen kyljelleen, jotta se mahtuu paremmin pienemmälle näytölle.
• Suurempien taulukoiden korvaaminen pienemmillä, jotka linkittävät täysversioon.
• Taulukoiden muuntaminen ympyräkaavioiksi.

Koska mobiilikäyttö kasvaa eksponentiaalisesti, on välttämätöntä, että yrityssivustot on optimoitu mobiiliystävällisillä versioilla. Paranna^(Enhance) käyttökokemusta toimivuudesta tinkimättä noudattamalla yllä olevia ohjeita.

Sinun tulee myös aina seurata sivustosi suorituskykyä ja tehdä tarvittaessa muutoksia suorituskyvyn ja käyttökokemuksen parantamiseksi.

7 WordPress Tips For a Mobile Friendly Website

Τhere is nothing worse than having a great-looking desktop website and a mobіle site that doesn’t work cоrrectly.

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

• Kuinka perustaa oma Twitterin kaltainen verkkosivusto käyttämällä WordPressin P2-teemaa

• 10 välttämätöntä WordPress-laajennusta pienyrityssivustolle

• Kuinka tehdä WordPress-sivustosta suojattu

• Kirja-arvostelu: Luo oma verkkosivusto: Sarjakuvaopas HTML-, CSS- ja Wordpressiin

• Wix Vs WordPress: Mikä on paras verkkosivustosi luomiseen?

• Kuinka tyhjentää jono Spotifyssa työpöydällä ja mobiilissa

• 8 askelta ollaksesi GDPR-yhteensopiva verkkosivustosi kanssa

• Kuinka tallentaa animoituja GIF-tiedostoja matkapuhelimeen ja tietokoneeseen

• Kuinka peruuttaa kolmannen osapuolen verkkosivustojen käyttöoikeus Facebookissa, Twitterissä ja Googlessa

• Kuinka nähdä kaikki Zoomissa (pöytäkoneilla ja mobiililaitteilla)

• 19 parasta Outlook Mobile App -vinkkiä Androidille ja iOS:lle

• Kuinka parantaa WordPress-verkkosivustoasi Genesis Framework -malleilla

• 8 ilmaista Premium WordPress-teemaa asennettavaksi

• Kuvakaappauksen ottaminen Netflixissä (työpöytä ja mobiili)

• Windows-kannettavan liittäminen Mobile Hotspotiin

• Kuinka seurata, kun verkkosivusto päivitetään

• Kuinka asentaa ja määrittää WordPress Microsoft Azuressa

• 7 todistettua tapaa lisätä verkkosivuston liikennettä

• Kuinka saada Twitter-ilmoituksia verkossa ja mobiilissa

• Tietosuojan määrittäminen WordPressissä ja miksi se on tärkeää