El diseño web para móvil tiene que estar muy bien trabajado en tu sitio web, en un momento en que el smartphone es el dispositivo preferido de los usuarios para navegar. ¿Has adaptado tu contenido?
¿Buscas un diseñador profesional? Somos tu Agencia de Marketing Digital
¡Revisa la usabilidad móvil de tu página web!
A principios de año asistí a un webinar SEO con lo mejorcito de la profesión. El tema que se trataba era “Tendencias SEO para 2020”.
Uno de los participantes dijo algo que se me quedó grabadisimo: si has contratado un diseñador web y cuando te va a mostrar el diseño de tu página lo hace en el ordenador, pero no te olvides que necesitas ver es la versión móvil de la página.
Desde entonces, siempre que hago diseño web para un cliente, se lo muestro en el móvil. Y claro, para hacerlo, primero tengo que revisarlo yo misma desde diferentes smartphones, para asegurarme de que se va a ver bien.
¿Cómo puedo saber si mi sitio web está bien optimizado para móviles?
¡Fácil!
Google pone a tu disposición esta página para verificar el grado de optimización de tu diseño web a los dispositivos móviles. Y además, en el caso de que tu página “suspenda” el test, Google proporciona una serie de recomendaciones para subsanar los errores.
¡Veamos cuáles son!
Puntos básicos a revisar para optimizar el diseño web para móvil:
Optimizar el diseño web para móvil exige una serie de verificaciones. Lo mejor para optimizar tu diseño es hacer la comprobación con la herramienta de Google y realizar las correcciones necesarias.
- Que el texto no sea demasiado pequeño para leerlo: es necesario configurar el tamaño de fuente adecuado para cada dispositivo.
- Que el ancho del contenido no sea superior al de la pantalla, para que no se vean las palabras cortadas: cuando una palabra es demasiado larga y/o la tipografía es muy grande, se verá cortada en las pantallas pequeñas. Y lo más seguro es que el corte no coincida con las exigencias básicas de ortografía.
Un ejemplo: Hace poco diseñe una página web para una empresa de recambios de vehículos. Una de las secciones se llamaba: “Hidráulica, rodamientos y retenes”.
Pues bien: cuando estaba haciendo el diseño en el ordenador, se veía todo perfecto. Sin embargo, al revisar la página desde el móvil, esto fue lo que vi:
Hay que tener cuidado con este tipo de errores, pues dan muy mala imagen: ¡justo lo que queremos evitar!
- Que los botones y los enlaces no estén demasiado cerca unos de otros y sean de un tamaño adecuado. Así, cuando el usuario accede al sitio desde un dispositivo con pantalla táctil podrá tocar cada uno de ellos sin que se active el de al lado.
Existen muchas más recomendaciones. Lo primero es la velocidad de carga, que es más importante aún en dispositivos móviles. Además, no se debe utilizar complementos incompatibles con los navegadores móviles. El ejemplo más habitual es Flash: aún quedan sitios web que lo utilizan.
Cuando el diseño web incluye elementos incompatibles con los navegadores móviles, se impide que los usuarios que acceden al sitio desde un smartphone (que cada vez son más) puedan ver todo el contenido. Eso suele perjudicar o incluso arruinar totalmente la experiencia de usuario.
Entre las recomendaciones de Google también se incluye definir la etiqueta “view-port” según el dispositivo. ¿No sabes qué significa? ¡No te preocupes! En breve veremos cómo puedes hacer todas las optimizaciones necesarias sin saber nada de código.
Divi WordPress: ¡Más fácil imposible!
El diseño web de mi página ha superado el test de Google y mi perfil no es precisamente técnico. Lo hice “sin despeinarme” con el tema Divi de WordPress, que es genial.
Si todavía no utilizas WordPress, puedes instalarlo paso a paso siguiendo las instrucciones de esta guía. Cuando tengas WordPress, podrás instalar Divi. A partir de ahí, crear un diseño web optimizado para móviles será coser y cantar ;-).
Por si no conoces Divi, te cuento que más que un tema es un entorno de trabajo. Está diseñado para que pueda utilizarlo todo el mundo. Incluso si no tienes un perfil técnico, podrás crear fácilmente diseños web fantásticos.
Debido a la gran cantidad de posibilidades que ofrece, puede que al principio te parezca un poco lioso. Pero, además de ser súper intuitivo, vas viendo lo que vas haciendo en tiempo real, lo que facilita mucho el diseño.
Otra de las características que más gustan a las personas que utilizan Divi es la facilidad para deshacer los cambios. Así, si te equivocas, puedes retroceder al paso anterior de forma muy sencilla.
Y por si fuera poco, con unos pocos clics podrás configurar diseños diferentes para los diferentes dispositivos. A continuación, te explicaré brevemente y de forma muy sencilla como se hace.
Cómo configurar Divi para que se vea bien en cualquier dispositivo
Cuando estás diseñando una página con el editor visual de Divi, se muestran de forma visible todos sus elementos. La página se divide en diferentes “contenedores”, o espacios con contenido: sección, fila y columna. Al pasar el ratón sobre un contenedor, se muestra su contorno de forma visible, y también aparece el cuadro de opciones de configuración, tal y como ves en la imagen.
Si haces clic en el icono configuración, se abre un pop-up con tres pestañas: Contenido, Diseño y Avanzado:
Por defecto apareces en la primera pestaña, “Contenido”, donde podrás hacer diferentes configuraciones, que varían según el contenedor de que se trate: no es lo mismo, por ejemplo, configurar una fila que un cuadro de texto. Además todos los contenedores incluyen la posibilidad de configurar diferentes tamaños según el dispositivo. La pestaña donde se realizan estos ajustes es la segunda, “Diseño”.
El funcionamiento es el mismo independientemente del tipo de módulo que estemos diseñando. Primero haces clic en la pestaña “Diseño”, y después tienes que abrir la opción “Tamaño” (cuando estás diseñando una fila), “Texto” (si quieres ajustar diferentes tamaños para un cuadro de texto) o bien “Texto de subtítulo” si lo que estás modificando es el título o el subtítulo.
Adaptar el tamaño de un título:
En este caso estamos modificando el tamaño de un título, concretamente del H1. Así que seleccionamos “Texto de subtítulo”, hacemos clic sobre H1 (o sobre el encabezado del que se trate) y hacemos scroll hasta ver la opción “Título tamaño de texto”.
Todo el truco está en el icono del teléfono que ves remarcado con un recuadro en la imagen anterior. No te preocupes si no lo ves, aparecerá en cuanto pases el ratón por la zona. Cuando haces clic sobre ese icono, aparecen las tres pestañas que se ven debajo: “Escritorio, tableta, teléfono”.
Así que solo tienes que hacer clic en cada pestaña para poder configurar fácilmente el tamaño deseado. Como verás, al hacer clic sobre la pestaña “Tableta” se mostrará la previsualización de tamaño tableta, y al pulsar sobre teléfono, se hará más estrecho el editor hasta adoptar el formato del teléfono.
Quizá al explicarlo parece un poco lioso, pero te aseguro que es facilísimo. ¡Pruébalo! Te hablo desde la experiencia: he trabajado con otros editores y herramientas y para mí, Divi es la que pone más sencillo lo de adaptar el contenido a diferentes dispositivos.
Adicionalmente, al hacer clic sobre el icono de tres puntos que aparece abajo en el centro cuando pasas el ratón por la parte inferior de la pantalla, aparecerá un menú como el que ves a continuación. A la izquierda tienes la botonera para previsualizar el diseño según los diferentes dispositivos.
Adaptar el tamaño de otros elementos:
Como te comentaba, el funcionamiento es el mismo: en la pestaña “Diseño” se pueden establecer las configuraciones que te permitirán optimizar el contenido según el dispositivo. En la opción “Tamaño” podrás definir las dimensiones de cada elemento tanto en píxeles como en porcentajes.
De igual modo, puedes indicar tanto el tamaño mínimo como el tamaño máximo de los diferentes elementos. Todas estas configuraciones te permitirán seguir de forma óptima las directrices de Google en lo que se refiere al diseño web para móviles. La pestaña “Diseño” incluye muchas otras configuraciones interesantes para esto.
Por ejemplo, en el apartado “Separación”, también se pueden establecer las dimensiones de los márgenes y el relleno, y poner medidas diferentes para móviles, tablets o PC. Si has seguido el tutorial, habrás visto que además de las optimizaciones que hemos mencionado, en la pestaña “Diseño” se incluyen muchas más opciones: Fuente, color, sombra de caja, animaciones… ¡no puede ser más intuitivo!
No te preocupes si al principio no las controlas todas: con algo de práctica, aprenderás mucho más rápido de lo que piensas. Asegurarte de que tu web tiene un diseño optimizado para móvil hará que Google te mire “con más cariño”, y lo notarás en el posicionamiento SEO. Así que, ¡a trabajar!
Este post es de nuestra invitada Natalia de la Peña Frade
