Responsive Web Design

(diseño web adaptativo)

¿Qué es el Responsive Web Desing?
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
 Alfredo Herraiz Naranjo

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).

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.

2
 Responsive Web Desing

¿Cómo configurar correctamente diseño

web responsive?
¡Cada día está más claro! El PC está perdiendo el combate contra
la cantidad de dispositivos con los que podemos acceder hoy en día
a la red, hasta tal punto que la venta de tablets y smartphones han
superado a las ventas de los ordenadores tanto de sobremesa
como portátiles.

Hasta hace algunos años era imprescindible utilizar el ordenador

para navegar por internet; ahora en cambio, es muy probable que la
mayoría de accesos se realicen desde plataformas mobile o
móviles. Hoy en día todos llevamos un smartphone encima y nos
comunicamos y buscamos información constantemente, por lo que
se ha convertido en algo esencial optimizar los sitios web para un
buen uso en estos tipos de dispositivos.

Si no sabes si tu sitio Web está optimizado para móviles, Google

pone a disposición una herramienta online para que puedas
comprobarlo.

Solo tienes que ir a Prueba de optimización para móviles e

introducir la URL principal de tu sitio Web; en pocos segundos, te
indicara si la página tiene un diseño optimizado o no.

3
 Alfredo Herraiz Naranjo

Si tu sitio Web no se muestra correctamente en los dispositivos

móviles, lo más seguro es que se estén escapando una parte
importante de las visitas y usuarios que desean ver tu página y,
lo más importante, posibles clientes.

Es fundamental tener una página web responsive, es decir,

optimizada para todo tipo de dispositivo. De manera general
podemos distinguir dos formas de optimización: “Responsive
Web Design” y “Mobile First Web”.

¿En qué se diferencian Responsive Web

Design y Mobile First Web?
Aunque van de la mano, hay que diferenciar entre Responsive
Web Design o, lo que viene a ser lo mismo, Diseño Web
Adaptativo, y Mobile First Web. Como su propio nombre indica, el
Diseño Web Adaptativo es aquel capaz de adaptarse a diferentes
tamaños y dispositivos, es decir, dependiendo de qué dispositivo
sea en el que se cargue, tu sitio web se verá más accesible y fácil
de usar. Sin embargo, lo que propone el término Mobile First es
empezar a diseñar un sitio web desde la resolución más pequeña
para ir creciendo y adaptando el contenido y el diseño a la
resolución más grande.

Hasta ahora todos los sitios web han sido diseñados solo para
equipos de sobremesa y el proceso de navegar por las webs en los
teléfonos móviles era bastante incómodo, debido a una mala
experiencia de usuario. Sin embargo, las tecnologías están
4
 Responsive Web Desing

cambiando y el principio de Mobile First se está convirtiendo en

un concepto cada vez más extendido.

¿Qué conseguimos con el principio Mobile

First?
Si empezamos maquetando un sitio web para la versión de
escritorio y un usuario se conecta desde un dispositivo, primero
cargará todo el contenido utilizado en la primera versión, hasta
cargar los recursos necesarios para móvil. Por lo tanto, lo más
recomendable es empezar a maquetar para la versión más
pequeña, siempre optimizando el contenido que se utilice (hojas de
estilos, ficheros, imágenes…), así conseguiremos que el usuario
no cargue más recursos de los necesarios, reduciendo el tiempo
de carga del sitio web.

La clave es conocer el tamaño, resolución o posibles orientaciones

de las pantallas en las que necesitamos mostrar nuestro contenido
basándonos en los usuarios que tenemos como objetivo.

Los pilares principales del Responsive son las Media Queries y la

etiqueta Viewport.

5
 Alfredo Herraiz Naranjo

Media Queries
Las Media Queries son las herramientas fundamentales que se
encargan de aplicar diferentes estilos para diferentes
dispositivos, y proporcionan la mejor experiencia para cada tipo de
usuario que se encuentra navegando en tu sitio web. Nacen de la
necesidad de crear breakpoints o puntos de ruptura en la hoja de
estilos CSS que tengas predefinida. Permite que tu sitio Web sea
manejable desde diferentes dispositivos.

Si no te ha quedado muy claro, las Media Queries son un módulo

