Website theme refresh

Why bother?

Our website theme was originally developed in 2017, and then only slightly revised in 2021 for the website rebuild. It had great bones but we hadn't done a proper look at every little part of it for a long time.

So, in collaboration across IT & Digital, the graphic design team, and the incredible work of our external web designer, Harry Vann, we've looked at a lot of key elements to tidy up, improve, remove - a general zhuzh up.

We've also managed to resolve most of the pending issues on our Digital Accessibility Statement.

What's the plan

The new theme is now live. There will be two next steps:

1. Snagging - finding and fixing little issues we didn't catch in testing. Let us know via [email protected].
2. Content review - helping you fix your pages or understand how best to present them with the new theme. All level 1 and 2 menu items have been manually reviewed, including most landing pages, but some more deep pages may need some love. We'll be issuing guidance for this, and doing training over summer.

How can I help?

• Review your pages and flag if anything's not looking right - we can help either fix the issue or bring the page into the new world.
• Keep things simple when you create content pages. Not to suppress your creativity, but e.g. centering text, nesting content across columns, having cards in odd places, can reduce consistency across our site and make it harder for visitors to read. If you want to display content in a certain way let us know and we can look in to creating a standardised way of doing that.
• Don't fight the theme - when editing pages, remember the theme is intentionally designed to look the way it defaults to. So, avoid adding tiles to columns to get them displaying a certain way, and avoid adding horizontal rules or spacing to your pages. We've carefully set the padding between elements so generally it's intended to look that way, but if it's awkward-looking let us know and we can fix it
• Think about accessibility - screen readers rely on structured pages, so e.g. don't use headings just for big text and provide meaningful alt tags on your images. Also, consider colour combinations carefully - the editor will flag when a combination is too low contrast. (White on teal is a no-no!).

What's changed?

The toolbar is now at the top of the page, not down the left hand side, improving visual flow - and to avoid crowding, if there's a lot of options, click 'More' for more actions. Friendly icons have joined us on our journey.

Banner headings no longer obscure banner images:

Buttons are now more button-y, with a satisfying click animation:

Cards have been tidied up and simplified for a cleaner, less overwhelming look:

Navigation tiles ("link tiles") now come in image and non-image varieties, to avoid unnecessarily clunky navigation when there is no good reason for images to be used. They also come in three delightful pastels - purple (125 Plum), yellow (Bentham's Teeth) and grey (affectionately, eff-two-eff-two-eff-two).

So e.g. navigation tiles without images:

And with images:

Colour theming has softened our link style and brought in the pastel shades of our brand for slightly less blinding white

Search has been improved both visually and behind the scenes, loading directly on the page with categorised results! Make sure to read about how our website search works to improve results in your area.

Duotone (colour treatments) have been removed everywhere, so we can enjoy the high quality photography.

Padding and headings have been revised (so you can resist the urge to use horizontal rules...!)

Accordions are easier to read and nicer to look at:

Teal heading

No grey background!

Another heading

Also no grey background.

The sidebar is more visually distinct.

Table of contents is now a table at the top of the page rather than a stressful toolbar thing:

In this section on landing pages is now also similar to the table of contents, rather than a sad grey box:

We now have a "Jump to top" button in the bottom right for long pages:

And at least a hundred other small things, like a Mully's at Midnight footer, navy headings for the main menu, icons on menu items, slide down shopping cart...

Please let us know if any issues or queries via [email protected].