Diseo web adaptable

El diseo web adaptable o adaptativo, conocido por las

siglas RWD (del ingls, Responsive Web Design) es una
losofa de diseo y desarrollo cuyo objetivo es adaptar la apariencia de las pginas web al dispositivo que
se est utilizando para visualizarla. Hoy da las pginas
web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrnicos, porttiles,
PCs,... Adems, an dentro de cada tipo, cada dispositivo
tiene sus caractersticas concretas: Tamao de pantalla,
resolucin, potencia de CPU, capacidad de memoria,...
Esta tecnologa pretende que con un solo diseo web, tengamos una visualizacin adecuada en cualquier dispositivo.

en Internet mediante estos dispositivos es cada vez ms

comn. Ese es el motivo por el que 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: PCs,
tabletas, telfonos mviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo,
con sitios web de ancho jo 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.

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.

Tambin se supone que evita tener que desarrollar aplicaciones ad-hoc para versiones mviles, o no, por ejemplo,
una aplicacin especca para iPhone, otra para mviles
Android, etc.,[5] aunque hoy en da las webs para mviles
todava no pueden realizar las mismas funciones que las
aplicaciones nativas.

Origen

Desde el punto de vista de la optimizacin de motores de

bsqueda, slo aparecera una URL en los resultados de
bsqueda, con lo cual se ahorran 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, Twitter,
etc y que pueden acabar en error dependiendo de qu enlace se copi (desde qu dispositivo se copi) y desde qu
dispositivo se accede.[6]

Tanto la idea como el propsito del diseo web adaptable fueron previamente discutidos y descritos por el
consorcio W3C en julio de 2008 en su recomendacin
Mobile Web Best Practices bajo el subttulo One
Web.[2]
Dicha recomendacin, aunque especca 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]

3 Funcionamiento del Diseo Web

Adaptable

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 es accesible pero la experiencia de navegacin es muy pobre.

El Responsive Web Design 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.

Ventajas

Para entenderlo mejor, los diseos de las Pginas Web,

al igual que los peridicos y las revistas, estn basados en
El uso de dispositivos mviles est creciendo a un ritmo columnas, entonces con la losofa del Diseo Adaptatiincreble, dispositivos como tablets y smartphones han in- vo, si una web a resolucin de PC (1028x768 px) tiene 5
crementado sus ventas en los ltimos aos y la navegacin columnas, para una Tablet (800x600 px) necesitara s1

lo 4, y en el caso de un smartphone cuyo ancho suele ser

entre 320 px y 480 px las columnas usadas seran 3.

Referencias

[1] Diseo Web Adaptable por Ethan Marcote (en espaol)

[2] Artculo sobre Recomendacin ocial del consorcio W3C
en Arbor Web Solutions (en ingls)
[3] Apartado 3.1 OneWeb en la recomendacin Mobile Web
Best Practices del consorcio W3C (en ingls)
[4] La misin de W3C (en ingls)
[5] Benecios del Responsive Web Design en ecbloguer.com
[6] SEO Benets of Responsive Web Design (en ingls)

Enlaces externos
Ocina espaola del W3C
Diseo Web Adaptable por Ethan Marcotte

ENLACES EXTERNOS

Text and image sources, contributors, and licenses

6.1

Text

Diseo web adaptable Fuente: http://es.wikipedia.org/wiki/Dise%C3%B1o%20web%20adaptable?oldid=79003139 Colaboradores:

BOT-Superzerocool, Zelkova, Fercufer, Patriciadedo, Technopat, Carlusjove, Chemtox, Eduardosalg, UA31, Billinghurst, Xqbot, Jkbw,
Tajajon, FrescoBot, EmausBot, ZroBot, Antoswe, Grillitus, ChuispastonBot, MerlIwBot, MetroBot, Invadibot, Cabuja, Le Lapin Vert,
Helmy oved, Sorin Cojocaru, Ainhoajulian, Miky1974, Addbot, Maestrodelweb, Sato92, AntonioRigo, XFacco, Kako s69, JoelDavidHG
y Annimos: 20

6.2

Images

6.3

Content license

Creative Commons Attribution-Share Alike 3.0