Consejos para un buen diseño responsive
¿Qué es el diseño responsive?
Cuando hablamos de diseño web responsive, nos referimos a un diseño de la web el cual te permita verlo bien en todo tipo de pantallas, adaptándose así el contenido automáticamente a cada tamaño y resolución de la misma. Es importante que la web esté desarrollada para que el contenido se organice solo y encaje perfectamente en un móvil y en un monitor de ordenador, sobre todo ahora que el móvil tiene cada vez más y más importancia en la vida de los usuarios. Para esto, debemos tener en cuenta que hay aspectos del diseño que son imposibles si queremos ser responsive.
Utiliza el menú hamburguesa
La pantalla de un móvil es demasiado pequeña como para un menú convencional. Un menú hamburguesa son esas tres pequeñas rayas que aparecen en una de las esquinas superiores y que, si pulsas, aparece un menú grande donde puedes navegar sin problemas. Esto es muy importante en una web responsive, ya que esconder elementos que permanezcan esperando a que el usuario los necesite, nos permite despejar un poco la composición y dejar más espacio a otros elementos más importantes.
Evita efectos
Las tendencias de diseño actuales van hacia una página web sencilla sin muchos efectos que puedan hacer más complicada la experiencia del usuario. Los usuarios no quieren esperar a un efecto para obtener la información y mucho menos les gusta esperar a que la página se cargue. En móvil pasa lo mismo, cuanto mayor sea la velocidad de carga mejor y, en una pantalla pequeña, el contenido debe verse sin ningún problema así que evita poner efectos que recarguen el texto o que compliquen los call to action.
Programación responsive
A la hora de programar la web, es importante que pienses que los tamaños de pantalla son totalmente diferentes de un dispositivo a otro. Ya no solo hay diferencia entre un móvil y un ordenador, sino que entre móviles y ordenadores también existen muchos formatos de pantalla diferentes. Para evitar programar una versión para cada tipo de pantalla, lo cual sería imposible, podemos evitar algunas cosas como los tamaños fijos. A la hora de decidir cuánto van a medir los elementos de nuestra web, podemos hacerlo con porcentajes, lo cual se adaptará perfectamente a cualquier pantalla. Por ejemplo, en código HTML, debemos poner width:80%; y no width:790px;.
Mobile first
¿Qué es la tendencia mobile first de la que tanto se habla últimamente? Se trata de empezar directamente a pensar en el diseño en móvil y, a partir de ahí, hacer que todo se adapte a la pantalla del ordenador. Cada vez los usuarios utilizan más el teléfono móvil para informarse o para comprar. Además, es lógico que estos dispositivos estén más utilizados dado que se pasan muchas más horas con el móvil a mano que delante de un ordenador, por lo que los usuarios, ante consultas rápidas, decidan utilizar su Smartphone. Es por eso que ahora muchas webs responsive están pensadas primero para que se adapten a una pantalla de móvil y luego se ajusta el contenido a pantalla de ordenador.