Diseño web responsive adaptable

GLOSARIO

wikipedia

Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,...

El diseño web 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. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,... Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart,1 una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Funcionamiento del Diseño Web Adaptable

El Responsive Web Design se hace posible gracias a la introducción de las Media Queries en las propiedades de los Estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.7

Para entenderlo mejor, los diseños de las Páginas Web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del Diseño Adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para una Tablet (800x600 px) necesitaría sólo 4, y en el caso de un smartphone cuyo ancho suele ser entre 320 px y 480 px las columnas usadas serían 3.

Mas informacion