Manual de HTML: Responsive Web Design (diseño web adaptativo)

El diseño web adaptativo, adaptable, receptivo o sensible (en inglés, Responsive Web Design, RWD) es una técnica de diseño y desarrollo web que pretende generar sitios web que se adapten a cualquier tipo de resolución de pantalla, desde smartphones hasta PCs, con una experiencia de usuario optimizada en lo referente a legilibilidad y navegación, mediante el uso de estructuras fluidas y media queries basadas en HTML5 y CSS3.

El concepto y el propósito del diseño web adaptativo fue descrito por el consorcio W3C en el contexto de One Web, que hace referencia a la idea de construir una web para todos (Web for All), accesible desde cualquier tipo de dispositivo (Web on Everything), con JavaScript no obstructivo (Unobtrusive JavaScript) y desarrollada para teléfonos móviles y luego optimizada para PCs (Mobile First).

La variedad de dispositivos existente actualmente en el mercado ha provocado que, o bien que la información no es accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación sea muy pobre.

Además, para muchos sitios ofrecer una versión móvil ya no es una opción secundaria ni sirve decir "por ahora no es necesario", ya que los dispositivos móviles como tablets y smartphones cada vez son más utilizados para navegar.

Hasta ahora, el problema de la fragmentación de dispositivos se resolvía detectando qué navegador estaba empleando el ordenador cliente, ya sea mediante JavaScript o mediante PHP, para posteriormente servir la versión del sitio web apropiada o cargar una hoja de estilo específica, lo que obligaba en muchos casos a desarrollar varias versiones del sitio web, en ocasiones hasta 3 páginas diferentes para abarcar los dispositivos existentes, por ejemplo www.misitio.com, mobile.misitio.com y tablet.misitio.com.

Con el diseño web responsive se cubren todas las resoluciones de pantalla con una sola versión en HTML y CSS, a diferencia de otros enfoques en los que se desarrollan diferentes versiones de la página web para cada tipo de dispositivos (PC, tablet o teléfono móvil).

Responsive web design

Ventajas del diseño web responsive

Veamos las principales ventajas que aporta el diseño web responsive:

  • Mejora la experiencia de usuario, ya que permite navegar de manera satisfactoria independientemente del dispositivo desde el que accede el usuario.
  • Reduce los costes de desarrollo, ya que pasamos de tener una plataforma específica para móviles y otra para PCs, a una única web que se adapta a cualquier tipo de resolución, de manera que se evita tener aplicaciones específicas para cada dispositivo.
  • Mejora la optimización SEO en los motores de búsqueda, al contar el sitio web con una única URL, evitando así redirecciones y los errores asociados a éstas.

Elementos del diseño web responsive

Los principales aspectos a considerar al aplicar el diseño web responsive son los siguientes:

  1. Meta tag viewport.
  2. Estructura con diseño fluido.
  3. Estructura sensible al medio.
  4. Compatibilidad con navegadores antiguos.
  5. Adsense en diseño web responsive.

Paso 1. Meta tag viewport

La mayoría de navegadores de smartphones escalan los documentos HTML a la anchura de su área visible para que se muestren completos en la pantalla, lo que genera muchas veces resultados no deseados.

El atributo viewport de la etiqueta <meta> permite indicar al navegador cómo debe mostrar el área visible de un documento HTML (viewport), evitando así que el navegador escale automáticamente los documentos HTML.

La configuración más habitual del atributo viewport es:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Básicamente, lo que hace esta etiqueta es ajustar el ancho del documento al ancho del dispositivo e indicar que inicialmente no debe hacer zoom.

Los parámetros son los siguientes:

  • width: ancho de la página.
  • height: alto de la página.
  • initial-scale: escala o zoom inicial de la página.
  • minimum-scale: escala o zoom mínimo que podemos hacer en la página.
  • maximum-scale: escala o zoom máximo que podemos hacer en la página.
  • user-scalable: establece si está permitido o no hacer zoom (yes | no).

Notas:

  • Las medidas se pueden establecer en pixels o como device-width para que utilice el ancho disponible.
  • El valor de los parámetros de escala indica el zoom, por ejemplo, un valor de 2.5 produce un zoom del 2,5 de aumento.
  • Los parámetros van separados por comas.

Paso 2. Estructura con diseño fluido

En el diseño web responsive la estructura del sitio web debe contar con un diseño fluido que se adapte al contexto, en lugar de diseñar nuestra web basándonos en valores fijos.

