healthy.co.nz version 2

Posted October 4th, 2009 in Case Studies

At 2am this morning we finally launched version 2 of the healthy.co.nz website. This has been a long work in the making and replaces the old website which was initially created back in 1998 using the Intershop system and later moved to the e3 system I created at Webenz.

The old website

The old website was designed back in 1998 when 800x600 screen resolutions were the norm and we still had to make sure sites would work on 640x480! It originally used the Intershop system which was marketed in New Zealand by Telecom Xtra as "Business Builder" and we then moved it to our e3 System at Webenz around 1999. There have been various minor changs over the years but nothing too significant (mainly SEO mods).

Here's a screenshot of the website as it was 24 hours ago using the old design. The design was fixed width, left-aligned and used a table based layout. There was very little CSS used in the site so it was still full of <font> tags and the like.

The new website

The old website used PHP and MySQL (using the e3 e-Commerce System I created at Webenz) and the new one still uses PHP and MySQL and also some useful stuff with jQuery including Ajax requests for adding stuff to the shopping basket, and the Facebox and Superfish plugins. The database structure has been modified somewhat and we've moved from a login name / password combination to email address / password for logging in.

Here's a screenshot of the new website. It uses a fluid CSS based layout with a minimum width of 960px. It uses a table workaround with IE6 to ensure minimum widths work in that browser for the approximately 12% of visitors to healthy.co.nz that currently still use that browser.

The are three main columns - 2 190px fixed width columns on the left and right, and a central column that resizes with the browser. On various pages the central column is also split into half and half or two thirds and one third. With a little CSS trickery the left and right columns appear in the source below the central content column (done without absolute positioning).

The design of the new site was done by me, working from the navigational area and buttons taken from a Dream Templates PSD template, and significantly modified.

The e-commerce system that drives the site is custom built by me utilising a PHP content management framework I have created myself and use on several websites including Kidzstuff and which I will migrate this blog to at some stage.

Conclusion

I will probably follow up this post with some more looking at various aspects of the website, although I have covered some of these already at various stages during the year while we were building it. Go check out healthy.co.nz to see the new website in action.