PDF de programación - Manual de Responsive Web Design

Manual de Responsive Web Design

http://desarrolloweb.com/manuales/responsive-web-design.html

Página 1 de 59

Manual de Responsive Web Design

Introducción: Manual de Responsive Web
Design

Este es un manual de Responsive Web Design, la técnica que permite hacer webs adaptables a las
condiciones del ordenador o dispositivo que las está accediendo. También las conocemos como técnicas
adaptativas, focalizadas principalmente a las dimensiones de la pantalla.

Responsive Web Design no es una única técnica, sino son un conjunto de ellas que nos sirven para hacer
diseños adaptables al medio donde se van a consumir. Por tanto, este manual no tiene un principio y un fin
que pudiera estar perfectamente definido, sino que se podría ampliar su contenido en función de las
necesidades de los sitios web en la actualidad, experiencia de los escritores o las novedades en los estándares
como HTML y CSS para facilitar la adaptabilidad del diseño web.

En Internet no hemos encontrado una información completa y ordenada de principio a fin, en español,
sobre Responsive Web Design, por lo que nos hemos decidido a escribir este texto que esperamos sirva de
referencia para quien comienza a interesarse por la adaptabilidad del diseño o incluso para quien ya aplica el
"Responsive".

Encuentras este manual online en:
http://desarrolloweb.com/manuales/responsive-web-design.html

http://desarrolloweb.com/manuales/responsive-web-design.html

Página 2 de 59

Manual de Responsive Web Design

Autores del manual

Las siguientes personas han participado como autores escribiendo artículos de este manual.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online
EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.

Daniel Martínez

Diseñador gráfico convertido a web

http://desarrolloweb.com/manuales/responsive-web-design.html

Página 3 de 59

Manual de Responsive Web Design

Conceptos fundamentales del diseño
responsive

Comenzamos por una serie de artículos que explican los motivos por los que hoy el diseño web debe de ser
adaptable, analizando los conceptos más fundamentales. El objetivo es entender que debemos diseñar para
todos los tipos de pantalla, pero también para todas las velocidades de conexión, todos los navegadores, etc.

Qué es Responsive Web Design

Comenzamos con una descripción general del término Responsive Web Design de modo que
todos podamos entender de dónde viene y por qué es tan importante en el mundo actual del
desarrollo.

Responsive Web Design es la técnica que nos permite crear sitios adaptables a las condiciones del
ordenador o dispositivo desde donde se van a acceder, sobre todo en lo que tiene relación con la pantalla
del sistema donde se están visualizando. Aunque el término es suficientemente general como para poder
referirse a una adaptabilidad en torno a cualquier condición. En este artículo vamos a intentar aclarar el
término para que los lectores sepan bien a qué nos referimos.

Antes de pensar en la web, podemos entender el término "responsive" en general. Es la característica de un
sistema que tiene respuesta hacia el medio que le rodea. No es algo específico de la web, sino que lo
encontramos en el día a día. Por ejemplo, una luz que se enciende cuando alguna persona pasa al lado, una
puerta que se abre cuando nos situamos cerca para entrar o un semáforo que se pone en rojo cuando pasa
un coche a velocidad mayor de la permitida. Todo ello son sistemas "responsive", que tienen una respuesta
conforme al medio o las condiciones donde se encuentran.

La traducción podría ser "Responsivo", que sí se encuentra en el diccionario de la Real Academia Española
y significa "Perteneciente o relativo a la respuesta". Sin embargo en términos de una página web sería más
adecuado usar la palabra "Adaptable", pues la página es capaz de adaptarse al dispositivo u ordenador
donde se encuentra. En fin, el término es suficientemente conocido en inglés como para usar la palabra
"Responsive" y que todos los que vayan a leer este texto capten perfectamente a qué nos referimos, por lo

http://desarrolloweb.com/manuales/responsive-web-design.html

Página 4 de 59

Manual de Responsive Web Design

que preferimos no traducirlo.

Marco actual donde surge el Responsive Web Design

Tenemos que pensar en las condiciones actuales de la Web. Antes existían solo ordenadores donde se
consumían los contenidos y sin embargo hoy podemos consultar Internet en cualquier tipo de dispositivo.
Móviles, tablets, televisores, libros electrónicos, relojes e incluso neveras permiten acceder a la Web y sus
servicios. Son múltiples medios con distintas características y los diseñadores web deben preocuparse
porque los sitios se vean bien en cualquiera de ellos.

¿Versión para móviles?

Tradicionalmente en la web los sitios estaban optimizados para ordenadores de escritorio. Luego, al
popularizarse el acceso a Internet en móviles, o al introducirse el mercado de los tablets, lo habitual era la
existencia de diversas versiones de un mismo sitio, creadas y optimizadas específicamente para teléfonos,
tabletas y ordenadores personales.

