Breathing new life into an ancient deity

Sometimes it’s the case with busy schools that they don’t have much in terms of brand visuals and assets. We found it particularly challenging to work with the current version of their emblem depicting the ancient Egyptian god, Throth.

Of course, with a school as fantastic as BISC we wanted to help them out. We created an updated, modern version of Throth as a responsive SVG that gave us the flexibility on the web. We also provided a new, simplified set of standardised brand guidelines that the school could use beyond the web.

Creating a SVG version of the Throth emblem allowed us reuse one small file and change colour elements on-the-fly with CSS. Illustration by the brilliant Aegir.

Developing a look-and-feel

Using an approach called style tiles I worked through several different versions of the look-and-feel for the new site. This technique allowed me to work-up ideas quickly and get agreement from the client more easily than mocking up full pages.

With any design, I find that it’s relativity easy to create something good; taking about 20% of the overall work. The hard part is getting from good to great. This is where style tiles really come into their own: getting to the great much quicker.

An early set of style tiles I developed that helped get buy-in from the client.

For parents on the go

Testing told us that around a third of visitors were accessing BISC’s existing site on their phones. With a further fifth using tablet-like devices it was clear we had to deliver a great experience for all visitors, no matter what device they used.

We also knew that mobile networks in Egypt were sometimes unreliable, so we needed to build a site that would work even when connection speeds were low. With a budget of 300 kb per page; each page would have to be useable before any enhancements were loaded.

This progessive enhancement approach of loading the content first and deferring things like photographs and animations until later worked brilliantly. Loading the site on a poor connection was lightening quick and meant parents could find relevant information even if they were experiencing network issues.

When the page first loads, tapping main menu simply jumps the user to the footer menu. Later a script switches this to show an animated menu at the top of the screen.

Outcomes

BISC enjoyed a beautiful new, fast-loading website that they could edit with Firefly’s brilliant WYSIWYG editor. Using Style Tiles we’d quickly agreed the visual style and our progressive enhancement approach meant the site was super responsive.