CASE STUDY 001
User-Friendly Print Button 2005.04.01

The University of Tokyo website contains a lot of important textual information that we knew people would want to use for further reference. We came up with several ideas to make the site more user-friendly in this regard.

Most of the websites we create are designed to be viewed safely on a monitor set to 800x600 pixels. However if you print out the page to A4 size paper, depending on user settings, the information may still run off the edge of the page. We came up with a user-friendly print button that lets you select between full page printing or printing just the main content area. We assumed that many people don't want to see the header or side menu every time they print out a page. By getting rid of that extra information we help ensure that what you want to print can fit on A4 size paper.

Other printer-friendly solutions often use php on the server side to generate a separate html file each time you print a page. This adds extra stress to the server which can provoke errors and internal problems as well as make you wait longer for the page to generate the new html.

Our user-friendly print button does not add extra workload to the server because our solution uses a combination of CSS and Javascript coding, making it more functional and reliable. When you click the print button the page doesn't reload in the browser, instead it goes directly to the print page menu where you have the option of previewing it the way it will print instead of within the browser.

When users click the "print main contents" button the header becomes more compact and the side menu is taken out all together, as seen in the image on the bottom left (i).
The "print full page" button prints the page as is (ii).