Diseñar una Web pensando también en la impresora

Nota: Este artículo lo escribí para Rueda Tecnológica hace un tiempo atrás.

Muchas veces hemos tenido la necesidad de imprimir el contenido de alguna página Web con resultados desastrosos. Los margenes no alcanzan o en el mejor de los casos todos los textos, incluyendo los del menu se imprimen, haciendo poco legible la informacion para el “cliente”.

Este post es para todo Diseñador Web que le quiera ahorrar ese disgusto y tambien tinta a la impresora su fiel “lector”.

Escenario de prueba: Tu, amigo diseñador, tienes la Web mas alucinante del mundo. Llega a tu Web tu posible cliente y necesita imprimir urgentemente pero solo la información. Que hacer?

Asumimos: Has diseñado siguiendo estándares de diseño, CSS, etc.

Antes:

[singlepic=132,320,240,,center][singlepic=133,320,240,,center]

 

Como pueden apreciar aquí tenemos un ejemplo de boletin y como se imprimiría. Se puede apreciar que en la impresión no esta solo el texto sino tambien los menús y botones de herramientas. Cosas innecesarias.

Despúes:

[singlepic=134,320,240,,center]

 

Aquí vemos el formato de impresión.
Nota importante: El diseño Web no ha cambiado nada simplemente la salida de impresión ha cambiado.

Cómo se hace:

Si has seguido CSS entocnes todo es facil solo se agrega una linea al encabezado de tu HTML.

Si antes era asi:

<link href=”Sboletin.css” mce_href=”Sboletin.css” rel=”stylesheet” type=”text/css” media=”screen”/>

Ahora tiene que ser así:

<link href=”Sboletin.css” mce_href=”Sboletin.css” rel=”stylesheet” type=”text/css” media=”screen”/>
<link href=”Pboletin.css” mce_href=”Pboletin.css” rel=”stylesheet” type=”text/css” media=”print”/>

Como ven existen 2 cambios importantes:

1 – Se agrega la opcion MEDIA que permite que decidamos que CSS (estilo) usar según la salida. Es decir si la web se verá en pantalla: SCREEN. Pero si sera impreso: PRINT y asi . Existen más opciones como PROYECTION, etc. Por defecto es SCREEN.

2. Los 2 css son muy similares solo por 1 detalle. En el formato de impresión tenemos que “desaparecer” las columnas u objetos indeseables. Asi:

#columnaderecha {
display:none; /* — PARA IMPRESION —*/
padding:10px 5px 5px 10px;
}

Esto quiere decir que el CSS Original (Sboletin.css) NO tiene el NONE como opcion definida. Son exactamente iguales excepto por ese detalle. Entonces la recomendación es hacer primero el css Original, terminarlo y lyuego duplicarlo. Agregarle el DISPLAY : NONE donde sea necesario y ponerlo como formato de impresión.

IMPORTANTE: El post es simple pero super importante para una página comercial. Piensen en sus clientes.

Eso es todo . Espero le sirva. Y si tienen dudas o comentarios pueden hacerlas.

Leave a Reply

Your email address will not be published. Required fields are marked *