Until this week, printing web pages resulted in the University crest looking broken and ugly. We needed to find a way to replace this for printed documents. We achieved this with a few tweaks to one jQuery file, common to most webpages on the site, and two style sheets (style.css and print.css).

The issue

The University crest displayed on the University website is a GIF with transparency applied to St Andrews Blue (#00539b). It looks like this:

Displayed on a St Andrews Blue background it looks fine; printed onto paper, it looks very bad and doesn’t reflect the professional image that the University would like to project.

I’ve been meaning to fix this for months in the print-specific style sheet but other things kept me from addressing it, until this week.

In discussion with someone from our Print & Design unit we decided to use the monochrome crest and header as used on University letter heads, which currently looks like this:

We didn’t want to assume that users would be printing the document on a colour printer, so we set the text to black and ensured that the monochrome header accompanies it.

Method

Broadly speaking, there are two methods of including an alternative images on a webpage, with which we can use CSS to control under which circumstances it is displayed:

1. Apply a background image.
2. Insert the image within the document, as content.

Applying the header image as a background-image was ruled out immediately as browsers generally disable the ability to print web page backgrounds unless the user enables that functionality. That’s not reliable enough a solution.

That left inserting the image into the document. Again, two methods:

1. Drop the image directly into the document (in T4 Site Manager this would mean adding it to the Style), or
2. Inject it into the DOM using JavaScript.

As there are over 20 styles—in true Blue Peter style—for speed, I chose to use (double—sided) JavaScript.

EDIT: Correction, there are currently 114 CMS styles (read themes or page layouts), and over 435 in total. I didn’t have the time to edit all of these manually. So for speed I chose to use JavaScript. For a longer explanation of this see the comments. End of edit.

I also provided a way for those few with JavaScript switched off who wished to print the page to at least view the text from the H1 heading “University of St Andrews”.

Code

The following is the code currently used on the University website:

HTML

Here’s the header on the main University website (omitting the full code for the Google Search):

<!—header –>
<div id=”header” class=”span-33 last”>
<h1><a href=”external-1-home.html” title=”University of St Andrews home”>University of St Andrews</a></h1>
<a href=”external-1-home.html” title=”University of St Andrews home”><img src=”images/header_crest_1413.gif” width=”42″ height=”52″ alt=”University crest” /></a>
<form id=”googlesearch”… /></form>
</div>

jQuery

First we add a class of .js-enabled to #header. That way we can provide a fall-back for any users who do not have JavaScript enabled, otherwise they would see no header whatsoever.

Next we ‘prepend’ the print-header div above .container so that it appears at the top of the document, before all other content.

// Load print-friendly header image into DOM after the page has loaded.
$(document).ready(function() {
$(‘div#header’).addClass(‘js-enabled’);
$(‘.container’).prepend(‘<div id=”print-header”><img src=”images/print-header.png” />
/div>’);
});

Screen style sheet

This is very simple: do not display the newly inserted piece of HTML code on the screen.

/* Hide print-only header from displaying on screen. */
#print-header {
display: none;
}

Print style sheet

First we hide all elements of the #header that we do not want to print: the Google search box (form), the crest (img) and then only if JavaScript is enabled (#header.js-enabled) the entire header.

If JavaScript is disabled then all that will remain is the H1 element.

/* Hide screen-only header when printing. */
#header.js-enabled,
#header form,
#header img {
display: none;
}

So, let’s style the H1 element, which in this case also contained an anchor tag. We’ll remove the default underlining of the link.

/* Style non-JavaScript heading */
#header h1 a {
text-decoration: none;
}

That is the non-JavaScript users catered for, and the appropriate elements have been hidden also for those with JavaScript enabled. First we need to display the #print-header that we inserted using JavaScript and then hid using the screen style sheet.

/* Display print-only header when printing. */
#print-header {
display: block;
}

Next, we have to constrain the size and proportions of the image.

#print-header img {
height: auto;
max-width: 100%;
width: 20cm;
}

Conclusion

Here, then, is a comparison of the printed page before we carried out this work with how it looks now, both with and without JavaScript enabled.

Above: Print preview before, with poor-looking crest

Above: Print preview now, with JavaScript enabled

Above: Print preview now, with JavaScript disabled

I think it looks much better now, more professional.

Afterword

I won’t mention that I accidentally broke two other websites who were pulling in the jQuery common file that I edited. If that was your website: sorry.

A lesson on why we should separate CSS and JavaScript files between projects: even if they initially share features and functionality, they might not always. We don’t do that now, but we did back when we set up these sites.

