Siguiendo con los artículos de Web Designer wall, continuamos con el tema de las media queries de CSS3, en este caso con otra traducción/explicación de uno de sus artículos.

En este artículo comienza repitiendo lo que ya hablamos en la otra entrada sobre media queries, que el diseño responsivo a día de hoy cobra mayor imortancia por la variedad de resoluciones que pueden usar los usuarios, y que por tanto el aspecto tiene que adaptarse a la ventana. El ejemplo del resultado que se busca conseguir es este.

El conceto, como diría Manquiña (el conceto es el conceto), es el siguiente: La página tiene un contenedor de tamaño fijo (980px) optimizado par una resolución mayor de 1024 px. La media query se utiliza para saber si el tamaño es menor de 980px, en cuyo caso se pasa a un diseño fluido. Y si el caso es que es menor de 650px entonces, directamente se convierte en un diseño con una sola columna.

El marcado HTML es el siguiente, donde se ha creado un contenedor pagewrapper que envuelve cabecera, cuerpo y pie:

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

Como hemos comentado miles de veces, el marcado HTML5 no se lleva bien con las veriones de IE anteriores al 9, pero puedes solucionarlo introduciendo esta línea en la cabecera, que enlazan con una librería de javascript que subsanará el problema:

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

Tras esto toca comenzar con el css, y lo primero es resetar todos los elementos de HTML5 a elementos de bloque:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

Y tras esto toca la estructura principal del css. El contenedor principal ha sido fijado en 980px, el header tiene una altura fija de 160px, el contente un ancho de 600px flotado a la izquierda y el sidebar, flotado a la derecha, de 280px.:

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Todo esto, así de momento, daría lugar a un diseño estático tal que el de esta demo. Ahora toca la parte divertida: CSS3 Media Queries. Como el HTML5, CSS3 tampoco es que furrule muy bien en IE pre-9, así que de nuevo habrá que tirar de una librería de .js para solventar el problema.

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

La idea es hacer un css externo con las media queries, introduciéndolo en el documento tal que así

<link href="media-queries.css" rel="stylesheet" type="text/css">

Luego vendrán las siguientes líneas para cuando la ventana donde visualicemos sea menor de 980px se aplicarán las siguientes reglas:

• El contenedor principal se resetea al 95%
• El contenedor de contenido pasa al 60%
• El contenedor lateral pasa al 30%

El usar el % hace los contenidos fluídos:

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

Luego tocará hacer el media query para tamaños menores de 650px, con una única columna:

• header = resetear la altura a auto
• searchform = lo mandamos a una posición absoluta, a 5px del borde superior
• main-nav = se reseta su posición a estatic
• site-logo = lo mismo
• site-description = lo mismo también
• content = devolvemos el ancho a auto
• sidebar = ponemos el ancho al 100% y quitamos la propiedad de flotado

@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

Finalmente tenemos la versión para menos de 480px, pensada para el iPhone. Implica evitar el zoom que automáticamente hace Safari sobre el texto y toquetear el menú de navegación principal:

@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

Ahora toca el truquito para imágenes flexibles, con un pequeño hack para que funcione en IE8 (el width: auto\9; de la línea final):

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Con los vídeos va igual, menos para Safari, dode max-width no va con vídeos (con fotos sí, extraño). Finalmente, y siguiendo con el iPhone de los huevos, toca metar una meta-tag de escala inicial, ya que el iPhone tiende a modificar las páginas para adaptarlas a la pantalla del dispositivo:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Y con esto está el tutorial terminado, en el artículo citado podrás encontrar además todo el código y las imágenes de la página de ejemplo. Un placer el haberos traducido esto, y todavía me queda al menos una tercera entrada sobre diseño responsivo. Esta semana creo que la cosa va a andar chunga para conectarme mucho rato, así que igual tarda hasta el viernes o sábado. O igual lo puedo hacer mañana, a saber. En todo caso, un saludo.