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.
Hay seis tipos principales de problemas de usabilidad móvil con los que te puedes encontrar, que son:
- Utiliza plugins incompatibles
- No se ha definido ningún viewport
- No se ha definido un viewport mediante «device-width».
- El texto demasiado pequeño para leerlo
- El contenido es más ancho que la pantalla
- 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.
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.
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.
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.
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.
A continuación, dirígete a YellowPencil > Personalizaciones. En la pestaña Personalizaciones, selecciona ¡Vamos a empezar!
La interfaz del personalizador visual se cargará y te pedirá que selecciones la página que provoca el error de usabilidad móvil.
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.
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:
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.
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.
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:
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:
- Coarse: El método de entrada principal del dispositivo es el táctil.
- Fine: El método de entrada es un ratón y un trackpad.
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.
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.
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.
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».
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.
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.
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:
- Modificar tu sitio web utilizando un plugin de editor de estilo CSS frontend (como YellowPencil).
- Utilizando Chrome DevTools para asegurarte de que todos los objetivos que se pueden tocar tienen 48 ppp o más.
- 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!
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta