Making a site more printer-friendly

Can't fit all my site on a print page, I keep losing some in the margins

[Maniac]

One of the sites I'm working on, [engext.ksu.edu,...] can't be printed without a chunk of the right side getting lopped off at the margin. I've tried tables, layers, and positioning the text exactly before the margins, but that only makes it look bad.

Anyone have any ideas?

Thanks!

[Marshall]

Have you tried setting your printer to "landscape." Anything over about 700-750 pixels wide just isn't going to fit using "portrait/letter" setting unless the page in dynamic.

[Maniac]

Then how do I make the page dynamic?
Do I switch to asp or something?

I'm trying to get it set up so that others can print it without having to switch to landscape.

[Marshall]

Maniac,

Basically dynamic means making everything in fluid by using percentages rather than fixed widths/heights. I'll sticky-mail you the web address of a site I just designed where you can see how it works. The site adjusts from 620 pixels wide and up, so printing is never a problem. I use images to prevent it from going below 620. Even the font-size is in percentages, or you could use "em", so the user can easily adjust it. It solves a lot of printing problems, but it can be time consuming depending on the layout of the page. One side note: NN4 doesn't always like font-size in percentages. Why? Ask Netscape. :)

[pageoneresults]

I've had similar problems and my solution was to create a printer friendly page. I take the page in question, strip out the graphics not needed and set the table width to 640. I provide a link on the main page that reads "click here for printer friendly page".

I have a couple of sites that the users typically print specifications pages from. I found the secondary printer friendly page to work just fine. If you've got a bunch of them, it may become time consuming but it does solve the problem.

The other issue is to make sure that the content for the printer friendly page does not exceed 640 pixels in width.

As a sidenote; there are those users who know how to control their print output and will adjust the scaling to 80%-90% so the page fits when printing. This is controlled from the properties menu when choosing file > print > graphics. This will depend on the users printer and capabilities. My HP's all have this feature.

[sophie]

if there are a lot of pages, you may use some perl or ASP script to generate printer-friendly pages automatically instead of touching your fansy layout what your are having. it depends on web server where the site hosts.

[Snipper]

I always use a print button to create printer-friendly pages.

The print page is stripped off the header, left-menu & footer. Except for the width of the stripped items, I always use relative width for tables, so that the page fits always, no matter what printer settings you might have.

N.B. If you design your website for 800x600 and you strip off the left-menu (if you have one), it'll always fit as well. ;)

[AreebaGuy]

If you insert a print this page link and use JavaScript before and after the Javascipt print command you can hide unnecessary layers before the print and the show them again afterwards. Of course, this doesn't work for using the menu print. However, in IE6 (and maybe IE5) there is a post and pre print method for doing the same thing. Basically you can manipulate the page to display something differently for when you print and then revert it afterwards. For Netscape 4, as usual, forget it.

[nagrom]

Safest width for minimum is 600, some lower end epsons can't even fit that! I had a client once whose site didn't fit on his printer until it was down around 580.

[Maniac]

Thanks for all of the input everybody.

It looks like the best choice at the moment is to try to generate printer-friendly pages via a perl/ASP script. The site is based off of a Win2000 server, any recommendations?

Thanks again!

[guysmy]

Does anyone use one of those kewl little printer icons, for the printer friendly version of their pages?

[tedster]

Printer icon? I like it a lot -- it's an almost universal communication. When we added it to a client site recently, the print file downloads went WAY up compared to using just a text link.

[magos]

There is a nice icon for printer friendly pages at:

[mun.ca...]

[tedster]

magos, welcome to Webmaster World!

Do you know for sure that this icon is free to be used by others? We don't want to encourage theft.

[magos]

Thank you for the welcome and Good point. I'm not sure if the image is public domain, however, there are lots of icons at:

[iconbazaar.com...]

these are public images for use by all. Not a bad selection either...

[orwell_g]

If you are lazy like me, you can create a <link> tag that will print any document you want when you press the print button. I know there is a cgi script around somewhere that will control what is printed on a page. Check out my example of a printer friendly page here:

[rain.prohosting.com...]

Also the page with the cgi scripting is here:

[webmutant.com...]

Hope this helps you guys.

[guysmy]

It like sites that have an image link and a text link tucked nicely under it.

That way your visitors are catered to. Right-Brained People like visual links and icons, and the Left-Brainers tend to click on the text!

[mal]

To make your pages printable, put everything in a 100% width table, or if you have more than one table, make sure they are all set at 100% width.

You can run your content against a script that has tables set at 100%, just for printing.

Also set columns at 100%, if needed. (depends on the size).

Images may prevent the table from shrinking enough to fit a page, if they are too wide.

[Zoller Wagner]

Several people (joshie76 and orwell_g) have suggested using the <link> tags with a CGI script to automatically output printer-friendly pages. This doesn't work in Netscape 4 browsers, does it?

If the goal is to get sites working for most of our viewers, then this isn't a good option given the browsers people are currently using.

