Actualmente se habla mucho de los diseños responsive, de hecho hace poco publiqué una lista de frameworks responsive y de plantillas responsive. Aunque, los más novatos pueden tener dudas acerca qué es el diseño responsive, y a ellos va dirigido este artículo, en el que aprenderás a diseñar de manera responsive en 3 simples pasos, aunque debes saber conocimientos básicos de CSS.

Paso 1. Metatag (ver demo)

La mayoría de los navegadores para móviles escalan las páginas HTML para que se adapte a la pantalla, puedes usar la etiqueta viewport para resetear esto. Esta etiqueta le dice al navegador que use una determinada anchura, desactivando la escala inicial. Este código debes incluirlo dentro de la etiqueta.

<meta name="viewport" content="width=device−width, initial−scale=1.0" />

Pero Internet Explorer como siempre dando la lata. Internet Explorer 8 no soporta media-queries, por lo que tendremos que darle soporte por javascript, usando media-queries.jsrespond.js. Incluiremos esta línea en nuestro código HTML:

<!--&#91;if lt IE 9&#93;> <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < !&#91;endif&#93;-->

Paso 2. Estructura HTML

Como podéis ver, en este ejemplo se muestra una simple estructura con un header, contenedor content, sidebar y un footer. El header es fixed y tiene una altura de 180px. El contenedor content tiene una anchura de 600px y la barra lateral de 300px.

page-structure

Paso 3. CSS Media-queries.

CSS3 media query es la clave para un diseño responsive. Le dice al navegador como renderizar la página para específicas anchuras. Las siguientes reglas serán efectivas en una anchura de 980px o menos. Simplemente se cambia el valor de la anchura del container de píxel a porcentaje, por lo que los contenedores fluirán, en vez de estar estáticos.

/* para 980px o menos */

#pagewrap {

width: 94%:
}

#content {

width: 65%;
}

#sidebar {

width: 30%;
}

Para el viewport de 700px o menos el #content y #sidebar pasa a una anchura auto y se elimina el float así tendrá una anchura completa, al 100%.

/* para 700px o menos. Con auto width se hace un reset al container. */
#content {

width: auto;
float: none;
}

#sidebar {

width: auto;
float: none;
}

Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y esconde la barra lateral:

/* para 480px o menos */
#header {

height: auto;
}

h1 {

font-size: 24px;
}

#sidebar {

display: none;
}

¡Y eso es todo amigos! Podéis ver un ejemplo de su funcionamiento a continuación:

Vía | Webdesignerwall