Qué es el Responsive Web Design (RWD)

Responsive Web Design o para hacerlo mas corto RWD, es la técnica que mediante la aplicación del diseño y la maquetación generamos un entorno, estructura fluidos, utilizando imágenes y hojas de estilo. (explicación en la wikipedia)

La finalidad del uso de RWD es hacer que el contenido de un sitio web se adapte a los distintos dispositivos (tablets, smartphones o Smart TV) mejorando así la lectura, visualización y usabilidad para el usuario.

En la aplicación de RWD, dejamos de utilizar medidas fijas para los anchos de los elementos y empezamos a trabajar con porcentajes y en los tamaños de las tipografías dejamos de utilizar pixels (px) y puntos (pt) para utilizar EM.

Dejamos de utilizar medidas fijas y utilizamos porcentuales. Adios PX y PT, hola % y EM

Para poder realizar la adaptación del contenido, disponemos de unos elementos llamados media queries, que utilizaremos en nuestros archivos CSS.

Con los media queries, podemos aplicar ciertos estilos según las propiedades del dispositivo.

Presentamos una tabla donde podemos ver todas las propiedades que podemos evaluar con los media queries para poder lanzar los estilos convenientes para reposicionar, esconder o hacer visibles los contenidos que creamos convenientes.

Feature Value Min/Max Description
width Length Yes Width of display area
height Length Yes Height of display area
device-width Length Yes Width of device
device-height Length Yes Height of device
orientation portrait orlandscape No Orientation of device
aspect-ratio Ratio (w/h) Yes Ratio of width to height, expressed as two integers separated by a slash (e.g., 16/9)
device-aspect-ratio Ratio (w/h) Yes Ratio of device-width to device-height
color Integer Yes Number of bits per color component (if not color, the value is 0)
color-index Integer Yes Number of entries in the output device’s color lookup table
monochrome Integer Yes Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0)
resolution Resolution Yes Density of pixels of output device, express as integer followed by dpi(dots per inch) or dpcm (dots per centimeter)
scan progressiveor interlace No Scanning process used by TV devices
grid 0 or 1 No If set to 1, the device is grid-based, such as a teletype terminal or phone display with only one fixed font (all other devices are 0)

La idea es poneros en camino al respecto de este nuevo concepto/técnica, en próximos posts seguiremos ampliando las bases para desarrollar de ésta forma.

Para ir abriendo boca, os facilito unos pocos enlaces;

Compartelo en Share on FacebookShare on LinkedInPin on PinterestTweet about this on TwitterShare on Google+Email this to someone

Leave a Reply