¿Qué es Diseño Responsivo?

¿Qué es Diseño Responsivo?

23 abril, 2015

El concepto de diseño responsivo ha tomado fuerza a partir del boom de dispositivos móviles de los últimos años.

Este tipo de diseño busca dejar de emular los principios estáticos de diseño para impresos, que es el parámetro que se siguió durante muchos años, a uno más flexible que permita el cambio de fuente, tamaño de pantalla y forma, de tal manera que se ajuste al navegador que se esté empleando y al tamaño de la pantalla y resolución del dispositivo donde se consulte el sitio web.

Cuando inició la navegación a través de dispositivos móviles como palms o celulares, al crear un sitio web era necesario considerar la parte móvil por separado, construir un sitio diferente al sitio que se ve en el navegador de la computadora, más simplificado considerando sólo los elementos más importantes, para que la navegación en el teléfono o la agenda no se afectara. Con el diseño responsivo ya no es necesario llevar a cabo este paso, ya que se ajusta el sitio web a la resolución de pantalla que se detecte, mejorando así, la experiencia de navegación web móvil.

La aparición de las tabletas con su navegación híbrida de computadora de escritorio y móvil, aunado a los teléfonos inteligentes o smartphones, ayudaron a que el diseño evolucionara y considerara al sitio web no como un lienzo estático, sino como un espacio flexible que pudiera estirarse o achicarse de acuerdo al dispositivo donde se ve.

¿Cómo crear un sitio web con diseño responsivo?

Los principales puntos que se deben considerar al diseñar un sitio web responsivo son:

  • Conceptualizarlo en un diseño de rejilla (grid-layout).
  • Considerar que sean flexibles las imágenes y videos.
  • Desarrollar el sitio en HTML 5 y CSS3.
  • Emplear media queries, una especificación de CSS3 para la resolución de pantalla.

Adicionalmente, debes olvidar:

  • El uso de tablas elástica o flexibles y emplear div’s.
  • Establecer medidas en pixeles para tamaños de fuente, ya que en diseño responsivo se emplea em.
  • El diseñar sólo para un navegador. La frase «este sitio se ve mejor en XX navegador» no debe ser empleada en un sitio responsivo.
  • Diseñar para navegadores modernos, aunque este es un problema en México, debido a la dificultad para actualizar la tecnología de cada usuario, la tendencia es dejar de diseñar para navegadores viejos y limitados (aunque existen compatibilizadores para que el sitio sea visible).

En estos tiempos que se debe diseñar pensando en todas las resoluciones y a la vez brindar utilidad al sitio web para cumplir las tareas para las que fue creado desde cualquier dispositivo o navegador, es el reto al que se enfrentan los diseñadores e implementadores web ya que se acabó el enfoque de los sitios sólo para computadoras de escritorio.



Contacto