10 consejos para mejores hojas de estilo de impresión
Las hojas de estilo de impresión se han olvidado un tanto, y aún así siguen siendo importantes. Muchas personas imprimen artículos para leer mientras viajan o cuando no tienen acceso a Internet.
Las hojas de estilo de impresión tienen beneficios definidos . Por ejemplo, leer en papel es menos fatigoso para los ojos que leer en la pantalla.
Además, seguir los tutoriales es más fácil si tiene uno al lado de usted, con su editor de código abierto en la pantalla; De esta forma, no tiene que cambiar de ventana cada vez para buscar algo.
En este artículo, señalaremos 10 consejos sencillos que lo ayudarán a crear mejores hojas de estilo de impresión .
En caso de que lo haya olvidado, a continuación le mostramos cómo configurar una hoja de estilo de impresión:
los media="print" El atributo garantiza que los usuarios no vean ninguno de los estilos definidos en el archivo print.css .
Sin embargo, se requiere algo de atención: si su hoja de estilo principal no tiene ningún atributo de medios, la hoja de estilo de impresión heredará su estilo. Para separarlos, configure su hoja de estilos principal de la siguiente manera:
Aquí hay 10 consejos para comenzar con la hoja de estilo de impresión.
1. Eliminar la navegación
¿Cuál es la principal diferencia entre el papel y la computadora? El papel es estático, mientras que una computadora es interactiva. Y para facilitar esa interacción, los sitios web tienen navegación, que se vuelve inútil en el papel.
Oculte la navegación y otras partes de su sitio web que pierden sentido en el papel, como las barras laterales que se vinculan a otras publicaciones. El código para esto es muy fácil: simplemente establece el elemento display a none .
2. Agrande el área de contenido
Con la navegación y la barra lateral eliminadas, nuestro contenido ahora se extiende por la página. Esto hace que la hoja de estilo de impresión se parezca más a un documento ordinario, en lugar de una versión en papel del sitio web.
Todo lo que tenemos que hacer para expandir el contenido es restablecer el flotante, eliminar los márgenes y establecer el ancho al 100%.
[css] #content {width: 100%; margin: 0; float: none;} [/ css]3. Restablecer los colores de fondo
La mayoría de los navegadores ya ignoran las propiedades de fondo para preservar la tinta. Pero para asegurarnos de que todo el fondo sea blanco, podemos configurar el cuerpo en blanco y luego darle a cada elemento secundario que todavía esté en la página un fondo blanco.
[css] body {background: white;} # content {background: transparent;} [/ css]4. Restablecer colores de texto
Al restablecer el fondo, aparece otro problema. ¿Qué sucede si tiene un cuadro de "Información del autor" gris oscuro al final de sus publicaciones, con el texto en gris claro o blanco? Con el fondo ahora configurado en blanco, esta información será invisible.
Para arreglar esto, cambie cualquier texto de color claro a algo más oscuro: negro o, preferiblemente, gris oscuro.
[css] #author {color: # 111;} [/ css]
Tomar Sam Brown El blog de arriba ¿Te imaginas cómo sería si no restableciera los colores del texto? Ilegible de hecho.
5. Mostrar el destino de los enlaces
Debido a que el papel no es un medio interactivo, los lectores, por supuesto, no pueden hacer clic en los enlaces para reunir más información.
Supongamos que alguien está leyendo una copia impresa de un nuevo producto elegante. Ver "Haga clic aquí para obtener más información" de repente sería bastante irritante para ellos, ¿no es así? Esto se soluciona fácilmente agregando el destino del enlace después del texto del enlace en sí, dándole algo como esto: "Haga clic aquí para obtener más información (http://hereismore.com/information)".
Además, para los navegadores preparados para CSS 2, esto se puede hacer con CSS antiguo. Aquí está el código:
[css] a: link: after {content: "(" attr (href) ")";} [/ css]Puede darle vida a las cosas con un tamaño de letra más pequeño, cursiva o lo que sea.
6. Haga que los enlaces se destaquen del texto normal
Los lectores deben poder distinguir los enlaces del texto normal. Aquí se aplican las reglas básicas de usabilidad: se prefiere el azul y el subrayado, pero también prefiero agregar negrita.
Recuerde que los documentos a menudo se imprimen en blanco y negro. No dependas solo de la diferencia de color. Aquí está el código para enlaces impresos sensibles:
[css] a: enlace {font-weight: bold; texto-decoración: subrayado; color: # 06c;} [/ css]# 0066cc es un color azul fresco, y se ve como # 999999 cuando se imprime en escala de grises. Con esto, los enlaces se verán bien impresos en color o en blanco y negro. También se destacarán del texto regular.
7. ¿Qué pasa con el tamaño de la fuente?
En impresión, 12 puntos es el estándar. ¿Pero cómo lo traducimos a CSS? Algunos dicen que ajustar el tamaño de la fuente a 12 puntos (pt) es lo suficientemente bueno. Otros recomiendan configurarlo al 100%. Otros dicen que no deben declarar ningún tamaño de letra en su hoja de estilo de impresión, porque al hacerlo anularía las preferencias del usuario.
Personalmente, voy con un tamaño de letra de 12 puntos la mayor parte del tiempo:
[css] p {font-size: 12pt;} [/ css]8. ¿Qué pasa con las fuentes?
La mayoría de las personas prefieren las fuentes serif debido a que son menos fatigosas para los ojos, mejor guían al lector a través del texto, y así sucesivamente. Configurando el font-family a serif en su hoja de estilo de impresión es probablemente una buena idea, aunque algunos lectores pueden sorprenderse al descubrir que la fuente en su impresión no es la misma que la de su sitio web.
Aquí está el código para una buena pila de fuentes de impresión:
[css] body {font-family: Georgia, 'Times New Roman', serif;} [/ css]
Uno de los beneficios de la propiedad @ font-face de CSS 3 es que sus fuentes especiales también pueden imprimirse, haciendo que las impresiones se parezcan mucho más a su sitio web.
9. Mi blog tiene muchos comentarios. ¿Que debería hacer?
Bueno, esta es realmente tu elección. Por un lado, piense en todos los árboles que estaría ahorrando simplemente agregando #comments { display: none; } a su hoja de estilo de impresión. Por otro lado, los comentarios son de gran valor en algunos blogs y contienen una gran discusión.
Al mover los comentarios a su propia página, les da a los usuarios la opción de imprimirlos. CSS tiene una propiedad que hace que esto sea muy fácil:
[css] #comentarios {page-break-before: always;} [/ css]Por ejemplo, si su artículo tiene dos páginas y media, los comentarios se ejecutarán desde la página 4 hasta, digamos, 6. Los usuarios podrán elegir qué páginas imprimir, sin perder ninguna información.
10. Mostrar un mensaje de solo impresión
"¡ Gracias por imprimir este artículo! No olvide volver a mysite.com para obtener artículos nuevos. "¿Por qué no mostrar un mensaje amistoso como este en la impresión? O tal vez solicite a los lectores que reciclen el papel que han usado para preservar el medioambiente.
Esto es lo que se vería así:
Gracias por imprimir este artículo. No olvide volver a mysite.com para obtener artículos nuevos.
[css] #printMsg {display: block;} [/ css] También podría agregar un poco de estilo, como un borde de 1 píxel. No te olvides de agregar #printMsg { display: none; } a su hoja de estilo habitual, para evitar confundir a los visitantes.
Escaparate
Estos son algunos ejemplos de sitios web conocidos que han pensado (u olvidado) sobre la hoja de estilo de impresión. Siéntete libre de inspirarte.
Se ve bien:
Aquí hay algunos sitios web que hacen un gran trabajo con sus hojas de estilo de impresión:
24 maneras : El sitio web de este "calendario de adviento para geeks web" tiene un diseño elegante, pero me preguntaba cómo se vería en la impresión. El resultado es realmente bueno. Las cosas resbaladizas de CSS 3 se han eliminado. El diseño es limpio y aún así es resbaladizo. La gran marca ha sido eliminada, reemplazada por un simple "24 Ways" alineado a la derecha junto al título de la publicación.
ThinkVitamin : El blog de Carsonified es un buen ejemplo de cómo imprimir hojas de estilo. No hay puntos débiles reales, excepto que el destino de la URL no se muestra.
CSS-Tricks : Chris Coyier de CSS-Tricks.com ha hecho un buen trabajo con su hoja de estilo de impresión. Él eliminó todo el desorden y movió los comentarios a una nueva página, por lo que los usuarios pueden optar por no imprimirlos.
Podría usar algo de trabajo
Aquí hay algunos sitios web que ya son geniales, pero cuyas hojas de estilo de impresión podrían usar un poco de brillo. Sin ofender a nadie en esta sección.
Ledger de diseño web : Webdesign Ledger parece haber descuidado su hoja de estilo de impresión. Cuando hace clic en "Imprimir", termina con tres páginas de anuncios y enlaces relacionados.
El cubículo de diseño : Brian Hoff parece haberse olvidado de su hoja de estilo de impresión, también. Cuando imprimes un artículo, también obtienes el formulario de comentarios.
Flickr : Sería bueno poder imprimir fotos para mostrarlas a amigos. Flickr podría haber eliminado todo, excepto la imagen en sí y la información de copyright impresa. Pero todo aparece en HTML sin estilo simple.
Recursos
- Consejos útiles para crear una hoja de estilo CSS de impresión por Line25
- Imprimir hoja de estilo: la guía definitiva
- Diseño de CSS: ir a imprimir
- CSS-Tricks finalmente obtiene una hoja de estilo de impresión
Escrito exclusivamente para WDD por Pieter Beulque. Él es un estudiante y desarrollador web , viviendo en Bélgica. Puedes seguirlo en Gorjeo también.