El diseño web adaptativo

Objetivo

En la actualidad la mayoría de los sitios web adaptan su diseño y su formato al tamaño de la pantalla en la que se muestran. La página se va a adaptar automáticamente en función de si se visualiza en la pantalla de un ordenador, en una tableta o en un teléfono inteligente. La expresión inglesa para designar esta arquitectura web es Responsive Web Design, que podemos traducir por diseño web adaptativo, aunque también se usa diseño web reactivo. Para ello, debemos utilizar los Media Queries.

Los Media Queries

1. La recomendación del W3C

Para crear un diseño adaptado a los diferentes tamaños de pantalla, el W3C facilita el módulo Media Queries, que actualmente (junio de 2015) está como Recommendation, 19 June 2012: http://www.w3.org/TR/css3-mediaqueries/. Con los Media Queries puede crear hojas de estilo que se adapten a los diferentes tamaños de la pantalla. La detección del tamaño de la pantalla se lleva a cabo mediante la «consulta» al medio, tras la cual el navegador utiliza los estilos adaptados.

2. Los criterios de los Media Queries

El módulo Media Queries propone determinar los medios de difusión mediante criterios precisos y la posibilidad de combinar estos criterios. El valor que devuelve un Media Query es de tipo booleano: verdadero o falso. El navegador escoge la hoja de estilos adaptada en función de las respuestas a los Media Queries.

Estos son los criterios que podemos utilizar en los Media Queries:

La anchura de visualización: width. Podemos testar la anchura del área de visualización del navegador. Por ejemplo: width: 780px.
La altura de visualización: height. Podemos testar la altura del área de visualización del navegador.
La anchura física: device-width. Podemos testar la anchura física de la pantalla de difusión.
La altura física: device-height. Podemos testar...

El tamaño de las pantallas

1. El tamaño físico y la visualización

En la actualidad, cada tipo de teléfono inteligente y de tableta tiene sus propias características técnicas relativas al tamaño físico de las pantallas y a la superficie realmente disponible para la visualización de un sitio en la versión móvil de un navegador.

Un segundo problema se deriva de lo que realmente se muestra en función de las características de la pantalla. Cuando salió el iPhone de Apple en 2007, el tamaño de su pantalla se había fijado a 320 x 480 píxeles. Pero Safari Mobile muestra los sitios con una anchura de 980 píxeles, frente a los 320 píxeles de la pantalla, lo que implica una disminución sustancial del área de visualización.

Con el iPhone, Apple ha introducido un nuevo valor para el atributo name: viewport. Este permite controlar la ratio anchura del sitio (980 píxeles)/anchura de visualización (320 píxeles) aplicada por Safari en su versión móvil.

Si queremos que Safari para iPhone muestre los sitios con una anchura de 320 píxeles (y no con 980 píxeles), debemos utilizar el valor viewport para el atributo name:


<meta name="viewport" content="width=320" />

En la actualidad, este atributo ya ha sido adoptado por todos los fabricantes de teléfonos...

Un ejemplo de un sitio sencillo

1. La estructura del sitio

Vamos a construir un sitio web usando diseño web adaptativo. Se tratará de un sitio (09_01.html) muy simple, con un encabezado (<header>), una barra de navegación (<nav>), una columna a la izquierda (<section>) con tres artículos (<article>), una columna lateral derecha (<aside>) con una imagen y una lista. Finalmente, incluiremos un pie de página (<footer>).

He aquí el código HTML5 de la página:


<!DOCTYPE HTML>   
<html lang="es">   
<head>   
<title>Mi página de inicio</title>   
<meta charset="UTF-8" />   
<link rel="stylesheet" href="rwd.css" />   
</head>   
<body>   
<div id="contenedor">   
   <header id="superior">   
      <h1>Mi sitio web</h1>   
      <h2>El eslogan de mi sitio web</h2>   
   </header>   
   <nav id="navegacion">   
      <p><a href="#">Vínculo 1</a> | <a href="#">Vínculo 2</a> |   
<a href="#">Vínculo 3</a> | <a href="#">Vínculo 4</a> |  <a   
href="#">Vínculo 5</a> | <a href="#">Vínculo 6</a></p>   
   </nav>   
   <section id="contenido">   
      <article>   
         <h1>Mi primer artículo</h1>   
         <p>Cum sociis natoque penatibus...</p>    
         <p>...</p>   
      </article>   
      <article>   
         <h1>Mi segundo artículo</h1>   
         <p>Aenean lacinia bibendum...</p>    
    ...

Imágenes adaptativas

Las imágenes también pueden comportar problemas de tamaño en relación con su elemento padre. Si la imagen es más ancha que su contenedor, se desborda.

Veamos un ejemplo sencillo (09_02.html):


<!DOCTYPE HTML>   
<html lang="es">   
<head>   
   <title>Mi página de inicio</title>   
   <meta charset="UTF-8" />   
   <style>   
      #miCaja {   
         float: left;   
         width: 300px;   
         border: 1px solid #333;   
         padding: 5px;   
      }   
      p {   
         margin: 0;   
      }   
   </style>   
</head>   
<body>   
<div id="miCaja">   
   <p><img src="cebra.jpg" alt="Una cebra" /><br />Curabitur  
blandit tempus...</p>   
</div>    
</body>   
</html>

Esto es lo que obtenemos: la foto de la cebra...