Los problemas de usabilidad móvil no resueltos pueden tener un impacto significativo en el tráfico de tu sitio web. Un problema común sobre el que Google Search Console puede advertirte es el error «Elementos Clicables Están Demasiado Cerca Unos de Otros», que probablemente significa que tu sitio es complejo para los usuarios móviles.

Más de 4.320 millones de personas acceden a Internet desde sus dispositivos móviles. Por lo tanto, es crucial resolver este error de elementos clicables lo antes posible. Por suerte, hay varias maneras de hacerlo y de hacer que tu sitio web sea más amigable para los móviles.

En este artículo, te explicaremos qué es el problema de «Elementos Clicables Están Demasiado Cerca Unos de Otros», discutiremos por qué ocurre y te guiaremos a través de tres métodos que puedes utilizar para arreglarlo. También te explicaremos qué es el error «El Contenido más ancho que la pantalla» y cómo puedes resolverlo.

¡Vamos a ponernos manos a la obra!

Qué Es el Error «Elementos Clicables Están Demasiado Cerca Unos de Otros»

En pocas palabras, los errores de usabilidad móvil pueden hacer que tu sitio de WordPress sea inaccesible y más difícil de navegar para los usuarios móviles. Puedes utilizar el informe de usabilidad móvil de Google Search Console para probar tu sitio.

La herramienta de informe de usabilidad para móviles de Google Search Console

La herramienta de informe de usabilidad para móviles de Google Search Console

Hay seis tipos principales de problemas de usabilidad móvil con los que te puedes encontrar, que son:

  1. Utiliza plugins incompatibles
  2. No se ha definido ningún viewport
  3. No se ha definido un viewport mediante «device-width».
  4. El texto demasiado pequeño para leerlo
  5. El contenido es más ancho que la pantalla
  6. Elementos clicables están demasiado cerca unos de otros

Como parte de este informe, Google Search Console comprobará todos los elementos en los que se puede hacer clic, como botones y enlaces. El propósito de esto es verificar si los usuarios móviles pueden interactuar cómodamente con los elementos de tu sitio web utilizando solo el tacto, en lugar de utilizar un teclado o un ratón.

Si Google Search Console determina que tus elementos clicables suponen un reto para los usuarios móviles, incluirá el error «Elementos clicables están demasiado cerca unos de otros» en tu informe de resumen.

Un informe de problemas de usabilidad móvil de Google Search Console

Un informe de problemas de usabilidad móvil de Google Search Console

Si haces clic en el error, te llevará a la página de detalles y estado. En esta pantalla, puede obtener más información sobre el problema, incluidas las páginas afectadas.

El error de Google Search Console "Elementos clicables demasiado cercanos".

El error de Google Search Console «Elementos clicables están demasiado cerca unos de otros».

Esencialmente, el error de elementos en los que se puede hacer clic es una advertencia que indica que los elementos clicables de tu sitio de WordPress son demasiado pequeños para que los usuarios móviles puedan interactuar con ellos cómodamente.

También puede significar que son lo suficientemente grandes, pero están colocados demasiado cerca de los elementos vecinos. Si los botones, enlaces y otros elementos en los que se puede hacer clic se agrupan demasiado cerca, los usuarios corren el riesgo de tocar los elementos equivocados, lo que perjudica la experiencia de usuario (UX).

Aunque tener elementos en los que se puede hacer clic demasiado juntos se considera un error de usabilidad móvil, resolver este problema también puede mejorar la accesibilidad de tu sitio. Por ejemplo, las personas con problemas de destreza pueden apreciar un espacio adicional entre los elementos interactivos. En cambio, a los usuarios con problemas de visión les puede resultar más fácil interactuar con botones y enlaces grandes y claramente definidos.

Los problemas de usabilidad móvil no resueltos pueden tener un gran impacto en el tráfico de tu sitio web 📉 Encuentra la solución aquí mismo y mantén tu tráfico en marcha ⬇️Click to Tweet

Por Qué Puede Aparecer el Error «Elementos Clicables Están Demasiado Cerca Unos de Otros»

Hay varios factores que pueden provocar el problema de «Elementos clicables están demasiado cerca unos de otros». A veces, se debe simplemente a que Google no ha podido solicitar los recursos necesarios durante la renderización. Si ese es el caso, puedes probar el test de compatibilidad con dispositivos móviles y ver si lo supera. Si lo hace, probablemente puedas ignorarlo.

