no solo usabilidad: revista sobre personas, diseño y tecnología
Abierta nueva convocatoria:
Máster Universitario Online en Diseño de Experiencia de Usuario de UNIR

20 de Enero de 2003

Optimización de páginas web para su impresión

Hassan Montero, Yusef

Resumen: Explicación de las diferentes alternativas existentes para posibilitar la impresión de páginas web.

Introducción

Los usuarios odian leer en pantalla[1], por lo que muchas veces preferirán imprimir los documentos web para que su lectura les resulte menos tediosa. En este trabajo comentaré tres posibles técnicas de optimización para la correcta impresión de documentos web, indicando las ventajas e inconvenientes de cada una.

1ª Opción: Una página, Un formato

Esta opción consiste en que el mismo formato para presentación en pantalla de la página funcione correctamente como formato para su impresión.

Los anchos de línea y tablas deberían definirse de forma relativa (%), o con un ancho fijo menor a los 600 pixels, aunque para asegurar que el documento se pueda imprimir en diferentes tamaños de papel es más recomendable la forma relativa.

Si definimos también los tamaños de fuente de forma relativa posibilitamos al usuario decidir desde su navegador, no solo el tamaño de fuente con el que leer el documento en pantalla, sino también el tamaño de fuente con el que desea imprimirlo. (sugerencia válida para explorer, ya que otros navegadores como mozilla permiten esta decisión al margen de la forma en que el diseñador defina los tamaños de fuente).

Inconvenientes

2ª Opción: Una página, Dos formatos

Utilizando CSS 2[4], mediante el selector 'media' podemos definir dos formatos o estilos diferentes para un mismo documento, uno para pantalla ('screen') y otro para impresora ('print').

<link href="impresion.css" media="print" rel="stylesheet" type="text/css" />
<link href="general.css" media="screen" rel="stylesheet" type="text/css" />

@media print {
H1 { font-size: 10pt }
}
@media screen {
H1 { font-size: 12pt }
}

En el estilo destinado a impresora podemos utilizar fuentes tipo 'serif', anchos de línea relativos, no imprimir elementos de navegación ni elementos gráficos de decoración, etc. Puesto que explorer, por ejemplo, no imprime los colores de fondo de tablas o bloques de texto, podemos variar el estilo (tipografía, bordes...) de estos elementos para que en papel sigan comunicando el mismo significado.

Inconvenientes

3ª Opción: Dos páginas, Dos formatos

Hay veces que será necesario ofrecer la, comúnmente denominada, 'versión para imprimir' del documento. Se trata de un documento diferente formateado especialmente para ser impreso.

La razón principal por la que puede ser necesario ofrecer un documento especial para impresión es que el original lo hayamos tenido que fraccionar en diferentes partes: debido a su gran extensión, a la necesidad de incorporar más publicidad, etc...

Si en este documento especial para impresión queremos controlar de forma precisa cómo será su presentación final en papel, podemos ofrecerlo en formatos diferentes a HTML, como PDF o Word. El problema es que esos formatos no son estándar y puede que el usuario no disponga del software necesario para visualizarlos.

Los enlaces embebidos en un texto web pierden todo su significado y utilidad al ser impresos. En cambio con esta opción, ya que el documento que se imprimirá es diferente al que se visualiza en pantalla, podemos incluir las URL de los enlaces en forma de pies de página, para que los enlaces, una vez impresos, no pierdan su función.

Inconvenientes

Sugerencias generales

El Logo del sitio web debe seguir presente en la versión o estilo especial 'para impresión', ya que identificará claramente el origen del documento web impreso. Así mismo, otros elementos de orientación[3] como los breadcrumbs, también se deberían mantener, pues informan del contexto organizativo del documento web impreso respecto al resto del sitio web.

El usuario que tenga entre manos una página web impresa, puede tener la necesidad de conocer cuál es la localización o dirección de dicha página (para buscar más documentos relacionados, para realizar la referencia bibliográfica...), por lo que una buena práctica es que las páginas impresas contengan en la cabecera su URL. Esto es recomendable para los estilos y versiones específicos 'para impresión' (opciones segunda y tercera), pues en la primera opción (una página, un formato) puede confundir al usuario.

Los videos y animaciones (flash y gifs) anidados en el documento web pierden su significado al ser impresos. Acompañarlos de una descripción textual en la versión o estilo 'para imprimir' ayudará al usuario a reconocer o recordar su contenido real.

Los sitios web que utilizan marcos o frames suelen dar problemas para ser impresos: otra razón más para no hacer uso de ellos.

Conclusiones

Elegir la opción más adecuada para posibilitar la correcta impresión de las páginas web depende de cada sitio web: formatos, contenidos, estructura...

En nuestro caso particular (este sitio web) nos hemos decidido por un método mixto entre la primera y segunda opción: Todas las páginas ofrecen un formato que funciona correctamente tanto para pantalla como papel, pero además los artículos (más propensos a ser impresos) hacen uso de un estilo CSS especial para impresión, con el que limpiamos los elementos de navegación e incluimos la URL de la página web impresa.

Artículos relacionados

Enlaces relacionados

Compartir:

Facebook Twitter Google LinkedIn

Acerca del autor/a:

Yusef Hassan Montero

Consultor sobre Experiencia de Usuario y Visualización de Información. Diseñador de interacción en Scimago Lab, Doctor en Documentación (2010) por la Universidad de Granada y editor de la revista No Solo Usabilidad. Escribe habitualmente en su blog sobre diseño de información.

Más información: yusef.es

Citación recomendada:

Hassan Montero, Yusef (2003). Optimización de páginas web para su impresión. En: No Solo Usabilidad, nš 2, 2003. <nosolousabilidad.com>. ISSN 1886-8592

No Solo Usabilidad - ISSN 1886-8592. Todos los derechos reservados, 2003-2023
email: info (arroba) nosolousabilidad.com