Hi all

 

I've just been working on one of my latest web site projects, and have got a working HTML template done for browser compatibility testing purposes. So I thought, since it's online (in an out-of-the-way location), I might as well post a link to it here and invite your feedback.

 

http://www.matthewdawkins.co.uk/dev/cacukrc/template.html

 

The site is for a young church just outside London, who wanted something bright and modern, but on a very tight budget. I'll be using WordPress as a CMS, using this template. I'm quite pleased with the menu layout, which is simple but effective. Do you think the waving hands pic in the header works?

Hi all

 

I've just been working on one of my latest web site projects, and have got a working HTML template done for browser compatibility testing purposes. So I thought, since it's online (in an out-of-the-way location), I might as well post a link to it here and invite your feedback.

 

http://www.matthewdawkins.co.uk/dev/cacukrc/template.html

 

The site is for a young church just outside London, who wanted something bright and modern, but on a very tight budget. I'll be using WordPress as a CMS, using this template. I'm quite pleased with the menu layout, which is simple but effective. Do you think the waving hands pic in the header works?

 

 

hmmmm, I couldn't get any of the links to work

 

Nice layout though.

 

Will

No, none of the links work, it's a static template not a complete site.

No, none of the links work, it's a static template not a complete site.

 

 

OOooo right, Sorry

 

Nice website though

 

I like it, although I think that image on the left - you'll nee dpermission for? And it looks a lot like one I took once...

Actually the image is from a free stock photo web site, so no issues there. According to the license agreement I can use the image freely on a web site without needing to contact the author. It would only be an issue if I was selling the template on, which I'm not.

Ah okay fair enough

Great example of a liquid layout site top stuff!

Nice template, I like it.

Just a question... how did you get the image of the people waving their hands to scale with the page like that?

Works great in firefox... IE6 not so much. I would assume since its a church site, a lot of the people going there won't have the latest browser... most likely IE6 for a large chunk of them at least

 

saved as a png8 so images will be pixelated from compression but the size of the logo in the top left is exactly how it shows on my screen.

Hmm, that's interesting. I had tested on IE6 and didn't get those results. I'll have to do some further investigation and see if I can recreate what you've shown there, so I can correct it. Very odd indeed. Thanks for letting me know!!

Nice template, I like it.

Just a question... how did you get the image of the people waving their hands to scale with the page like that?

 

Actually there's no scaling going on at all, it's just one image moving over the top of another. There's the background image, which is a gradient fill from blue to white, which goes across the entire width of the page, and then there's the picture of the crowd which has exactly the same height and uses the same blue-to-white background, aligned right. So the image sits on top of the background but the edges aren't obvious, and when you change the browser size it slides seamlessly across the background.

 

And to add a little more sparkle, the header logo is a transparent PNG image, sitting on top of both the background and the crowd, so if you scale the browser down far enough it'll all overlap beautifully. At least, I think it will, I think I may have put in a min-width there somewhere so that the menu didn't wrap round or get lost, so you may not actually be able to reduce the width far enough to see that effect. But if you could, it would look nice! min-width doesn't work in IE6 anyway, so with the javascript taking care of the PNG image technically you could still resize it down far enough to see it all working.

 

This all just illustrates why I use Illustrator to create my graphics rather than Photoshop - I export individual elements according to what I'm doing with the HTML, rather than just slicing it up into blocks, which generally makes for a cleverer result when dealing with fluid layouts.

IEDeathMarch.org