{"id":1869,"date":"2013-09-15T13:23:46","date_gmt":"2013-09-15T11:23:46","guid":{"rendered":"http:\/\/blog.fabianpiau.com\/?p=1869"},"modified":"2018-09-02T02:26:21","modified_gmt":"2018-09-02T01:26:21","slug":"optimize-your-website-for-print-in-5-minutes","status":"publish","type":"post","link":"https:\/\/blog.fabianpiau.com\/en\/2013\/09\/15\/optimize-your-website-for-print-in-5-minutes\/","title":{"rendered":"Optimize your website for print in 5 minutes"},"content":{"rendered":"

 <\/span>Version fran\u00e7aise disponible<\/strong><\/a><\/p>\n

Is it really useful? I think so! People who print pages on the Internet are probably more numerous than one might think. And it takes 5 minutes, so just do it!<\/p>\n


<\/p>\n

\"Printer\"<\/p>\n

Let’s take a screenplay (almost) like in Hollywood movies:<\/p>\n

Mister Nextdoor will not have access either to Internet or to his computer this weekend and did not have enough time to read a long article, but very important for what’s happening next. So he decides to print it to read it later on the plane (yes, Mr. Nextdoor is lucky, he is going on vacation). Once the printing is done, he realizes a little jaded (because yes it’s not the first time) that absolutely all the internet page came out. He ends up with 7 printed pages of an article that needed maybe 3… The menu, related articles, social media sharing links… Everything is there! Anyway, Mr. Nextdoor is relieved, he will be able to read his article “How to conquer your fear of flying?”.<\/p>\n

To continue on the same idea of the article explaining how to make your site responsive<\/a>, I will show you how to make your website optimized for print.<\/p>\n


<\/p>\n

Principle is similar by using the CSS language.<\/p>\n


<\/p>\n

You have to declare a dedicated CSS file for printing. In the header of your pages, you have to add a link to this file by specifying “print” for the “media” attribute, unlike others which usually specify the media “all” (screen, printer, etc.). Check out this page to know more about the media types<\/a>.<\/p>\n

In my case, I use a “print.css” file for my blog, so I add this line:<\/p>\n

\r\n<link rel="stylesheet" href="https:\/\/blog.fabianpiau.com\/wp-content\/themes\/freshy2\/print.css" type="text\/css" media="print">\r\n<\/pre>\n
This CSS style file will be used only in case of printing. Thus, you can use it to remove all unwanted content such as:<\/p>\n