Opciones para crear páginas web amigables de impresión

Publicado el 6 de Mayo, 2008

Generalmente nos resulta más cómodo leer el contenido de una web en un papel impreso que en la pantalla de nuestro ordenador; es por eso que en este artículo abordamos los aspectos fundamentales a tener en cuenta en el momento de implementar en nuestro sitio las páginas para impresión.

Una página web amigable para impresión es aquella que al imprimirla se puede leer perfectamente ajustándose a las características de una lectura en papel, pero que al mismo tiempo en la pantalla se muestra con toda la elegancia, diseño y colorido necesario.

Para llevar a cabo ésto, modificamos su apariencia, eliminando los anuncios publicitarios, decoraciones, elementos de navegación, vínculos y otros aspectos que no son relevantes cuando el contenido se encuentra en papel.

Teniendo en cuenta que a la mayoría de las personas prefieren leer sobre una hoja de papel que en la pantalla del ordenador, es importante considerar esta opción en el diseño de nuestros sitios web. Si le damos al usuario la posibilidad de imprimir el contenido de las páginas también estaremos haciendo nuestro sitio más usable.

Utilizando CSS

La forma ideal de implementar un diseño especial para impresión es utilizando las hojas de estilo agregando una extra y especificando mediante la propiedad media, que es para impresión y no para verse en pantalla.

Para esto es necesario escribir el código que mostramos a continuación dentro de la etiqueta <HEAD> de la página.

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

Como podemos ver además del archivo CSS que siempre se incluye, definimos el de impresión para que los dispositivos lo interpreten cuando hagamos el llamado a dicha opción.

Consejos al crear nuestra hoja de estilo

Elementos decorativos

En la hoja de estilos destinada a impresión tenemos que tomar en cuenta varios aspectos importantes como ocultar elementos de navegación, gráficos decorativos, o colores de relleno e imágenes de fondo, entre otros, todo ésto con la finalidad de que únicamente salga impreso el contenido principal y algún elemento extra como el nombre del sitio o dirección del enlace.

Otro aspecto a tener en cuenta es el color de fondo, este debe ser diferente al color de la letra, de manera que el contraste entre éstos permita leer claramente el texto. Recomendamos que el fondo sea blanco con la fuente negra, sin colores ni imágenes de fondo, ya que esto provocaría un gasto de tinta excesivo e innecesario además que se haría el texto ilegible.

Fuente de impresión

Las fuentes recomendadas para el diseño de un sitio web generalmente son Verdana, Arial y Helvetica; sin embargo para una buena lectura en el papel las fuentes de la familia Serif y la muy conocida Times New Roman son las idóneas.

También será necesario considerar el tamaño de la fuente. Debe ser suficientemente legible; no debe ser muy grande para que no ocupe mucho espacio, ni muy pequeña que no se entienda lo que está escrito. El tamaño recomendado está entre 12 y 14 puntos.

Ancho del contenido

Es muy recomendable que las tablas, div y en general todas las etiquetas que se utilizan para organizar el contenido en una página tengan establecido el ancho de forma relativa, es decir, utilizando por cientos en la propiedad width de la etiqueta.

De esta forma se garantiza que el contenido se ajuste automáticamente al tipo de hoja que seleccione el usuario en el momento de la impresión. A continuación mostramos un ejemplo del ancho relativo.

<div width="100%">
<!-- Contenido  -->
</div>

También es posible establecer un ancho fijo para estas etiquetas, pero en este caso el ancho total de la página siempre debe ser menor a 600 píxeles. El inconveniente de esta variante es que, al no ajustarse automáticamente al tamaño del papel, se podrá imprimir en menor cantidad de tipos de hojas.

Si se establece además los tamaños de fuente de forma relativa daremos también la posibilidad al usuario de seleccionar en su navegador el tamaño de fuente en la vista de impresión.

Implementando el llamado a Impresión

Para aumentar un poco la usabilidad del sitio podemos agregar botones o textos directamente en la página que hagan el llamado a la opción de Imprimir en el navegador, para ello la forma más sencilla es utilizando el evento print() del javascript como se muestra en el siguiente código de ejemplo.

<a href="#" onclick="javascript:print();">Imprimir</a>

Al invocar este método ocurre algo similar a la opción Imprimir del navegador, que generalmente se encuentra en el menú Archivo. Al pinchar sobre el texto del ejemplo se muestra el cuadro de diálogo de impresoras para que seleccionemos a la que se enviará la página y si es necesario ajustemos algunos parámetros de impresión como cantidad de copias, orientación de la hoja, entre otros.

Alternativas al uso de Hojas de Estilo

Otra variante para implementar una versión de Impresión en nuestro sitio es permitir que el usuario descargue el contenido de la página en un documento de tipo PDF o DOC especialmente formateado y listo para imprimir.

Esta opción es muy útil por ejemplo, cuando un artículo es muy extenso y es fraccionado en varias páginas en el documento descargado estará el contenido completo y no será necesario imprimir por separado cada una de las páginas web que componen el artículo.

Para llevar ésto a cabo podemos generar los archivos tipo PDF de forma dinámica utilizando la librería FPDF escrita en PHP, para ello necesitaremos la programación de la función que genere dichos archivos, los cuales pueden visualizar utilizando un visor de este tipo de documentos como Foxit Reader o Acrobat Reader.

Algo a destacar es que en esta forma de implementación los vínculos embebidos de la página pierden su utilidad y significado al ser impresos (a menos que el archivo se genere con ellos), pero una alternativa podría ser especificar estos vínculos como pié de página en los documentos para que no pierdan su función.

También se pueden ofrecer descargas de archivos en formato .DOC los cuales se pueden visualizar utilizando el procesador de texto Word que está incluido en el paquete Office de Microsoft o también con el OpenOffice de distribución gratuita.

Otros aspectos importantes

Es muy importante que el logo del sitio esté presente en la versión para impresión y de este modo identifique el contenido de la página además para que el usuario sepa con claridad a qué sitio pertenece la página.

También es útil mantener la ruta de navegación o breadcrumbs, como también se le conoce; ya que esto indica al usuario la estructura jerárquica dentro del sitio de la página impresa. Un ejemplo de ruta de navegación es este: “Inicio > Artículos > Desarrollo Web > Impresión”.

Las páginas que utilizan marcos en su diseño generalmente presentan problemas para su impresión, por lo que es muy recomendable no utilizar marcos o frames en sus páginas.

Las imágenes animadas y vídeos flash que se encuentren en el documento en el momento de la impresión perderán su objetivo, por lo que recomendamos que en la vista de impresión se sustituyan por una descripción de texto que ayude al usuario a recordar su contenido.