Diseño web adaptativo

El diseño web adaptativo o responsive web design consiste en un conjunto de técnicas de programación y diseño web basadas principalmente en HTML5 y CSS3, enfocadas a que un sitio web se vea correctamente en cualquier tipo de pantalla. La idea, que no es nueva pues data de 2008, es crear un diseño que haga que la web se vea bien tanto en pantallas de ordenador como en dispositivos móviles y tabletas. La popularización de smartphones y tabletas, que compiten con el PC tradicional por ser los dispositivos más utilizados para navegar por Internet, ha hecho que el diseño web adaptativo cada vez sea más importante.

La ventaja primordial del diseño web adaptativo es que con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, ya que el sitio web estará optimizado para todo tipo de dispositivos. Además nos evitamos crear una versión de la web específica para cada tipo de dispositivo o navegador. Esto mejora la experiencia de usuario.

¿Como hacer un sitio web con diseño adaptativo?

Si no se tiene experiencia previa lo mejor es usar alguno de los muchos frameworks existentes como Bootstrap, del que ya hablamos aquí. En concreto Bootstrap tiene una sección entera dedicada al responsive design.

Las líneas principales del diseño adaptativo son:

1. Anchos proporcionales: Consiste en abandonar de una vez los anchos fijos en nuestros diseños y sustituirlos por anchos proporcionales basados en porcentajes.

   #container {
       width: 100%;
   }
   #container.element {
       width: 33%;
       float: left;
   }
   

   De esta forma todos los elementos se ajustarán automáticamente a la pantalla, independientemente de que veamos la web a través de un PC Full-HD de 24" o de un pequeño smartphone de gama media. Esto es válido tanto para contenedores y elementos como para tamaños de fuentes.


2. Ajustar en función del medio: Consiste en usar los media queries, una técnica de CSS3 que nos permite aplicar un conjunto de estilos CSS dependiendo de las características del "medio".

   @media screen and (max-width: 480px) {
       /* Aquí van las reglas CSS necesarias */
   }
   

   En el ejemplo anterior las reglas CSS se aplicarán sólo a las pantallas con una anchura menor de 480px. Es decir un smartphone de gama media-baja. Por si no queda claro, el media query es (max-width: 480px) y se aplica siempre a un media type (en este caso screen, la pantalla).

Para profundizar más en el diseño web adaptativo recomiendo encarecidamente los artículos de Emenia Introducción al Diseño Web Adaptable y Diseño web adaptativo: mejores prácticas.

Enlaces de interés

• Diseño web adaptativo en la Wikipedia.
• Introducción al Diseño Web Adaptable o Responsive Web Design.
• Diseño web adaptativo: mejores prácticas en Amenia.
• Responsive Web Design en el blog e Adrenalina.
• Responsive Web Design book by Ethan Marcotte.