Artmov: PSD to HTML

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.