Diseño de páginas web: cabeceras
Nunca entendí por qué la mayoría de las páginas web tienen ENORMES cabeceras horizontales en sus diseños, en especial los blogs. Casi cualquier blog o página web a la que entremos tiene una estructura similar a los layouts 1, 2 y 3 que muestro en la siguiente imagen:
Aunque el logo no ocupe todo el espacio horizontal (en rojo) y no haya banners publicitarios ocupando ese espacio. Incluso es bastante popular últimamente ver blogs como el caso 4, donde la cabecera es una imagen que ocupa gran parte de la pantalla, no sólo se extiende a lo largo de toda la pantalla sino que también son bastante altas. Esto no era un gran problema hace 10 años, cuando los monitores de tubo predominaban y las resoluciones eran relativamente parejas en lo alto y en lo ancho. Pero hoy en día, lo que obtenemos al entrar a un blog es algo más bien como la imagen 4b. El texto (en amarillo) queda escondido y nos obligan a hacer scroll down para poder verlo. Hay blogs muy populares en los cuales directamente el post no aparece en pantalla cuando entramos a leer.
En algunos blogs conocidos la cosa incluso empeora más: como la barra lateral de «herramientas» (naranja) suele ocupar media pantalla (blogs con sidebar a doble columna), deja tan poco espacio para el texto que literalmente «achican» el tamaño de letra! para que pueda caber. Es que en general se nos hace natural leer líneas de alrededor de 80 a 100 caracteres de largo, si hacemos líneas más largas tendemos a cansarnos y a perdernos al bajar a la línea siguiente con los ojos y si es más corto, al no poder «justificar» el texto del blog, tiende a quedar desprolijo.
Lo lógico sería justamente lo contrario, a monitores más grandes y con resoluciones más altas, agrandar un poco la letra para que ocupe «lo mismo» (desde la perspectiva del que está frente al monitor) que ocupaba cuando estabas frente a un monitor de 800×600. Pues no es lo mismo una letra en tamaño 12 en una resolución que en otra.
Y así es como tenemos un montón de blogs que desperdician mucho espacio alrededor de su contenido, el cual queda relegado a un segundo plano. Yo en cambio, propongo el uso de nuevos diseños, como los casos 5 o 6.
El caso 6 es la estructura que solemos ver en la Wikipedia por ejemplo, y que deberíamos ver más seguido. ¡Y es genial! La mayoría de las veces que entro a wikipedia buscando algo, no tengo que mover nada para encontrar lo que busco, ni avanzar página, ni scroll down, ni nada. ¡La información está ahí, a la vista! El logo ocupa una esquina nada más, no hay cabecera, hay una barra superior de herramientas, pero es delgada y contiene links, botones y herramientas realmente útiles, y aún así deja mucho espacio para el texto, el contenido. La barra lateral tampoco es excesivamente ancha, y pone las herramientas más útiles arriba y las menos usadas abajo; incluso se puede ocultar cada sección y las siguientes suben y ocupan su lugar. Ese debería ser el estandard en Internet.
El caso 5b al final es el ideal para mí. Sin cabecera, el logo ocupa un espacio pequeño a un lado. La parte naranja-claro que aparece en 6, 8 y 5b sería un reemplazo a la barra de herramientas. Un menú desplegable, que cubra el texto y muestre esas cosas que no se usan muy seguido, pero que acostumbramos poner igual en el sidebar. Entonces en vez de mostrarlo todo, todo el tiempo en el sidebar, o arriba, o en el footer, sería reemplazado con algún link o botón que lo mantenga oculto y lo muestre cuando sea necesario. Imaginen la consola del Quake o la ventana semi-transparente del Terminal de Linux que aparece sobre las demás ventanas comunes y que queda muy vistoso.
Yo acá en el blog pretendo eliminar la cabecera, mover el logo a una esquina y reducir el ancho de la barra lateral. Eso le daría un papel protagónico al contenido, del texto; que subiría bastante y tendría más espacio a los costados. Arriba del texto tal vez una delgada barra de herramientas o simplemente nada. Y en cuanto al ancho de la sección del contenido, me parece que un buen referente para guiarse es el ancho de los vídeos de youtube, que pasaron de 480 a 560 y luego 640 px. En un blog bien organizado, actualmente un vídeo de youtube tendría que quedar bien acomodado. También pretendo eliminar algunas cosas que se usan muy poco pero que igual solemos ponerlas en el sidebar, cosas como el Archivo de Post o un calendario, todo eso que desaparezca y deje más limpias tanto la página inicial como la de cada post. Entre otros cambios que apuntan a liberar el theme que suele estar muy cargado. Para que quede algo así:
