Modificando las plantillas (Tutorial 8: Fluido)

Cuando usamos una plantilla de Blogger, lo que vemos en común con todas ellas es que tienen definido un ancho, generalmente escaso para estos tiempos en que los monitores tienen resoluciones de pantalla cada vez más grandes; están pensadas para 800x600 y si bien podemos cambiar ese ancho, siempre, estamos hablando de algún valor fijo.

Una forma diferente de encarar el diseño de una web es utilizar los llamados anchos fluidos es decir, que los distintos sectores del blog cambien de tamaño según sea la resolución de pantalla que utilice quien lo visite.

La forma estandard de hacer una plantilla fluida es utilizar anchos establecidos como porcentajes en lugar de valores en pixeles, de esa manera, del 100% de la pantalla, las entradas podrían tener el 70% del ancho y la sidebar el 30% o cualquier otra proporción. Pero hay que aclarar antes que nada que no hay un diseño bueno y uno malo, dependerá del tipo de contenido y del gusto personal. Ninguno de ellos es perfecto; los anchos fluidos tienen el inconveniente de su propia definición, si todo es variable, no sabemos si este es excesivo o escaso para ubicar determinado elemento, sobre todo, esos que solemos colocar en la sidebar.

Para minimizar estos problemas, hay opciones de diseño que combinan ambas cosas, estableciendo anchos fijos para determinados sectores y anchos variables para otros.

Un ejemplo muy interesante de este sistema es el que se muestra en un artículo de A list apart que ya tiene sus años pero que, con modificaciones, podemos adaptar a un blog de Blogger.

La idea es diseñar una plantilla con tres columnas, una sidebar a la izquierda, el área de entradas al centro y otra sidebar a la derecha. Ambas sidebars tendrán tamaños fijos definidos y el área de entradas será fluida, adaptando su ancho a la resolución del monitor de tal manera que el blog ocupara siempre el 100% de la pantalla.

Un detalle que lo vuelve aún más interesante: como los navegadores muestran las páginas webs en orden, el uso de sidebars a la izquierda suele ser problemático ya que esta se carga antes que las entradas y, como en general los navegantes no tienen (tenemos) mucha paciencia, si el contenido de esa sidebar es excesivo, hay visitantes que simplemente se irán porque todos queremos ver el contenido rápidamente. En este caso, la columna central se mostrará antes que las sidebars, sin importar la disposición de estas.

Blogger tiene una diagramación sencilla (no se rian) que podemos ver en una plantilla mínima si no expandimos los artilugios; el contenido del body es algo así:

<div id='outer-wrapper'><div id='wrap2'>
<div id='header-wrapper'>
....... este es el header .......
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
....... esta son las entradas y se muestran a la izquierda .......
</div>
<div id='sidebar-wrapper'>
....... esta es la sidebar y se muestra a la derecha .......
</div>
<div class='clear'>&#160;</div>
</div>
<div id='footer-wrapper'>
....... este es el footer .......
</div>
</div></div>

A este esquema simplemente le vamos a agregar una sidebar extra (la izquierda). Eliminaremos esto:

<div class='clear'>&#160;</div>

y en su lugar, pondremos esto:

<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar2' />
</div>

De aquí en adelante, el resto es puro CSS así que vamos a las definiciones elementales.

El body sólo tiene un dato importante a definir, el ancho mínimo y esto lo podemos calcular sumando el ancho de las dos sidebars (que tendrán anchos fijos) y un poco más, tanto como se nos ocurra que puede ser contraida la columna central, por ejemplo, digamos que será de 300 pixeles; entonces, tendremos:

sidebar izquierda + sidebar derecha + 300 que en este ejemplo dará 250 + 200 + 300 = 750

body {
margin:0;
padding:0;
min-width: 750px;
}

#navbar { /* oculto la navbar */
display: none;
height:0;
visibility: hidden;
}

#content-wrapper {
padding-left: 200px; /* es igual al ancho de la sidebar izquierda */
padding-right: 250px; /* es igual al ancho de la sidebar derecha */
}

#content-wrapper #main-wrapper,
#content-wrapper #sidebar-wrapper,
#content-wrapper #sidebar-wrapper-2 { /* propiedades comunes a las tres columnas */
float: left;
position: relative;
}

#header-wrapper { /* cualquier propiedad */
/* no debe tener un ancho definido */
text-align:center;
}

#outer-wrapper { /* no tiene propeidades */ }

#main-wrapper { /* la columna central con las entradas */
width: 100%;
}

#sidebar-wrapper { /* la sidebar izquierda */
/* el margen es negativo y del mismo valor que el ancho */
margin-right: -250px;
width: 250px;
}

#sidebar-wrapper-2 { /* la sidebar derecha */
/* esta es la clave de todo */
margin-left: -100%;
right: 200px;
width: 200px;
}

#footer-wrapper { /* cualquier propiedad */
/* no debe tener un ancho definido */
clear: both;
text-align:center;
}

Sólo nos faltaría algo, evitar que haya problemas en las versiones de Internet Explorer anteriores a la 8; para eso, debajo de ]]></b:skin> agregaremos lo siguiente:

<!--[if lt IE 8]>
<style type='text/css'> #sidebar-wrapper-2 {left: 250px;} </style>
<![endif]-->