Our new website was finally unveiled on Friday the 13th, yes the 13th of June! It's taken quite a long time to complete, partly because during that time I've had to work on other projects, and partly because the content has had a complete overhaul. If you're bored and want to kill 10 minutes, here are my thoughts, reasonings and general ramblings about the redesign.

Design

I've tried to keep the design reasonably simple, but giving it fresh, modern edge. The colour scheme is a variation of the old one - keeping the red, but changing the black to a more subtle grey, along with accents of turquoise to highlight certain areas.

24-bit pngs with alpha transparency have been used to give a layered effect within certain areas such as the Morpheus logo and the polaroid photo style image in the grey banner. Alpha transparent pngs are not supported in anything less than IE7 (surprise, surprise), so I've used a script called IEPNGFix which makes use of an IE only filter, meaning PNGs are correctly rendered with full alpha transparency in both IE5.5 and IE6.

Layout

The layout is fixed width for minimum screen resolution of 1024 x 768. It may seem a bit prejudiced towards 800x600 screen users, but I think for the purpose of this website, and our target audience, we can get away with it. And if the BBC can do it... ;-)

Whereas most of the site is just a one or two column layout, the home page is 3 column. I wanted to take key information from different areas of the site and display it in a condensed but easily readable format on the home page, and I think the 3 column layout allows this.

Structure & Accessibility

HTML & CSS: The site is CSS based, using semantic mark-up to structure the content, this will allow for better search engine optimisation and of course, not forgetting accessibility and usability benefits. Both HTML and CSS have passed validation through the W3C validation service (CSS is valid CSS 2.1 and HTML is valid XHTML 1.0 Transitional).

Text Resizing: Font sizes (and certain elements where necessary) are based in ems to allow for easy text resizing across all browsers.

Unobtrusive Javascript: I've tried to make the use of any Javascript more of an enhancement to the design, and not an alternative. This means that if any users don't have Javascript enabled, then this content is still accessible to them.

Accessible Flash content using swfobject: this is a Javascript Flash Player detection and embed script. Using this method to embed Flash files overcomes issues which can't be solved by HTML markup alone. For example:

• Accessibility - it allows you to define alternative HTML content for screen readers and anyone without the Flash player.
• Overcomes problems older/IE browsers have with the 'object' tag
• Overcomes the problem of seeing the ‘click to activate content’ mechanism seen in IE.

Features and Functionality

RSS feed — this is used to display our latest blog entries on the home page. Making use of the many widgets and widely available on the web I opted for Feed2JS. This is a free web based news aggregator that allows you to display and customise a news feed of your choice on your site. It uses pre-defined HTML which can easily be customised using CSS to ensure it integrates seamlessly into your site.

Simply format your display options on the Feed2JS site, which in turn generates some script for you to paste into your site, then style as you wish!

There were a couple of close contenders: Newsgator Headlines and Feedsweep. Both very good, but Feed2JS was more customisable and I liked the fact it used an unordered list as the HTML structure for the feed.

Modal Pop-Ups — another great widget I came across was Thickbox, a Javascript modal pop-up:

"ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal."

I've used this in several areas of the site:

• Case study screen shots
• Free half day mentoring workshop form. Clicking the link that says 'Contact us now to take advantage of our free half day workshop.' opens up a form in an iframe to sign up to the workshop.

The look is customisable, allowing you to change styles through the CSS, and what's more the content is still accessible to those who don't have Javascript. I think it's a great tool, which the developer has put an awful lot of time and effort into writing, and even better, he's made it available for people to use freely.

To find out more about Thickbox visit http://jquery.com/demo/thickbox/.

Forms — the enquiry forms on the contact us and consultancy and mentoring pages were written in EGL. Now, as I had nothing to do with these apart from their design - I've asked my colleague Alex, to give a bit of an explanation:

"EGL is a new language from IBM specifically designed to be able to adapt and cater for new environments as well as being fully capable of supporting all the current platforms. Its aim is to reduce the reliance on a multitude of languages, skills and processes to encapsulate all your needs into one language.

Overall it will make things simpler and easier for people to work with and administer.

Since we work with EGL to create some of our client solutions, we created the contact form using this technology to show its versatility and give an example of what can be achieved.

Obviously this is only a small scale solution but it is easily scalable and since it creates Java classes on compilation it runs with high availability and speed across all platforms."

So there you have it, our new website. It's not often you get to design a site without the constraints of some kind of framework, and to be able to use more varied and advanced CSS/design techniques which may not be practical or even desirable on the usual customer related projects. And I've enjoyed it. Next step, redesigning the blog!