Otimizar o formato das páginas web para imprimir

Conselhos para construir páginas que os usuários possam imprimir corretamente.

Por César Martín


Publicado em: 25/9/06
Valorize este artigo:
Resumo.
  1. É recomendável oferecer versões "para imprimir" onde se oferece uma página com o conteúdo, porém sem os elementos de navegação.
  2. Procurar ter as tabelas e imagens com tamanho fixo inferiores aos 750 pixels de largura. Se usar tamanho em % não há problemas.
  3. Não use frames.
  4. Em geral a cor de fundo das tabelas não se imprime. Procure que não seja um elemento critico.
  5. Explorer se encontra uma imagem entre 2 páginas, imprimirá a imagem partida.
  6. Procure usar fontes em tamanhos relativos (%) ou em tamanho "normal" (12 pontos). Desta forma um maior número de usuários terão uma versão ótima.
  7. Os objetos animados tipo gifs, flash, vídeo, costumam dar problemas de impressão. O usuário pode querer imprimir um determinado frame do filme ou pode ser que ao imprimi-lo dê problemas. Se for um documento crítico (uma demonstração "passo a passo" de um produto, por exemplo ) procure oferecer uma versão estática (jpg) e com um "rodapé de foto" que explique cada imagem. Desta forma se poderá imprimir e poderá ser entendido fora do contexto da animação.

1. Recomendável a versão "para imprimir".
Se se dispõe da tecnologia, devemos oferecer uma versão "para imprimir" de tal forma que o usuário possa ter um documento limpo.

Deve-se eliminar todos os elementos de navegação deixando o logotipo da empresa, o banner (si existir) e uma barra de localização do documento de tal forma que alguém possa encontrar o documento dentro do site a partir da cópia impressa (algo assim como: Nome do site / secao / subsecao / nome do artigo).

É recomendável dentro da versão impressa ou deixar o tamanho da tabela sem definir ou deixa-lo por abaixo dos 750 pixels de largura. Segundo o estilo do documento, uma coluna mais estreita pode fazer com que a leitura seja mais ágil, porém deve-se tender a não oferecer mais de 10-12 palavras por linha.

Não se recomenda o uso de várias colunas. Está bem usar várias colunas para oferecer textos complementares, mas não para projetar um mesmo texto.


2. Como máximo 750 pixels de largura ou usar tamanhos em %.
exemplos de páginas letter e A4 com os tamanhos indicados em pixels O tema da largura máxima é algo por determinar. O papel com tamanho "letter" mede 612x792, o papel A4 mede 595.28x841x89 pixels.

Por outro lado, o explorer adapta o tamanho do documento ao do papel com o qual, pode dar no mesmo as dimensões do HTML.

Aqui talvez o melhor conselho que se pode dar é o de criar as páginas com tamanhos relativos (%) deixando como absolutos os elementos de navegação. Se por algum motivo quiser criar seu site com tamanhos absolutos, procure não crescer mais do que os 750 pixels. Se forçamos as margens até 800 pixels de largura a impressão costuma ser errônea.


3. A cor de fundo das tabelas.
Explorer não imprime as cores de fundo das tabelas com o qual muda as cores dos elementos que se imprimiriam com branco.
Netscape na versão 4.7 não imprime as cores das tabelas, porém converte as cores, com o qual os elementos em branco se perdem.

Como regra geral pode-se dizer que não há que usar as cores das tabelas como elementos de design crítico. Melhor usar gráficos. As cores das tabelas estão bem para destacar alguns elementos, porém o que está em negrito ou as imagens, farão um melhor trabalho.


4. Explorer se encontra uma imagem entre 2 páginas, imprimirá a imagem partida.
exemplo de uma imagem partida na hora de fazer uma vista prévia para imprimir
Esta imagem ilustra uma quebra de página no explorer vendo como a imagem a imprimir fica partida.
Isto é parte do explorer e aqui vão alguns conselhos para remedia-lo.
  1. Colocar todas as imagens na parte superior do artigo (como thumbanils linkados à imagem ao tamanho real) e assim, evitar qualquer possível interseção com uma quebra de página. Esta solução é simples e prática.
  2. Fazer uma versão PDF. Se o formato do documento e as imagens que o acompanham são críticas, é melhor fazer um PDF. No documento HTML deve-se mostrar um sumário, data, peso, número de páginas e qualquer outro dado que ofereça informação sobre o documento. No final do documento incluímos alguns links a sites que cobrem melhor o tema de trabalhar com PDFs.
  3. Colocar as imagens ao longo do documento e ir comprovando com vistas prévias de impressão sua localização. Esta solução não é a melhor já que depende do usuário a resolução final do documento.

Uma vez alguém me comentou de uma aplicação de software que remediava este problema do explorer, porém nunca pude comprovar os resultados.


5. Imprimindo flash, gifs animados, vídeo.
Se a página a imprimir contém flash, gifs animados ou vídeos, deve-se seguir alguns conselhos.
  • Que o último frame da animação ofereça um sumário do conteúdo de tal forma que sirva como "imagem" a imprimir. É uma pena a quantidade de banners que têm como frame final uma imagem sem informação relativa à promoção.
  • Os "filmes" Flash em geral costuma imprimir mal, mas pode-se preparar uma versão especial para imprimir. Esta opção de flash está comentada com todos os detalhes no site de macromedia.
  • Os vídeos simplesmente não se imprimem com o qual se o conteúdo for crítico devemos oferecer uma versão estática.



    6. Links de interesse.
    Sobre o tema de imprimir através de páginas webs não existe muito escrito, porém aqui vai o que encontrei por aí:

    Como fazer PDFs:
    Este artigo é muito interessante e didático. Acho que têm soluções para quase todos os casos.
    htmlgoodies.

    Adobe. A casa mãe de acrobat.
    • Adobe Acrobat 5.0
      from US$249.00

    • Adobe Acrobat 5.0 Upgrade for registered owners of Acrobat.
      from US$99.00
    Software alternativo a acrobat.
    fineprint.com.





    Outros links.

    International Web Usability - Debe-se pensar nos diferentes formatos de papel.
    http://www.useit.com/alertbox/9608.html

    In Defense of Print - Ler na tela não é o melhor (por enquanto).
    http://www.useit.com/alertbox/9602.html

    Algumas considerações para ter em conta.
    http://info.med.yale.edu/caim/manual/pages/safe_area.html

    Como curiosidade, como imprimir páginas sem uma impressora.
    http://www.zdnet.com/products/stories/reviews/0,4161,2393466,00.html






  • Usuários :    login / registro

    Manuais relacionados
    Categorias relacionadas
    O autor

    Home | Sobre nós | Copyright | Anuncie | Entrar em contato