Ene
24

0


El responsive web design (RWD) o diseño sensible es el reto para los diseñadores en este año 2012. El tráfico web vía móviles y tablets crece de forma exponencial, actualmente está en torno a un 10% y se prevee que llegue al 30% para el año que viene.

diseño web moviles

diseño web moviles

 

Entoces la pregunta es, ¿tus páginas son navegables en una tablet o móvil? la mayoría no están adaptadas y ahí es donde el responsive design entra en juego.

El concepto del diseño sensible es que la web se visualice acorde al tamaño de pantalla que tiene el usuario. En la imagen inicial podemos observar un ejemplo de como una misma web se visualiza de tres formas diferentes según el dispositivo que se use: PC, Tablet y Smartphone.

El principal concepto a tener en cuenta en esto son los CSS Media Queries.Una herramienta que nos permite activar y desactivar partes del CSS de nuestro diseño según el tamaño de la pantalla:

1
2
3
4
5
6
7
8
9
@media screen and (max-width: 980px) {
/* CSS ventanas de menos de 980px */
}
@media screen and (max-width: 650px) {
/* CSS ventanas de menos de 650px */
}
@media screen and (max-width: 480px) {
/* CSS ventanas de menos de 480px */
}

Mediante la etiqueta @import podemos cargar archivos de CSS externos:

1
2
3
<style>
@import url(tablet.css) screen and (min-width: 650px);
</style>

CSS Media Queries funciona con todos los navegadores modernos, vease que los de la vieja escuela que aun tienen IE7 instalado en su XP pues igual ven un churro.

Otro de los pilares básicos responsive design es trabajar con porcentajes en vez de con pixels. Los grids de tu plantilla deben ser flexibles y poder adaptarse. La herramienta jQuery también puede ayudar de forma notable a los diseños sensibles explora su infinidad de opciones.

Fecha de edicin: 24 Enero, 2013 - Tags: , , ,

Leave a Reply

You must be logged in to post a comment.