Diseo web adaptable - Wikipedia, la enciclopedia libre

1 de 2

https://es.wikipedia.org/wiki/Diseo_web_adaptable

De Wikipedia, la enciclopedia libre

El diseo web adaptable, adaptativo, conocido por las siglas
RWD del ingls Responsive Web Design, es una filosofa de diseo
y desarrollo cuyo objetivo es adaptar la apariencia de las pginas
web al dispositivo que se est utilizando para visualizarlas. Hoy da
las pginas web se visualizan en multitud de dispositivos como
tabletas, telfonos inteligentes, libros electrnicos, porttiles, PCs,
etctera. Adems, an dentro de cada tipo, cada dispositivo tiene
sus caractersticas concretas: tamao de pantalla, resolucin,
potencia de CPU, sistema operativo o capacidad de memoria entre
otras. Esta tecnologa pretende que con un nico diseo web, se
obtenga una visualizacin adecuada en cualquier dispositivo.

Diseo web adaptativo (adaptable) o

Responsive Web Design (RWD).

El diseador y autor norteamericano Ethan Marcotte cre y

difundi esta tcnica a partir de una serie de artculos en A List
Apart,1 una publicacin en lnea especializada en diseo y desarrollo web, idea que luego extendera en su libro
Responsive Web Design.

1
2
3
4
5

Origen del diseo web adaptable

Ventajas
Funcionamiento
Referencias
Enlaces externos

Tanto la idea como el propsito del diseo web adaptable fueron previamente discutidos y descritos por el
World Wide Web Consortium (W3C) en julio de 2008 en su recomendacin "Mobile Web Best Practices" bajo
el subttulo "One Web".2
Dicha recomendacin, aunque especfica para dispositivos mviles, puntualiza que est hecha en el contexto de
One Web, y que por lo tanto engloba no solo la experiencia de navegacin en dispositivos mviles sino tambin
en dispositivos de mayor resolucin de pantalla como dispositivos de sobremesa.3
El concepto de One Web hace referencia a la idea de construir una Web para Todos (Web for All) y accesible
desde cualquier tipo de dispositivo (Web on Everything).4
Hoy en da, la variedad de dispositivos existentes en el mercado ha provocado que la informacin disponible no
sea accesible desde todos los dispositivos, o bien sea accesible pero con una experiencia de navegacin muy
pobre.

El uso de dispositivos mviles est creciendo a un ritmo increble; dispositivos como tabletas y telfonos
inteligentes han incrementado sus ventas en los ltimos aos y la navegacin en Internet mediante estos
dispositivos es cada vez ms comn. Por este motivo el diseo web adaptable se ha vuelto tan popular, pues es
una tcnica que proporciona una solucin web que puede manejar la visualizacin web tanto de escritorio como
de dispositivos.
Con una sola versin en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado
estar optimizado para todo tipo de dispositivos: PC, tabletas, telfonos mviles, etctera. Esto mejora la

17/06/2016 13:49

Diseo web adaptable - Wikipedia, la enciclopedia libre

2 de 2

https://es.wikipedia.org/wiki/Diseo_web_adaptable

experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se
acceden desde dispositivos mviles.
De esta forma se reducen los costos de creacin y mantenimiento cuando el diseo de las pantallas es similar
entre dispositivos de distintos tamaos.
Tambin evita tener que desarrollar aplicaciones ad-hoc para cada sistema operativo mvil: iOS, Android,
Windows Phone, BlackBerry OS, etctera,5 aunque hoy en da las webs para mviles todava no pueden realizar
las mismas funciones que las aplicaciones nativas.
Desde el punto de vista del posicionamiento en buscadores, aparecera una nica URL en los resultados de
bsqueda, con lo cual se ahorraran mltiples redirecciones y los fallos que se derivan de stas. Tambin se
evitaran errores al acceder al sitio web en concreto desde los llamados social links, es decir, desde enlaces que
los usuarios comparten en medios sociales tales como Facebook o Twitter, y que pueden acabar en error
dependiendo de desde qu dispositivo se copi y desde qu dispositivo se intenta acceder a ese enlace.6

El diseo web adaptable se hace posible gracias a la introduccin de las media queries en las propiedades de los
estilos CSS en su versin nmero 3. Las media queries son una serie de rdenes que se incluyen en la hoja de
estilos que indica al documento HTML cmo debe comportarse en diferentes resoluciones de pantalla.
Para entenderlo mejor, los diseos de las pginas web, al igual que los peridicos y las revistas, estn basados en
columnas, entonces con la filosofa del diseo adaptativo, si una web a resolucin de PC (1028x768 px) tiene 5
columnas, para una tableta (800x600 pxeles) necesitara slo 4, y en el caso de un telfono inteligente cuyo
ancho suele ser entre 320 y 480 pxeles las columnas usadas seran 3.

1. Traduccin del artculo original "Responsive Web Design" (http://diseowebresponsivo.com.ar/) por Ethan
Marcotte (en espaol).
2. Artculo sobre Recomendacin oficial del consorcio W3C (http://web.archive.org/web/http://arborwebsolutions.com
/articles/responsive-design-is-an-official-w3c-recommendation) en Arbor Web Solutions (en ingls).
3. Apartado 3.1 OneWeb (http://www.w3.org/TR/mobile-bp/#OneWeb) en la recomendacin "Mobile Web Best
Practices" del consorcio W3C (en ingls).
4. La misin de W3C (http://www.w3.org/Consortium/mission.html) (en ingls).
5. Beneficios del Responsive Web Design (http://www.ecbloguer.com/marketingdigital/?p=2635) en ecbloguer.com
6. SEO Benefits of Responsive Web Design. (http://www.practicalecommerce.com/articles/3395-SEO-Benefitsof-Responsive-Web-Design) (en ingls).

www.w3c.es (http://www.w3c.es/) Oficina espaola del W3C.

Responsive Web Design (http://alistapart.com/article/responsive-web-design) por Ethan Marcotte.
diseowebresponsivo.com.ar (http://diseowebresponsivo.com.ar/) Traduccin del artculo original
"Responsive Web Design", por Ethan Marcotte.
Obtenido de https://es.wikipedia.org/w/index.php?title=Diseo_web_adaptable&oldid=90936173
Categora: Desarrollo web
Esta pgina fue modificada por ltima vez el 8 may 2016 a las 17:31.
El texto est disponible bajo la Licencia Creative Commons Atribucin Compartir Igual 3.0; podran ser
aplicables clusulas adicionales. Al usar este sitio, usted acepta nuestros trminos de uso y nuestra poltica
de privacidad.
Wikipedia es una marca registrada de la Fundacin Wikimedia, Inc., una organizacin sin nimo de
lucro.

17/06/2016 13:49