Aún seguimos viendo esa solución en la Internet de hoy e importantes sitios mantienen versiones distintas
para su web. Esa forma de trabajar era mayoritaria hasta el año 2010 aproximadamente, sin embargo, no es
práctica. Nos obligaba a diseñar una web varias veces y mantener layouts para diversos tipos de dispositivos.
El trabajo por tanto se duplicaba o triplicaba y no solo el de creación del sitio, sino lo que es peor, el de
mantenimiento. Si el dueño de una web decidía crear una nueva sección, o reformular una existente, estaba
obligado a actualizar las webs de cada uno de los sistemas para los que había creado versiones distintas.

Pero el problema se agravó con la llegada de la Internet en la televisión, en el coche, etc. ¿Qué nos toca?
¿hacer una versión web para cada uno de los dispositivos nuevos que vayan apareciendo? El camino no va
por ahí.

Para atender a las necesidades actuales y futuras, necesitamos crear sitios web que sean adaptables a
cualquier medio donde queramos consumirlas, presentes y futuros. Tener una única web es la mejor
situación y justamente la mejor ventaja que nos ofrece el "responsive".

Tecnología que surge para cubrir las necesidades de adaptabilidad

Aparentemente, el trabajo de adaptar una web no es tan complicado, pero hace falta tecnología que nos
permita realizarlo. En la segunda y tercera generación de sitios y antes de la implantación de las CSS3,
teníamos pocas herramientas para conseguir la deseada adaptabilidad. Existían los diseños fluidos y en
DesarrolloWeb.com ya hablábamos de ellos en 2001, que en contraposición de los sistemas rígidos
permitían tener layouts capaces de utilizar todo el ancho de la pantalla. Era lo más parecido a un sitio
responsive de hoy.

Las páginas fluidas se construían con contenedores que tenían la anchura de la ventana donde estaban
visualizándose. Sin embargo, estaban pensados para que una web se viese bien en pantallas de 800, 1024 o
1280 píxeles de ancho. No estaban ingenidados con las características de los móviles en la cabeza. Hacer
que una tabla (en aquel momento aún se llevaba la maquetación con tablas y se estaba comenzando a ver la
maquetación con CSS) o un elemento DIV tenga la anchura de la pantalla es muy sencillo, pues requiere
solo un atributo de estilo, sin embargo, conseguir que tu diseño se vea bonito en cualquier dimensión ya no
es tan fácil.

http://desarrolloweb.com/manuales/responsive-web-design.html

Página 5 de 59

Manual de Responsive Web Design

Sobre todo hay que pensar que con la llegada de los móviles el rango de dimensiones habituales de las
pantallas es mucho más abarcante. Tenemos pantallas que van desde los 300 píxeles de ancho a los 2000 y
pico. Hoy incluso hay pantallas que superan los 5000 píxeles de ancho. Si estiras un diseño concebido para
300 píxeles de ancho, para llevarlo a dimensiones del doble de anchura, el triple, o más, en la mayoría de los
casos tendrás un diseño horrible. Como no había tecnología para poder crear sitios elásticos que se vieran
bien en cualquier dimensión de pantalla, los autores de web establan obligados a crear diferentes versiones
de las páginas.

En resumen, CSS3 vino para solucionar algunas de las necesidades actuales, por medio de nuevos atributos
y construcciones capaces de responder al entorno donde se encuentran. Nos referimos sobre todo a las
Media Queries o a atributos tan simples como max-width o min-width (aunque estos últimos pertenencen a
CSS 2.1). Gracias a estas utilidades somos capaces de reaccionar ante distintas circunstancias como la
anchura de la pantalla, ventana o contenedor donde están aquellos elementos a maquetar. Los veremos con
calma a lo largo del Manual de Responsive Web Design.

Término por Ethan Marcotte

No podemos terminar este artículo sin dar crédito al diseñador que acuñó el término de "Responsive Web
Design". Se trata de Ethan Marcotte que publicó un post en "List Apart" y un libro donde explicaba todas
las circunstancias y técnicas relacionadas con el diseño adaptable. No es que sea el primer diseñador que
pensó en la necesidad de adaptar el layout de las webs a las diferentes pantallas (de hecho los creadores del
estándar CSS ya habían creado tecnologías para producir sitios adaptables), sino que fue el que usó ese
término que hoy es tan popular.

En DesarrolloWeb.com somos de los pioneros en acercar el término en español a la comunidad, en diversos
eventos en directo y conferencias. En EscuelaIT se ofreció el primer curso de Responsive Web Design en
español.

En resumen y como conclusión podemos decir que "Responsive" engloba muchos campos, pensamientos,
prácticas, tencologías y técnicas que pueden incluso crecer con el tiempo. A medida que aparecen nuevos
sistemas y dispositivos singulares, surgen nuevas necesidades, a las que se da respuesta ya sea con t