04/06/2015

Consejos para desarrollar una versión imprimible de nuestro sitio web

Consejos para desarrollar una versión imprimible de nuestro sitio web

La opción de imprimir una página web en papel existe casi desde los inicios de la Web, pero los cambios de la tecnología han ido mejorando notablemente esta herramienta. El botón para imprimir puede aparecer en uno de los menús del browser o bien como parte de la misma página, si nos encargamos de incluirlo en el diseño. De ahí en más, debemos entender que el papel no es igual a la pantalla. Si no ofrecemos una versión de la página adaptada para impresión, el usuario terminará imprimiendo una copia exacta de la página web, que puede funcionar bien en su dispositivo pero ser imposible de leer en un medio gráfico. En ese sentido, tenemos al menos tres opciones:

  1. Ofrecer una versión de la página en PDF.
  2. Tener una hoja de estilos aparte para impresoras.
  3. Usar media queries para modificar nuestros estilos en función del medio, estableciendo reglas CSS específicas para impresoras.

Permitir descargar un PDF puede ser útil no solo a los fines de imprimir la página, sino también porque hay ciertos tipos de contenido (por ejemplo, libros y artículos académicos) que resultan más cómodos de leer de manera offline. Sin embargo, nunca debe ofrecerse como única opción, ya que el usuario puede no tener soporte de PDF (ni en el browser ni en su dispositivo).

La segunda opción nos obliga a crear un documento CSS aparte, lo que puede ser una molestia para el mantenimiento del código.

El tercer enfoque no tiene ninguno de esos problemas. Suele ser el mejor método, pero es también el más nuevo, así que no nos conviene si queremos brindar soporte a browsers antiguos.

Cualquiera sea la técnica empleada, a la hora de diseñar la versión de impresión debemos aplicar estas medidas:

  • Eliminar los elementos de navegación, como el menú superior, la sidebar y la barra de búsqueda. Son inútiles en papel.
  • Expandir el área de contenido a un ancho del 100%, de manera que ocupe toda la hoja.
  • Hacer que todo el texto tenga color oscuro y el fondo sea blanco.
  • Aplicar márgenes usando centímetros, no píxeles ni puntos.
  • Limitar el ancho de las imágenes, de manera que no queden cortadas por los bordes de la hoja.
  • Cambiar la tipografía a una que sea fácil de leer en papel (por ejemplo, Times New Roman).
  • Recordar que los enlaces no sirven en papel. Se los puede «eliminar» (quitándoles sus rasgos distintivos, como el color azul y el subrayado) o indicarlos colocando la dirección a la que apuntan al lado del anchor text, para que eventualmente el lector la ingrese de forma manual en el browser.
  • Conservar información que le ayude al lector a recordar de dónde imprimió el texto, como el logo del sitio o un mensaje indicando la URL.

Siguiendo estos consejos les daremos una mejor experiencia de lectura a quienes prefieran consumir nuestros contenidos desde el tradicional papel, un medio que está lejos de desaparecer.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce