El diseño 'líquido' en un blog de Blogger

Con la actual proliferación de pantallas que tienen distintas resoluciones y tamaños, muchos se preguntan qué tal se ven sus blogs en ordenadores de sobremesa, en portátiles y en móviles o PDA. La verdad es que esta gran variedad ha añadido un problema al diseño web, pues no tenemos el control total sobre el diseño de nuestro blog. En realidad no se trata de un problema, porque el diseño web debe asumir esta característica propia de la Web. En un libro o una revista, por ejemplo, el diseño es fijo, pero en la Web todo fluye, como el líquido elemento, y tenemos que habituarnos a ello. Por eso, propongo un diseño fluido para nuestro blog de Blogger, pero con un límite. Vamos a ver cómo se consigue esto que yo he utilizado en el diseño de mi blog.

El contenido de este artículo sólo se puede aplicar a las antiguas plantillas de Blogger, porque desde la aparición del Diseñador de plantillas de los blogs de Blogger, el código fuente ha cambiado y ya no se pueden aplicar las modificaciones que propongo en esta entrada.

1. Qué es el diseño líquido

En este blog ya publiqué un artículo titulado Diseño y elección de la plantilla en Blogger donde daba una breve presentación sobre el asunto. En él comentaba que las plantillas de los blogs de Blogger tienen un diseño fijo con una anchura máxima de 1000 píxeles, y por tanto su anchura no se ajusta a la anchura de la pantalla. Esta opción puede provocar que en algunos monitores pequeños no se vea el blog completo, ni tiene en cuenta el tamaño de la ventana del navegador que pueda elegir el usuario según sus preferencias, pero a la vez evita que en los monitores muy anchos las líneas de texto queden demasiado largas, lo que redunda en una falta de legibilidad del texto, como corroboran todos los expertos en diseño gráfico.

Tanto el diseño líquido (de anchura variable) como el diseño fijo (de anchura fija) tienen sus defensores, y ambos diseños son apropiados para según qué contenido se incluya en el blog. Si se incluye principalmente texto en un blog, el diseño fijo es muy apropiado, pues evita que las líneas de texto se alarguen demasiado. Pero si además se incluyen muchas imágenes u otros elementos multimedia e interactivos quizá sea necesario tener un blog con diseño líquido para poder tener más espacio donde incluir esos elementos.

Por todo ello, lo mejor puede ser poner un límite a un diseño líquido, es decir, hacer que la anchura del blog se extienda hasta un límite de 900 a 1000 píxeles. De esta forma, el blog se acomodará bien a las antiguas resoluciones de 800x600 que tienen los ordenadores viejos y se ajustará perfectamente a la resolución estándar actual que es de una anchura de 1024 píxeles. Y las pantallas con mayor resolución no verán sobrepasar la anchura límite que hemos establecido.

2. El diseño líquido experimentado en un blog

Pero antes de nada, vamos a presentar el problema visualmente en un blog de Blogger. Para ello, he creado un blog en Blogger para hacer pruebas y he elegido una plantilla con diseño líquido. Veamos cómo queda este diseño en distintas resoluciones.

Aquí se ve con resolución 800x600 que, como dijimos, es la de los antiguos ordenadores, que aún siguen presentes en la Web en una proporción de hasta el 20%, con lo cual no se pueden olvidar. Como vemos en la imagen siguiente, el diseño queda bien proporcionado:


Pero ¿qué tal queda en la resolución 1024x768, que es la más extendida actualmente? No queda mal tampoco, aunque la línea es demasiado larga para el tamaño de la letra, lo que se podría solucionar aumentando este tamaño.

Y ahora veremos que en la resolución siguiente, la de 1280x1024, el aspecto del blog es totalmente inadecuado, porque tiene unas líneas de texto larguísimas, que impiden la lectura continuada.

3. Diseño líquido con límites en una plantilla líquida de Blogger

Lo que vamos a hacer a continuación tiene que dejarnos la anchura máxima del blog a 950 píxeles, de modo que la anchura de las líneas de texto tengan un tamaño máximo adecuado. Como se ve en la siguiente imagen, en la resolución de 1280x1024, el blog queda centrado en la pantalla con la anchura máxima que hemos elegido.


Si elegimos un diseño de Blogger con la anchura líquida, la solución es más sencilla que si lo tenemos ya elegido con anchura fija. Pero ¿cómo se sabe si la plantilla es de anchura líquida o fija? Para ello hay que ir a la sección Diseño -> Seleccionar plantilla nueva y allí elegimos las distintas versiones de las plantillas activando la casilla correspondiente y haciendo clic en el enlace Vista preliminar de la plantilla. Entonces se abrirá una ventana con el nuevo diseño; si abrimos la ventana del todo, veremos si se ajusta a la anchura de la pantalla o, por el contrario, se queda con su anchura fija.

Yo he elegido para este ejemplo la plantilla Sand Dollar, que es la penúltima. Antes de modificar la plantilla, conviene guardar la actual plantilla haciendo clic en el enlace Descargar plantilla completa. Para modificar la plantilla hay que ir a la sección Diseño -> Edición de HTML, y allí tenemos el código fuente. Al principio asusta, pero no es para tanto. En el código tenemos que buscar la siguiente parte, que es la capa externa que envuelve todo el contenido del blog:

#outer-wrapper {
font:$bodyfont;
}

Y hay que añadirle tres líneas, que he destacado en negrita, para dejarla como el siguiente código. Hay que dejar como está cualquier código que haya en esa capa, a no ser que se refiera a los márgenes (margin) o a la anchura (width); en estos casos, habrá que borrarlos para añadirle nuestras medidas.

#outer-wrapper {
font:$bodyfont;
max-width: 950px;
margin-left: auto;
margin-right: auto;
}

Y ya tenemos establecida la anchura máxima (max-with: 950px) en 950 píxeles, y hemos centrado el blog en la pantalla con los márgenes izquierdo y derecho (margin). Ahora tendría que funcionar todo bien. Si, por algún motivo, no funciona la cosa, podemos borrar las tres líneas añadidas o volver a escoger el mismo diseño u otro en la sección de plantillas.

También se puede poner este código en la parte del cuerpo del documento (body), aunque el diseño cambia algo. En todo caso, algunos diseños no tienen esa capa externa (outer-wrapper), y en entonces hay que poner el código en body.

Este código añadido funciona bien con las siguientes plantillas de Blogger que he probado:

• Stretch Denim
• Minima Stretch
• Herbert
• Jellyfish
• Tekka
• Sand Dollar
  

4. Diseño líquido con límites en una plantilla fija de Blogger

En el caso de que la plantilla sea de anchura fija, la cosa se complica cuando queremos convertirla en líquida por la variedad de códigos de las plantillas. Aquí voy a mostrar un ejemplo que se adapta a algunas de las plantillas de los blogs de Blogger, y que puede usarse para otras con precaución.

Lo primero es conocer las capas (wrappers) que hay en la mayoría de los diseños de las plantillas. Para ello, basta el siguiente esquema:

La capa más externa se llama outer-wrapper y engloba a las demás capas: la de la cabecera del blog (header) y la del contenido (content). Ésta, a su vez, abarca la capa principal (main) y la del lateral (sidebar).

Para conseguir el diseño líquido de estas plantillas fijas, hay que incluir el código anterior de las tres líneas en la capa outer-wrapper, como hacíamos en la sección anterior. Pero también hay que borrar la anchura de píxeles que se incluye en las capas main y sidebar para adjudicarles el tanto por ciento de la anchura que queramos. Aquí he incluido una anchura del 65% (width: 65%;) en la capa de las entradas del blog y un 30% para el lateral. El 5% restante se adjudica automáticamente a la parte central que separa ambas capas.

Este diseño queda bien, por ejemplo, con la plantilla Minima que, como indica su nombre, incluye lo esencial, por ello es buena para poder modificarla a nuestro gusto. Otras plantillas incluyen imágenes en el diseño de las capas, y eso dificulta su modificación. Con Minima, el diseño queda de esta manera en una rsolución de 1280x1024:



Enlaces de interés:

• 70 plantillas para Blogger. En Mashable.
  
• Diseño fijo contra diseño líquido: ¿cuál es mejor? En Grancomo.
  
• No hacer diseño líquido. En Úsalo.
• El diseño líquido y el diseño estático. En Proyecto web.
• Diseño fijo contra diseño líquido: ¿cuál es mejor? En Web taller.
• What Is Liquid Design? En SitePoint.
• Liquid Design For The Web. En evolt.org.
• Liquid Web Design. En Digital Web.

(Artículo actualizado el 16 de agosto de 2010)