I think it is quite a distinctive and bright looking website. This is largely due to the excellent use of photographs.

Photo galleries

It was widely felt that the photographs used on the old accommodation webpages could have been improved. So there was a big focus on making good use of good photographs on the new website.

A big feature of the new residence webpages is the gallery of photographs. We settled on using the GalleryView jQuery plugin for this. It is fairly flexible, with plenty of options to configure. So when I was asked to make changes to the functionality of the gallery, it was fairly straightforward to update it.

Managed properties

Much more challenging was the managed properties page. This hasn’t gone live yet. But behind the scenes it works, although it’s not the most elegant of solutions.

We were asked to create a page that will contain information about a large number of individual properties — 80 or so. There is not enough information about each property to justify giving each property its own page. But, each property needs to have its own gallery, which opens up in a lightbox.

There was scope to split them up into five categories, so I have given each category its own webpage. This leaves us with around 15 or 20 per page. But whether there are 80 or 20, this leaves us with the problem of giving each property its own unique gallery while remaining on the one webpage.

This was a considerable challenge to implement within TerminalFour Site Manager, at least the way our Media Library is set up. The solution, as I said, is not ideal. It is certainly not the most user-friendly for the content owners to update. But it is good once again to push the limits, and learn what can be achieved when you set your mind to it.

No rush

Despite the sometimes tricky requests, I found the people at Residential and Business Services good to work with. They had brought on board a web expert who was able to do a lot of the heavy lifting and had great ideas for the website.

But best of all, we were given plenty of advance warning to work on the website several months before it was due to go live. In stark contrast to some others, who sometimes expect us to magic up an amazing website at the last minute with no prior warning, we were able to finish the majority of the work on the Accommodation website three or four months before it was due to go live.

It certainly made a nice change to be able to stop working on a website for a number of months rather than desperately rushing around at the last minute.

I recall that the very first meeting I had when I began working here two years ago was about the Museum Collections Unit’s web presence. The ultimate result was this new website, which we worked on during the spring and summer.

The visual design was created by Steve Evans, the Web Manager. It was then passed on to me to build within our content management system, TerminalFour Site Manager.

It is a fairly complex website, and definitely the most challenging project I have worked on. I really enjoyed stretching my limits and working with T4 Site Manager in new ways.

Creating the homepage

My first task was to create the ‘four panels’ page, as I called it. This is the overarching Museums and Collections homepage, which links through to the individual websites for each of the four museums. Each museum is represented by a square, which expands to reveal more information when the user hovers over it.

This uses JavaScript, which has not been a particular strong point of mine in the past. But I am beginning to wonder if that has changed, because I surprised myself when I managed to achieve this result quite quickly.

Personally speaking, this is not the sort of design I would normally opt for. But in the end I think it has turned out quite well and feedback from others has been positive.

Building the website in T4 Site Manager

The five websites themselves all share the same basic building blocks, but are subtly given unique identities. For this, I had to be quite creative in the way I built the website in T4 Site Manager, in order to avoid unnecessary duplication. I did not want to create several styles (which can be a pain to maintain in the long run) and templates that all looked almost but not quite the same.

This meant creating lots of navigation objects and ‘related’ sections instead. This is one of the trickiest parts to get right. It is a jigsaw puzzle with lots of different potential solutions, but each with their own little pros and cons. So it takes some careful thought. But it’s easily worth it for the long-run benefits it brings in terms of ease of maintenance.

A bit of creativity in using existing navigation objects was also required to give each museum’s website its unique identity. This allowed me to use the same style (page layout) for each website, while still being able to assign different CSS stylesheets to each website’s homepage, and separate stylesheets again for the lower level pages. This is what enables each website to have its own colour scheme, yet still all use the same style.

Other interesting bits

While working on this website, I also used the Google Maps API v3 for the first time for the maps on the visitor information pages. As far as I know, it is the only part of the University website that uses this newest version of the Google Maps API.

I was surprised to find it pleasingly easy to work with, and I think it provides a smoother user experience than version 2. The newer version is designed to work better on mobile devices too.

Another interesting part of the website is the virtual tour of MUSA’s Learning Loft. This was another first for me, working with Flash as well as JavaScript (normally we only use Flash for videos). But again this turned out to be reasonably straightforward in the end, and looks really good on the webpage.

Visual design

Initially the Museums and Collections website was going to be a more conventional affair. But Steve was inspired to create something more striking after seeing some of MUSA’s physical promotional material. Steve’s decision led to him creating a brilliant design. The Museums and Collections webpages are now, in my view, some of the very best looking pages on the University website.

