comparte el articulo 

Optimizar páginas web para imprimir

Actualizado el 29/11/2010 < > 0 Comentarios

Resumen: Cuando el contenido ofrecido resulta interesante, el usuario puede querer imprimirlo. Para ello es necesario que se optimice la página para su impresión.

Importancia de ofrecer un diseño de impresión

Cuando se ha diseñado una página web con contenidos que resultan relevantes y son de utilidad para los usuarios, es frecuente que los mismos necesiten o quieran hacer una impresión para incluir estos contenidos en trabajos impresos o simplemente para tenerlos a mano sin tener que recurrir a la web en forma permanente.

Basta con recurrir al navegador y hacer uso de la vista previa de impresión para darse cuenta que algunas páginas web no pueden ser impresas, ya que no cuentan con un formato adecuado para los tamaños más frecuentes de hojas de impresoras (A4 y Letter), mientras que otras utilizan algún recurso para que los usuarios puedan hacer la impresión sin dificultades. A continuación, describiremos algunas de las posibilidades con las que se cuenta.

Incluir una hoja de estilos para impresión

Este es uno de los métodos más utilizados, y consiste en incluir una hoja de estilos específica para la impresión del contenido de la página. Por lo general, consiste simplemente en la modificación de los atributos CSS empleados en la hoja de estilos diseñada para la exhibición en los monitores de los ordenadores.

Dado que se trata de un medio completamente diferente, los valores empleados en los atributos CSS requieren de modificaciones casi totales en la mayoría de los casos, y dado que muchos de los elementos que componen la página web no son necesarios en el diseño de impresión, deben dejar de verse en éste mediante la aplicación de la propiedad “display” atribuyéndole el valor “none”, tal como se explica en el artículo CSS avanzado: la propiedad display (primera parte).

Pero la inclusión de una hoja de estilos que sea utilizada en forma exclusiva cuando se desee imprimir el documento, requiere que se emplee un enlace específico para su uso en este medio. Esto se explica claramente en el artículo Diseño de páginas web: Diseño del documento. Uno de los ejemplos más conocidos de utilización de hojas de estilos para impresión, es el de Wikipedia.

Incluir archivos descargables

Otra opción utilizada con frecuencia es la de ofrecer un archivo descargable optimizado para su impresión, siendo lo más frecuente la inclusión de archivos de formato PDF. En otros casos pueden ofrecerse los dos métodos, para que el usuario opte por el que le resulte más cómodo.

La utilización de archivos descargables cuenta con la ventaja de que el usuario puede utilizarlos para imprimir como para guardarlos en su ordenador y acceder a ellos cuando lo desee, sin necesidad de tener que buscarlo nuevamente en nuestra web.

Si bien es cierto que puede ofrecerse la descarga de archivos de texto o archivos de Word, lo más acertado es la utilización de archivos PDF que son los que cuentan con el formato más adecuado para ello. Existen muchas herramientas gratuitas, tanto descargables como online, para convertir nuestros archivos a este formato, muchas de las cuales son de muy buena calidad.

De todas formas, excepto que se utilice un gestor de contenidos que ofrezca la opción de descargar los contenidos de la web en formato PDF, utilizar este método puede resultar dificultoso en caso de que el sitio ofrezca una gran cantidad de páginas.

Optimización del diseño para la impresión

En caso de que optemos por incluir una hoja de estilos específica para que la página web pueda ser impresa, es conveniente tener en cuenta las siguientes recomendaciones:

  • Los elementos publicitarios (excepto los que hacen referencia a nuestra propia web) no deben ser incluidos, ya que por lo general esto no da ninguna utilidad, ni al usuario ni a nosotros.
  • Tampoco deben ser incluidos los elementos propios de la navegación de la página, como los menús, ya que carecen completamente de utilidad.
  • Rara vez es útil incluir los elementos que se colocan en las columnas laterales de la página.
  • No es conveniente que los contenidos sean divididos en columnas. Lo más frecuente y aconsejable es utilizar una única columna para la presentación, tal como se puede ver en la mayoría de las páginas que ofrecen diseños de impresión y en la mayoría de los documentos PDF.
  • Para evitar inconvenientes con el ancho de las páginas, es conveniente que se empleen porcentajes para determinar las dimensiones de los diferentes elementos. En caso de que se deseen emplear anchos fijos, se debe recordar que las hojas A4 tienen un ancho de 595 px, mientras que las hojas de tamaño Letter tienen un ancho de 612 px. Todo aquello que exceda estas dimensiones, quedará fuera de la impresión.
  • Hay que tener especial cuidado con la utilización de colores, debido a que la impresión de páginas web se deben realizar siempre sobre fondo blanco, por lo que las fuentes y otros elementos deben tener un color que resalte claramente sobre este fondo. En algunos casos, es posible que sea necesario incluir un logotipo especialmente diseñado para la impresión. La utilización excesiva de fondos de color puede originar un gasto excesivo de tinta en las impresoras de los usuarios y suelen ser menos legibles que los documentos con fondo blanco y fuentes con colores que generen alto contraste.
  • Dado que la legibilidad de los documentos impresos y en pantalla es diferente, se debe prestar especial atención a la elección de las fuentes y el tamaño de las mismas. También puede ser diferente el espaciado de las letras y el interlineado. En parte, estos valores dependen del tipo de documento que se esté presentando, por lo que siempre lo mejor es realizar algunas pruebas. Si bien es cierto que un buen tamaño para las fuentes normales del contenido es de 12 pt, lo mejor es emplear porcentajes para determinar el tamaño, ya que con ello el usuario tendrá un buen tamaño de fuente independientemente de cómo configure la impresión.

Utilización de imágenes en los diseños de impresión

La utilización de imágenes en el diseño de impresión es una de las dificultades más importantes, ya que cuando una imagen se sitúa en medio de un salto de página, la misma puede quedar dividida. Para enfrentar esta dificultad, es posible acudir a dos soluciones:

1.       Ubicar las imágenes al inicio de la página, y colocar referencias a ellas en el texto, de forma tal que el usuario pueda recurrir a ellas cuando lo desee. Es el método más sencillo, pero que puede generar dificultades al usuario en caso de documentos extensos.

2.       Verificar la ubicación de las imágenes y corregir las mismas en la hoja de estilos. Este método, si bien es el que da la mejor presentación, tiene dos inconvenientes. En primer lugar, es impracticable cuando se trata de muchas páginas. Además, el tamaño de la impresión es regulada por el usuario, por lo que el mismo puede hacer que todo el trabajo resulte infructuoso.

En caso de que se utilicen muchas imágenes, lo más aconsejable resulta dejar solo aquellas que resultan indispensables, dejando de lado todas aquellas que no son necesarias.

Videos y animaciones

Es cada vez más frecuente el empleo de animaciones flash y videos en las páginas web. En el caso de los videos, no hay forma de que al menos parte del contenido de los mismos aparezca en la impresión, por lo que es necesario que, en caso de que el contenido de los mismos sea imprescindible, se ofrezca algún método alternativo para que el usuario acceda al mismo a través de la impresión, ya sea con imágenes o con textos alternativos.

En lo que respecta a las animaciones flash, existe la posibilidad de realizar una versión que permita la impresión de al menos uno de los frames más relevantes. De todas formas, resulta un método complicado, y por lo general resultará más útil emplear imágenes o texto para sustituirlas, en caso de que el contenido de las animaciones sea importante.

Publicado el 29/11/2010, última actualización 29/11/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras