Diseño web Responsive ¿Qué es? y ¿Cómo funciona?

diseno web responsive

Diseño web Responsive ¿Qué es? y ¿Cómo funciona?

El diseño Web responsive o diseño web adaptativo son un tipo de tendencia a la hora de diseñar paginas web. Se refiere a la forma en la se comporta una web en los distintos dispositivos y se centra en la forma con la que diseñamos la estructura de nuestra web, es una técnica muy simple que consiste en que todos los elementos se adaptan al ancho de la pantalla, lo que facilita la lectura y asimilación de las páginas web en teléfonos móviles y tablets.

El diseño web responsive aparece con la llegada de los smartphones y tablets. Antes de la era diseño web responsive las webs se abrían tal cual ajustando su ancho de pantalla al ancho del dispositivo móvil y no tenia en cuenta la legibilidad de las webs, lo que obligaba a estar ampliando y alejando constantemente para comprender una página web. Presentaba también ciertos problemas de lógica a nivel de interacción al presentar la web con botones impossibles de clicar, tiempos de carga centenarios en los que te daba tiempo de encender el ordenador y buscarlo directamente desde allí antes de que acabara de cargar la página.

En 2015, 6 de cada 10 españoles usan el móvil o la tablet para navegar por internet, si a ese dato le sumamos que google desde marzo de este mismo año penaliza las webs que no tengan su versión adaptativa, hace que tener una web responsive no sea un tema de debate, si no tienes una web responsive estás en caída libre.

Principios del diseño web responsive

En el proceso de diseño de una página web con responsive design, partimos de una retícula de 12 columnas en su formato más grande, imaginemos por ejemplo un ordenador de sobremesa. Una estructura de 6 en una tablet mediana y una estructura de 3 columnas en un teléfono móvil por ejemplo. En el momento de empezar a diseñar nuestra web tomaremos en consideración estas variables, porque de la correcta colocación de los elementos en nuestra web, dependerá que en sus versiones adaptativas tenga coherencia.

Para ello usamos los media queries que se fundamentan en el css y que nos sirven para dar variables a los distintos elementos de la página. Para ello se definen distintos anchos de pantalla en el css y dentro de cada tamaño se especifica cómo se va a comportar dicho elemento en ese ancho de pantalla (dispositivo).

Estructura diseño web responsive de 12 columnas

reticulas responsive 12 columnas

En esta versión podemos colocar los elementos tal como queramos ya para ese ancho tenemos 12 columnas disponibles, pero tenemos que tener en cuenta que los elementos que aparezcan en la izquierda van a estar situados encima de los de la derecha, con lo que intentaremos hacer cuadrar las cosas.

Estructura diseño web responsive 6 columnas tablet

reticula responsive 6 columnas

Si habíamos colocado los elementos en 4 columnas, ahora tendremos una simetría bastante elegante, ya que los dos objetos de la derecha estarán situados justo debajo de los de la izquierda. Aquí también podemos jugar con los css en las imágenes y darles distintas propiedades según queramos que interactúen. En mi opinion, los slides se tienen que evitar ya que si le sumamos capas de texto encima, luego en otros formatos no esta encima del mismo sitio y además si la imagen se ajusta por su ancho, se quedará super pequeña e incomprensible, con lo que en versiones móviles ocultaría slides y cabeceras con grandes imágenes.

Estructura diseño web responsive  6 columnas móvil

ancho pantalla dispositivos moviles

En un móvil cada 3 columnas saltamos una fila, con lo que literalmente es como si hubiéramos rotado la web y todos los elementos están uno encima del otro.

Conclusiones

El diseño web responsive es la mejor solución para adaptarse a las tecnologías actuales, pero muchas veces corremos el riesgo de hacer todos la misma web, ya que la lógica del responsive te impulsa a jugar con el mismo número de columnas y el mismo tipo de formatos. Lo interesante es empezar a innovar y probar cosas nuevas y filtrar los contenidos para dispositivos, ya que muchas veces convertir una homepage muy densa en responsive genera una página interminable.

Si diseñamos a la inversa, es decir, cuando diseñamos para pantalla de ordenador, nos imaginamos que estamos en un dispositivo móvil, todo el proceso sera mucho más respetuoso y fiable en todos los dispositivos.

Comentarios