Ve svém článku o využívání sdílení na sociálních sítích jsem popisoval úžasnou vlastnost pluginu Easy Social Share Buttons. A sice možnost trackovat počty sdílení na dané sociální síti.

Na svém svatebním blogu používám kromě obvyklých sdílecích tlačítek pro sociální sítě také tlačítko pro tisk. Někomu to může v dnešní době přijít jako kravina, a plýtvání cenným místem, ale právě tlačítko pro tisk patří na tomto mém webu mezi nejpoužívanější.

Jak je vidět, je tlačítko pro tisk návštěvníky mého webu používáno častěji, než tlačítko pro sdílení na Facebooku. A to jsou pouze statistiky lidí, kteří pro tisk použijí bezprostředně toto tlačítko.

Pokud si někdo danou stránku vytiskne jen s použitím klávesové zkratky CTRL + P nebo přímým výběrem možnosti Tisk v prohlížeči, v této statistice se to neprojeví!

Statistika využití tlačítka pro tisk

Statistika využití tlačítka pro tisk

Začněte optimalizovat svůj web pro tisk ještě dnes

Pokud návštěvníkům stejně jako já nabízíte možnost přímého tisku, měli byste se alespoň chvíli věnovat úpravě kaskádových stylů tak, aby vytištěná stránka vypadala k světu.

Tento týden jsem se bavil s Ondrou Martinkem, který mi řekl, že si nechal od programátora upravit verzi svých stránek pro tisk.

V té chvíli jsem si řekl, že sice návštěvníkům možnost přímého tisku z webové stránky nabízím, ale optimalizaci jsem se nikdy nevěnoval.

Sidebar, AdSense, komentáře: to vše do tiskové sestavy nepatří.

A jak vypadal výstup, který si do dnešního dne pravděpodobně vytisklo přes 500 návštěvníků mého webu? To asi vidět nechcete :D

Rozložení webové stránky pro tisk

Rozložení webové stránky pro tisk

Jak je vidět na obrázku, to nejdůležitější – obrázek s texty se ztrácí mezi zbytečně se zobrazujícími prvky. Stránka působí hodně rozháraně a kdybych já osobně něco podobného našel v tiskárně, dost pravděpodobně bych výsledné „dílo“ hodil do koše.

Upravte si CSS styly pro tisk z webu

Řešení problému s tiskem je jednoduché a zvládne ho i úplný začátečník. Co je na všem nejlepší, úprava zabere 5-10 minut času a výsledek rozhodně stojí za to :).

@media print
{    
    .sidebar, .footer
    {
        display: none !important;
    }
}

Ve výše uvedeném příkladě skrývám pro tisk sidebar a patičku a to pomocí CSS vlastnosti diplay: none.

Jaké prvky doporučuji pro tisk skrýt?

Každý web bude samozřejmě jiný, přesto zde uvádím seznam prvků, které jsem pro tisk skryl já:

  • horní menu,
  • drobečkovou navigaci,
  • sidebar *,
  • footer,
  • související příspěvky,
  • komentáře,
  • AdSense a další reklamy v textu,
  • odkazy na sociální záložky,
  • odkazy na štítky a kategorie,
  • oznámení o použití cookies.

* pokud budete skrývat sidebar, doporučuji nastavit šířku hlavní textové části (main, content) na 100%.

Jaká je podpora v prohlížečích? Jak výsledek vypadá?

Co jsem se tak díval po různých diskuzích, s kompatibilitou by napříč prohlížeči neměl být problém.

Sám jsem toto řešení testoval na prohlížečích: Google Chrome, Firefox a Internet Explorer a všude vypadá výstup totožně.

Rozložení webové stránky optimalizované pro tisk

Rozložení webové stránky optimalizované pro tisk

Doporučení a bonus na závěr

Myslím si, že výsledek, i s ohledem na to, jak málo práce mi daná úprava zabrala, je fantastický.

Někdo sice může namítat, že by bylo vhodné schovat i hlavičku a title, ale tiše doufám, že i díky tomu, že jsem tam tyto prvky nechal, si buduji jakýsi brand daného webu, který budou mít lidé na vytištěné stránce neustále na očích :)

A ještě jeden tip na závěr, pokud jste hodně líní a máte na PC nainstalovanou virtuální PDF tiskárnu, můžete si pomocí tisku vytvořit pdf, které můžete zaslat svým odběratelům jako e-book :-P.

Předchozí díly seriálu