I have, I think, put the finishing touches on another element of the new design for this website: the print stylesheet. One of the things I wanted to do when I first transitioned this site to a CSS based design was to optimize the print experience as well as the online experience. CSS, through using stylesheets linked for media="print", allows you to specify alternate presentations of your pages for print purposes without having to change your underlying HTML or forcing the user to choose a “print friendly” view.
The print stylesheet for Jarrett House North now suppresses all the navigation elements, gives a reduced size version of the site logo, and (on browsers that support it, such as Gecko-based browsers and Safari) prints the full hyperlink as text next to each link. Give it a whirl—I think you’ll like it.
For now, the regular print-friendly link will remain on every page, for print-friendliness on browsers that don’t offer full CSS compliance. But you no longer have to do anything special to get that print friendly feeling.
One interesting implementation thing I learned in the process. I couldn’t figure out how to dynamically resize the banner image and provide alternate text that I didn’t show in the main template, so I created a DIV that is hidden by the default stylesheet (by setting display: none;) and shown in the print stylesheet. Or at least, that was the intention; the first few times I made the change, the print version of the banner never showed up. I finally figured out that the default stylesheet’s rules are applied to the print content, then overridden by the print stylesheet’s rules. So rather than just redefining the div, I had to actually specifically override the display property by setting display: inline;. Once I did that, I was golden.
The main resource I used in creating the print stylesheet was an article by Eric Meyer at A List Apart called CSS Design: Going to Print.
