Non c'è niente di peggio che avere un sito Web desktop di bell'aspetto e un sito mobile che non funziona correttamente.

La maggior parte delle correzioni di progettazione sono semplici ma richiedono attenzione se desideri che i visitatori rimangano sul tuo sito durante la navigazione su un dispositivo mobile.

Questo articolo evidenzierà sette problemi relativi a siti Web ottimizzati per dispositivi mobili e risolverli.

• Le modifiche apportate non vengono^(Are) visualizzate sui dispositivi mobili^(Mobile)
• Navigazione ostile
• Il layout^{(Responsive Layout)} reattivo smette di funzionare all'improvviso
• Le immagini impiegano troppo tempo per essere caricate
• Il contenuto più importante non è ovvio
• Troppe informazioni
• Dati per piccoli schermi

Gli aggiornamenti del sito Web ottimizzati per dispositivi mobili non vengono visualizzati^{(Mobile Friendly Website Updates Not Showing Up)}

Hai appena trascorso molto tempo ad aggiornare il tuo sito web. Stanno benissimo sul tuo desktop ma non vengono visualizzati sul tuo dispositivo mobile.

Uno dei motivi più comuni è la memorizzazione nella cache. Il tuo browser mobile potrebbe mostrare una vecchia versione del tuo sito che hai scaricato in precedenza. Un altro motivo può essere che il tuo sito web sta trattenendo la vecchia versione della tua pagina e non mostra le tue modifiche.

Se questo è il problema, dovrai svuotare la cache per scaricare la versione rivista. Un plug-in di memorizzazione nella cache come WP Super Cache , W3 Total Cache o WP Fastest Cache può aiutare a risolvere questo problema.

Di seguito sono riportati quattro passaggi per aiutarti a svuotare la cache del tuo sito Web e il browser per consentire la visualizzazione della nuova versione sul tuo sito ottimizzato per dispositivi mobili.

1. Aggiorna il browser più volte sul desktop e sul dispositivo mobile.
2. Testa il tuo sito web su diversi dispositivi mobili.
3. Cancella il tuo sito con un plug-in di memorizzazione nella cache.
4. Verifica con la tua società di hosting per vedere se c'è un altro sistema di memorizzazione nella cache sul tuo server che deve essere cancellato.

Navigazione ostile^{(Unfriendly Navigation)}

Può essere difficile creare un menu di navigazione che funzioni bene sui dispositivi mobili. Se la navigazione del tuo sito Web ha molte voci e sottomenu, è ancora più complicato spremere tutto su uno schermo più piccolo.

Ad esempio, se hai solo tre o quattro elementi nella navigazione del tuo sito web, dovrebbe andare bene sui dispositivi mobili. Tuttavia, se hai più voci e sottomenu, si accumuleranno l'uno sull'altro e sembreranno affollati.

Di seguito^(Below) sono riportati alcuni modi per risolvere questo problema per un sito Web ottimizzato per dispositivi mobili:

• Trasforma la tua navigazione in un menu a tendina per dispositivi mobili.
• Visualizza il menu di navigazione come elementi di blocco, in modo che appaia verticalmente.
• Utilizza un'icona di menu che può essere attivata per occupare meno spazio.
• Crea un menu di navigazione mobile usando jQuery.
• Usa il menu Hamburger (molti temi lo includono come opzione oppure puoi usare un plugin^{( use a plugin)} .)

Il layout reattivo smette di funzionare all'improvviso^{(Responsive Layout Stops Working Suddenly)}

Se il tuo sito ottimizzato per dispositivi mobili smette improvvisamente di funzionare, potrebbe essere dovuto a un plug-in sul tuo sito.

L'installazione di un nuovo plug-in o un aggiornamento di un plug-in esistente potrebbe causare un conflitto con altri che influiscono sul layout reattivo.

Inizia disattivando ogni plugin uno alla volta per vedere se ne è la causa. Non disattivarli tutti in una volta o non saprai quale plugin potrebbe essere il colpevole.

^(Code)Le modifiche al codice sono un'altra possibile causa. Se hai modificato un codice accidentalmente o intenzionalmente, ripristina la base di codice originale e verifica se il tuo sito Web reattivo riprende a funzionare.

Quando controlli il tuo sito per la reattività mobile, dovresti sempre testarlo su un dispositivo mobile. 

A volte sembra funzionare quando si ridimensiona la finestra del browser sul desktop, ma non viene visualizzato correttamente sui dispositivi mobili.

Se manca una riga di codice da un file di intestazione HTML , può interrompere il design reattivo. ^(HTML)Questa singola riga di codice mancante farà sì che il tuo dispositivo mobile presuppone che il sito che stai visualizzando sia un sito Web a grandezza naturale.

Il sito renderizzato avrà la dimensione del viewport (la dimensione dell'area della pagina web che è visibile all'utente).

Per correggere il tuo sito ottimizzato per dispositivi mobili, aggiungi la seguente riga di codice alla sezione dell'intestazione:

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

A volte, quando un tema viene aggiornato, questo codice può scomparire.

Le immagini impiegano troppo tempo per essere caricate^{(Images Are Taking Too Long to Load)}

L'ottimizzazione delle immagini e la riduzione delle dimensioni del file di immagine^{(reducing image file size)} ha senso. Immagini di grandi dimensioni non ottimizzate possono rallentare la velocità di caricamento delle tue pagine web. Questo può essere frustrante per gli utenti mobili.

WordPress versione 4.4 e successive fornisce automaticamente la versione più piccola di un'immagine sul tuo server.

Se stai già utilizzando l'ultima versione di WordPress , ma il tuo sito non si sta ancora caricando abbastanza velocemente, puoi:

• Installa un plug-in come Smush Image Optimization, Compression e Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} per ridimensionare e ottimizzare le tue immagini
• Utilizza uno strumento di compressione e ottimizzazione prima di caricare le immagini sul tuo sito come TinyPNG , Compress JPEG o Online Image Optimizer .

Il contenuto più importante non è ovvio^{(Most Important Content Isn’t Obvious)}

Alcuni siti Web vengono caricati con molti contenuti non necessari per riempire lo spazio vuoto quando vengono aperti su un desktop.

I siti Web sviluppati senza essere consapevoli degli utenti mobili generalmente rientrano in questa categoria. Questi siti richiedono più tempo e larghezza di banda per essere caricati.

Se le pagine non sono progettate in modo appropriato per i dispositivi mobili, una parte del contenuto potrebbe non essere visualizzata sui dispositivi mobili senza scorrere molto.

Il più delle volte, un elemento sulla tua pagina web apparirà in un modo su un computer e completamente diverso su un dispositivo mobile.

Ad esempio, una pagina dei prezzi con tre colonne le mostrerà una accanto all'altra su un computer.

Tuttavia, su un dispositivo mobile, le colonne sono impilate l'una sull'altra perché le dimensioni dello schermo sono inferiori. Questo comportamento è prevedibile.

Assicurati^(Make) che la tua tabella dei prezzi sia in una posizione in alto sulla tua pagina web in modo che appaia per prima quando viene visualizzata su dispositivi mobili. Se hai molto testo sulla tabella, gli utenti mobili dovranno scorrere verso il basso per vederlo e potrebbero non farlo.

Per un'esperienza utente mobile ottimale, metti i contenuti più critici nella parte superiore della pagina. Se un utente ha bisogno di scorrere molto prima di poter visualizzare i tuoi contenuti, probabilmente non lo farà.

Troppe informazioni^{(Too Much Information)}

I siti con elementi complicati dell'interfaccia utente come tabelle, moduli a più passaggi e funzionalità di ricerca avanzate possono produrre un'esperienza utente mobile scadente.

Questi elementi contengono troppe informazioni che possono affollare uno schermo mobile e interferire con l'utente che trova le informazioni desiderate.

Un approccio consiste nel rimuovere o nascondere alcuni contenuti dagli utenti mobili. Tuttavia, questa non è una soluzione ideale per i visitatori che desiderano avere accesso a questi elementi.

Per evitare questo problema, ottimizza il più possibile il tuo sito mobile friendly. Inoltre, rimuovi tutti gli elementi non necessari concentrandoti sulla struttura principale del tuo sito web.

Dati per piccoli schermi^{(Data For Small Screens)}

Le tabelle complesse con molte righe e colonne possono essere un problema se visualizzate su piccoli schermi mobili. La soluzione migliore è utilizzare tabelle reattive.

Un plug-in come WP Responsive Table può renderlo facile da realizzare.

Come per la tabella dei prezzi sopra, se visualizzate su un dispositivo mobile, le colonne verranno impilate per adattarsi allo schermo più piccolo.

Altri modi per mostrare i dati sui dispositivi mobili includono:

• Creazione di una tabella più piccola senza il layout della griglia per evitare la necessità di scorrere in orizzontale.
• Capovolgere un tavolo su un lato per adattarsi meglio a uno schermo più piccolo.
• Sostituzione di tabelle più grandi con tabelle più piccole che si collegano alla versione completa.
• Conversione di tabelle in grafici a torta.

Poiché l'utilizzo dei dispositivi mobili sta crescendo in modo esponenziale, è fondamentale che i siti Web aziendali siano ottimizzati con versioni ottimizzate per i dispositivi mobili. Migliora^(Enhance) l'esperienza dell'utente senza sacrificare la funzionalità seguendo i passaggi precedenti.

Dovresti anche monitorare sempre le prestazioni del tuo sito e apportare modifiche quando necessario per migliorare le prestazioni e l'esperienza dell'utente.

7 WordPress Tips For a Mobile Friendly Website

There iѕ nothing worsе than having a great-looking desktop website and a mobilе site that doesn’t wоrk 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

• Come configurare il tuo sito Web simile a Twitter utilizzando il tema P2 di WordPress

• 10 plugin WordPress essenziali per un sito Web per piccole imprese

• Come fare uno WordPress Site Secure

• Recensione del libro: costruisci il tuo sito web: una guida a fumetti per HTML, CSS e Wordpress

• Wix Vs WordPress: qual è il migliore per creare il tuo sito web?

• Come Stop / Attivare Off Reddit Notifications su Mobile and Desktop

• Come spostarsi WordPress site da un host a un altro

• Come monitorare quando un sito Web viene aggiornato

• 8 passaggi per essere conforme al GDPR con il tuo sito web

• 19 migliori suggerimenti per le app per dispositivi mobili di Outlook per Android e iOS

• 3 Ways Per rimuovere Slideshow From Any Website

• 8 Temi gratuiti Premium WordPress da installare

• Suggerimenti per comprare rinnovati Mobile Phones e Laptops

• Come lanciare a Roku TV da PC or Mobile

• Come migliorare il tuo sito Web WordPress con i progetti di Genesis Framework

• Come cambiare Password su Netflix (Mobile & Desktop)

• 7 Suggerimenti tecnici per l'ottimizzazione SEO per qualsiasi sito web

• Come abilitare la modalità oscura in Microsoft Outlook (Windows, Mac e dispositivi mobili)

• Change Quick Chat Voice su PUBG Mobile

• Come ricevere le notifiche di Twitter su Web e dispositivi mobili