de CSS que sirve para detectar el tipo de dispositivo por el que
se está navegando; de esa manera el contenido consigue
adaptarse al dispositivo concreto a través de las distintas
condiciones que tú mismo asignas, como pueden ser ancho y alto
de la ventana del navegador, ancho y alto del dispositivo, la
resolución del dispositivo o la orientación de la pantalla. Son
declaraciones lógicas que actúan dependiendo de las condiciones
específicas que tú mismo declaras en la hoja de estilos. Si la
premisa se cumple, se aplicaran los estilos definidos; si no, los
omitirá por completo.

Hay dos formas de implementarlas:

La primera opción para poner en funcionamiento las Media

Queries es a través del atributo media de la etiqueta <link>. Como
sabemos, esta etiqueta es la que se usa para enlazar una hoja de
estilo con un documento HTML. En ese enlace
podemos especificar condiciones que deben cumplirse para que
los estilos enlazados se apliquen. Debería ir dentro del <head> de
nuestro HTML.

6
 Responsive Web Desing

Recuerda que la etiqueta <link> tiene esta forma:

<link rel="stylesheet" href="estilos.css">

Pues ahora simplemente agregamos el atributo media indicando

la condición que se debe cumplir para que estos estilos se
apliquen:

<link rel="stylesheet" media="only screen and (max-width: 768px)"

href="estilos.css">

Lo que concretamente le estamos indicando es que cargue la

hoja de estilos “estilos.css” si se cumple que el dispositivo de
salida es una pantalla, no una impresora u otro dispositivo (only
screen), y si la anchura de la ventana del navegador tiene de
máximo 768 píxeles (max-width: 768px).

Si se cumplen las condiciones, los estilos se mostraran

correctamente, en caso contrario, los estilos se omiten por
completo, y el contenido se muestra sin estilos definidos:

Cargar de esta manera las Media Queries supone un problema, y

es que cada vez que queramos cargar diferentes estilos
dependiendo de ciertas condiciones que queramos aplicar para
distintos dispositivos, tendríamos que cargar una hoja de estilos
nueva. Esto conlleva una carga más lenta de tu sitio web, ya que se
hacen solicitudes HTTP adicionales, que se podrían evitar.

Hay otro sistema más recomendable para aplicar las Media

Queries: basta con incluir todas las condiciones necesarias
dentro de un único archivo CSS. Así, incorporaríamos la
construcción @media seguido de las condiciones que queremos
7
 Alfredo Herraiz Naranjo

definir para cada tipo de dispositivo y donde se apliquen entre llaves

{ } los estilos concretos para cada uno de ellos. Es la manera más
aconsejable, ya que la carga es de un único archivo CSS.

La forma de incluir Media Queries dentro de la hoja de estilos CSS

es la siguiente:

