Welcome to Minneapo-Less

The problem

When I think of big cities, sometimes I think of waste... land fills overflowing, trees dying, etc. I really enjoy visiting big cities like San Fransico or Minneapolis (pictured above), but I wish we could do something about the amount of waste we produce.

While I can't think of a way to make recyling more effective and I haven't come up with a new method for solving global warming, I think I might be able to reduce the amount of waste produced in the first place.

I find I can always proofread a document better if I print it -- there's just something about the tactile nature of actually holding a paper, I can read it easier, etc. BUT, I've noticed over time that half of the time I print, the program or the printer or user error ruins the print job and I end up throwing away a few sheets of paper. So, I've come up with an idea to reduce the number of bad print jobs and therefore the overall waste produced by printing.

One Simple Goal

The main goal or theme of this template is simple: reduce frustration and paper waste by make websites easier to print.

Anybody who's ever tried to print a website knows it can be a very frustrating process, and half the time you end up re-printing the whole job because the first try failed.

Simple+Margins+CSS=WYSIWYP

I also wanted to make this design as simple as possible, so people like my dad can actually find their way around. He was always complaining about how hard it is to find things on a tiny little screen especially when there's a bunch of menus and link boxes, etc. So, I made this template simple in honor of my dad.

Secondly, this template is designed to look and feel like a word document, with a print stylesheet that preserves the look and feel of the main stylesheet. Note the very visible print margins.... some may argue that it's ugly, but I think that's more realistic. When you print something, your printer has margins it can't print beyond. In this template, the margins are set to 1/2", but you can easily customize that (or remove it).

When you put these three things together, you have a simple layout with a print stylesheet and page margins that does a pretty good job of making this website a "what you see is what you PRINT" interface.

Minneapolis image courtesy of sxc.hu (Stock X-change image repository)

Multi-page layout

This layout also includes CSS and HTML support for outputting more than one page of information, which should (in theory) print out to your printer exactly the way it looks on the screen. FireFox unfortunately doesn't seem to adhere to my print stylesheet and I don't know why.

Of course, this layout doesn't automatically wrap your content from one page to the next... I don't think there's a way to do that without JavaScript, if it is possible.

If you have documents that need to fit onto a page and be printable exactly as displayed, this will do a pretty good job. Yes, most people just use PDF documents for this kind of thing, but I wanted to show how this is possible in a web layout.

Page Size/Layout

The page size is fixed (but easy to change or script) at 8.5"x11". Yes, that's right, this page is defined in inches. The idea being, each user agent will display the page on the monitor exactly the size of a regular piece of paper. Now in real life, I find it's generally off by 1/2" due to some random effect. But the idea is the same: display the page the size it will print as.

Consistent with the goal of displaying in real world size, I also measure everything in this layout in real-world units. Each component of this page is measured in inches (or parts of inches). The only exception being the font, which I refer to in units of pt or Point-Size. This makes sense to the user because all word processing programs work in point size. It also happens to be the unit people expect to see when they print something.

Small CSS files

As you may have noticed, I didn't include a lot of extra styles in this template like I have done in my other designs. I did this on purpose, because I wanted this template to be as light-weight as possible so it will load quickly.

Also, since this template is most useful for document-like webpages, I wanted to keep it simple so the end result is something that looks more like a term paper than a complex web interface. Again, simple is the idea behind this whole template.

Feedback

If you like this template, want to complain about a bug, or for any other reason want to give me some feedback, drop me an e-mail through the OWD e-mail system: Give raZor feedback