Mob: 07760

ee-web thinks... a bit

Go on, make my day ... leave a comment

Kusuma Trust header

September 8th, 2016 by Edward

Recent clients, the Kusuma Trust have some really beautiful photography that draws the viewer in and helps to tell their story. From the outset it was decided to place different pictures across the top to act as the Kusuma Trust header, upon which various menu items would go. They were keen however, not to have a background strip for the menu text to sit on – which clearly creates potential usability issues regarding textual contrast.

The brief suggested that the image was to be :

  • full width
  • fixed depth
  • look good on all screen widths
  • possibly have some headline text fixed to its bottom on a semi-transparent background
  • and… easily maintained by the user

Of course, that last one is the requirement that makes things difficult!¬† From a technical perspective there would be no problem if they didn’t want to swap images in and out. I suppose we could have had them creating several different crops of the same image however, you know … but each one would have needed experimentation because of the ‘no layer under the menu text’ requirement.

A considerable amount of experimentation was done in order to show these off as well as possible, and we ended up with a somewhat unexpected solution, if traditional, solution. Here’s the idea – which looked promising on 1200px:

Kusuma Trust header

And here’s what 1000px looks like, with a green cast so we can see responsive points

Kusuma Trust header 1000px

And here is 530px, past another break point:

Kusuma Trust header 530px

As you can see, not looking so great now with a head disappearing behind the logo. We had to keep the depth to fit in the line of text which had to sit above the bottom of the image.

So the problem because that due to the myriad of different screen sizes it became too difficult to ensure that the menu was legible over the image, the crop of the image remained meaningful (it really lost this element with some images), the bottom line of text was one legible  and that the client could edit it!

So in the end we scraped the full width proviso and went with a fixed image. This removed all the problems and is easy for the client to maintain. Importantly though, I think we kept the visual appeal of the images because we now had total control over the aspect ration.

Here’s the final result – which all the team thought looked great! In the end the Kusuma trust header was, perhaps fairly standard, though very effective non-the-less.

Kusuma Hrust header final





Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

Leave a comment