How To Write a Web Application – Part 1

A First Look at Look and Feel

It is time to write a new web application. I developed an application for my own use 2 years ago and now I am coding it up to offer to others in the same situation. It is basically a book-keeping application specifically tailored to the needs of consultants. Given that I am staring at a blank screen, what are the steps I am planning to take to get this application up and running?

web 2.0 template from template worldFirstly, and very importantly, I recognise that I am web developer and not a graphic designer.

I want my new application to have a web 2.0 look and feel, but I don’t have the skills to achieve that on my own.

The first thing I do therefore is look around on the web for a free web 2.0 template. I look for a free one, because right now I don’t know enough about how the application will pan out to get involved with specifying what I want to a third party. I don’t really know what I want in any great detail.

If I get the application up an running, and if it starts to earn revenue, and when I learn what my design’s shortcomings are, then I would get the interface professionally re-designed.

But in the first instance I spent an hour looking around on the web and found some nice free web 2.0 templates at Template World.

I selected the one liked the best (see image above) and downloaded it, but when I had a look at the CSS and the way it had been put together on the page, I felt I could not use it. After all, it is free and only comes with the home page, so I would have to design some other versions of the page anyway. The colours are not the ones I want to use, plus, I think some of the layout is awkward. But the ‘worst’ part is that inside the template, the CSS and HTML are a little messy. I felt I could achieve a simpler CSS file with less code, and remove anything likely to cause major cross-browser complications along the way.

The original CSS also made ample use of absolute positioning which I prefer to avoid where possible. The main problem though was that it was clearly a mature CSS file – so it is hard to pick it up and run with it. When creating a new web site, you need to separate out the basic layout CSS from the decorative CSS, and in this file, it was all mixed in together as you would expect with various layout dependent modifications appearing all over the place.

At this point, I decided that I’d use the template for inspiration only. I figured I could just look at the the graphics and somehow come up with my own version, (simplified where necessary) by fiddling around in Photoshop for a couple of days.