designOkay folks, here’s your chance to affect the redesign of my business web site!  I’ve been working on a possible design choice for the web site, which is in need of a bit of TLC.  I would really appreciate your comments on this design, so please do let me know what you think of it, positive or negative.

Part of the motivation for doing this was actually one of my own blog posts, where I reported on how so many web sites were not adequately accessible, and my own business web site fell quite solidly into that category.  The current design uses a fixed background to form the outline of the page, and while it looks fairly tasty it does not take well to being resized – scale the text size and everything goes to pot.  The page does actually conform to HTML and CSS standards, but I have to admit it’s not the best implementation ever!

This new design should be completely flexible, both in terms of text size and width – even on a huge screen it should fill the browser window completely and still look good, and by the same token it should squeeze itself happily into a miniature 800×600 desktop too, possibly less.  The two keys to making this happen are 1) CCS, and 2) the use of transparent PNG images.

By using this JavaScript code, IE6 and below can be fixed so that they display PNG files correctly and handle CSS properly, which gives me a lot more scope for design flexibility.  It’s hard to describe in words, but once the page is actually designed you’ll be able to see what I mean.  For a similar technique, check out the Orchard Baptist Church web site and play around with the width of the browser – you should see the white logo move seamlessly in front of the background image, and even the semi-transparent reflections will work properly (even on IE6).  That’s the same principle I shall be using here, moving the design concept away from boxes and giving things more attractive overlaps, shadows and semi-transparency.

Anyway, do let me know what you think of this initial design.  It’s still in its early stages of design, so there is plenty of room for improvement, so if you think something could be done better then do leave a comment.

Categories: Technology


Safalra · 7 December 2006 at 8:13 pm

Generally I prefer the new design to the old one (which felt a bit ‘bloggy’), and it’s good that it’s now resizeable (although it was the fixed height of the old one that bothered me more than than its fixed width), but there are two things that I think could be improved: the menu box looks rather plain (and perhaps a little too bright), and the font size in the footer is tiny (I presume you’ll use relative units to allow the fonts to be resized, but the difference between the size of the body text and footer text seems too great). » Blog Archive » · 13 December 2006 at 12:27 pm

[…] December 13th, 2006 Some of you might remember I put up a preview of a design I was working on for my business web site a few days ago.  When I looked at it again this morning I thought to myself “that looks scarily like a Powerpoint theme from the Windows 3.1 era!!”  I think it was the vector hills I used and the colour scheme.  So here is something completely different (well, mostly), which I’m a little more pleased with.  This sample is not 100% accurate to the final design, but it’s close enough for you to get a feel for it. This too will be as flexible as possible, within certain degrees of flexibility at least.  The main feature of this is the use of transparent PNG images, thanks to the JavaScript IE7 code I mentioned before, allowing IE6 and below to behave themselves (and means less time spent fixing problems caused when IE displays things incorrectly).  For instance, the ‘m’ logo top left will float on top of the background, as will the ‘Matthew Dawkins’ text.  The main body of the site (where the text will be) will have a very faint version of the image behind, fading out into just blue (this will be done just with a normal JPG background though), and the menu on the left will fade out top and bottom to show the background through.  The popup menu (all done in CSS, btw) will use a transparent PNG for a background, giving a subtle transparency and a shadow underneath too.  I also have plans for a ’special offer’ box that will float on the right hand side, which will have some sort of logo with nice smooth edges (making use of the PNG alpha channel again). […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.