frogboxdesign.co.uk

Pre-Raphaelite Society Case Study

Following Conventions – Redesigning the Pre-Raphaelite Society Website

Due to our work on The Review of the Pre-Raphaelite Society, we were invited to complete an XHTML and CSS redesign of the Pre-Raphaelite Society’s website. This project was a little different to the Elphicks Fisheries redesign since the new site needed to resemble the old one as closely as possible.

It was relatively easy to mimic the “look and feel” of the old site with a few carefully placed <div>s. This also gave us the chance to organise the content structure of the pages better – rather than relying on inline formatting to show a page’s top‑level heading and sub‑headings, we used… headings! These make more sense both structurally and logically: they make content easier to read and understand for users accessing the site with oral or Braille browsers or any other device that doesn’t rely on the visual cues of the formatting to hint at the content structure.

We also replaced the javascript image rollover menu with a text only CSS rollover menu. This was important for several reasons:

• It allowed us to change the colour of the current page’s link which helps users work out where they are on the site.
• If users had javascript or images disabled, they had to rely solely on the secondary menu at the base of the page for navigation. This was a satisfactory solution on the shorter pages, but on the longer pages, this meant lots of scrolling.
• It also saved a good few seconds of download time (each menu item had an image for the “on” and “off” states.

Hyperlinks’ functionality was also reviewed:

• Links were made more obvious with the underline removed when the mouse pointer hovers over them (to show that they are clickable elements)
• Link text is now more descriptive of the link’s functionality: from “click here for an application form” (the link was to the Join Us page, not direct to the application form as the link text suggested) to “a membership application form which may be downloaded on the join us page”
• External links (i.e. those that link to sites other than the PRS site) have a title warning a user that they are about to leave the PRS site rather than simply opening a new window. This is important because the user may not notice they are now viewing a new window which effectively “disables” their back button as their browsing history on the PRS site is contained in another window.
• Links to larger versions of the Pre-Raphaelite artists’ paintings featured on the site also open within the PRS site, rather than a new window, for the same reason.

There were some other usability tweaks;

• Images were given alt text attributes. This stands for ‘alternative text’ which specifies (surprise, surprise) alternate text that is rendered when the image is not displayed. Again this is useful for the non-visual browsers because it gives a short description of the image.
• The page dedicated to the main contents of back issues of The Review was broken down from one page (that required a lot of scrolling), to several smaller pages, each with local navigation making it very easy to move from page to page.
• A “Help” page was added which contains a site map (for increased ease of navigation – with the added bonus of better content in search engine results which should boost the site’s ranking!)

All in all, the challenge of making the new Pre‑Raphaelite Society website look like the old one, while improving the accessibility and usability was very satisfying!