Este problema también puede deberse al diseño de tu sitio web. Por ejemplo, si tratas de meter demasiados elementos interactivos en una sola página web, puedes ver este error de usabilidad móvil.

Otra razón para el error de los elementos clicables es que hay un problema con la capacidad de respuesta móvil del diseño de tu sitio. Tu sitio web debe ser flexible y adaptarse automáticamente al dispositivo específico del visitante para ofrecer la mejor experiencia de usuario posible. Sin embargo, si tu sitio no es responsivo, eso podría dar lugar a problemas de usabilidad.

Más concretamente, si tu sitio web no es responsivo, algunas partes pueden aparecer estiradas, encogidas o deformadas en determinadas pantallas. En los dispositivos con pantallas más pequeñas, los elementos que se pueden tocar pueden aparecer apretados o distorsionados.

Identificar algunas de las razones más comunes y potenciales para que se produzca este error puede ayudarte a entender mejor por qué tu sitio está teniendo problemas de usabilidad móvil. También te ayudará a determinar cómo solucionar el problema.

Cómo Arreglar el Error «Elementos Clicables Están Demasiado Cerca Unos de Otros» (3 Métodos)

Si los usuarios de dispositivos móviles tienen dificultades para navegar por tu sitio web, ¿qué es lo que les impide navegar fuera de él? Prevenir este problema es esencial para resolver todos los problemas de usabilidad móvil lo antes posible. Echemos un vistazo a tres métodos que puedes utilizar para arreglar el error «Elementos clicables están demasiado cerca unos de otros» y ofrecer una mejor UX a tus usuarios móviles.

1. Utiliza el plugin de WordPress YellowPencil Visual Customizer

YellowPencil Visual Customizer es un plugin para WordPress que te permite editar los archivos CSS y temáticos de tu sitio web sin necesidad de codificar.

El plugin de WordPress YellowPencil Visual Customizer

El plugin de WordPress YellowPencil Visual Customizer

Este plugin es muy útil para modificar el tamaño de los elementos clicables, por ejemplo, para hacer los botones más grandes. También puedes crear más espacio entre los elementos clicables cambiando los márgenes y el espacio entre ellos.

Puede descargar el plugin YellowPencil de forma gratuita o adquirir una licencia regular o extendida. Para utilizarlo, primero instala y activa el plugin en tu sitio de WordPress navegando a Plugins > Añadir nuevo, buscando el plugin y haciendo clic en Instalar ahora > Activar.

La opción de instalar el plugin YellowPencil en WordPress

La opción de instalar el plugin YellowPencil en WordPress

A continuación, dirígete a YellowPencil > Personalizaciones. En la pestaña Personalizaciones, selecciona ¡Vamos a empezar!

La página de "Personalizaciones" del plugin YellowPencil de WordPress

La página de «Personalizaciones» del plugin YellowPencil de WordPress

La interfaz del personalizador visual se cargará y te pedirá que selecciones la página que provoca el error de usabilidad móvil.

La interfaz del plugin YellowPencil Visual Customizer

La interfaz del plugin YellowPencil Visual Customizer

Puede aplicar tus cambios a esta página específica o a todo tu sitio web. Si muchas páginas están presentando el error de elementos clicables, es posible que quieras seleccionar Global.

Haz tu selección, y luego haz clic en Continuar. Ahora puedes trabajar a través de tu página web, seleccionando cada elemento que se puede tocar. YellowPencil mostrará un panel de opciones de edición para ese elemento.

Opciones CSS del personalizador visual de YellowPencil para los elementos clicables

Opciones CSS del personalizador visual de YellowPencil para los elementos clicables

Por ejemplo, en la captura de pantalla de abajo, seleccionamos Padding y añadimos 10 píxeles en todos los lados para aumentar el espacio entre los objetivos que se pueden tocar:

La configuración del relleno en el personalizador visual del plugin YellowPencil

La configuración del relleno en el personalizador visual del plugin YellowPencil

Los ajustes de Tamaño y Posición también ayudan a resolver el error «Elementos clicables están demasiado cerca unos de otros». Aunque no es necesario, si quieres editar el código CSS directamente, puedes hacerlo a través del panel izquierdo.

