Purple Rain

Prince XML Logo

Prince XML is an application that enables you to create PDFs from HTML documents, using formatting from your print stylesheet. This is handy as browsers don’t really do print very well, and don’t support the CSS selectors that create multi-column layouts.

I first heard about Prince XML in a presentation by Håkon Wium Lie of Opera at the @Media 2007 conference. When I looked into Prince after the conference I didn’t really see its potential for us, as PDFs were something we generally avoided.

I was asked recently to do some further research and came across this presentation on YouTube, as a consequence I see its true capabilities.

So why use it?

We have a lot of fresh and accurate content on our website, so why not use web pages as the source for high quality printed material?

If a print style sheet can manage a layout as effectively as QuarkXPress or Adobe InDesign, when outputted in an automated way through Prince, then that saves a lot of extra work.

In the Prince GUI you select the web document you wish to convert, click Go and it creates the PDF, it’s very simple.

Thinking in Print Terms

As a web designer I’ve learnt to avoid print values when using CSS, like millimetres and points in typography, but there is so much more to think about.

If I’m following instructions from a print designer, I need to be able to format columns, page-breaks, pagination, headers, footers, footnotes, crop-marks, not to mention the mysterious widows and orphans.

Also we will be able reference the typefaces in the Edge Hill style guide that we can’t use on the web.

Some print specific CSS examples

Formatting a page:

@page {
size: A4 landscape;
}

Formatting headers and footers with page numbers:

@page{ size: A4 portrait; margin:1cm;
@top{ content:"BA (hons) Film Studies"}
@bottom{ content: counter(page)}
}

Formatting left and right pages:

@page :left {
margin-left: 4cm;
margin-right: 3cm;
}


@page :right {
margin-left: 3cm;
margin-right: 4cm;
}


Page breaks before specific headings:

H2{page-break-before:always}

Column layouts:

Body{column-count:2}

RGB and CYMK colours

H1 { color: rgb(255,0,0) }
H1 { color: cmyk(0, 100, 50, 0)}

Font Formatting

h1 { font: 28pt "miso-regular"; text-transform:uppercase; border-bottom:thin solid #336699 }

Finally Does it work?

From the experiments I’ve done it seems to work really well, but I won’t be fully confident until I’ve followed real style guidelines to the letter, and received the thumbs up from an experienced print designer.

Go Go Gadget GO Redesign

Just a quick post, really to explain the re-skinning of the GO navigation bar. We are currently developing a wiki that will eventually replace the intranet. The wiki will have the same look and feel as GO, so that we have a consistent style and user experience across applications. We also hope eventually to adapt other systems in the same way, online mail and Blackboard for example.

GO screenshot

My main aims regarding the GO redesign were really to add contrast and economy to the interface, and update the typography so that it reflects the current Edge Hill branding. I was also conscious that the old version was overloaded with unnecessary background images, which slowed down the application and caused the CSS to mushroom.

I will write a more comprehensive overview of the wiki design soon.

@media2007: Nate Koechley: High Performance Web Pages

This was a presentation for developers rather than designers so I was expecting a lot of information to go over my head, it did, but enough has stuck to write a short post.

Nate Koechley is a Yahoo! frontend engineer and designer based in San Francisco. The bulk of his presentation was based around a twelve step programme to create quicker web pages.

  1. Make fewer HTTP requests: This refers to combining style sheets and scripts to reduce the amount of communication between your browser and the server. He also recommended using Image Maps, which I thought were considered old hat, but for icon driven navigation I can see how this could work in reducing the need for multiple images.
  2. Use a CDN: this stands for Content Delivery Network, a way of deploying content from multiple “CDN nodes”. This is important for increasing the page load times on sites with a lot of traffic such as MySpace, which uses Akamai.
  3. Add Expires Headers to cached content: This allows control of caching mechanisms in your browser and is important for dynamic content which has to be downloaded repeatedly because it is not cached correctly.
  4. gzip components: gzip is a software application used for file compression with 90% browser support. I use Photoshopto optimize images for the web, gzip can apparently compress them by a further 50%.
  5. CSS at the top of the document: Links to external style sheets should be placed high in the HTML document, and use link rel=”stylesheet” rather than @import for linking.
  6. Move Script Includes to the bottom of the document: Links to external JavaScript files should be put after the closing body tag. This recently adopted practice is a necessity because page downloads are paused until an externally linked script is fully loaded.
  7. Avoid CSS expressions: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. CSS expressions aren’t generally used by designers who enjoy the clarity of basic CSS mark up.
  8. Always link to external CSS and JavaScript files
  9. Reduce DNS lookups: You can reduce Domain Name System (DNS) lookup traffic by using multiple hosts, therefore distributing content via parallel downloads.
  10. Minify Javascript: You can compress external CSS and JavaScript file sizes by eliminating white space. You can use a tool called ShrinkSafe to do this or you can do it safely by hand.
  11. Avoid page redirects
  12. Turn off ETags: ETags prevent pages from caching.
>