April 1st, 2006
Five Simple Steps to Typesetting on the web: Printing the web
The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print.
There are times when a web designer has to know about print design. Not just the values and aesthetics of designing for print, but the terminology, measurements and production values that are important in print design—including typesetting. I’ll be addressing these, along with a working examples over the course of the next three installments of this ‘Simple Steps’ series.
Print alternatives to web pages have been around for a while, we’ve all seen them, in one form or another. Usually, they are associated with a ‘print version’ button which upon clicking renders the page without any navigation and, if you’re lucky, increases the font size. This is generally about it. Many sites offer this as functionality but I have to question whether users click this due to time constraints, or like me, they just print straight from their browser on the page they’re on.
In which case they will get something like this (prints from Guardian Unlimited and The Times).
There is a way, other than ‘print only’ versions, of rendering this content for a printer. Print stylesheets. Or more specifically, a CSS file, which has been authored for print media and declared as ‘print’ in the ‘media’ attribute of the link tag.
The last to be thought about
It’s been my experience, over the past few years, that despite being a very clear need for users to print out web pages, very rarely are those needs addressed by designers. Why is that? Do we think that print is important in a screen based environment? Jason Santa Maria, Graphic Designer, had this to say when I asked about this recently:
Many people still see the web as a temporary medium, one that is always changing and where content is potentially irretrievable. I know many people who love to print things they find on sites, from articles to recipes to photos, to view when they are away from the computer or or for their own personal archive. There’s no reason that information shouldn’t either support your brand or be designed with the same care as your site.
Khoi Vinh, Design Director of the NYTimes, agreed with Jason:
Having developed Web solutions for many text-heavy publications in my career, at least one user scenario remains: people like to print long passages of screen-based text for reading offline.
This then begs the question, if printing from the web is so important for users, then why do we see print based templates either being left to the last minute, or being developed by technical teams, rather than designers? In addition to implementation though, what else influences the decision for ofefring a print alternative?
Khoi makes some valid points about revenue generation, through advertising, in the print versions:
Designers are focused on the immediate, knowable and sharable result of what gets rendered on the screen, so it’s natural to consider print media stylesheets an afterthought. But other factors contribute to this too, notably the monetization of ‘printer friendly’ versions of articles at many publication sites.
That is, rather than offer a print-based set of CSS rules, many sites will offer an alternative screen rendering of the same article, slimmed down to just the primary text — we’ve all seen this. Very often, those print-friendly views are sold to advertisers for sponsorship, so in those cases at least, there’s a financial reason *not* to create a print media style sheet.
This is something that I hadn’t really considered when researching this article. When Khoi mentioned this, it did get me thinking about how advertising would fit in with print CSS. I’ll discuss this later on the series though.
Jason also raised some interesting points about the medium:
Because print stylesheets are perceived as somewhat non-essential to most site creators. Their main focus is their website and the appearance of it in various browsers. I think many people see print as a secondary medium, like mobile phones, that is optional. And I suppose it is a secondary medium, as far as the web is concerned, but there is very little preparation involved in producing some simple styles for print.
Perhaps there is an assumption that print styles can be added at a later date as they are deemed ‘secondary’. This can be true, but on developing the example for this series I found that in developing a print style there was the need to revisit the code in the template to make sure the content flow was correct and additional design elements could be added. So, in that sense, I’m not sure that assumption is true.
So, that was a bit of context. Next, I’ll get into the design of the printed page.
The Example
I wanted to frame this remaining set of articles with an example. A text-heavy site, with a strong on and off-line brand which could benefit from print styles. I chose the British newspaper, the Guardian.
Why? Well, The Guardian has an established website. The paper version was recently redesigned and now there is somewhat of a gap, visually, between the website and printed material. The first task was to design what the printed page from the website would look like.
Design the printed page
I feel the process of designing the printed content of a website is as important as designing for other media; screen readers, mobile and small screen. The design process is the same as designing for any other media. You have to understand the context, the production and the delivery.
Luckily I chose an example with a very strong offline design on which to draw inspiration. I began by researching The Guardian’s redesign and analysing the components which make it up; the grid, typography, colour and composition.
I chose a typical page layout, which included running heads, article headline, date, author etc. All the content which would go into the online version.
It was clear from this example which areas of the design I would need to replicate to ensure a quality reproduction for the print styles. I then began to shape up the design.
Shaping the page
I begin most design tasks by drawing thumbnails. This one was no different.
As you can see, I there were some important considerations I wanted to address even at this early stage. Width of the Measure is an important consideration for printing on an average desktop printer. I opted for a full width measure. Although this may hinder legibility due to the long line length, I feel this is acceptable considering the potential savings on paper and toner if the measure was narrower.
From this quick sketch, I worked up a larger, full-size, sketch to get an idea of proportion of type areas, rules and white space.
Working at this full size, in pen and paper, gives an immediate idea of the scale of the elements on the page. I really would recommend this for when you design print alternatives for your web sites. Draw it out on paper first. It’s quick and will save you a lot of time in the long run.
Digitising and colour
I then took the sketch and worked it up in Photoshop (you could use InDesign or Illustrator if you like) to use the typeface I wanted and add colour.
Working at this full size, and then printing it out, gave me a template on which to base my CSS measurements. Remember, with the printed page we are dealing with absolutes again. You can define type size, leading and measurements which all exist in a finite space: a piece of paper.
I found that completing this stage of the process really helped in pulling the styles together later on.
The finished article
I’ll skip ahead a bit and show you the finished article.
This shows the finished printed article page shown next to a open spread of the paper. As you can see, it shows a continuation of the brand and the content is presented clearly and legibly.
The Example
In the next two parts of this series I will be discussing the typography and colour, and creating the print media css files. For those of you who can’t wait until then to see the example, here it is.
Excellent article. What I love about your articles, is that you don’t writeextensively long texts, yet you can achieve what you want in less space, less words, and overall, understandable language, which is very appreciated these times.
I’ve been trying to get a good print CSS for my websites too, but I’ve been stopped at the code bit. Sometimes a div won’t print on several pages, as if it were stuck floating over the first page. Of course I tried de-floating it from CSS, but haven’t had success. Someone has the same problem?
Great article — I’ve just finished (though not yet live) a reasonably sized site for an OHS training company and included a print.css sheet.
I just turned off (using display:none) everything except the headings and content — gone is the nav etc).
I found it easier to start with a clean sheet and style accordingly rather than work back from the screen sheet.
The client was over the moon that their individual course pages print just like their previously downloadable PDF’s — saving time, bandwidth and of course, they only have to edit / create one version (using Contribute).
Print style sheets are so easy to implement, I’m surprised more aren’t using them.
I think the key thing with print style sheets is to keep it simple — dont over-style.
For me, the most important aspect of what you talk about here is the audience. Audience insight can come in many different forms.
If you ask someone what they think of your website, they might just talk about the content or the basic design but they also might have some insightful comments such as those that inspired this article:
“I like to print off pages from the web to read offline.”
People say lots of useful things, you just have to listen. Without wanting to ‘step over the mark’ so to speak (no pun intended!), in my experience sometimes, the more ‘creative’ (I know you hate that word Mark) professions such as ad creatives and designers, can be the worst at listening to the audience.
Another great article! I’m recommending all yourl “Five Simple Steps”-articles to my fellow students.
One little thing, you mislinked your pictures, just to let you know ;)
Excellent article, Mark! Your typography articles are always so clear and simple. Keep up the good work!
Great article Mark, and beautiful work yet again!
You’re absolutely right: the printed page isn’t appreciated at all, probably because it isn’t publicized much. I’m probably opening up a can of worms by saying this, but there’s a whole slew of CSS gallery sites out there; why not one featuring print style sheets? I’d defintiely encourage anyone who’s motivated enough to take this on to do it.
Another great article Mark, but I have a small question…
I notice that measure of the print-out’s text spans the entire A4 page. Obviously, this is fairly common on printed media — except in newspapers where the readability (is that a word?) of the text is of upmost importance. My question is this: Is the suggested measure of 52–78 odd characters, that you suggested for online text in your earlier post, still valid for print media?
At my day job (http://www.rentokil-initial.com/) we managed to convince our project manager that print stylesheets are a good idea (see the press releases). However, we also let the measure span the entire width of the page and I was just wondering whether the same rules on typography apply.
Another awesome article, thanks:)
There’s one thing I find terribly missing everytime I look at printed web page — urls attached to links. It’s much more important than link color, and I can’t access this information. Frustrating.
Thinking about a solution I figured one probably should use css content generating rules. However it’s impossible to read link’s href. Quick idea: every link on page has an id attr, separate stylesheet with :after rules just to add url text to each link with id.
I was wrong about reading link’s href: actually you can use attr(x) as content to print any attribute’s value.
So, back to the problem. Providing reader with the url is crucial in terms of accessibility in my opinion. And there are means to achieve it.
Dan: That’s an interesting idea, and would certinaly raise the increasing need for good, well-designed print styles. Like you say though, it would need a bit of time and motivation to get it off the ground.
Tim: Good point, and it’s one I think I addressed in the article. It’s a trade off. Do you have a wide measure and save on paper and toner at the expense of legibility? Or, do you set the measure and maybe add a third to the amount of printed pages? I took the eco-friendly route with this one. Also, it’s probably worth mentioning that there are different paper sizes and printer margins which will also affect this — another reason for going full width and let the printer sort out it’s margins.
Jacek: I’m generating the link url (to appear after the link in brackets). I think this solution is ok as long as the url isn’t huge. Interestingly at SXSW this year, there was a presentation which showed how to use Javascriptto pull links out and display them as a footnote. I wonder if this could be then styled using CSS for print. I’ll have to ask Jeremy.
An excellent article, thanks!
All the sites I design for are either training sites or parts databases and both types of clients put printing high on their priorities but inevitably it’s the last thing I take care of.
Good food for thought, I’m sure I can use this.
Just to add to the printing URLs conversation, Aaron Gustafson wrote a great article for A List Apart about Improving Link Display for Print. It uses Javascriptto store the URLs and append them as footnotes.
Thank you so much for posting this. I’ve struggled with print design in the past, and this is very helpful.
Plus, through Dan’s comment, I’ve got the link to pull the links and display them as footnotes, which addresses the problem I’ve had in-house with displaying lengthy URLs inline.
Great article, as always.
I have a print layout request for a site design I just launched and was wondering, do you think the ‘transparent’ solution of a print.css file is preferable to a ‘print version’ link, or is it important the visitor is made aware the enhanced functionality exists via a link/button of some sort?
Dan: That was the guy I saw at SXSW with Jeremy. I might just try and shoehorn this in.
Steve: This is something Khoi pointed out when I asked him about it recently. ‘Print Versions’ had somewhat become a standard on some sites — almost a convention, some would argue, across the web. My gut feeling, where possible, is to offer both; a print stylesheet and, if you need to a ‘print version’ which looks like the print stylesheet, not a web page.
My experience however shows that a lot of people just hit print rather than searching out the tiny printer icon.
Great Article. A few months ago, I finished working on a re-design for dlife.com. One of the major problems that we ran into is the Print this Page element. I have to be honest, it still looks like Sh**. And I think I would like to go back and revisit this page again with tips your presented in your article.
With our audience we face a lot of older users, who like to print everything to read later. I think this would be greatly beneficial to our site and audience.
How long has the idea of print styles been around? Long enough, I’d have thought. I’ve had them for a while and I’m not a CSS guru (I’m just a fungi!). If I can do it, anyone can.
Great article. I just would like to add if you’re designing on Mac using Dreamweaver 8 and you link print style as /link href/ Safari during preview will render your page using print style,instead of screen (no problems with Firefox) If anyone knows why,please let me know :-). The way around this preview issue in Safari is to import your print style.
A timely article indeed. I’m about to create print stylesheets for my organisation’s site and this article has given me plenty of inspiration. As luck would have it, I had come across the superb <a href=“http://jquery.com/” title=“jQuery: New Wave Javascript\”>jQuery</a> Javascriptlibrary a couple of days ago, so injecting URIs into the link text for the purpose of a print stylesheet seemed like a good tester. Turns out it’s silly easy. Have a look at this quick test page I knocked up.
Ack, it says anchors are allowed! Here’s where the test page is:
http://www.charlesroper.co.uk/test/js/uri-inject/
An interesting article but the final webpage looks nothing like your layout, and in fact requires nothing fancy. It is just a single column with a picture at the top.
@Adam
Try printing the article…
Great article, the problem is that a lot of web-designer still don’t know how to do print-design, we’ve designers that are so good at creating beautiful looking webpages, but when it comes to print on paper..
[…] Five Simple Steps to Typesetting on the web: Printing the web … Tags: Basic Knowledge, Internet Data, Internet Phone Provider, Router, Routers, Simple Steps […]