On reflection, the decision to go with an image-heavy design makes perfect sense for a Museums and Collections unit that can draw on 600 years of history for its visuals. There are some fantastic images of some of the objects in the collections, which helps make these webpages particularly appealing to look at.

Summary

The new Museums and Collections website was a brilliant project to work on. It threw all sorts of challenges at me, but this was a great opportunity to learn. It took a while to get it right, but I think the result is a really eye-catching website.

Our friend Brian Kelly, the UK Web Focus for Higher Education institutions based at UKOLN (“a research organisation that aims to inform practice and influence policy in the areas of: digital libraries, information systems, bibliographic management, and web technologies”) at the University of Bath, has been nominated for a social media award in the Computer Weekly Social Media Awards 2011.

Brian has been put forward for IT Professional blogger of the year, and (I’m pretty sure) is the only blog representing the higher education sector.

Voting closes on Friday 25 November 2011, so please vote now – it will only take you a couple of minutes.

For the last few years the Web team have been using, and adapting, a form of Agile/Kanban board to manage what tasks need to be done and by whom. It has served us very well, but this week we moved it online to Trello, a free, hosted service from Fog Creek Software.

Why we went digital

When we started using the board the Web team consisted of three people: Steve the Web Manager, me (Gareth) the Assistant Web Manager, and Chris the Web software developer.

We all sat in the same room together, and the board was just a few steps away from our desks. It was handy, and quick, and accessibly. But as the team has grown we’ve now spilled out into an office on another floor of the same building.

It’s not quite so easy now for all five members of the team to add to or move tickets around the board. Occasionally some of us work from home too.

The main catalyst, however, was in response to a recent crisis in which our intrepid leader, Steve, fell of a ladder and broke his foot (you can see photos of his recent x-rays on TwitPic). He could be working from home for some time now and we wanted to make him feel included so we moved to Trello.

Trello

It was pretty painless to set up and add users to our newly created organisation and board. I then spent a couple of hours migrating our open tickets over from the whiteboard into Trello.

Labelling and assigning tasks to users was simple thanks to Trello’s excellent keyboard shortcuts.

I did wonder if I’d miss physically moving cards from one column to the next, but Trello has a neat little trick whereby when you ‘pick up’ a card it rotates it a little to indicate that it’s been picked-up. It’s really effective and surprisingly satisfying:

We’ve decided to trial working with Trello for a few months, certainly while Steve is recovering and may have to work from home.

So far the response from the rest of the team has been very positive (after we switched off email notifications). It’s attractive, it’s simple and it’s intuitive. No doubt we’ll report back in a few months with our thoughts on how the move from analogue to digital has gone.

As we all (should) know testing out software on live environments isn’t particularly sensible. For the last five years in the office, and longer at home, I’ve been running XAMPP from Apache Friends as a test server on my PC.

XAMPP includes Apache httpd web server plus MySQL, PHP and Perl in an easy to install package (available for Windows, Mac, Linux and Solaris).

I don’t know about you but I’ve spent hours trying to get Apache, MySQL and PHP to speak to one another on a number of PCs. Sometimes without any success, other times after a lot of reading and config file editing. That was when I discovered XAMPP. No more delving into config files to try to coax life into your *AMPP server. Out of the box XAMPP just works.

The latest version for Windows, XAMPP 1.7.4 includes the following:

• Apache httpd 2.2.17
• MySQL 5.5.8
• PHP 5.3.5
• phpMyAdmin 3.3.9
• FileZilla FTP Server 0.9.37
• Tomcat 7.0.3 (with mod_proxy_ajp as connector)

Security

This simplicity, however, comes at a cost: security. As they repeatedly stress on their website

“XAMPP is not meant for production use but only for developers in a development environment. XAMPP is configured is to be as open as possible and to allow the web developer anything he/she wants. For development environments this is great but in a production environment it could be fatal.”

The missing secure elements in XAMPP are:

• The MySQL administrator (root) has no password.
• The MySQL daemon is accessible via network.
• phpMyAdmin is accessible via network.
• The XAMPP demo page is accessible via network.
• The default users of Mercury and FileZilla are known.

Security holes which can, of course, all be patched. XAMPP comes with a security status page which allows you to see how secure it currently is.

Setting a root password on MySQL and protecting the XAMPP directory is as simple as clicking a link and filling in a couple of forms.

Conclusion

I’ve found XAMPP to be really useful, particularly for testing PHP code, developing WordPress themes and learning new Web apps.

If you don’t fancy XAMPP then there is also WampServer. Or you can get your hands dirty and delve into the config files… but remember: in the config files no-one can hear you scream.

