A medida que crece el uso de dispositivos móviles, la necesidad de un sitio web que funcione con navegadores de escritorio y móviles es algo que la mayoría de la gente no puede evitar. Afortunadamente, con los navegadores modernos de hoy en día, el diseño para dispositivos móviles no es tan difícil como lo era antes.
¿Qué es el Diseño Responsive o Responsive Design?
El Diseño Responsive es una técnica de uso fluido de grids, imágenes flexibles y uso de media queries en CSS para responder al comportamiento del usuario y del dispositivo en función del tamaño de la pantalla, la plataforma y la orientación.
¿Por qué diseñar para móviles y usar Diseño Responsive?
En los últimos cuatro años, el uso del móvil casi se ha duplicado cada año. Si estas tasas de crecimiento siguen así, en los próximos dos años alcanzará un aumento del 20% o más. Esto significa que hay una posibilidad de que el 20% de los visitantes de tu sitio puede estar utilizando un navegador móvil. Si tu sitio no está preparado para una visualización correcta en los dispositivos móviles, es muy probable que estos visitantes no vuelvan nunca.
Muchas discusiones se han levantado sobre si se debe diseñar un sitio móvil separado o utilizar técnicas de diseño responsive, y realmente la respuesta y tendencia es ésta última, ya que tener un sitio móvil separado genera un conjunto de problemas a tener en cuenta:
- Administración de dos sitios webs.
- Actualización de contenido para estos dos sitios.
- Generación de contenido exclusivo
- Problemática de enlaces
- Qué debe considerarse un sitio móvil (móviles, tablets, pcs, …)
No hay duda de que este método crea más problemas de los que resuelve, por lo que la solución pasa por un Diseño Responsive o Responsive Design de tu sitio.
¿Cómo podemos utilizar el Diseño Responsive?
Tal como indicamos anteriormente, el diseño responsive usa el fluido de grids, las imágenes flexibles y las CSS media queries. Estas tres partes son primordiales para un buen diseño en cualquier tipo de dispositivo y pantalla y vamos a ver en qué consisten:
Grids Fluidos o Fluido de Grids
Los fluidos de grids o grids fluidos permiten a un usuario hacer una estructura flexible del contenido de su sitio web. Consiste, principalmente, en utilizar porcentajes para los anchos, en lugar de píxeles. Por ejemplo, si tenemos un contenedor DIV en una página web que quieres que ocupe un ancho de 1200px y, dentro de este, otro contenedor que ocupe 600px, la mejor forma para ello es asignar un ancho porcentual del 100% como width y 1200px como max-width al contenedor principal y posteriormente, un ancho de un 50% al contenedor secundario. De esta forma, indicamos que la anchura máxima de nuestra página es de 1200px, pero igualmente estamos indicando que si la anchura de la pantalla es menor, el contenido se adecuará al 100% de la misma, y que el contenedor secundario será la mitad de esta.
Imágenes Flexibles
Las imágenes flexibles son mucho más fáciles de lograr, ya que simplemente tendremos que indicar que deben tener un max-width del 100%, con lo que evitaremos que éstas se desborden de su contenedor.
CSS Media Queries
Las Media Queries de CSS existen desde hace un tiempo y son muy útiles para la fijación de determinadas áreas del sitio para determinados anchos de pantalla.
De esta forma, podremos diferenciar distintos estilos para nuestros contenedores en función del ancho que tenga la pantalla del dispositivo desde el que se está visualizando. Estos estilos no solamente tiene por qué ser diferente en cuanto a anchura y altura, sino que podemos usar cualquier otra directiva CSS para modificar su color, fuente, bordes, etc.
El Diseño Responsive o Responsive Design es el futuro. Nos permite crear un diseño que funcionará y se adaptará a cualquier dispositivo presente y futuro, por lo que no tendremos que preocuparnos por los posibles nuevos dispositivos que salen al mercado, sino simplemente diseñar de forma responsive nuestra web desde un principio.
