¡Qué porquería! Probablemente has dicho estas palabras cuando esperas una página web organizada y encuentras todo lo contrario.

Seamos honestos, todos hemos sentido la frustración de ver este tipo de problema cuando navegamos por la web. Y es que la organización y la presentación de la página web hace una gran diferencia al momento del usuario decidir si se queda viendo nuestro contenido o, simplemente, sale de nuestra página. Podemos tener la cura del cancer disponible en nuestra página web pero si no está organizada y bien presentada no tendrá éxito. Lo que buscamos es todo lo contrario, que nuestra página obtenga la mayor cantidad de trafico posible. ¿Cómo puedo crear plantillas que muestren mi contenido organizado? Utilizando plantillas líquidas.

Y, ¿qué es eso de una plantilla líquida? No es otra cosa que una plantilla que se adapta al tamaño y resolución del monitor que el usuario está utilizando. Esto significa que no importa en que monitor el usuario esté viendo nuestra página, siempre tendrá el mismo aspecto. Se escucha bien, ¿no? ¡Manos a la obra!

Lo primero que debemos de tener claro es que tipo de plantilla necesitamos para nuestra página. Esto depende mucho del tipo de página que queremos crear. Ya sea únicamente informativa o una aplicación dinámica o un blog, etc. Para este artículo vamos crear una plantilla de 2 columnas que es frecuentemente usada en aplicaciones dinamicas y en blogs. Este será el formato que tendrá nuestra plantilla al final del artículo.

Plantilla liquida
Diseño de plantilla líquida de 2 columnas

HTML

El código html para este tipo de plantilla es muy sencillo. Vamos a estar utilizando divs, en vez de tablas, ya que estos son mucho más flexibles. Y, al final, ese es nuestro objetivo, una plantilla flexible que se ajuste a cualquier tipo de monitor. Este es el código html para nuestra plantilla.

<html>
	<head>
		<title>Diseño de Plantilla Líquida</title>
	</head>
	<body>
		<div>
			<!-- Este div contiene el encabezado de la página -->
			<div class='encabezado'>
				<h3>Encabezado</h3>
			</div>
			
			<!-- Este div contiene ambos, la barra lateral y el contenido principal de la página -->
			<div class='envoltura'>
				
				<div class='columnas'>
				
					<!-- Este div contiene el contenido principal -->
					<div class='col1'>
						<h3>Principal</h3>
					</div>
					
					<!-- Este div contiene la barra lateral -->
					<div class='col2'>
						<h3>Barra lateral</h3>
					</div>
				</div>
			</div>
			
			<!-- Este div contiene el pie de la página -->
			<div class='pie'>
				<h3>pie de la página</h3>
			</div>
		</div>
	</body>
</html>

Si observan el código html se darán cuenta que no tiene nada de especial. Para hacer la plantilla líquida, el secreto está en el CSS. Nuestro CSS debe estar construido de forma tal que se ajuste a cualquier tipo de monitor. Es por esto que vamos a estar usando las medidas en por ciento (%) en vez de pixeles.

CSS

Siguiendo el formato de la plantilla de la imagen anterior podemos construir nuestro CSS.

Encabezado y Pie

El encabezado y el pie de la página debe de ir a través del ancho de la misma. 

.encabezado {
	clear:both;
	float:left;
	width:99%;   /* Queremos que vaya de un lado al otro de la plantilla */
	padding: 5px;
}
/* estilo del pie de la página */
.pie {
	clear:both;
	float:left;
	width:99%;
	padding: 5px;
}

Columnas

Es aquí donde ocurre la magia para que la plantilla sea flexible. Primero debemos tener un div que funciones como envoltura para las 2 columnas. Este div debe de ser del ancho de la página.

.envoltura {
	position:relative;	/* Esto arregla un bug en IE7 */
	clear:both;
	float:left;
	width:100%;			/* el ancho de toda la página */
	overflow:hidden;		
}

Dentro de este div es que estarán las columnas. Col1 corresponde al estilo de la columna que será la del contenido principal mientras que col2 corresponde al estilo de la barra latera.

.col1,
.col2
{
	float: left;
	position: relative;
	padding: 5px;
	overflow: hidden;
	margin-bottom: 10px;
}
/* 2 columnas - configuración para el menú izquierdo */
.envoltura .columnas {
	right:85%;			
	margin-top: 20px;
}
.envoltura .col1 {
	width:83%;			/* el ancho de la columna derecha */
	left:100%;			
	background:#fff;
	padding: 5px;
	min-height: 300px;
}
.envoltura .col2 {
	width:13%;			/* el ancho de la columna izquierda */
	left:2%;			
	background:#fff;
}

Finalmente, el resultado completo del CSS debe ser el siguiente.

/* Estilo de elemento body */
body {
	margin:0;
	padding:0;
	border:0;			
	width:100%;
	background:#F0F0F0;  
	min-width:600px; /* Mínimo de ancho. Si no es necesario puede ser eliminado */
					 /* Esta propiedad no funciona en versiones viejas de Internet Explorer */
	font-size:90%;
	font-family: Arial,?FreeSans,?Helvetica,?sans-serif;
}

/* Estilo para el encabezado */
.encabezado {
	clear:both;
	float:left;
	width:99%;   /* Queremos que vaya de un lado al otro de la plantilla */
	padding: 5px;
}
.envoltura {
	position:relative;	/* Esto arregla un bug en IE7 */
	clear:both;
	float:left;
	width:100%;			/* el ancho de toda la página */
	overflow:hidden;		
}
/* configuración en común de las columnas */
.columnas {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2
{
	float: left;
	position: relative;
	padding: 5px;
	overflow: hidden;
	margin-bottom: 10px;
}
/* 2 columnas - configuración para el menú izquierdo */
.envoltura .columnas {
	right:85%;			
	margin-top: 20px;
}
.envoltura .col1 {
	width:83%;			/* el ancho de la columna derecha */
	left:100%;			
	background:#fff;
	padding: 5px;
	min-height: 300px;
}
.envoltura .col2 {
	width:13%;			/* el ancho de la columna izquierda */
	left:2%;			
	background:#fff;
}
/* estilo del pie de la página */
.pie {
	clear:both;
	float:left;
	width:99%;
	padding: 5px;
}

Conclusión

La presentación de una página web es una de las cosas que determinarán el éxito de la misma. Es por esto que debemos hacer un buen trabajo al momento de escoger el tipo de plantilla que vamos a utilizar. Espero que les sirva y que hagan de su página web una atractiva y bien organizada.