Artmov: PSD to HTML

The Key in Making Your Website Printer Optimized

Paying attention to details is important. It’s a smooth line that separates us from a good designer/company of a great one. This article is targeted on blogs and/or websites with long articles primarly: how to have your webpage printer-friendly optimized in two simple steps.

Many users will prefer to print out the webpage, rather then reading it online. Several studies have shown that (useit.com[1]) users consider reading online tiring and prefer print out long articles.

1. List webpage’s elements that doesn’t need printing.

It’s pointless and fustrating for the user to print out a full header with search box, three small links and a full standard banner.

Keep it basic. Remove all the elements that doesn’t matter for your users.

• The logo should be resized in case of big dimensions for printers and position in the upper left.
• The article should be below the logo with font-size, font-family and line-height for readability issues.
• The menu can be removed if it’s long, but the breadcrumbs/pathway should be positioned between logo and article.
• The footer containing copyright information in a smaller font-size is recommended.

You can see and example of the above recommandations on Artmov’s Testimonial Page or PSD to HTML’s Service Page.

2. Disable the pointless elements via CSS.

Select the webpages you want to have a printer-specific CSS stylesheet and insert the following line of code in the section:

Open print.css and add display:none; to specific element’s DIV.

#menu { display:none; }
#sidebar { display:none; }
#page { font-size:14px; line-height:26px; }

The key in making a good website is to deliver the content effectively. In printing out the webpage is about the article and nothing more.

Web pages optimized for printing

As a strong usability and user experience point to consider, it’s important to understand that reading on the web is tiring and many users prefer to print out the web pages. Read “Optimizing the User Experience” (PDF) at Usability.gov

Also, you can read Why Web Users Scan Instead of Reading, a Jakob Nielsen article.

Optional, you can lean more about how much design can improve your credibility – a study on Amazon.com’s design and RealNetworks.

Offering your users an environment to print out the web pages properly is a plus benefit for your users, mainly and then for your. It’s shows a good designed web site with attention to details.

Rolling out the new design

Currently we changed our design to a much simpler one and added two new services to our portofolio: mobile-friendly and print-friendly optimization.

The new services will launch soon.

To separate articles from tips and tricks related to CSS, CSS snippets were added. And with that, Vanilla Forum is the third CMS we now integrate.

Icon credits

• Icons on homepage used (Our code, Latest blog posts, etc) is iSuite Revoked from Prax_08
• PSD File and HTML File icons on homepage is from Nuove icon set by Alexander Moore
• Mobile Phone Icon is from Mobile devices icon set by Pierocksmysocks
• Printer Icon is from Human o2 icon set by Oliver Scholtz (and others)
• Blue Arrow is from Glaze icon set by Marco Martin
• All icons from Iconfinder.net icon engine.

Other credits

• CSS Snippets is using Vanilla Forum
• Blog is powered by WordPress
• Artmov

Please note that various URLs from previous version might not work.