Creating a print style sheet
While we were very busy as we approached the end-of-February deadline for the new Study at St Andrews website, our daily update posts fizzled away. But I wanted to write about one further update that I made, because it highlights a part of our work that many people may not be aware of.
When we design pages for the web we need to think about how it will appear in a variety of contexts: various differently-sized monitors, mobile devices, touch screens, assistive technologies such as screen readers, and more.
We also need to think about how it will print out. That is where the print style sheet comes in.
A cascading style sheet (CSS) is a set of rules that dictates how an HTML document is displayed. In layman’s terms, the HTML sets the structure of the document; CSS defines how it looks.
The beauty of this system is that you can use different CSS rules in different circumstances, without having to maintain a separate document. This is what enables us to have a responsive web design, whereby the design of the page adapts according to the device you are using.
Because the requirements of print are very different to the requirements of displaying pages on a screen, we use very different CSS rules that are specifically used by printers.
My starting point was the print style sheet already created for the University website by the web team. This provided a lot of what was required very quickly. But because our design is so different, I needed to do a bit more work to get the results I was looking for.
One of the biggest tasks when creating a print style sheet is to remove any interactive elements that would make no sense on a print document. For instance, navigation menus should be removed, because you cannot exactly navigate a website when it’s printed out.
The Study at St Andrews website in particular makes heavy use of accordions, where text underneath a subheading is hidden by default, and appears when you click the subheading. On a print document, we cannot continue to hide the content by default, since you cannot click the subheading to open the accordion.
So I had to write some CSS rules that would overwrite the CSS designed for the on-screen accordion functionality. A print out that contains only the headings and none of the actual content would not be much use to anyone.
I would like to spend some time over the next few months to see if there are ways of further improving the print style sheet. It would be good to have the design more closely aligned with what the Print & Design unit produces — although I think we are not too far away already — while bearing in mind the limited capabilities of your typical desktop printer.