Cómo corregir el error «Elementos en los que se puede hacer clic demasiado juntos» (3 métodos)
Los problemas de usabilidad móvil no resueltos pueden tener un impacto significativo en el tráfico de su sitio web. Un problema común sobre el que Google Search Console puede advertirle es el error «Elementos en los que se puede hacer clic demasiado juntos», lo que probablemente significa que su sitio es complejo para que los usuarios de dispositivos móviles naveguen.
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 en los que se puede hacer clic lo antes posible. Afortunadamente, hay varias formas de hacerlo y hacer que su sitio web sea más compatible con dispositivos móviles.
En este artículo, explicaremos qué es el problema de «Elementos en los que se puede hacer clic demasiado juntos», analizaremos por qué sucede y lo guiaremos a través de tres métodos que puede utilizar para solucionarlo. También explicaremos qué es el error «Contenido más ancho que la pantalla» y cómo puede resolverlo.
¡Pongámonos a trabajar!
Qué es el error «Elementos en los que se puede hacer clic demasiado juntos»
En pocas palabras, los errores de usabilidad móvil pueden hacer que su sitio de WordPress sea inaccesible y más difícil de navegar para los usuarios de dispositivos móviles. Puede utilizar el informe de usabilidad móvil de Google Search Console para probar su sitio.
La herramienta Informe de usabilidad móvil de Google Search Console
Hay seis tipos principales de problemas de usabilidad móvil que puede encontrar, que son:
- Utiliza complementos incompatibles
- Viewport no establecido
- La ventana gráfica no está configurada en «ancho de dispositivo»
- Texto demasiado pequeño para leer
- Contenido más ancho que la pantalla
- Elementos en los que se puede hacer clic demasiado juntos
Como parte de este informe, Google Search Console verificará todos los elementos en los que se puede hacer clic en su sitio web, como botones y enlaces. El propósito de esto es verificar si los usuarios de dispositivos móviles pueden interactuar cómodamente con los elementos de su sitio web usando solo el toque, en lugar de usar un teclado o mouse.
Si Google Search Console determina que los elementos que se pueden tocar representan un desafío para los usuarios de dispositivos móviles, incluirá el error «Elementos en los que se puede hacer clic demasiado juntos» en su informe de resumen.
Un informe de problemas de usabilidad móvil de Google Search Console
Si hace clic en el error, lo 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 «Elementos en los que se puede hacer clic demasiado cerca» de Google Search Console
Esencialmente, el error de elementos en los que se puede hacer clic es una advertencia que indica que los elementos en los que se puede hacer clic en su sitio de WordPress son demasiado pequeños para que los usuarios de dispositivos móviles puedan interactuar con ellos cómodamente.
Alternativamente, podría 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 juntos, los usuarios corren el riesgo de tocar los incorrectos, lo que perjudica la experiencia del usuario (UX).
Aunque tener elementos en los que se puede hacer clic demasiado juntos se clasifica como un error de usabilidad móvil, resolver este problema también puede mejorar la accesibilidad de su sitio. Por ejemplo, las personas con problemas de destreza pueden apreciar un espacio adicional entre los elementos interactivos. Por el contrario, a los usuarios con problemas relacionados con la 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 en los que se puede hacer clic demasiado juntos»
Varios factores pueden provocar el problema de «Elementos en los que se puede hacer clic demasiado juntos». A veces, es solo porque Google no pudo solicitar los recursos necesarios durante el renderizado. Si ese es el caso, puede intentar usar la prueba compatible con dispositivos móviles y ver si pasa. Si es así, probablemente puedas ignorarlo.
Este problema también puede deberse al diseño de su sitio web. Por ejemplo, si intenta incluir demasiados elementos interactivos en una sola página web, es posible que vea este error de usabilidad móvil.
Otra razón del error de los elementos en los que se puede hacer clic es que hay un problema con la capacidad de respuesta móvil del diseño de su sitio. Su sitio web debe ser flexible y adaptarse automáticamente para adaptarse al dispositivo específico del visitante para proporcionar la mejor experiencia de usuario posible. Sin embargo, si su sitio no responde, eso podría resultar en problemas de usabilidad.
Más específicamente, si su sitio web no responde, algunas partes pueden aparecer estiradas, encogidas o deformadas en pantallas específicas. En dispositivos con pantallas más pequeñas, los elementos que se pueden tocar pueden parecer apretados o distorsionados.
Identificar algunas de las razones estándar y potenciales por las que se produce este error puede ayudarlo a comprender mejor por qué su sitio tiene problemas de usabilidad móvil. También le ayudará a determinar cómo solucionar el problema.
Cómo corregir el error «Elementos en los que se puede hacer clic demasiado juntos» (3 métodos)
Si los usuarios de dispositivos móviles tienen dificultades para navegar por su sitio web, ¿qué les impide navegar? fuera ¿de eso? Prevenir este problema es esencial para resolver todos los problemas de usabilidad móvil lo más rápido posible. Echemos un vistazo a tres métodos que puede utilizar para corregir el error «Elementos en los que se puede hacer clic demasiado juntos» y proporcionar una mejor UX a sus usuarios móviles.
1. Utilice el complemento de WordPress YellowPencil Visual Customizer
YellowPencil Visual Customizer es un complemento de WordPress frontend que le permite editar los archivos de temas y CSS de su sitio web sin ningún tipo de codificación.
El complemento de WordPress YellowPencil Visual Customizer
Este complemento es útil para modificar el tamaño de los objetivos que se pueden tocar, como hacer que los botones sean más grandes. También puede crear más espacio entre los elementos en los que se puede hacer clic cambiando los márgenes y el espaciado entre ellos.
Puede descargar el complemento YellowPencil de forma gratuita o comprar una licencia regular o extendida. Para usarlo, primero instálelo y actívelo en su sitio de WordPress navegando a Complementos > Agregar nuevo, buscando el complemento y luego haciendo clic en Instalar ahora > Activar.
La opción para instalar el complemento YellowPencil en WordPress
A continuación, navegue hasta Lápiz amarillo > Personalizaciones. Bajo la Personalizaciones pestaña, seleccione ¡Empecemos!
La página de «Personalizaciones» del complemento YellowPencil WordPress
La interfaz del personalizador visual se cargará y le pedirá que seleccione la página que desencadena el error de usabilidad móvil.
La interfaz del complemento YellowPencil Visual Customizer
Puede aplicar sus cambios a esta página específica o en todo su sitio web. Si muchas páginas presentan el error de elementos en los que se puede hacer clic, es posible que desee seleccionar Global.
Haga su selección y luego haga clic en Continuar. Ahora puede avanzar a través de su 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 elementos en los que se puede hacer clic
Por ejemplo, en la siguiente captura de pantalla, seleccionamos Relleno y agregó 10 píxeles en todos los lados para aumentar el espacio entre los objetivos que se pueden tocar:
La configuración de relleno en el personalizador visual del complemento YellowPencil
La Tamaño y Posición La configuración también ayuda a resolver el error «Elementos en los que se puede hacer clic demasiado juntos». Aunque no es necesario, si desea editar el código CSS directamente, puede hacerlo a través del panel izquierdo.
Luego, puede pasar al siguiente elemento que está causando problemas de usabilidad móvil y repetir el proceso. Cuando esté satisfecho con sus cambios, haga clic en el verde Ahorrar botón.
2. Asegúrese de que todos los objetivos que se pueden tocar tengan al menos 48 píxeles
Es imposible crear un diseño único y estático que se vea bien y funciona correctamente en todos los dispositivos. En cambio, sería mejor si tuviese como objetivo crear un flexible diseño mediante la definición de todos los objetivos que se pueden tocar utilizando píxeles independientes del dispositivo (ppp). Los elementos que se definen mediante ppp se pueden escalar automáticamente al tamaño según el 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, que es suficiente para la yema de los dedos de una persona promedio.
Por lo tanto, si tiene dificultades para averiguar exactamente qué elementos son la fuente del problema, puede ser útil analizar los ppp de cada elemento. Si está por debajo del objetivo táctil recomendado (por ejemplo, 24 px), puede aumentar el relleno para llevarlo a 48 px.
Puede verificar el valor calculado de un área que se puede tocar con Chrome DevTools o Firefox DevTools, según el navegador que prefiera. Usaremos Chrome como ejemplo.
Para comprobar el valor de dpi de uno de los elementos en los que se puede hacer clic en su sitio de WordPress, ábralo en una pestaña del navegador Chrome y navegue hasta la página que presenta el error «Elementos en los que se puede hacer clic demasiado juntos». Haga clic derecho en la página y seleccione Inspeccionar.
La opción «Inspeccionar» en el navegador Chrome
Haciendo clic Inspeccionar abrirá Chrome DevTools. En la parte superior, haga clic en el icono que muestra los dispositivos móviles, que lo llevará a la Alternar la barra de herramientas del dispositivo pantalla.
La opción «Alternar barra de herramientas del dispositivo» en Chrome DevTools
En el panel de vista previa de la izquierda, verá una emulación de dispositivo móvil de su sitio. Si pasa el cursor y hace clic en cualquiera de los elementos que se pueden tocar, puede ver el valor calculado a la derecha:
La consola de DevTools de Google Chrome
Si es necesario, puede ajustar el tamaño de un elemento editando directamente su CSS y archivos del sitio o usando un complemento como YellowPencil.
3. Verifique el método de entrada
Si está tratando de corregir el error «Elementos en los que se puede hacer clic demasiado juntos», puede ayudar a verificar el método de entrada. Se refiere al método o dispositivo que utiliza un usuario para ver e interactuar con su sitio. Más específicamente, puede ver si están usando un teléfono inteligente, tableta u otros dispositivos.
Por ejemplo, el tacto se considera un método de entrada impreciso. Como acabamos de comentar, el uso de CSS para aumentar el tamaño de sus objetivos táctiles o agregar un relleno adicional puede facilitar los objetivos que se pueden tocar para los visitantes que utilizan dispositivos táctiles para interactuar con su 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 verificar el método de entrada principal del usuario, que puede tener uno de dos valores:
- Grueso: El método de entrada principal del dispositivo es táctil.
- Multa: El método de entrada es un mouse y un trackpad.
Tenga en cuenta que si el toque es el método de entrada principal del usuario, esto sugiere que la persona está viendo su sitio web en un teléfono inteligente o tableta.
Sin embargo, la presencia de una pantalla táctil no garantiza que alguien esté usando un dispositivo móvil. Podrían estar accediendo a su sitio usando una computadora portátil grande con pantalla táctil, o podrían haber conectado un dispositivo Bluetooth a su teléfono inteligente.
Si el puntero devuelve un valor aproximado, puede ajustar el tamaño del objetivo que se puede tocar mediante CSS. Para hacerlo, puede colocar lo siguiente en el archivo CSS de su tema de WordPress (o utilizando un complemento como YellowPencil):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Después de ajustar su CSS, puede decirle a Google que vuelva a rastrear su sitio web para determinar si esto ha solucionado el problema.
Alternativamente, puede pedirle a Google que vuelva a rastrear URL individuales utilizando la Herramienta de inspección de URL. Después de enviar su URL a través de esta herramienta, seleccione Solicitar indexación. Luego, la herramienta de inspección probará la URL en busca de problemas de indexación obvios.
Suponiendo que Google no encuentre problemas, la página calificará para la indexación.
Google Search Console pone en cola la página solicitada para indexarla
Alternativamente, si tiene una gran cantidad de URL, puede enviar un mapa del sitio. Para cada página que requiera volver a indexar, actualice su
Envío de un mapa del sitio a través de Google Search Console
En la mayoría de los casos, su mapa del sitio se procesará de inmediato. Sin embargo, es posible que Google tarde algún tiempo en rastrear todas las URL de su mapa del sitio, según factores como el tamaño, el tráfico y la actividad del sitio. Tampoco hay garantía de que Google rastree todas las URL de su mapa del sitio.
Qué es el error «Contenido más ancho que la pantalla»
Como recordará, Google Search Console puede advertirle sobre varios errores de usabilidad móvil. Además de «Elementos en los que se puede hacer clic demasiado juntos», su informe de resumen también podría incluir el problema «Contenido más ancho que la pantalla».
El error «Contenido más ancho que la pantalla» en Google Search Console
Este problema aparecerá en el mismo lugar en su Consola de búsqueda de Google que el error «Elementos en los que se puede hacer clic». Del mismo modo, tiene una variedad de causas potenciales.
Por qué puede aparecer el error «Contenido más ancho que la pantalla»
Este error ocurre cuando el diseño de su sitio se expande horizontalmente, lo que obliga a los usuarios de dispositivos móviles a deslizarse hacia los lados para ver el contenido «fuera de la pantalla». Para proporcionar una buena experiencia de usuario, debe evitar el desplazamiento horizontal siempre que sea posible.
Es más probable que encuentre el problema de «Contenido más ancho que la pantalla» si usa valores absolutos en sus declaraciones CSS. Dado que los diseños inflexibles pueden generar el error «Elementos en los que se puede hacer clic», no es raro encontrar estos dos errores en el mismo informe de usabilidad móvil.
Cómo corregir el error «Contenido más ancho que la pantalla» (5 métodos)
Si su informe incluye el error «Contenido más ancho que la pantalla», puede utilizar algunos métodos simples para resolverlo. Echemos un vistazo a cinco de las opciones más comunes.
1. Evite el uso de variables absolutas en declaraciones CSS
Una de las mejores formas de corregir el error «Contenido más ancho que la pantalla» es evitar el uso de variables absolutas en sus declaraciones CSS. Su contenido no debería requerir una ventana gráfica específica para mostrarse y funcionar correctamente.
Por lo tanto, en lugar de usar valores absolutos, debe optar por valores de ancho y posición relativos para sus elementos CSS. Utilizando valores relativos siempre que sea posible, puede crear diseños flexibles que se adapten a una variedad de tamaños de pantalla.
2. Asignar a las imágenes un ancho máximo
Una imagen con dimensiones fijas puede parecer más grande que la ventana gráfica y, a su vez, desencadenar el error «Contenido más ancho que la pantalla». Para asegurarse de que sus imágenes escalen en función de las dimensiones de la pantalla, es mejor asignar a todas las imágenes un ancho máximo del 100%.
Obligará a la imagen a encogerse para ajustarse al espacio disponible. Incluso si usa max-width, aún debe usar los atributos de ancho y alto en su <image> etiqueta, ya que los navegadores web modernos utilizan esta información para reservar espacio para las imágenes a medida que se cargan. Utilizando la <image> etiqueta, puede evitar cambios de diseño cuando sus imágenes finalmente aparezcan en la pantalla.
3. Utilice metaetiquetas de ventana gráfica
De forma predeterminada, los navegadores móviles muestran la página con el ancho de la pantalla del escritorio, que suele rondar los 980 píxeles. Luego, el navegador intentará optimizar su página aumentando el tamaño de fuente y escalando su contenido para que se ajuste a las dimensiones actuales de la pantalla.
Desafortunadamente, este comportamiento predeterminado puede resultar en inconsistencias. Es posible que algunos usuarios necesiten acercarse para leer e interactuar con su contenido, por lo que es posible que vea este error.
En lugar de confiar en este comportamiento predeterminado, debe dar instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página. Puede hacer esto insertando una metaetiqueta de ventana gráfica en el encabezado de su documento.
4. Utilice técnicas modernas de diseño de CSS
También puede corregir el error «Contenido más ancho que la pantalla» cambiando el diseño de su sitio. Para ayudarlo a crear diseños más flexibles, es posible que desee considerar la implementación de técnicas como Flexbox, CSS Grid Layout o Multiple-Column Layout (Multicol).
5. Utilice consultas de medios CSS cuando corresponda
Las consultas de medios pueden facilitar el cambio de estilos según el dispositivo del usuario, incluidas las pantallas táctiles. Por lo tanto, si todavía tiene el error «Contenido más ancho que la pantalla» en este punto, le recomendamos que utilice consultas de medios CSS cuando sea apropiado.
Después de realizar estos cambios, será el momento de probar para ver si ha resuelto correctamente el error «Contenido más ancho que la pantalla». Puede hacer esto volviendo a ejecutar el informe de usabilidad móvil y validando la corrección siguiendo los pasos que discutimos en la siguiente sección.
Cómo verificar y validar la resolución de errores
Independientemente de cuál de los errores anteriores esté enfrentando o de los métodos que utilice para solucionarlo, es fundamental determinar si sus cambios han resuelto el problema. Puede hacer esto volviendo a ejecutar las pruebas de usabilidad móvil de Google.
Para hacerlo, vuelva a su informe de usabilidad móvil y localice el «Los elementos en los que se puede hacer clic están demasiado juntos» error. A continuación, seleccione el Validar corrección opción.
Tenga en cuenta que puede repetir estos mismos pasos si está intentando verificar y validar su resolución de error para «Contenido más ancho que la pantalla». Luego, Google rastreará su sitio web y recibirá un mensaje que le informará que está en proceso de validación del cambio.
El mensaje de actualización de validación de Google Search Console
Si ha resuelto el error, Google Search Console mostrará un mensaje de «Aprobado» y una marca de verificación verde adjunta. Por otro lado, si las correcciones que empleó no están validadas, tendrá que revisar el error para implementar una solución alternativa.
Resumen
Los errores de usabilidad móvil no resueltos pueden resultar en una mala experiencia del usuario y pueden causar una caída notable en el tráfico de su sitio web. Tomando medidas para resolver errores de usabilidad, puede asegurarse de que su sitio web sea compatible con dispositivos móviles y accesible para un conjunto más amplio de personas.
En esta publicación, aprendió cómo corregir el error «Elementos en los que se puede hacer clic demasiado juntos» mediante tres métodos:
- Modifique su sitio web utilizando un complemento de editor de estilo CSS frontend (como YellowPencil).
- Utilice Chrome DevTools para asegurarse de que todos los objetivos que se pueden tocar tengan 48 ppp o más.
- Verifique el método de entrada y ajuste su CSS en consecuencia.
¿Tiene alguna pregunta sobre cómo corregir el error «Elementos en los que se puede hacer clic demasiado juntos»? ¡Háganos saber en los comentarios a continuación!
Si disfrutó de este artículo, entonces le encantará la plataforma de alojamiento de WordPress de Kinsta. Acelere su sitio web y obtenga asistencia las 24 horas, los 7 días de la semana de nuestro veterano equipo de WordPress. Nuestra infraestructura impulsada por Google Cloud se centra en el escalado automático, el rendimiento y la seguridad. ¡Permítanos mostrarle la diferencia de Kinsta! Mira nuestros planes