2.1. Tamaño de los elementos estructurales

Veamos algunos criterios a seguir con los elementos estructurales:

  • Al establecer dimensiones, usar porcentajes en vez de pixels, por ejemplo width:60%;.
  • Limitar el ancho o alto máximo de los elementos usando pixels con el atributo max-width o max-height, para evitar que quede una página kilométrica en caso de monitores muy grandes.
  • No usar posiciones absolutas ni fijas, es preferible flotar los elementos con float:left | right; o utilizar la propiedad display, ya sea con inline | block | inline-block, o bien con los valores correspondientes a tablas, como table | table-row | table-column | table-cell.

2.2. Tamaño de las fuentes

Hasta la llegada de CSS3, los sistemas más utilizados para dimensionar las fuentes eran px y em, pero ambos tienen desventajas:

  • px: los tamaños de letra especificados en px son tamaños absolutos, por lo que no generan el efecto cascada, pero no escalan.
  • em: los tamaños de letra em son relativos al elemento padre, por lo que son escalables pero generan el efecto cascada, de tal manera que en caso de elementos anidados el tamaño de letra se va haciendo progresivamente mayor o menor. Por ejemplo:
    body {
        font-size:20px;
    }
    div {
        font-size:0.5em;
    }

    Obtenemos:

    <body> =20px
        <div> =10px
            <div> =5px
                <div> =2.5px
                    <div> =1.25px

CSS3 introduce la unidad rem, cuyo nombre deriva de "root em", y significa que la unidad rem es relativa al elemento raíz, por lo que es escalable y además evita el efecto cascada. De esta manera, una vez definido el tamaño de fuente en el elemento <html>, podemos establecer todos los tamaños rem para que sean porcentuales respecto al elemento raíz. Por ejemplo:

html {
    font-size: 62.5%;  /* =10px, assuming the default browser font-size is 16px */
}
body {
    font-size: 1.6rem; /* =16px */
}
h1 {
    font-size: 2.4rem; /* =24px */
}

Para versiones antiguas de Internet Explorer que no soportan CSS3, es conveniente emplear un respaldo en px, de manera que primero definimos el tamaño de fuente usando unidades px y a continuación usando unidades rem. Por ejemplo:

html {
    font-size: 62.5%;  /* =10px, assuming the default browser font-size is 16px */
}
body {
    font-size: 16px;
    font-size: 1.6rem; /* =16px, always declare rem styles after px styles */
}
h1 {
    font-size: 24px;
    font-size: 2.4rem; /* =24px, always declare rem styles after px styles */
}

2.3. Tamaño de las imágenes

Para que las imágenes se comporten de manera elástica y ocupen como máximo el ancho del elemento contenedor:

img {
    max-width: 100%;
    height: auto;
}

2.4. Tamaño de los videos

Para que los videos HTML5 (etiqueta <video>) se comporten de manera elástica y ocupen como máximo el ancho del elemento contenedor:

video {
    max-width: 100%;
    height: auto;
}

Para videos embebidos, que utilizan etiquetas <iframe>, <object> o <embed> en vez de <video>, el video embebido se inserta en un <div>:

<div class="video-container">
    <iframe src="http://player.video.com/sample-video" width="800" height="450" frameborder="0"></iframe>
</div>

… y se aplican los siguientes estilos CSS, que obligarán al elemento embebido a expandirse automáticamente:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Para restringir la anchura máxima de un video embebido podemos emplear un <div> de la siguiente manera:

<div class="video-wrapper">
    <div class="video-container">
        <iframe src="http://player.video.com/sample-video" width="800" height="450" frameborder="0"></iframe>
    </div>
</div>

… y se aplica el siguiente estilo CSS, que limita la anchura máxima:

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

2.5. Palabras muy largas

Para evitar que las palabras o URLs muy largas se salgan de las cajas, usaremos la propiedad word-wrap:

.site-content {
    word-wrap: break-word;
}

2.6. Etiqueta pre

La etiqueta <pre> es una etiqueta muy utilizada en sitios de desarrollo web y programación, ya que es la mejor manera de mostrar código en una página web. Desafortunadamente, dado que está diseñada para mostrar el contenido tal como está escrito, no escala y el texto que contiene o bien sobresale, o no se visualiza completo por el scroll. Mediante CSS (vía longren.org - Wrapping text inside pre tags) podemos conseguir que las cajas <pre> tengan un comportamiento responsive cross-browser:

pre {
    white-space: pre-wrap;                  /* CSS3 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
}

2.7. Ajuste del tamaño del texto

Para controlar cómo ajustan el tamaño del texto los navegadores basados en Webkit (Chrome, Safari, iPhone) e Internet Explorer y evitar inconsistencias, usaremos la propiedad text-size-adjust. Dado que esta propiedad no está estandarizada, se emplea con prefijos:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

2.8. Tablas responsive

Los datos presentados en forma de tabla suponen un verdadero reto para el diseño responsive. Hay diversos enfoques, algunos basados en CSS3 y otros que además utilizan JavaScript. Veamos algunos métodos que utilizan únicamente CSS3:

  1. Mostrar/ocultar columnas: se muestran más o menos columnas según el ancho de la pantalla.
  2. Tabla con scroll: se trasponen filas y columnas y se aplica un scroll a los datos.
  3. Tabla de 2 columnas: la tabla se convierte en una tabla de 2 columnas donde se muestra cada registro individualmente.
  4. Tabla de 1 columna: la tabla se convierte en una tabla de 1 columna donde se muestra cada registro individualmente.
  5. Tabla con filas inline: la tabla abandona la estructura de rejilla y las celdas de datos se concatenan entre sí, sin dejar de ser una fila.

Paso 3. Estructura sensible al medio

Mediante media queries de CSS3, un sitio web responsive debe disponer de diferentes vistas en función del medio desde el que se accede.

3.1. media queries

Las media queries consisten en estilos que sólo se aplican si el navegador cumple determinadas condiciones, de tal manera que se comportan como una estructura condicional. Por ejemplo, estos estilos sólo se aplicarán si el navegador es monocromo:

@media screen and (monochrome) {
    float: none;
    width: 100%;
}

La instrucción Media Query se compone de dos partes, unidas por el operador and:

  • @media screen: el tipo de medio utilizado o Media Type, en este caso screen, que agrupa a todos los medios que se visualizan en una pantalla. Existen otros valores posibles, entre ellos print para impresoras yall, que incluye todo tipo de dispositivos.
  • (monochrome): la consulta para averiguar las características del medio o Media Feature, en este caso monochrome, que identifica a las pantallas monocromáticas. Se pueden aplicar media queries en función de diversos parámetros, como width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution o scan.

El parámetro más utilizado en las media queries es el ancho del dispositivo, de tal manera que según la anchura del navegador cliente se pueden modificar algunos estilos.

Por ejemplo, estos estilos sólo se aplicarían si el ancho del navegador es inferior a 800px:

@media screen and (max-width: 800px) {
    float: none;
    width: 100%;
}

Los siguientes estilos sólo se aplicarán si el ancho del navegador es superior a 800px:

@media screen and (min-width: 800px) {
    float: none;
    width: 100%;
}

Los siguientes estilos sólo se aplicarán si el ancho del navegador está en el rango entre 600px y 800px:

@media screen and  (min-width:600px) and (max-width:800px) {
    float: none;
    width: 100%;
}

3.2. Anchos de pantalla

La actual fragmentación de dispositivos supone un gran desafío para los desarrolladores web, ya que los usuarios pueden llegar a una página web desde una gran variedad de aparatos, cada uno con una resolución de pantalla distinta, desde los 240 pixels de ancho de algunos smartphones hasta los más de 1200 que puede tener un monitor de sobremesa.

Responsive ancho dispositivos

Básicamente, podemos clasificar los diferentes dispositivos en cuatro grandes grupos según su ancho de pantalla:

  • Smartphones vertical: inferior a 480.
  • Smartphones horizontal: de 480 a 768.
  • Tablets vertical: de 768 a 1024.
  • Tablets horizontal, netbooks, laptops y PCs: superior a 1024.

Por ejemplo, utilizando media queries podemos configurar tres posibles visualizaciones, estableciendo los puntos de ruptura en 600px y 960px. Tenemos dos opciones, enfoque Progressive Enhancement y enfoque Graceful Degradation.

  • Enfoque Progressive Enhancement (mejora progesiva) o Mobile First, donde la versión por defecto del sitio se desarrolla para teléfonos móviles y luego se añaden prestaciones en la versión para PCs:
    /* Estilos para smartphones */
     
     
    @media screen and (min-width: 600px) {
        /* Estilos para tablets vertical */
     
    }
     
    @media screen and (min-width: 960px) {
        /* Estilos para tablets horizontal y PC */
     
    }
  • Enfoque Graceful Degradation (degradación elegante), en el que la versión por defecto del sitio se desarrolla para PCs y luego se simplifica para teléfonos móviles:
    /* Estilos para tablets horizontal y PC */
     
     
    @media screen and (min-width:600px) and (max-width:960px) {
        /* Estilos para tablets vertical */
     
    }
     
    @media screen and (max-width:599px) {
        /* Estilos para smartphones */
     
    }

Paso 4. Compatibilidad con navegadores antiguos

Para desarrollar sitios web responsive debemos tener en cuenta que las versiones antiguas de algunos navegadores no soportan CSS3 ni HTML5, en concreto Internet Explorer 8 o inferior, por lo que tendremos que implementar alguna estrategia para conseguir compatibilidad.

4.1. Compatibilidad CSS3

Como las versiones antiguas de Internet Explorer no soportan CSS3, debemos añadir un JavaScript que permita aplicar CSS3, como css3-mediaqueries.js (code.google.com/p/css3-mediaqueries-js) o respond.js (github.com/scottjehl/respond).

Por ejemplo, css3-mediaqueries.js es una librería JavaScript que parsea el CSS y aplica de forma transparente media queries de CSS3 en navegadores que no cuentan con soporte nativo para CSS3. Para emplearlo simplemente hay que incluir el script en la página en la sección <head> mediante el comentario condicional IE, comentarios condicionales que sólo funcionan en IE, en este caso para versiones anteriores a IE 9:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

4.2. Compatibilidad HTML5

Dado que las versiones antiguas de Internet Explorer tampoco soportan HTML5, debemos añadir un JavaScript como HTML5 Shiv (code.google.com/p/html5shiv) o Modernizr (modernizr.com), que permita al navegador reconocer las nuevas etiquetas semánticas que se introducen en HTML5, como <header>, <footer>, <nav>, <audio>, <video> o <embed>.

Para ello, incluiremos el script HTML5 Shiv en la sección <head> mediante el comentario condicional IE:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Es conveniente también incluir en la sección Reset CSS de nuestra hoja de estilos el siguiente código para resetear algunos elementos de HTML5 a elementos de bloque:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

Paso 5. Adsense en diseño web responsive

Google, como responsable de Android, tiene gran interés en que los sitios web estén optimizados para smartphones, por lo que Google recomienda a los webmasters aplicar técnicas responsive de diseño web.

El problema es que actualmente Google Adsense, uno de los sistemas más utilizados para monetizar una página web, no es responsive, por lo que en un sitio con diseño adaptable los banners de AdSense pueden ser un problema, ya que el espacio simplemente no es suficiente.

Ocultarlos con CSS o modificar el código no es una solución, pues va en contra de las políticas de Google, y mostrarlos cortados, aunque no infringe las políticas de Google, no queda bien estéticamente.

En el blog oficial de Adsense explican la forma correcta de mostrar los anuncios de AdSense en los diseños adaptables, sin contravenir los TOS (Terms of service) de Google Adsense, ya que no se redimensiona el anuncio ni se modifica el código JavaScript, simplemente se sirven anuncios diferentes.

Se trata de crear diversos anuncios, por ejemplo 768×90, 468×60 y 300×250, y en función del ancho de pantalla del dispositivo servir el más apropiado mediante el siguiente código JavaScript:

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "ad-unit-2";
        google_ad_width = 300;
        google_ad_height = 250;
    } else {
        google_ad_slot = "ad-unit-3";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

NOTA: En este código hay que reemplazar los identificadores google_ad_client y google_ad_slot por los valores de cada uno, que se pueden encontrar fácilmente en el código JavaScript facilitado por AdSense.

Sin embargo, esto no resuelve el problema, ya que una vez cargado un anuncio ancho, por ejemplo de 768×90, su comportamiento no es responsive, por ejemplo al rotar el dispositivo, ya que no es escalable.

Así pues, la única manera de conseguir hoy en día un comportamiento totalmente responsive de los anuncios Adsense sería utilizar exclusivamente anuncios que no superen los 320 pixels de ancho, por ejemplo bloques de 200×200, 250×250, 300×250 o 300×600.

Actualización – enero 2014

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web

2 Comments:

  1. Excelente tuto, gracias por compartir ;)

  2. Muy interesante la demo de tablas responsive