El diseño responsivo es el dolor de cabeza de todo los días. Casi a donde quiera que miremos hay alguien que habla (o escribe) sobre él.

Entonces, ¿Qué hace que un esquema de diseño web sea más responsivo? El diseño responsivo es un enfoque para el diseño de la web que se adapta al usuario, a los diferentes tamaños de navegador en un dispositivo. El concepto ha estado presente desde hace unos pocos años, pero el 2013 es el año del diseño responsivo y se espera un enorme efecto ya que se implementa en un exponencial número de sitios.

El diseño responsivo funciona con el uso de media queries que detectan el dispositivo o la resolución del dispositivo y luego acceder a ellos. Una vez que esta determinación se ha hecho, una combinación de imágenes flexibles, tipos y tablas se ajustan a la pantalla en que se ve el sitio. Si quieres ver el diseño responsivo en acción, ajusta el tamaño de tu navegador en el que se ha implementado el diseño responsivo. Mashable es un gran ejemplo. Los ajustes te permitirán ver los que los diseñadores tenían en mente cuando lo crearon y lo diferente que esto puede ser.

El diseño responsivo es ahora muy popular por el número de tabletas y teléfonos inteligentes que hay en el mercado. El número de usuarios que acceden a Internet a través de un dispositivo o una computadora se ha incrementado rápidamente, lo que es necesario para que los desarrolladores piensen sobre las maneras en que su información esta siendo vista.

El diseño responsivo es más que una tendencia

El  uso colectivo de la gran variedad de dispositivos es algo que obviamente no va a cambiar.

La variedad de formas y tamaños de monitores de computadores continúa expandiéndose.

Estos factores sólo deberían ser razón suficiente para entender por qué el diseño responsivo es importante y pueden convertirse en la práctica estándar para los desarrolladores. Todos los sitios web deben trabjar bien en los dispositivos. Más y más usuarios han llegado a esperar una experiencia consistente sin importar el dispositivo que utilizan para acceder a una página web. De hecho, el número de sitios que usan técnicas sensibles ha crecido constantemente desde 2010, cuando realmente fue popularizado por A List Part.

Las técnicas del diseño responsivo, suelen ser consumidoras de tiempo en las fases de planeación, pero pueden ayudar a los desarrolladores a largo plazo.

Con un plan "responsivo" no hay necesidad de construir multiples websites o redireccionar los sitios a diseños exclusivos de mobile o tabletas. Se pueden hacer actualizaciones fácilmente, por que se replica a todos los dispositivos

El diseño responsivo fomenta la consistencia. Independientemente de su tamaño, los efectos visuales son consistentes. Este bonus puede ayudar a los sitios a mantener un sentido de identidad.

El diseño responsivo no es diseño móvil

Mientras que el diseño responsivo  es una gran técnica  para mostrar contenido en dispositivos móviles, no es diseño móvil. Diseño responsivo es «Todo el diseño web».

Sí, las técnicas responsivas deben funcionar en dispositivos moviles. Incluso se puede argumentar que el proceso de diseño puede comenzar con el móvil, pero es mucho más que eso. Los mejores sitios responsivos se pueden ver en una variedad de resoluciones, desde las pantallas más comunes de 1024x768px a 800x600px,  1366x768px y 1920x1080px. Esos mismos sitios también lucen sorprendentes en tabletas estándares, pantallas de retina y smartphones.

Si un desarrollador considera la capacidad de respuesta sólo en relación a un móvil, hay una oportunidad de experiencia web que se ha perdido. Móvil sin embargo, es un buen punto de partida para la conversión de diseño responsivo. Es una práctica común para para comenzar común esquema móvil y crecer en cuanto al diseño a otros tamaños al planear un sitio responsivo. A muchos diseñadores y desarrolladores les resulta más fácil y les consume menos tiempo ampliar las imágenes que reducirlas.

Todo es flexible

La flexibilidad es la pieza clave del diseño responsivo. Las tablas son flexibles; las fotos son flexibles. Si se descuida alguno de estos factores tu sitio esta en problemas.

Además, cuando se piensa en la flexibilidad, debes tener en cuenta la flexibilidad de diseño. A veces las mejores opciones para los tamaños de navegador incluyen cambios, adiciones y sustracciones a su concepto original. Imágenes y contenidos puede estar oculto para crear una mejor experiencia para los dispositivos más pequeños. O puedes optar por un esquema de diseño global más sencillo para que el sitio tiene un aspecto más uniforme a través de los dispositivos.

Un buen diseño responsivo inicia con una cuadrícula

Diseñando con una cuadrícula no es un concepto nuevo; se ha hecho desde la aparición de la publicación. El concepto de una cuadrícula fluida, sin embargo es relativamente nuevo.

Los mejores proyectos responsivos incluyen una cuadrícula fluida. El sitio puede escalarse proporcionalmente en base a porcentajes o construirse en base a un número de límites. Las cuadrículas que utilizan límites son los más comunes.

Considera los anchos más comunes que los usuarios van a utilizar al visualizar un sitio como punto de partida. Las cuadrículas más responsivas incluyen versiones para al menos tres navegadores diferentes, 768px o más, 480 a 768px y 320 a 480px así como versiones para tabletas y dispositivos móviles. Algunos desarrolladores optan por incluir anchos de navegadores para más de 1000px para apoyar explícitamente monitores de pantalla ancha. Mientras que cada una de estos límites presentaran una página web en la resolución que mejor se adapte, un fondo llenará cualquier espacio de sobra en la pantalla.

Otra opción que está ganando popularidad es el uso de puntos de interrupción fluidos, que son dictadas por el diseño global en vez de límites predeterminados. Este estilo más fluido puede ayudar a mantenerse al día con el creciente número de puntos de ruptura,  utilizados para hacer frente al amplio variedad de dispositivos en el mercado.

Hay más de una docena de opciones cuando se trata de grandes opciones de cuadrícula fáciles de usar. Twitter Bootstrap y ZURB Foundation son dos excelentes opciones responsivas que muestran lo que una cuadrícula puede hacer.

La calidad y tamaño de imagen es importante

Una mala imagen no se verá bien en cualquier tamaño. La calidad de las imágenes es mucho más importante que el número de imágenes. Casi tan importante como la calidad de la imagen en tiempo de carga. Esto es especialmente importante al pensar en los usuarios móviles, que típicamente tienen un limitado ancho de banda.

Lograr un equilibrio entre calidad y tiempo de carga. No se olvide de optimizar imágenes para la web; evitar cargar imágenes de tamaño completo y escalar utilizando las propiedades width y height de CSS. Es mejor recortar imágenes antes de cargar y guardar cada foto en el tamaño más pequeño posible que mantenga la calidad visual.

Cuando se trata de utilizar imágenes en un diseño responsivo, hay varias opciones: usar una cantidad limitada de imágenes, limitar las imágenes en tamaño móvil, usar múltiples versiones y tamaños de archivos o ocultar las imágenes en entornos móviles. Cualquiera de estas opciones puede funcionar bien aunque algunos desarrolladores evitan ocultar imágenes ya que los usuarios todavía deben cargar las imágenes a pesar de ser invisibles.

En Activ puedes aprender las bases de HTML para diseñar tus sitios web con nuestro curso de HTML5

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.