@media (max-width:320px){

<!—- Aquí van todos los estilos CSS -->

Esta Media Query se ejecutará sólo cuando la anchura de la

ventana del navegador sea menor de 320 píxeles.

@media (min-width:768px){

<!—- Aquí van todos los estilos CSS -->

Esta Media Query se ejecutará sólo cuando la anchura de la

ventana del navegador sea mayor de 768 píxeles.

Además de las características para determinar las resoluciones y

anchos de pantalla, podemos determinar otros parámetros, como
por ejemplo la orientación del dispositivo, importante en
dispositivos móviles:

@media (orientation: landscape) {

<!-- Aquí van todos los estilos CSS -->

• Portrait: orientación vertical

• Landscape: orientación horizontal

8
 Responsive Web Desing

Operadores lógicos para las Media Queries

También se pueden combinar más de una condición en la
misma Media Query para concretar todavía más un rango de
resolución, mediante los operadores lógicos:

• Operador and: las dos condiciones deben cumplirse para que

se apliquen los estilos.
• Operador not: es una negación de una condición. Cuando
esta condición no se cumpla, se aplicarán las media queries
definidas.
• Operador only: se aplican las reglas solo en el caso de que
se cumpla.
• Operador or: se pueden poner varias condiciones separadas
por comas y en el momento que se cumpla cualquiera de
ellas, se aplicarán los estilos.

@media only screen and (min-width:320px) and (max-

width:480px){

<!—- Aquí van todos los estilos CSS -->

Para esta Media Querie se mostrarán los estilos CSS cuando la

anchura de la ventana del navegador sea entre 320 pixeles y
480 pixeles, ambos incluidos.

9
 Alfredo Herraiz Naranjo

Estos son algunos de los parámetros generales que se pueden

emplear a la hora de construir las condiciones en las Media
Queries:

• width: anchura de la ventana del navegador.

• height: altura de la ventana del navegador.
• device-width: anchura de la resolución de pantalla.
• device-height: altura de la resolución de pantalla.
• orientation (portrait/landscape): dispositivo en horizontal o en
vertical.
• resolution: densidad de píxeles.

Excepto la orientación, el resto de parámetros admiten los

valores “max” y “min”.

• max-width: La anchura será menor que la indicada.

• min-width: La anchura será mayor que la indicada.

Una cosa muy importante que debemos tener en cuenta a la hora

de utilizar las Media Queries, es diferenciar entre el ancho de
ventana del navegador y la resolución de la pantalla del
dispositivo, es decir:

@media only screen and (min-device-width: 960px){

/* Aquí van todos los estilos CSS */

En esta Media Querie que hemos definido, el atributo min-device-

width se refiere a la resolución de la pantalla del dispositivo a
la hora de cargar la hoja de estilos definida.

10
 Responsive Web Desing

Esto quiere decir que si reducimos el ancho del navegador,

seguirá mostrándose de la misma manera, ya que la resolución
de la pantalla seguirá siendo la misma y no se adaptara al nuevo
ancho de la ventana del navegador (es decir, si la pantalla de
nuestro móvil tiene 450 px y el navegador detecta que lo óptimo
sería visualizarla con 600 px así lo hará si no usamos la meta-
etiqueta Viewport).

En caso de usar los atributos para la resolución de la pantalla, la

etiqueta Viewport es necesaria.

¿Qué hace la meta-etiqueta Viewport?

El Viewport es el área visual donde se plasma el contenido del
documento HTML de tu sitio web. Se podría traducir como vista o
ventana y nos sirve para definir qué área de pantalla está
disponible al renderizar un documento, la escala/zoom que
debe mostrar inicialmente. Todo ello, con parámetros que le
damos a la propia etiqueta meta, separados por comas en caso de
utilizar más de uno:

ATRIBUTO VALORES DESCRIPCIÓN

Valor integral (en pixels) o Define el ancho de la

width
constante device-width página.

11
 Alfredo Herraiz Naranjo

Valor integral (en pixels) o Define el alto de la

height
constante device-height página.

Cualquier número real de 0.1 en

adelante.

1 representa no escalable
Initial-scale La escala / zoom
inicial del sitio Web.
(1.0 para no tener zoom o 2.5
para tener un zoom del 2,5 de
aumento, por ejemplo).

Define los permisos

para que el usuario
User-scale “yes” / “no”
pueda o no hacer
zoom.

Define la escala /
Cualquier número real de 0.1 en
zoom mínimo que
Minimun-scale adelante. 1 representa no
podemos hacer en la
escalable
página.

Define la escala /
Cualquier número real de 0.1 en
zoom máxima que
Maximun-scale adelante. 1 representa no
podemos hacer en la
escalable
página.

Prácticamente todos los navegadores de smartphones al entrar

a un sitio analizan el tamaño total y lo escalan para que se
muestre completo en la pantalla, este procedimiento genera
muchas veces resultados inapropiados.

Por ejemplo, esta imagen mide 320 píxeles al igual que la pantalla
del dispositivo, ahora bien, la imagen aparece con un tamaño
inferior a causa del efecto de la escala automática.

12
 Responsive Web Desing

La escala automática se puede evitar y controlar muy fácil con

el uso de este atributo Viewport: es un atributo del
tag <meta> que debe incluirse entre las etiquetas <head> del
documento HTML de tu sitio web:

<meta name="viewport" content="width=device-width"/>

Con solo agregar estas líneas de código, la imagen se adaptará al

dispositivo:

Es posible definir un tamaño específico para el área visible del

documento; muchos sitios web ajustan directamente el Viewport
a 320 px para ajustar la apariencia al display vertical de un
smartphone, usando un código similar a este:
13
 Alfredo Herraiz Naranjo

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

Pero, con los diferentes equipos, dispositivos y tamaños de

pantalla, definir un tamaño específico puede ser una mala práctica
que puede mostrar resultados erróneos en algunos equipos o
cuando el dispositivo cambia de posición.

Afortunadamente podemos configurar el viewport para

ajustarse dinámicamente al tamaño de cada dispositivo usando
el atributo “device-width”, que es equivalente al 100% del ancho
de la pantalla del dispositivo, independiente de su tamaño,
posición o resolución:

<meta name="viewport" content="width=device-width"/>

El alto de la pantalla también es configurable con las mismas

propiedades a través del atributo “height”, aunque –salvo
condiciones muy específicas– no es necesario definirlo. Esta
propiedad se asignará automáticamente a través del scroll.

También podemos controlar la escala de la vista con el atributo

“initial-scale“. El sitio se mostrará al doble de su tamaño original:

<meta name=”viewport” content=”width=device-width; initial-

scale=2“/>

14
 Responsive Web Desing

Es posible además, limitar el tamaño al que se puede escalar el

sitio con el atributo “maximum-scale” . El siguiente ejemplo muestra
el documento en escala correcta y permite ampliar (zoom) hasta al
doble de su tamaño.

<meta name="viewport" content="width=device-width, maximum-

scale=2"/>

Por último, está el atributo “user-scalable”, que controla los

permisos de reducir/ampliar el documento. Con el siguiente
código, el sitio se muestra en su escala original y no es posible
cambiar el tamaño desde el dispositivo móvil (importante
mencionar que no se recomienda deshabilitar la opción de escalar
el contenido).

<meta name="viewport" content="width=device-width, user-

scalable=no"/>

En general, el atributo viewport permite muchas configuraciones,

pero para asegurar compatibilidad con la mayor cantidad de
pantallas y navegadores móviles, se recomienda utilizar este
formato como base:

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

scale=1, maximum-scale=1">

15
 Alfredo Herraiz Naranjo

Para conseguir que nuestro sitio web se adapte a los diferentes

anchos de pantalla, estos parámetros serán muy útiles:

• Lo primero, y lo más importante es dejar de usar píxeles y

usar porcentajes a la hora de tomar medidas (por ejemplo:
width: 60%).

• El 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:
o px: los tamaños de letra especificados en px son tamaños
absolutos, por lo que no generan el efecto cascada, pero
no escalan.
o 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

16
 Responsive Web Desing

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 */
}

• Que el ancho de la página sea 100% no significa que

queramos que la pantalla este en una alta resolución, sino
que, si queremos limitar el ancho/alto junto al máximo/mínimo
del contenido, debemos usar los diferentes parámetros
apropiados para ello (max-width o si quisiésemos establecer
un alto máximo max-height; para establecer el mínimo sería
min-width y min-height)

17
 Alfredo Herraiz Naranjo

• Las posiciones absolutas o fijas no son

recomendables usarlas para posicionar contenido (menos
cuando hagan falta). Lo mejor es utilizar el atributo float
(float:left/right), es una técnica muy usada.

• Hay que hacer que las imágenes y vídeos no sobresalgan

de la estructura; si no, aparecerá un scroll lateral en los
dispositivos móviles que descolocará totalmente el diseño.

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;
}

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>

18
 Responsive Web Desing

… 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%;
}

19
 Alfredo Herraiz Naranjo

En resumen, ¿cuál es la mejor opción para tu sitio web? La

experiencia del usuario siempre será lo primero.

A los usuarios no les importa que versión utilices ni como estés

optimizando tu sitio web; su objetivo es poder encontrar lo que
buscan de manera más eficiente y rápida. Por tanto, si tu web
está más centrada en el contenido, es mejor una Responsive
Web Design. Pero si necesitas que el usuario interaccione
mucho con la web, es mejor una Mobile First, ya que cada vez se
consume más información desde los dispositivos móviles.

La conclusión es sencilla, los clientes están yendo más rápido que

las propias empresas y estas deben adaptarse a ellos y a sus
nuevas costumbres de consumo online a través de dispositivos.
Esto es una solución para reducir la tasa de rebote, haciendo que
el usuario pase más tiempo en la página por su facilidad,
comodidad, y óptima visualización y lectura de los contenidos.

A día de hoy, Google valora todas aquellas páginas web que se

adaptan perfectamente a cualquier dispositivo, ya sea PC,
smartphone, tablet… Por ello, es necesario que optimices tu sitio
web de modo que cualquier usuario pueda visualizar la página sin
importar el medio por el cual acceda.

20