Finally, ‘the front page’ is ticked off my to-do list!

As all those working within a small company will know, everyone needs to be able to do several jobs or nothing will get done. My role began as making a basic website, catalogue and other things of this nature when I first started, all those years ago, but I was also expected to maintain the IT systems, produce all of the certificates for the services we provide, answer the phones and deal with the resulting queries. This role has since developed to include all the Health & Safety, Quality, IT Development and provide assistance to the operations and sales staff. As a result I always have a ‘to-do’ list that is so long it resembles an American’s shopping list. Slowly rising to the top of my list over the last few weeks has been the need to do re-design the front page of the website, so it wasn’t so annoying and looked a little more like a professional site. This would have been done a long time ago, but no one can decide on the marketing angle to take and I have been far too busy doing the ‘required-by-law’ jobs to dedicate any time to coding things. But at long last I have got to a point where I could make a start…

Beginning promptly at 13:43 on Monday afternoon I decided that I would start by defining the problem. What we need is an interactive front page, that is visually impacting and doesn’t require the client to scroll, but still allows them to see an overview of our key services. After searching for some inspiration it was clear that we needed an interactive menu that changed the main image as clients clicked through the options, examples of this where plentiful, but I don’t know how to code in any web technologies except (x)HTML and CSS, this was going to be difficult.

After a few hours of searching around I found an amazing tutorial by Soh Tanaka on Design M.ag called “Create an Image Rotator“. If you follow the link you’ll see a nice simple tutorial on making a great looking ‘menu’ that not only instantly changes the main image but does so with a fair bit of style and can accommodate a descriptive box so you can give a teaser before the visitor clicks on for more information.

Using this as a foundation I began to design a similar style dynamic menu, but I wanted the ‘tabs’ to sit on top of the image so that I could have multiple layers and give the site more depth. This began by me copying the articles working code on Monday afternoon, breaking it on Monday night, fixing it Tuesday morning, breaking it again shortly after and then finally getting the code how I wanted it and working correctly just a few hours ago (Tuesday night). The problem now is that I need to style the damn thing, because it looks crap at the moment!

Any suggestions and feedback in general is more than welcome. The live version can be found here: www.envogen.co.uk.

Please make sure you all check out Soh Tanaka’s personal blog over at www.sohtanaka.com, he’s been a massive help!