Siguiendo con la serie de artículos sobre cómo cuidar de nuestra web como si fuera un jardín, hoy toca hablar del clima.
Esto es lo que nos dicen desde blog.homedepot.com.mx al respecto:
«… debemos conocer a fondo las condiciones climáticas de la zona en la que pretendemos desarrollar nuestro jardín (cálida, desértica, tropical, húmeda, fría, etc.). De esa manera podremos elegir flores, matas, hierbas y arbustos que realmente se adaptarán al clima en que serán sembradas.»
Pero… ¿qué tiene que ver el clima con tu web?
En realidad, no tiene absolutamente nada que ver. Pero lo que sí tiene mucho que ver tu web, son las condiciones que la rodean en función de si tus visitantes llegan a ella a través de su móvil, o de un ordenador.
Es lo que llamaremos, adaptabilidad web o web responsive.
¿Qué es el diseño web responsive?
Entenderemos por adaptabilidad todas aquellas consideraciones particulares que deberás tener en cuenta a la hora de diseñar tu web, de tal manera que se adapte de la mejor manera posible al usuario, según el dispositivo que utilice para navegar por ella.
A continuación veremos las 3 más importantes. No obstante, lo importante de este concepto es que siempre tengas presente lo siguiente.
Primero, que navegar por internet desde el teléfono móvil es cada vez más común, lo cual ha hecho que Google y otros buscadores de internet valoren mejor aquellas webs que mejor se han adaptado a las pantallas más pequeñas.
Segundo, que no solo se trata de una cuestión estética. Para ofrecer una buena experiencia móvil, es imprescindible que tengamos en cuenta aspecto como el ratio de pantalla, la posición de la mano, la ausencia de ratón o las condiciones medioambientales, como por ejemplo el sol.
3 aspectos a tener en cuenta a la hora de diseñar la versión responsive de tu web
Te cuento qué es lo básico que debes revisar y cómo hacerlo, para mejorar la versión móvil de tu web.
Tipografías e imágenes
Probablemente lo más importante en una web, sobre todo en webs inmobiliarias o de Home Staging, son el texto y las imágenes.
El texto explica lo que haces, conduce al usuario hacia las distintas secciones de tu web, conecta con tus lectores… En definitiva, el texto de tu web es tu voz en internet.
Por otro lado, las imágenes son el soporte visual del mensaje.
Pero no es lo mismo leer y ver una imagen en una pantalla horizontal de 20 pulgadas, que en una vertical de 6,5.
El contenido no se muestra igual.
En una pantalla horizontal, las imágenes pueden quedar al lado del texto, creando un contexto que ayudará al usuario a entender mejor lo que queremos decir.
En una pantalla vertical, las imágenes pueden aparecer encima o debajo del texto, descontextualizadas, convirtiéndose en un elemento de distracción.
O peor aún, la imagen puede quedar por debajo del texto, situación en la que ni la imagen se verá bien, ni el texto se leerá con claridad.
Por todas esas razones, cada vez que veas una imagen acompañada de texto en tu web, comprueba si la composición se ve igual de bien en teléfono móvil.
Si funciona, perfecto. Si no, puede que tengas que sacrificar alguna imagen y priorizar el texto.
Botones y formularios
Los botones y el resto de llamadas a la acción de tu web web, incluidos los banners laterales, cambian drásticamente cuando los vemos desde una pantalla vertical más pequeña.
Por ejemplo, si estás leyendo este artículo desde un ordenador, verás que, a la derecha de la pantalla, te aparecen algunos elementos (llamadas a la acción) que te llevan a determinadas secciones de la web.
Pero, si lo miras desde un teléfono móvil, todo lo que esté en la barra lateral desaparecerá y se colocará, o bien al principio de la página, o bien al final.
Los botones también pueden sufrir cambios.
En algunos casos, se verán más pequeños, y el texto se leerá con mayor dificultad.
En otros casos, los botones se desplazarán, quedando muy alejados del texto o, por el contrario, demasiado cerca.
Los formularios de contacto son otro elemento a tener muy en cuenta.
Es importante que nos aseguremos de que son cómodos para el usuario, independientemente del tipo de pantalla que esté utilizando.
De hecho, siempre recomiendo a mis clientes que los formularios de su web tengan solo los campos imprescindibles. Por ejemplo, si solo es necesario el nombre, no añadamos un campo para los apellidos.
La idea de mantener los formularios de tu web lo más minimalista posible, cobra aún más importancia en su versión móvil.
Menú
Es bastante común encontrar webs cuya navegación depende, casi en exclusiva, del menú.
No obstante, el menú en la versión escritorio de tu web es muy distinto al menú de la versión móvil.
En la versión escritorio, el menú aparece completo, con categorías y subcategorías, todo accesible con un simple movimiento de ratón.
En cambio, en la versión móvil no es así.
El menú aparece oculto tras tres rayitas que llamamos hamburguesa y, para descubrirlo, primero es necesario que lo despleguemos.
En este apartado permíteme hacerte dos recomendaciones, las cuales me han funcionado muy bien en todos mis diseños.
La primera es que prepares un menú más breve solo con las opciones realmente importantes para tu negocio y para tus usuarios, para la versión móvil de la web.
La segunda es que refines el diseño de cada una de las páginas de tu web para que el usuario encuentre toda la información de forma rápida y simple haciendo scroll.
De ese modo, el menú se convertirá en un recurso, pero no en una necesidad.
Por ejemplo, la página de inicio suele ser la primera página a la que llegarán la mayoría de tus visitas.
Aprovéchala para ofrecer una estructura de navegación ordenada estratégicamente, de manera que ofrezca a la mayoría de tus visitas el camino hacia sus opciones favoritas.
¿Cómo revisar nuestra web en distintos formatos de pantalla desde el propio ordenador?
Ahora que sabes en qué debes fijarte, veamos cómo revisar el diseño responsive de tu web para ver qué es lo que se puede mejorar.
Y sí, puedes hacerlo abriendo tu web en tu propio teléfono. Hazlo. Mejor eso que nada.
Pero si quieres trabajar de forma cómoda desde tu ordenador, hay otra forma que estoy seguro te va a encantar.
Además, te permitirá no solo probar tu web en diferentes teléfonos móviles, sino también en diferentes navegadores.
Sigue estos pasos:
1. Abre Google Chrome o Mozilla Firefox
2. Abre tu página web
3. Haz click en el botón derecho de tu ratón y selecciona la opción Inspeccionar
4. Selecciona la opción responsive desde el menú de la derecha.
5. Elige varios modelos de teléfono y tablet, y empieza a comprobar cómo se ve tu web en cada uno de ellos.
6. Paso final: navega por las diferentes páginas de tu web, anota todo aquello que creas que se puede mejorar y habla con tu programador o diseñador para que aplique los cambios.
Fin.
