Easy Website Test for Print-Friendly Design in Any Browser

Accessible design is good design, print-friendly goes above and beyond.

Accessibility means that all people have an equal opportunity to navigate, consume, and contribute to web content. Our websites are highly accessible by default.

Print-Friendly means you can save a website to PDF, or print to paper. This is an additional feature that can help create a seamless and impactful user experience.

How to use basic browser functionality to test any website for a print-friendly design

Testing for a print-friendly design is easy and can be done from any standard desktop browser. A desktop browser best to test for a print-friendly design because it allows easy access to the developer tools. With the developer tools you have easy access to CSS rendering options and other useful features.

How to test a website mobile design

Open an incognito window to ensure no browser extensions affect the print preview. Scroll through the entire page to ensure all content has loaded. Some websites load content on scroll - and this will likely not be displayed in the print preview unless the web developer has directly considered the print accessibility.

Access the print options dialog by using the Ctrl + P keyboard shortcut or selecting "Print" from the browser menu. Once the print preview has appeared you van view your website in the dialog window. Select the desired destination (PDF or physical printer). Make a note of any changes you would like to see, and communicate this to your web designer or developer.

Steps to test a website mobile design

• open an incognito browser with keyboard shortcut - Ctrl + N

• scroll through the entire page to ensure all content has loaded

• print the webpage with keyboard shortcut - Ctrl + P

• inspect the print preview

• Use the Destination option to select "Save as PDF"

• Use the Destination option to select "Send to Printer"

• Use the Pages option to select the desired print page range

• Use the Layout option to select portrait or landscape

• Use "More Settings" to access more options for controlling the print preview

How to emulate the print render with CSS in the browsers developer tools

Open an incognito window to ensure no browser extensions affect the print preview. Scroll through the entire page to ensure all content has loaded. Then open the developer tools through browser menu or keyboard shortcut. Next access the developer tools drawer with the Esc keyboard shortcut, and navigate to the "Rendering" tab. If this tab is not visible use the menu in the developer tools drawer.

Inside the rendering tab scroll down to the option "Emulate CSS media type" and select "print". You can now view the print render of your website inside the browser window. Make a note of any changes you would like to see, and communicate this to your web designer or developer.

Steps to emulate the print render with dev tools

• open an incognito browser with keyboard shortcut - Ctrl + N

• scroll through the entire page to ensure all content has loaded

• open developer tools with keyboard shortcut - Ctrl + Shift + I

• open the developer tools drawer with keyboard shortcut - Esc

• select the "Rendering" tab

• scroll down to "Emulate CSS media type"

• select "print"

• inspect the website design

• Make note of any experienced points of friction