No hay nada peor que tener un sitio web de escritorio atractivo y un sitio móvil que no funciona correctamente.

La mayoría de las correcciones de diseño son simples, pero requieren atención si desea que los visitantes permanezcan en su sitio mientras navegan en un dispositivo móvil.

Este artículo destacará siete problemas de sitios web compatibles con dispositivos móviles y las soluciones para ellos.

• Los cambios realizados no se^(Are) muestran en el móvil^(Mobile)
• Navegación hostil
• El diseño^{(Responsive Layout)} receptivo deja de funcionar repentinamente
• Las imágenes tardan demasiado en cargarse
• El contenido más importante no es obvio
• Demasiada información
• Datos para pantallas pequeñas

Las actualizaciones del sitio web compatible con dispositivos móviles no aparecen^{(Mobile Friendly Website Updates Not Showing Up)}

Acaba de pasar mucho tiempo haciendo actualizaciones en su sitio web. Se ven muy bien en su escritorio, pero no aparecen en su dispositivo móvil.

Una de las razones más comunes es el almacenamiento en caché. Su navegador móvil podría estar mostrando una versión antigua de su sitio que descargó anteriormente. Otra razón puede ser que su sitio web retenga la versión anterior de su página y no muestre sus cambios.

Si este es el problema, deberá borrar el caché para descargar la versión revisada. Un complemento de almacenamiento en caché como WP Super Cache , W3 Total Cache o WP Fastest Cache puede ayudar a resolver este problema.

A continuación hay cuatro pasos para ayudarlo a vaciar la memoria caché y el navegador de su sitio web para permitir que la nueva versión se muestre en su sitio compatible con dispositivos móviles.

1. Actualice su navegador varias veces en su computadora de escritorio y dispositivo móvil.
2. Pruebe su sitio web en diferentes dispositivos móviles.
3. Limpia tu sitio con un complemento de almacenamiento en caché.
4. Consulte con su empresa de alojamiento para ver si hay otro sistema de almacenamiento en caché en su servidor que deba borrarse.

Navegación hostil^{(Unfriendly Navigation)}

Puede ser un desafío crear un menú de navegación que funcione bien en dispositivos móviles. Si la navegación de su sitio web tiene muchos elementos y submenús, es aún más complicado exprimir todo en una pantalla más pequeña.

Por ejemplo, si solo tiene tres o cuatro elementos en la navegación de su sitio web, debería verse bien en dispositivos móviles. Sin embargo, si tiene más elementos y submenús, se apilarán uno encima del otro y se verán abarrotados.

A continuación^(Below) se muestran algunas formas de solucionar este problema para un sitio web compatible con dispositivos móviles:

• Convierte tu navegación en un menú desplegable para dispositivos móviles.
• Muestre su menú de navegación como elementos de bloque, para que aparezcan verticalmente.
• Utilice un icono de menú que se puede alternar para ocupar menos espacio.
• Cree un menú de navegación móvil usando jQuery.
• Use el menú Hamburguesa^(Hamburger) (muchos temas incluyen esto como una opción o puede usar un complemento^{( use a plugin)} ).

El diseño receptivo deja de funcionar repentinamente^{(Responsive Layout Stops Working Suddenly)}

Si su sitio compatible con dispositivos móviles deja de funcionar repentinamente, podría deberse a un complemento en su sitio.

La instalación de un complemento nuevo o una actualización de un complemento existente podría causar un conflicto con otros que afecte su diseño receptivo.

Comience desactivando cada complemento de uno en uno para ver si es la causa. No los desactive todos a la vez o no sabrá qué complemento podría ser el culpable.

^(Code)Los cambios de código son otra causa posible. Si ha modificado algún código accidental o intencionalmente, restaure la base de código original y vea si su sitio web receptivo comienza a funcionar nuevamente.

Al verificar la capacidad de respuesta móvil de su sitio, siempre debe probarlo en un dispositivo móvil. 

A veces parece funcionar cuando se cambia el tamaño de la ventana del navegador en el escritorio, pero no se muestra correctamente en el móvil.

Si falta una línea de código en un archivo de encabezado HTML , puede romper el diseño receptivo. ^(HTML)Esta sola línea de código faltante hará que su dispositivo móvil asuma que el sitio que está viendo es un sitio web de tamaño completo.

El sitio representado tendrá el tamaño de la ventana gráfica (el tamaño del área de la página web que es visible para el usuario).

Para arreglar su sitio optimizado para dispositivos móviles, agregue la siguiente línea de código a la sección del encabezado:

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

A veces, cuando se actualiza un tema, este código puede desaparecer.

Las imágenes tardan demasiado en cargarse^{(Images Are Taking Too Long to Load)}

Optimizar imágenes y reducir el tamaño del archivo de imagen^{(reducing image file size)} tiene sentido. Las imágenes grandes que no están optimizadas pueden ralentizar la velocidad de carga de sus páginas web. Esto puede ser frustrante para los usuarios móviles.

WordPress versión 4.4 y superior sirve automáticamente la versión más pequeña de una imagen en su servidor.

Si ya está ejecutando la última versión de WordPress , pero su sitio aún no se carga lo suficientemente rápido, puede:

