Diseño web responsive

La llegada de los smartphones supuso una revolución para el mundo del diseño web. De repente todos queríamos ser los primeros en crear sitios web con un diseño web responsive. Parecía magia negra: redimensionar el navegador hacía que todo el sitio web se acomodase a la nueva resolución, cambiando incluso la estructura del sitio web.

Cuando se lo enseñábamos a los clientes, por raro que parezca ahora, normalmente se quedaban boquiabiertos. Hablamos de no hace muchos años, y lo cierto, es que ahora es algo que ya está totalmente normalizado.

Sin embargo, aún queda mucho trabajo por hacer dentro del diseño web responsive o adaptable. No nos podemos limitar a trabajar con un framework css como puede ser Bootstrap y esperar que éste haga todo el trabajo por nosotros. Si queremos conectar con el usuario final, deberemos brindarle una experiencia de usuario acorde con su dispositivo y en este aspecto deberemos comprender cómo el usuario interactua con su dispositivo. Será imprescindible entender la filosofía con la que nuestro visitante espera navegar.

Si nos encontramos frente a un pc de mesa, deberemos tener en cuenta el ratón como elemento principal de navegación. Si por el contrario, estamos navegando por el sitio web con un smartphone, deberemos ser conscientes de que la forma de navegación es táctil, y por lo tanto, ofreceremos facilidades para ello en nuestro diseño web.

Claves para un buen diseño web responsive

Menú de navegación

Será importante que el menú de navegación sea de fácil uso para nuestro usuario. Podemos facilitar eso, poniendo un simple botón que despliegue el menú de nuestro diseño web, ya sea desde un lateral, como desplegado hacia abajo. De esta forma, estaremos ahorrando espacio y siendo más ordenados para con el usuario.

Imágenes adaptables y coherentes

Deberemos asegurarnos, de que las imágenes que tenga nuestro diseño sean adaptables. Deben verse correctamente tanto en una pantalla de 27″ como en un Iphone.

Aunque lo anterior es bastante básico, lo que resulta muy importante y que muchas veces no se tiene en cuenta es la coherencia con las proporciones. Las imágenes que pongamos deberán ser coherentes con la orientación del dispositivo o pantalla. Si en el momento de diseñar la página web, en versión desktop, ponemos una imagen demasiado panorámica, en un smartphone obtendremos una imagen de dos dedos de altura y una anchura de todo el dispositivo. Lo cual, normalmente, no tendrá mucho sentido.

Por lo tanto, lo más correcto, sería ofrecer un tamaño intermedio o hacer una sustitución de la imagen para el caso del smartphone.

Orden y jerarquía

El orden en que pongamos cada sección de nuestro diseño web, es vital. Puesto que seguramente al redimensionar el diseño web a una medida de smartphone, pasaremos a tener la mayoría de contenido en una sola columna, una debajo de la otra, deberemos planificar el orden en que queremos que el usuario visualice nuestras secciones, poniendo las más importantes lo más arriba posible.

Menos es más

Siguiendo con la lógica del punto anterior, lo más recomendable, cuando estamos diseñando para una pantalla de un smartphone, será eliminar las secciones que no sean relevantes para los usuarios que visiten desde estos dispositivos. Por ejemplo, los típicos pies de página, podemos optar por eliminarlos por completo, y como mucho, dejando únicamente una línea con la información de contacto.

Utiliza todas las herramientas disponibles

Si estamos diseñando la experiencia de navegación smartphone, será imprescindible tener en cuenta todas las funcionalidades extra que nos ofrece. Por ejemplo, si en la versión desktop ponemos un mapa de contacto, en la versión smartphone, deberíamos poner un click para abrir el navegador GPS. Para facilitar la tarea al usuario, también podemos crear botones de llamada directa.

Otros datos interesantes

Actualmente, los datos nos dicen que ya hay más usuarios visitando sitios web a través de dispositivos mobile que en desktop. Los datos son de un 51% de visitantes desde mobile frente a un 42% de visitantes a través de desktop y un 7% restante de visitantes que están usando otro tipo de dispositivos.

• 51% de visitantes desde mobile
• 42% de visitantes desde desktop
• 7% usan otros dispositivos

¿Quieres empezar un proyecto?

Trabaja con nosotros

Mantente inspirado con nuestra newsletter