Luego puedes pasar al siguiente elemento que esté causando problemas de usabilidad móvil y repetir el proceso. Cuando estés satisfecho con los cambios, haz clic en el botón verde Guardar.

2. Asegúrate de que Todos los Objetivos que Se Pueden Tocar Sean de Al Menos 48px

Es imposible crear un diseño único y estático que se vea bien y funcione correctamente en todos los dispositivos. En su lugar, lo mejor sería crear un diseño flexible definiendo todos los objetivos manipulables mediante píxeles independientes del dispositivo (ppp). Los elementos definidos con dpi pueden escalarse automáticamente en función del tamaño de la pantalla del usuario.

En un dispositivo móvil, el objetivo táctil mínimo recomendado es de 48×48 píxeles. Equivale a unos 9 mm, lo que es suficiente para la yema del dedo de una persona media.

Por lo tanto, si te cuesta saber exactamente qué elementos son el origen del problema, puede ser útil mirar los ppp de cada elemento. Si está por debajo del objetivo táctil recomendado (por ejemplo, 24px), puedes aumentar el relleno para llevarlo a 48px.

Puedes comprobar el valor calculado de un área que se puede tocar utilizando Chrome DevTools o Firefox DevTools, dependiendo del navegador que prefieras. Utilizaremos Chrome como ejemplo.

Para comprobar el valor de los ppp de uno de los elementos clicables de tu sitio de WordPress, ábrelo en una pestaña del navegador Chrome y navega hasta la página que presenta el error «Elementos clicables están demasiado cerca unos de otros». Haz clic con el botón derecho en la página y selecciona Inspeccionar.

La opción "Inspeccionar" en el navegador Chrome

La opción «Inspeccionar» en el navegador Chrome

Al hacer clic en Inspeccionar se abrirá Chrome DevTools. A lo largo de la parte superior, haz clic en el icono que muestra los dispositivos móviles, lo que le llevará a la pantalla de la barra de herramientas Alternar dispositivo.

La opción "Alternar la barra de herramientas del dispositivo" en Chrome DevTools

La opción «Alternar la barra de herramientas del dispositivo» en Chrome DevTools

En el panel de vista previa de la izquierda, verás una emulación de tu sitio en un dispositivo móvil. Si pasas el ratón por encima y haces clic en cualquiera de los elementos manipulables, podrás ver el valor calculado a la derecha:

La consola DevTools de Google Chrome

La consola DevTools de Google Chrome

Si es necesario, puedes ajustar el tamaño de un elemento editando directamente tus archivos CSS y del sitio o utilizando un plugin como YellowPencil.

3. Comprueba el Método de Entrada

Si está tratando de solucionar el error «Elementos clicables están demasiado cerca unos de otros», puede ayudar a comprobar el método de entrada. Se refiere al método o dispositivo que un usuario está utilizando para ver e interactuar con tu sitio. Más concretamente, puedes ver si están utilizando un smartphone, una tableta u otros dispositivos.

Por ejemplo, el toque se considera un método de entrada impreciso. Como acabamos de comentar, el uso de CSS para aumentar el tamaño de los objetivos táctiles o añadir un relleno adicional puede hacer que los objetivos táctiles sean más fáciles para los visitantes que utilizan dispositivos táctiles para interactuar con tu sitio web.

Sin embargo, determinar el dispositivo de un usuario no es una ciencia exacta. Esta técnica utiliza lo que se conoce como «puntero» para comprobar el método de entrada principal del usuario, que puede tener uno de dos valores:

Ten en cuenta que si el tacto es el principal método de entrada del usuario, esto sugiere que la persona está viendo tu sitio web en un teléfono inteligente o una tableta.

Sin embargo, la presencia de una pantalla táctil no garantiza que alguien esté utilizando un dispositivo móvil. Pueden acceder a tu sitio web con un portátil grande con pantalla táctil, o pueden haber conectado un dispositivo Bluetooth a su smartphone.

Si el puntero devuelve un valor coarse, puedes ajustar el tamaño del objetivo que se puede tocar mediante CSS. Para ello, puedes colocar lo siguiente en el archivo CSS de tu tema de WordPress (o utilizando un plugin como YellowPencil):