• Instale un complemento como Smush Image Optimization, Compression y Lazy Load^{( Smush Image Optimization, Compression, and Lazy Load)} para cambiar el tamaño y optimizar sus imágenes
• Utilice una herramienta de compresión y optimización antes de cargar imágenes en su sitio, como TinyPNG , Compress JPEG o Online Image Optimizer .

El contenido más importante no es obvio^{(Most Important Content Isn’t Obvious)}

Algunos sitios web están cargados con una gran cantidad de contenido innecesario para llenar el espacio vacío cuando se abren en un escritorio.

Los sitios web desarrollados sin ser conscientes de los usuarios móviles generalmente se incluyen en esta categoría. Estos sitios tardan más tiempo y ancho de banda en cargarse.

Si las páginas no están diseñadas apropiadamente para dispositivos móviles, es posible que parte del contenido no aparezca en dispositivos móviles sin desplazarse mucho.

La mayoría de las veces, un elemento en su página web se verá de una manera en una computadora y completamente diferente en un dispositivo móvil.

Por ejemplo, una página de precios con tres columnas las mostrará una al lado de la otra en una computadora.

Sin embargo, en un dispositivo móvil, las columnas se apilan una encima de la otra porque el tamaño de la pantalla es más pequeño. Este comportamiento es de esperar.

Asegúrese^(Make) de que su tabla de precios esté en una posición superior en su página web para que aparezca primero cuando se vea en un dispositivo móvil. Si tiene mucho texto sobre su mesa, los usuarios móviles tendrán que desplazarse hacia abajo para verlo y es posible que no.

Para obtener la experiencia de usuario móvil más óptima, coloque las piezas de contenido más críticas en la parte superior de la página. Si un usuario necesita desplazarse mucho antes de poder ver su contenido, probablemente no lo hará.

Demasiada información^{(Too Much Information)}

Los sitios con elementos de interfaz de usuario complicados, como tablas, formularios de varios pasos y funciones de búsqueda avanzada, pueden producir una experiencia de usuario móvil deficiente.

Estos elementos contienen demasiada información que puede abarrotar la pantalla de un móvil e impedir que un usuario encuentre la información que desea.

Un enfoque es eliminar u ocultar algún contenido de los usuarios móviles. Sin embargo, esta no es una solución ideal para los visitantes que quieren tener acceso a estos elementos.

Para evitar este problema, optimice su sitio optimizado para dispositivos móviles tanto como sea posible. Además, elimine cualquier elemento innecesario mientras se enfoca en la estructura central de su sitio web.

Datos para pantallas pequeñas^{(Data For Small Screens)}

Las tablas complejas con muchas filas y columnas pueden ser un problema cuando se visualizan en pantallas móviles pequeñas. La mejor solución es usar tablas receptivas.

Un complemento como WP Responsive Table puede hacer que esto sea fácil de lograr.

Al igual que con la tabla de precios anterior, cuando se ve en un dispositivo móvil, las columnas se apilarán para adaptarse a la pantalla más pequeña.

Otras formas de mostrar datos en dispositivos móviles incluyen:

• Crear una tabla más pequeña sin el diseño de cuadrícula para evitar la necesidad de desplazamiento horizontal.
• Voltear una mesa de lado para que quepa mejor en una pantalla más pequeña.
• Sustitución de tablas más grandes por otras más pequeñas que se vinculan a la versión completa.
• Conversión de tablas en gráficos circulares.

Dado que el uso de dispositivos móviles está creciendo exponencialmente, es imperativo que los sitios web comerciales estén optimizados con versiones compatibles con dispositivos móviles. Mejore^(Enhance) la experiencia del usuario sin sacrificar la funcionalidad siguiendo los pasos anteriores.

También debe monitorear siempre el rendimiento de su sitio y hacer ajustes cuando sea necesario para mejorar el rendimiento y la experiencia del usuario.

7 WordPress Tips For a Mobile Friendly Website

There is nothing worse than having a great-looking desktop websіtе and а mobilе site thаt 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

• Cómo configurar su propio sitio web similar a Twitter usando el tema P2 de WordPress

• 10 complementos esenciales de WordPress para un sitio web de pequeñas empresas

• Cómo hacer un WordPress Site Secure

• Reseña del libro: Cree su propio sitio web: una guía cómica de HTML, CSS y Wordpress

• Wix Vs WordPress: ¿Cuál es mejor para crear su sitio web?

• Cómo detener / girar Off Reddit Notifications en Mobile and Desktop

• Cómo guardar GIF animados en dispositivos móviles y computadoras

• Cómo instalar y configurar WordPress en Microsoft Azure

• Access Mobile Sitios web Using Desktop Browser (PC)

• Cómo monitorear cuando se actualiza un sitio web

• Lista de procesadores para tabletas y móviles

• Los 10 mejores lugares para encontrar imágenes y videos HD gratuitos para su sitio web

• 3 Ways para eliminar Slideshow From Any Website

• Cómo cambiar Password en Netflix (Mobile & Desktop)

• 8 gratis Premium WordPress temas para instalar

• Supervise el sitio web oculto y las conexiones a Internet

• Cómo detectar un sitio web falso o un intento de phishing en esta temporada navideña

• 7 consejos técnicos de optimización SEO para cualquier sitio web

• Cómo ver Everyone en Zoom (en Desktop & Mobile)

• Use la nueva función "Insertar datos de la imagen" de Excel Mobile