Optimización de la navegacion móvil en una página responsive
Muchas de las plantillas de pago para WordPress que encontramos en Themeforest son “fully responsive”, ¿pero son realmente usables? Tendríamos que hacer una diferencia entre lo que es una plantilla que cumple con los estándares “responsive” y lo que es una web usable en su navegación móvil.
El diseño responsive es una forma de diseñar páginas web que tiene como objetivo que la apariencia de una página web se adapte al dispositivo a través del cual se visualiza. Pero que sea responsive no es sinónimo de que se maximice la experiencia de usuario (UX) al navegar por ella. Iconos que aparecen cortados, formularios que se salen de la pantalla, barras de navegación que se salen del espacio de visualización, fuentes tan pequeñas que no tienes otra que utilizar los dedos para ampliar la imagen… son todo signos de que la página web no está realmente adaptada para maximizar la experiencia del usuario. Los desarrolladores de estas plantillas de pago prestan mucha atención a la visualización en PC pero no acaban de afinar su visualización en otros terminales.
En Witcamp tenemos acceso a Google Analytics de todos los proyectos web que hemos desarrollado y podemos afirmar que la gran mayoría de clientes ya está recibiendo un 50% de las visitas en movilidad. Por lo tanto tenemos que optimizar la navegación móvil, ya no solo para mejorar la experiencia del usuario, sino también para mejorar el posicionamiento en Google.
Además de estudiar la navegación y tratar de optimizar la experiencia del usuario, también tenemos que considerar algunos elementos que Google tiene muy en cuenta para mejorar tu posicionamiento en los SERPs. A continuación tienes tres herramientas interesantes para averiguar cómo Google interpreta el acceso mobile a tu página:
Para optimizar la página se hacen modificaciones en los archivos .php del theme y en la hoja de estilos CSS. Las modificaciones en el código .php se deben hacer siempre en un child theme para que puedas seguir actualizando la plantilla cuando el autor publique nuevas versiones. Y los cambios en el CSS deberían hacerse en el archivo original del child theme en el espacio ftp de la página web. También se podría editar el CSS en las opciones del theme desde WordPress, pero no es lo más práctico.
El objetivo es diseñar páginas que tanto en la visualización PC como en movilidad cumplan con el principio “pixel perfect”, que no es más que colocar cada elemento de forma óptima en cada una de las páginas.
Aquí tenéis un ejemplo del “antes” y del “después” de una página web que cumple con los estándares responsive pero que no era usable. A ver qué te parece!
Etiqueta:página web, UX, wordpress
