With the basic site up and running for almost a couple of days (wow!), I decided to test the theory of being able to change just the templates for an entirely new look. I also changed some of the site design (not just the appearance), so it turned into changes to the articles as well. Future redesigns should be able to just change the templates for a whole new look.
I consulted a few reference sites for CSS layout techniques (notably Glish and BlueRobot). I settled on the Two Columns – Left Menu design from BlueRobot because it was simple and matched what I was looking for. I tweaked the CSS a little bit to use percentages for font sizes instead of pixels.
I also added in a couple of other style definitions, include a special set of “print only” styles. The print-only style sheet allows you to redefine your styles (or define new ones) that will only be used when printing. You can transform your colorful site with wide margins and indents into something much cleaner on paper.
The second stylesheet is linked in with the media attribute set to “print”:
<link rel="stylesheet" href="layout1.css" type="text/css">
<link rel="stylesheet" href="layout1-print.css" type="text/css" media="print">
The layout1-print.css file overrides most of the styles defined in layout1.css. My favorite trick (which I first learned about on Evolt.org), is the following style definition which will display the actual URL after a hyperlink:
A:after { content: ' [' attr(href) ']'; }
Sadly, this trick only works with Netscape 6.x, Mozilla, or Opera 6.x (I believe).
I also included in the standard template a “current URL” field that will only show up when printed. This could be useful as a reference to confirm the page location. (Although most browsers put this in the header or footer anyway.) One side effect: browsers that don’t understand CSS (Netscape 4.x, mobile devices) will always show this URL, so I put it at the end of the page above the copyright.
Update 4/22/02: Just found a good article on NUblog that describes printable page design with CSS.
Update 4/27/02: Another good article on print friendly links on Diveintomark.org.
Update 5/10/02: Yet another article describing the use of CSS in print style sheets on A List Apart.
Update 10/5/02: I updated the whole look and feel of the site, going away from the old Bluerobot.com design. I wasn’t able to do it with just the CSS (as I had hoped), but it only took a minimal change to the CityDesk template.
See before (28KB, PNG) and after (28KB, PNG) pictures for comparison.
