Bilby Marketing

This website for Bilby Marketing is quite a change stylistically from anything I have done before and uses certain effects that had me banging my head on the desk.

My usual process for designing a new website is to make some very rough sketches on paper - literally a few boxes scribbled down to help me coneptualise the basic structural layout. Sometimes this structure is quite specific - often however it's not very well resolved and gets forgotten about quite quickly, but it's just enough to get me started.

The next step is laying out a page in Photoshop. A key feature for the site was decided early, and that was to use a big image across the background. Getting it to look good in Photoshop was one thing, but actually getting it working as actual HTML took a lot of effort. To the point in fact I was seriously considering changing the design.

I think the background image used on this website looks fantastic and really makes the website - however, there are compromises you have to make with this type of design so wouldn't be suitable for every site. The first compromise is finding the image. It has to be big, but not too big - else it will affect the sites loading time. And it has to be suitable for running out into a plain colour - so if the content on any page is longer than the background image, the design doesn't fall apart.

I chose the blue from the sky as a background image for the page, and set the background image to sit at the bottom of the page - so on any page with a lot of content you simply get a lot of blue sky at the top of the page and you won't see the landscape until you scroll further down the page. An acceptable compromise, especially as the blue on it's own actually looks like a perfectly decent colour choice.

Not quite job done though …

This causes a problem if there isn't very much content on a page. The purple footer appears half way up your monitor, and then you see the blue background colour stretching out below filling up the rest of the page down to the bottom. There are some tricks to get your footer to stick to the bottom of the page, so rather than appearing immediately below the main content, it is pulled down to the bottom of the screen. And for a while I thought this was working a treat. Except I found it would sometimes cause a bug when resizing the browser. Nothing consistent - sometimes it would happen, sometimes it wouldn't. And it would only be a problem if visitors were resizing their browsers when viewing the website. It was never going to be a big problem, but all the same, I wasn't happy with it.

I still thought there would be an easy solution with a bit of lateral thinking - but making it all work took a surprising amount of time and trial and error. My compromise in the end was to use a container in the HTML purely to hold the background image. Not exactly an ideal solution by any means, but it got to the point of being that or dropping the background image - and I'm well sold on the design so that was staying!

Having got a lovely big background image - I didn't want to then start hiding it behind blocks of text. So I used a semi-transparent background image behind the text, which I think is a reasonable compromise between design and usability. However, I will probably put in an easy read option where visitors can pick a flat colour behind the text if they are struggling with readability.

If you like what you see and would like any extra information, or even just to say hello - please contact me.