.container a {
  padding: .2em;
}
@media (pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

Después de ajustar tu CSS, puedes decirle a Google que vuelva a rastrear tu sitio web para determinar si esto ha solucionado el problema.

Como alternativa, puedes solicitar a Google que vuelva a rastrear URL individuales mediante la herramienta de inspección de URL. Después de enviar tu URL a través de esta herramienta, selecciona Solicitar indexación. La herramienta de inspección comprobará si la URL presenta algún problema de indexación evidente.

Suponiendo que Google no encuentre ningún problema, la página podrá ser indexada.

Google Search Console pone en cola la página solicitada para su indexación

Google Search Console pone en cola la página solicitada para su indexación

Como alternativa, si tienes un gran número de URL, puedes enviar un mapa del sitio. Para cada página que requiera reindexación, actualiza tu etiqueta <lastmod> con la fecha de la última modificación. A continuación, puedes enviar este mapa del sitio mediante la herramienta de informe de mapas del sitio de Google.

Envío de un mapa del sitio a través de Google Search Console

Envío de un mapa del sitio a través de Google Search Console

En la mayoría de los casos, tu mapa del sitio se registrará inmediatamente. Sin embargo, es posible que Google tarde algún tiempo en rastrear todas las URL de tu mapa del sitio, dependiendo de factores como el tamaño del sitio, el tráfico y la actividad. Tampoco hay garantía de que Google rastree todas las URL del mapa del sitio.

¿Estás cansado de experimentar problemas con tu sitio de WordPress? Obtén el mejor y más rápido soporte de hosting con Kinsta! Consulta nuestros planes

Qué Es el Error «El Contenido Es Más Ancho Que La Pantalla»

Como recordarás, Google Search Console puede advertirte de varios errores de usabilidad para móviles. Además de «Elementos clicables están demasiado cerca unos de otros», tu informe resumido también podría incluir el problema de «El contenido es más ancho que la pantalla».

El error "Contenido más ancho que la pantalla" en Google Search Console

El error «El contenido es más ancho que la pantalla» en Google Search Console

Este problema aparecerá en el mismo lugar de tu Google Search Console que el error «Elementos clicables». Del mismo modo, tiene una variedad de causas potenciales.

Por Qué Puede Aparecer el Error «El Contenido Es Más Ancho que la Pantalla»

Este error se produce cuando el diseño de tu sitio se expande horizontalmente, obligando a los usuarios de móviles a desplazarse lateralmente para ver el contenido «fuera de la pantalla». Para ofrecer una buena experiencia de usuario, debes evitar el desplazamiento horizontal siempre que sea posible.

Es más probable que te encuentres con el problema «El contenido es más ancho que la pantalla» si utilizas valores absolutos en tus declaraciones CSS. Dado que los diseños inflexibles pueden provocar el error «Elementos clicables», no es raro encontrar estos dos errores en el mismo informe de usabilidad móvil.

Cómo Arreglar el Error «El Contenido Es Más Ancho Que La Pantalla» (5 Métodos)

Si tu informe incluye el error «El contenido es más ancho que la pantalla», puedes utilizar algunos métodos sencillos para resolverlo. Veamos cinco de las opciones más comunes.

1. Evita el Uso de Variables Absolutas en las Declaraciones CSS

Una de las mejores formas de solucionar el error «El contenido es más ancho que la pantalla» es evitar el uso de variables absolutas en tus declaraciones CSS. Tu contenido no debería requerir una ventana gráfica específica para mostrarse y funcionar correctamente.

Por lo tanto, en lugar de utilizar valores absolutos, deberías optar por valores relativos de anchura y posición para tus elementos CSS. Utilizando valores relativos siempre que sea posible, puedes crear diseños flexibles que se adapten a distintos tamaños de pantalla.

2. Asigna a las Imágenes una Anchura Máxima

Una imagen con dimensiones fijas puede aparecer más grande que la ventana gráfica y, a su vez, provocar el error «El contenido es más ancho que la pantalla». Para garantizar que las imágenes se adapten a las dimensiones de la pantalla, lo mejor es asignar a todas las imágenes un ancho máximo del 100%.

Esto obligará a la imagen a reducirse para ajustarse al espacio disponible. Incluso si utilizas max-width, deberías usar los atributos width y height en tu etiqueta <image>, ya que los navegadores web modernos utilizan esta información para reservar espacio para las imágenes mientras se cargan. Utilizando la etiqueta <image>, puedes evitar los cambios de diseño cuando tus imágenes aparezcan finalmente en la pantalla.

3. Utiliza las Etiquetas Meta de la Ventana Gráfica

Por defecto, los navegadores para móviles muestran la página a la anchura de la pantalla del ordenador, que suele ser de unos 980px. El navegador intentará entonces optimizar tu página aumentando el tamaño de la fuente y escalando tu contenido para que se ajuste a las dimensiones de la pantalla actual.

Por desgracia, este comportamiento por defecto puede dar lugar a incoherencias. Algunos usuarios pueden necesitar hacer zoom para leer e interactuar con tu contenido, por lo que puede estar viendo este error.

En lugar de confiar en este comportamiento por defecto, debería dar al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página. Puedes hacerlo insertando una etiqueta meta viewport en el encabezado de tu documento.

4. Utiliza Técnicas Modernas de Maquetación CSS

También puedes solucionar el error «El contenido es más ancho que la pantalla» cambiando el diseño de tu sitio. Para ayudarte a crear diseños más flexibles, puedes considerar implementar técnicas como Flexbox, CSS Grid Layout o Multiple-Column Layout (Multicol).

5. Utiliza las Consultas de Medios CSS Cuando Sea Necesario

Las consultas de medios pueden facilitar el cambio de estilos en función del dispositivo del usuario, incluidas las pantallas táctiles. Por lo tanto, si en este momento sigues lidiando con el error «El contenido es más ancho que la pantalla», te recomendamos que utilices las consultas de medios CSS cuando corresponda.

Después de hacer estos cambios, será el momento de probar si has resuelto con éxito el error «El contenido es más ancho que la pantalla». Para ello, vuelve a ejecutar el informe de usabilidad móvil y valida la corrección siguiendo los pasos que se indican en la siguiente sección.

Cómo Verificar y Validar la Resolución de Errores

Independientemente de cuál de los errores anteriores esté tratando o de los métodos que utilices para arreglarlo, es esencial determinar si los cambios han resuelto el problema. Para ello, vuelve a ejecutar las pruebas de usabilidad para móviles de Google.

Para ello, vuelve a tu informe de usabilidad móvil y localiza el error «Elementos clicables están demasiado cerca unos de otros». A continuación, selecciona la opción Validar Corrección.

Ten en cuenta que puedes repetir estos mismos pasos si intentas verificar y validar la resolución del error «El contenido es más ancho que la pantalla». A continuación, Google rastreará tu sitio web y recibirás un mensaje para informarte de que está en proceso de validación del cambio.

El mensaje de actualización de validación de Google Search Console

El mensaje de actualización de validación de Google Search Console

Si has resuelto el error, Google Search Console mostrará un mensaje de «Aprobado» y una marca de verificación verde. Por otro lado, si las correcciones que has empleado no se validan, tendrás que volver a visitar el error para implementar una solución alternativa.

4.320 millones de personas acceden a Internet desde sus dispositivos móviles... ¡lo que significa que es esencial resolver este error tan común rápidamente! 😅 Por suerte, esta guía está aquí para ayudarte ⬇️Click to Tweet

Resumen

Los errores de usabilidad móvil no resueltos pueden dar lugar a una mala experiencia de usuario y pueden causar una caída notable en el tráfico de tu sitio web. Si tomas medidas para resolver los errores de usabilidad, puedes asegurarte de que tu sitio web es apto para móviles y accesible para un mayor número de personas.

En este post, has aprendido a solucionar el error «Elementos clicables están demasiado cerca unos de otros» utilizando tres métodos:

  1. Modificar tu sitio web utilizando un plugin de editor de estilo CSS frontend (como YellowPencil).
  2. Utilizando Chrome DevTools para asegurarte de que todos los objetivos que se pueden tocar tienen 48 ppp o más.
  3. Comprobando el método de entrada y ajustando tu CSS en consecuencia.

¿Tienes alguna pregunta sobre cómo solucionar el error «Elementos clicables están demasiado cerca unos de otros»? ¡Háznoslo saber en los comentarios a continuación!


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.