Responsive Desing y sus Mediaqueries

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario, permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.

Las Mediaqueries:

Las mediaqueries son sentencias del CSS que nos permiten hacer declaraciones que solo se apliquen en nuestros diseños si se cumplen ciertos requisitos que nosotros declaramos. Estas mediaqueries se pueden aplicar básicamente en dos posibles puntos de la web.

Al llamar al archivo css, indicando en cada uno las condiciones para cargarlo
O en el propio archivo CSS, formando un apartado donde incluir fragemntos de css a aplicar

Declaracion de Mediaqueries:

Para declarar un fragmento de CSS dentro de un condicional marcado por una media query:

@media screen and ([CONDICION]) {
/* Nuestras nuevas reglas con este ancho o menos de pantalla */
}

Aplicar solo en resoluciones de menos de X píxeles de ancho: 

@media screen and (max-width:[ANCHO]px) {
 /* Nuestras nuevas reglas con este ancho o menos de pantalla */

}

Aplicar solo en resoluciones de más de X pixeles de ancho: 

@media screen and (min-width:[ANCHO]px) {
/* Nuestras nuevas reglas con este ancho o más de pantalla */
}

Aplicar solo en resoluciones entre un mínimo de ancho y máximo de ancho:

@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) {
/* Nuestras nuevas reglas con este ancho o más de pantalla */
}

Compatibilidad de media queries con Internet explorer:

Como siempre, explorer no va a soportar muchas cosas que a día de hoy ya son de dominio público. Por suerte siempre existen desarrolladores muy motivados que nos crean librerías para dotar compatibilidad a estos navegadores. En este caso nos encontramos con css3-mediaqueries-js una librería javascript que simplemente debemos añadir para Internet Explorer de versiones anteriores a la 9.

Bastará cargar este script en el head de nuestra página y ya podremos usar media queries sin problemas.

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Como todas estas librerías, el resultado no es exacto pero si que da una gran compatibilidad en la mayoría de los casos.

Solucionando las pantallas móviles en responsive design:

Como úlltimo paso debemos definir una visualización correcta para móviles. Esto es así porque el uso que se hará en estos dispositivos no será el mismo que en páginas normales. Sin duda querremos hacer más cambios que simples adaptaciones del ancho de pantalla y desaparición de elementos. Por suerte, contamos con el viewport para definir como queremos trabajar esta parte.

Comentábamos que el viewport nos sirve para indicar al móvil como deseamos que trabaje su Zoom a la hora de mostrarnos la página. Así pues, básicamente teníamos dos opciones:

Para webs con responsive design adaptado perfectamente a resoluciones móviles:

<meta name="viewport" content="withd=device-width/>