Example collage of website screenshots that I use for design inspiration.

Back in late 2008 I read an interview with a Web designer who advocated keeping a scrapbook of cool designs that you’ve seen so that when the time came for Needing Inspiration™ you already had a volume of stuff to look through and be wowed by. It was a discipline that he’d picked up from art college, seemingly.

What a brilliant idea I thought and promptly started my own collection.

I keep two collections:

1. One is for stuff that I cut out of newspapers and magazines that I glue into an A4 Black n’ Red spiral-bound notebook (simply because that’s what I had to hand).
2. The other is for screenshots that I store in Dropbox in a directory called ‘Cool designs (inspiration)’.

I started to use Flickr for storing the screenshots but Flickr requires that you own the images, and technically I don’t as they often contain copyrighted designs. Also Flickr requires online access (which I can’t always guarantee) and it’s relatively slow for this process. I’m currently using the image viewer in Google Picasa to quickly navigate through the screenshots.

To grab the screenshots themselves I generally use SnagIt —it’s especially useful for long screens that require scrolling, SnagIt captures it automatically—but occasionally I resort to the good old Windows shortcut Alt+PrtScn.

These collections of screenshots and my scrapbook I find really, really useful. At the moment I’m working on a redesign of the University’s sport website and this has been a great resource to give me ideas and suggest alternative ways of laying out information. I recommend it highly.

A few years ago I came across this really excellent book by Kelly Goto and Emily Cotler: Web ReDesign 2.0: Workflow that Works (New Riders, 2005).

In 10 chapters Kelly and Emily lead you through the workflow of a complete website redesign. They break the process down into five phases:

1. Define the project.
2. Develop site structure.
3. Design visual interface.
4. Build and integrate.
5. Launch and beyond.

I’ve increasingly found this framework to be really useful, not only for website redesigns but for developing new sites too. I now think in terms of five phases for most Web-related projects that I work on. I’ve found it also provides a very simple overview for clients to help them understand where we are in the overall project lifecycle.

I now have the book sitting on my desk at all times, within easy reach. Their website also has a number of downloadable resources such as a client survey, tech check list, budget tracker, etc.

Web Design Sketchbook

Another resource that I’m finding really useful particularly during phase 1 (define the project) is the Web Design Sketchbook from 37 Media.

The first nine pages contain questions to ask the client, which I’ve found really help you understand the project better. Questions such as:

• What objectives are you trying to achieve with this site design / redesign?
• What is the primary “action” the site visitor should take when coming to your site (e.g. make a purchase, become a member, search for information)?
• If you could communicate only one message to visitors, what would it be?
• What should users think or feel when they look at the design of you site?

The final page of questions includes a list of word pairs to help you determine the tone of the site, e.g.

• conservative or progressive
• cold or warm
• spontaneous or orderly
• trendy or classic

The second half of the book contains what they call “layout brainstorming pages with full browser chrome and grids to better plan how your site will look and operate when it’s finished”. A nifty idea.

You can order the sketchbook in two varieties (single project at US $12 or a full 104 page sketchbook for US $25) or you can download and print out the free version, which is released under a Creative Commons license.

Build your own

These resources have inspired us to build our own, drawing on resources from each as well as our own experience and requirements here at St Andrews. When we have I’ll post a link to it here.

What would you include in a Web project workbook?

A few weeks ago I spotted this photo called, simply, “St Andrews” on the Our Scotland website; it was taken by Chris Cuthbert.

What I love about it is that it’s not a familiar view of St Andrews. I had to think for a moment where it was taken from. Most photographs of the harbour are taken either from or include the pier. This one has been taken from near the East Sands looking towards Balfour Place, The Shore, and Shorehead.

This post has got nothing to do with the Web. I just thought it was a beautiful photo and worthy of sharing.

Above: Our current list of outstanding support calls.

In the style of The Fast Show: this week I are been mostly… answering support calls.

Many people suspect that the Web team summers are quiet affairs, with plenty of peace and quiet to get on with projects. Sadly that’s not the case, and particular while we’re playing ‘holiday tennis’ with one another. (By the time I return from holiday on Monday 15 August I will not have seen my colleague, Steve Evans, for 6 weeks.)

So, for the last two weeks, while I’ve been desperate to get on with various projects (redesign of the Sport and Athletic Union pages, for example) all I’ve done is answer support calls as the Web team strength has fluctuated around the 40-60% mark.

It’s been both a very satisfying and a mildly frustrating way to work. But that’s just the way it is just now, so no point in complaining.

(I did manage to get the Course Catalogue pages moved, though.)