Connect with us


From internet to in-print: 5 tips to make your website print-friendly

Want to make your website print-friendly? Here are 5 tips to help you go from internet to in-print in no time.

Image: PCMag

When it comes to the responsive design mantra, it’s not all about keeping with screen sizes. You need to make sure that the website works in any type of medium as well. This includes the likes of print.

Being able to print a website without much issue helps with accessibility. Sometimes, people need that one recipe or that one web page.

In this guide, we’ll give you 5 tips on how to make your website print-friendly. With this, you can help people print web pages on your site better. This can help you get more traffic as well. Here’s how you do it.

Use Print Styles CSS

Does your audience want a printable website for different uses like images for magazine covers? Getting the best way is to use a print stylesheet. The idea is to use screen styles as a base, with print styles taking over when necessary.

This is typical for businesses that deal with web printing of tickets and other printable materials. To do so, use @media rules and add them to an existing CSS file. It’s also smart to separate the main.css and the print.css styles for your printer friendly code.

For Non-Coders, Generate a Print Friendly Button

Not all webmasters are great with code, and that’s ok. There’s an easy way to do it. For those who want to generate a printable website button, there are a few sides that offer this service.

All you need to do is pick the type of website, the button GUI and customize it to your liking. These websites will then generate code that you can add to your existing CSS.

The solution is not as elegant as doing the code yourself, but it saves you time and gets to print web pages fast. 

Remove Unnecessary Elements

When making a printer friendly website, it’s crucial to remove sections that are not vital to the print. This is doable by adding a “display: none;” line of code to your print.css style.

This should remove areas like navigation menus, sidebars, advertising, and even widgets. As long as it’s in an iframe, it will go.


When it comes to creating a print website, testing your new web printing does not mean wasting resources like paper. For testing, there are two ways to do it.

The first is to use the print preview option of your browser. Many different browsers will have a quick print preview, rearranging everything to fit the orientation of the paper. If unnecessary elements are out, this should show the right arrangement.

The other is to use developer tools to emulate your print styles. In Chrome, this is accessible through the Tools > Developer Tools > More Tools > Rendering.

Adding Page Breaks

If you want better cross-browser compatibility with your printable website, it’s best to use page breaks. In particular, you want break-before and break-after to improve your control.

There are more ways to do this too. There are a few syntax values for page breaking that are common in almost every modern browser.

Why You Need a PrintFriendly Website

When it comes to creating a print-friendly website, there are a few ways to do it. Setting up the proper CSS code, together with clearing your content, is valuable for your potential audience.

Have any thoughts on this? Let us know down below in the comments or carry the discussion over to our Twitter or Facebook.

Editors’ Recommendations:

Chris has been blogging since the early days of the internet. He primarily focuses on topics related to tech, business, marketing, and pretty much anything else that revolves around tech. When he's not writing, you can find him noodling around on a guitar or cooking up a mean storm for friends and family.

More in Business