Introducción al diseño responsive

Últimamente está muy de moda, sobre todo entre los que nos dedicamos a esto del desarrollo web, convertir las webs poco a poco a diseños responsive, es decir, diseños fluidos que se adaptan al tamaño del navegador que lo está visualizando.

Esto se consigue mediante el uso de media-queries en CSS, detectando la resolución máxima que nuestro navegador puede soportar y en base a eso recolocando y reescalando los distintos elementos de nuestra web para que se visualicen correctamente.

Sin ir más lejos, esta misma web tiene un diseño responsive, a continuación pongo unas cuantas imágenes de esta web vista en distintas resoluciones:

Con este tipo de diseños conseguimos varias ventajas:

Con sólo un diseño nos podemos ajustar a distintos dispositivos y resoluciones, adaptando la posición y tamaño de ciertos elementos, incluso mostrando u ocultando elementos según nos interese.
Conseguimos que la conversión de nuestros objetivos de marketing en dispositivos móviles sea mayor que si la web tuviera un sólo diseño, ya que es muy probable que no consigamos que el visitante visualice correctamente el contenido que queremos mostrarle, esto se ha comentado ya en el artículo sobre los errores más frecuentes en el marketing en dispositivos móviles.
El diseño móvil es similar al diseño de escritorio, evitando así tener un diseño totalmente distinto para dispositivos móviles, que no acompaña a la marca que queremos mostrar.

Existen también desventajas, como en todo:

Aunque ocultemos elementos para dispositivos móviles (o hagamos imágenes más pequeñas), realmente se hace un reescalado en el navegador, pero las imágenes se obtienen completas, aunque mediante CSS ocultemos las imágenes, el dispositivo las está descargando realmente, por lo que la web puede tardar algo más en cargarse que una web diseñada exclusivamente para móviles, aunque tardaría lo mismo que un diseño no responsive.
Exige un trabajo extra de ajuste del diseño, personalmente no lo veo una desventaja, si te gusta tu trabajo, el hecho de adaptar el diseño a varios dispositivos sin necesidad de hacer un diseño totalmente nuevo tiene una gracia especial, motiva más.

Por último enlazar a un post que escribí en mi blog con ejemplos de diseños responsive que me gustan, desde que escribí ese artículo han ido surgiendo bastantes más, por lo que pronto me tocará hacer otro artículo similar con novedades.

Las imágenes usadas en el post han sido obtenidas del blog de María Campillo, quien hizo el diseño de esta web.