Just launched latest website for a pub chain called Gilbert & Wright. Overall I’m happy with the result. I wanted the site to achieve an overall feel for the actual venues themselves and judging by the client’s reaction it seems to achieve this. Thankfully!

On the face of it there doesn’t seem to be much to this design. It’s clean and simple but hopefully has that initial wow factor when first launched. The client originally wanted a splash screen that more-or-less did nothing but display the brand. As I normally hate splash screens I decided to try and encorporate a functional one instead. The Chain initially has 2 branches but they plan of several more over the coming months. I thought I’d use the spash screen to convey this. Each new addition gets a new box…if you will.

Technically it’s a different story. There are a couple of ‘holy grails’ of web design used here.

The first is the use of transparent PNGs. While they work fine in modern browesers like Firefox, Safari, and Internet Explorer 7+, they don’t work in IE6…..what’s new! So, I used the excellent iepngfix solution from Twin Helix .

I had to disable the rollovers in the menu for IE6 as it still has problems rendering transparent background PNGs that have a href applied. I simply used a conditional style sheet to cover this. However, it wasn’t all plain sailing!

The second ‘holy grail’ and one that I’ve been trying to find a decent solution to for a while, is the use of background images that both scale AND keep their aspect ratio (i.e. don’t distort). I also wanted to use different background images on each section of the site. After long hours of trolling various solutions the only one I found to work was to use the img#background css technique. Basically, you add an img tag like so:

<img id=”background” src=”yourimage.jpg” alt=”Background-image” />

right after your body tag, then you use css to give it its attributes using some of the following:

img#background {
height: auto;
width: 100%;
z-index: -1;
position:absolute;
color: black;
}

you also need to apply the following to the body tag:

body {
background-color: #000;
margin: 0px;
padding: 0px;
height: 100%;
border-top: 1px transparent solid;
margin-top: -1px;
}

and finally set your html to allow scrolling:

html {
height: 100%;
overflow:auto;
}

Why not apply overflow to the body you may ask? There is some tweaking to do in relation to the scrolling and using ‘position’ in the css for IE6 with overflow set on the body tag only on or two DIVs on the page would actually scroll! This is primarily because of the use of iepngfix.js. These two ‘effects’ don’t get on! The site went live today but there are still some tweaks to be made. Like fixing the background do it doesn’t scroll

Anyway, if you have any comment or suggestions please use comments below or email me.

Cheers!

This entry was posted on Thursday, May 7th, 2009 at 9:05 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.