[ggrot]

Layers can cause problems with cross-platform (read: netscape) design. The same problems occur with css. The best solution I've seen is to use the little print icons as a link to a pop up window which has a printer friendly version of the page and a javascript window.print() function that automagically opens the print wizard for the user. You can then follow that up with a self.window.close() or whatever it is and the user is back to the regular page. You could also use a javascript history trigger to go back a page instead.

[Zoller Wagner]

That's an interesting solution. Do you have an example of a page using it that we could look at?

[Marshall]

Maybe I'm over simplifying the situation, but I design a lot of governmental sites who require/want text accessible versions of a page which is slightly different that a printer friendly page insofar as it has navigation, but it does double as a printer friendly page. All I merely do is take the "content" section of a page and paste it into a blank page and place a Text Only link on the regular page. If your not interested in a independently navigable Text Only version, take away the navigation and you have a printer friendly page, which I usually have open in a new window, and then place a "printer friendly version" link on the regular page. To me, this is by far the quickest and easiest solution as there are no scripts to worry about, no cross-browser issues, and has the advantage of adding a page for SE's to index. Just my humble opinion.

[comppassion]

Thanks for a lot of great info, guys. My question is slightly different.

I just designed a website in the nontraditional way of having a dark background and light text on top. I didn't even think about the printing issues when I designed it. Is there HTML code or other code that will print my light-colored text as black, or else show the dark-colored background so that the light-colored text shows up? Or should I resort to a printer-friendly link on each page of the site?

Thanks for your help.

[Marshall]

comppassion,

Here you're getting into printer setting options. Most printers have a default setting NOT to print the background and to print white text in black or gray scale. If someone has their printer set to print backgrounds, which is really a waste of ink, then light on dark really isn't an issue.

[ggrot]

I had a couple people sticky me about the javascript print thing. I don't have any good examples, but it's actually very easy.

To trigger a print command, all you need to do is use the javascript command:
window.print(). Works in IE, netscape, opera. If you would like to make a link with it use:
<a href="javascript:window.print()">print me</a>
Or if you want to print a window when it opens, use:
<body onLoad="javascript:window.print()">

[Zoller Wagner]

Thanks, Ggrot and Marshall!

Combining the methods of Ggrot and Marshall make a lot of sense. Plus, they aren't too difficult as long as there aren't many pages to handle.

[joshie76]

Zoller_Wagner: If the goal is to get sites working for most of our viewers, then this isn't a good option given the browsers people are currently using.

That statement seems quite contradictory... since Opera 6 (don't know about 5), Netscape 6 and IE4+ all support the link media attribute I think that easily covers most users. I'm sure orwell and I never offered it as the perfect solution; Simply one of the options.

It's also one of the nicer options, as it means users can click the normal browser print control and still get the required effect. If you need support for NN4 (and I'm not saying thats a bad idea) then use something else (possibly in combination).

[Zoller Wagner]

It's all in how you define "most," isnt' it? There is a small but significant group still using Netscape 4 browers.

If it doesn't work in Netscape 4 browsers (or IE 4, for that matter), I'm unwilling to do it. When the number of people using these older browsers drops to 1-2 percent I'll move on over, but not yet.

I see no need to alienate potential customers. Many of my clients' customers are in situations like schools where they limp along with old equipment and don't have the newer browsers. Your situation may be different.

When this does happen, I'd LOVE to use your idea!

[Marshall]

I have to agree with Zoller. In fact, I designed a site for a publishing company that insisted that the site be compatible with older browsers because their market is primarily schools and they said that most of them don't upgrade often, if at all.

I took the liberty of including the November browser use stats from one of my sites - people are still using NN2. If I didn't make my sites as cross-browser friendly as possible, I'd be loosing 15%-20% of my visitors, roughly 5,000 people. And from viewing my other sites stats and those of many of my customers, the percentage is about the same. Even if it was only 50 people, if it was an e-commerce site, one of those 50 may have been a big spender.

Most active browsers by type and version:
- AOL 4.x with 12273 sessions (32.10% of all sessions)
- MSIE 5.x with 9974 sessions (26.09% of all sessions)
- Unknown with 5807 sessions (15.19% of all sessions)
- AOL 5.x with 3494 sessions (9.14% of all sessions)
- Netscape 4.x with 3436 sessions (8.99% of all sessions)
- Netscape 3.x with 946 sessions (2.47% of all sessions)
- Netscape 5.x with 889 sessions (2.33% of all sessions)
- Netscape 2.x with 759 sessions (1.99% of all sessions)
- MSIE 4.x with 539 sessions (1.41% of all sessions)
- WebTV 2.x with 48 sessions 0.13% of all sessions)

[Zoller Wagner]

Oh, great! That's really depressing, Marshall!

I'm going to have to take another close look at our stats. I'm really amazed at the age of those browsers used by Marshall's viewers. I hope my "eyes" aren't so archaic!
bests, Art