Pular links da navegação e ir direto para o conteúdo

Publicado em 6 de Feb de 2006 às 22:48

A importância do “@media print”

Com certeza você já passou por algum tipo de aperto na hora de imprimir alguma página da internet. É aquele trauma que te faz visualizar a impressão umas 300 vezes antes de imprimir, afinal cartucho de impressora não é das coisas mais baratas. Se você passou por isso, imagine os usuários mais leigos, que s vezes nem sabem visualizar a impressão de páginas? O Diego publicou para os desenvolvedores no Tableless um artigo explicativo sobre os chamados Media Types do CSS. Mas como nem todo mundo que deveria ter um estilo para impressão sequer sabe que ele existe nem que é tão importante, o aguardado IE7 pode dar uma amenizada no trauma na hora da impressão e talvez agora os web designers darão mais importância ao @media print. O programa da Microsoft promete um monte de melhorias na hora de configurar as páginas para impressão, uma interface mais intuitiva na hora de cortar conteúdo indesejado e configurar melhor a escala de páginas. Coisa que o Firefox já faz bem, só precisa melhorar um pouco em questão de interface, aliás a maioria das novidades que se vê no IE7 todo mundo já usa no Firefox há algum tempo.

Exemplo: @media screen e @media print

Se, por exemplo, os portais criassem uma folha de estilo só para imprimir diminuiria drasticamente os problemas que nós temos ao imprimir aquela notícia, artigo, boletos, receita… O que se vê geralmente é o desnecessário botão “Versão para impressão” ou “Imprimir” que geralmente chama um popup com uma página com o texto sem nenhuma formatação ou para melhorar as coisas pro lado do usuário eles colocam uma função Javascript que abre o prompt de impressão sem nem deixar você visualizar antes de imprimir. Tente visualizar a impressão da homepage do Uol. Se o CSS fosse mais difundido talvez nem precisássemos de uma boa interface nos navegadores para configurar nada. Muito menos depender do Word para colar o texto a ser impresso.
Nas minhas experimentadas aqui no blog eu tinha um CSS só para imprimir no tema anterior, mas como estou sem computador, nesse tema atual ainda não consegui implementar várias coisas, inclusive isso. Por mais simples que seu site seja é importante que você exclua as coisas supérfluas na folha de estilo de impressão, deixe (poucas) cores mais primárias e acho que o ideal é deixar o texto do conteúdo principal na cor preta.

Exemplos de sites com estilo para impressão:

Um exemplo bem criativo e interessante do uso do @media print é essa técnica explicada em português pelo Ivo Gomes, com ela você pode imprimir uma lista com os endereços dos links dos artigos que seu site possui, já que na folha impressa a pessoa não poderia ver o endereço do link por não possuir mouse.
Aí está mais uma das vantagem de se trabalhar nos padrões da W3C, separando design e conteúdo. E você, já visualizou a impressão do seu site hoje?

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • Olá Rodrigo!

    Obrigado pelo link e pelo destaque da foto no post :)
    Esta questão é realmente muito importante porque uma coisa é a apresentação dos conteúdos num ecrã e outra é a apresentação dos mesmos conteúdos em papel.
    Uma folha A4 tem cerca de 500 pixels de largura máxima e muitos sites, ao serem impressos, ficam com informação cortada.

    Ao usar uma folha de estilos para impressão estamos a optimizar a apresentação dos conteúdos no papel e a poupar cliques desnecessários em links JavaScript para “versão printer-friendly”… Basta usar o botão “Imprimir” do browser e pronto!!

    Além disso, na folha de estilos para impressão há também menos informação não-relevante tal como as barras laterais, banners, etc… poupando assim algumas páginas e tinteiros.

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais