Jak stworzyć stronę do wydruku

Po stworzeniu fantastycznie wyglądającej strony warto zastanowić się jak nasza strona będzie wyglądała na wydruku. To ważne, bo ile razy zdarzyło się wam po prostu wydrukować stronę w celu dalszego jej wykorzystania, do przeczytania w podróży czy też do spokojnego zaznaczenia sobie co ciekawszych fragmentów?

Obrazek z Wikipedia

Faktycznie w przypadku blogów można z tym troszkę dyskutować, ale tylko troszkę. W przypadku pozostałych stron nie da się z tym dyskutować, ponieważ jest to absolutna konieczność.

Stronę buduje wielu elementów z których wiele nie wnosi niczego o wydruku, ba nawet go psując, powodując że drukarka wypluwa o kartkę czy dwie z dużo, bo wydrukowało się kilka menu, jakieś nagłówki, jakieś nikomu na wydruku niepotrzebne stopki. W wersji pesymistycznej jest jeszcze gorzej: na pierwszej stronie mamy menu zajmujące 1/3 szerokości wydruku, a potem 20 kartek z wydrukiem wąskiej kolumny z treścią. Z drugiej strony nie ma na wydruku informacji, które mogą być przydatne, które umożliwią szybszy kontakt biznesowy czy też zapewnią nową wizytę w przypadku przekazania kartki dalej.

Sprawdź czy twoja strona dobrze wygląda na wydruku:

• Dodaj adres strony
  Jako pierwszy, po nagłówku (firma, namiary) powinien znaleźć się adres drukowanego dokumentu, bo nie każdy musi mieć takie ustawienia, żeby adres wydrukował się poprawnie, no i nie każdy adres zostanie wydrukowany w całości.
  
• Zmień kolor tekstu na czarny.
  Mało kto potrzebuje kolorowy wydruk. Prawie nikt nie drukuje tła dokumentu, a dobrze wyglądająca, jasna czcionka na ciemny tle strony, będzie prawie nieczytelna po wydrukowaniu.
• Zmień krój czcionki.
  Z powodów czysto technicznych, związanych z kiepskimi (tak, nadal kiepskimi) rozdzielczościami monitorów, na ekranie lepiej czyta się kroje bezszeryfowe. Na wydruku, który nawet w trybie oszczędnym dysponuje prawie dwa razy większą rozdzielczością, a dla przeciętnego trybu normalnego ma od 3 do 4 razy więcej punktów na milimetr lepiej jest użyć czcionki szeryfowej, którą łatwiej się czyta.
• Zmień wielkość czcionki.
  Graficy tworząc stronę w formie makiety mają tendencje do używania małych lub malutkich rozmiarów tekstów, bo lepiej wygląda, bo w programie graficznym dobrze widać, bo mają możliwość powiększania i nie boli tak bardzo. Nieważne. Tak czy inaczej zadbaj by podstawowa wielkość na wydruku była 11pt lub lepiej 12pt. Możesz też dostosować nagłówki h1-h6 tak, żeby lepiej komponowały się na wydruku.
• Dodaj interlinię.
  Zwiększanie interlinii zdecydowanie pozytywnie wpływa na wygodę czytania. Przeprowadź testy zwiększając i zmniejszając interlinię oraz dając tekst do przeczytania komuś kto tej treści nie zna. Warto skorzystać z pomocy pokolenia mniej internetowego.
• Usuń wszystkie obrazki nie związane z treścią.
  What makes an essential image depends on the developer and the marketing department. I limit images to those that are required for the article and a brand logo at the top left of the page.
• Usuń elementy nawigacji.
  Zdecydowanie największą wadą wydruków jest to, że pierwsza strona jest „pełna”, a potem mamy kilka stron w których wydruk zajmuje mniej niż połowę szerokości strony. Zdarzyło ci się wydrukować taką stronę? Wkurzające, prawda?
• Usuń reklamy.
  Punkt jest może na pierwszy rzut oka dość kontrowersyjny, ale tak naprawdę warty wdrożenia. Dodatkowo duża część reklam bez możliwości skorzystania z odnośnika będzie na wydruku bezużyteczna. Oczywiście serwisy o dużym ruchu mają dodatkową opcję reklamową: reklama … na wydruku.
• Flash, animowane obrazy i treści wytwarzane za pomocą javascriptu.
  Sprawdź czy treść na wydruku nie traci przez brak wymienionych przed chwilą elementów.
• Dodaj dane teleadresowe firmy.
  Jeżeli witryna jest „firmowa” i zależy ci na tym, żeby ktoś mógł do ciebie zadzwonić, napisać e-mail czy po prostu wysłać „analogowy” list. W przypadku firm, bezwzględnie należy umieścić numer faksu.
• Oczyść odnośniki i wypisz ich adres
  Odnośniki na stronie można kliknąć, na wydruku ich funkcjonalność znika, więc warto za pomocą CSS’a wyciągnąć zawartość odnośników (uwaga nie działa w starszych przeglądarkach). Pamiętaj żeby ustawić im takie same wyświetlanie jak reszcie tekstu, bo na wydruku będą tylko mylić.

Jak to zaimplementować?

Już wkrótce opiszę jak to wszystko zrobić za pomocą arkusza CSS, wraz z wyborem odpowiedniego medium. Na razie możesz przeczytać o tym tutaj: use CSS media types to create print friendly pages . Yes, it’s possible to write scripts to convert your Web pages to aj:, but wshy use them when you can just write a second style sheet for when your pages are printed.

Swoje doświadczenie konfrontowałem z:

• CSS Cookbook: How to make a printer-friendly page with a style sheet
• CSS Media Types Create Print-Friendly Pages
• What is a Printer-Friendly Web Page?
• How to make printer friendly web pages
• Print-friendly CSS and usability