# Introducción
El diseño web *responsive*, adaptable o adaptativo, conocido por las siglas *RWD* (del inglés, *Responsive Web Design*) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, *smartphones*, libros electrónicos, portátiles, PCs, etc. Esta tecnología pretende que con un solo diseño web tengamos una visualización adecuada en cualquier dispositivo.
El diseño *responsive* se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de *apps*, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.
Aunque todas tienen pros y contras, la web *responsive* es considerada por muchos expertos como la mejor práctica posible, al unificar la web, reducir tiempos de desarrollo y ofrecer grandes ventajas para SEO móvil.
## Variabilidad en las resoluciones de pantalla
Durante muchos años el desarrollo web se ha basado en la resolución estándar de 1024×768 (hace apenas 3 años aproximadamente el 40% de los usuarios tenía esta resolución). Pero en la actualidad existe una amplia variedad de resoluciones, no solo en pantallas de ordenadores de escritorio sino también para *tablets* y dispositivos móviles.
Es muy importante conocer todas estas estadísticas así como cuales son las dimensiones de pantalla de los usuarios, a qué público vamos dirigidos, etc. y así poder tenerlo en cuenta en la usabilidad de nuestra web. Ya no es posible centrar el desarrollo pensando que los usuarios van a tener (en un alto porcentaje) una única resolución de pantalla.
Desde hace ya unos años en el desarrollo web se ha sustituido en cierta medida el problema de la compatibilidad de navegadores (gracias a que poco a poco todas las compañías se están ciñendo a los estándares con HTML5/CSS3 y otras se basan directamente en web-kit) por el problema de las resoluciones de los dispositivos.
En la siguiente tabla se pueden ver las últimas estadísticas (2014) de las resoluciones de pantalla más utilizadas:
| Resolución | % utilización |
| --------------- | ------------- |
| **> 1920x1080** | 34% |
| 1920x1080 | 13% |
| **1366x768** | 31% |
| 1280x1024 | 8% |
| 1280x800 | 7% |
| 1024x768 | 6% |
| 800×600 | 0.5% |
| < 800×600 | 0.5% |
En la actualidad ya no es 1024x768 la resolución más utilizada, sino que es 1366×768 y resoluciones superiores a 1920x1080.
Es fundamental tener en cuenta que en el diseño *responsive*, al variar tanto las posibles resoluciones en las que se verá nuestra web deberemos mostrar en primer lugar los contenidos más importantes e imprescindibles.
## Ejemplos de sitios web creados con tecnología *Responsive*
En un artículo llamado: "*Responsive Web Design: 50 Examples and Best Practices*" muestra excelentes ejemplos de la aplicación de esta tecnología. Algunos de estos ejemplos son:
**dConstruct 2011**
**Boston Globe**
**Food Sense**
**Deren keskin**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ajgallego.gitbook.io/bootstrap-4/introduccion.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.