Making a New Website

Saturday, 10 August 2002

Pain is not something that you need to experience twice. When I decided to start publishing these articles on the web, I knew that I had to create another web site, separate from Intersect. Intersect, as it is today, was built in Autumn 2000. It took me god knows how many hours to get the HTML pages looking just right, find out what parts of the CSS standards were actually supported by current browsers and try to make sure that the HTML worked fine on both the major browsers. I can only apologise that I have not tried it out on Opera yet. Here's an excerpt from my comment that appeared when I first uploaded the Intersect web site:

I've had it up to here with HTML. You know, it's great if you want to play around with a bit of text here and an image there. If you're not too worried about how it looks, then there's no problem...

I remember how painful the experience was. I wanted to create something which was nice to look at and clean; the design was thrashed out on paper and was refined gradually using Evrsoft 1st Page 2000. I was pleased with the results, but there are some drawbacks to the site.

Lessons Learned

From a user perspective, it is not as intuitive as I thought. I had the idea of categorizing all of the data of the site, making it easy to find something you wanted to find. If you were just there to pick up the changes, then the New Additions page could point you in the right direction. This was wrong. Hardly anyone wants to just browse the web site looking for specific information - they come for the updates. You look at any half-decent web site out there, and the home page will show you updates straight away. Furthermore, the link to New Additions and Tokyo Threads (the pictures page) were just as big as the links to Who I Am and About This Site, which are one-time links no-one ever returns to. Combine this with the fact that the new pictures were mixed into old picture pages, with the newest appearing at the bottom... well, the site is just plain backward.

From a maintenance perspective, the site is a headache.

Firstly, I had originally used software that came with my camera which had no batch processing option - it would take me several minutes to create a thumbnail and full size copy for each picture. I now use commercial software called ThumbsPlus and image generation has become effortless; I simply select the photos I want to process then use a custom operation from the context-sensitive menu, which generates a thumbnail copy and full size copy of every picture.

Secondly, creating the web pages themselves is torture of the highest order. Even though there was a routine to the job, it took a long time to generate an individual photo page, then followed by creating the index page, then updating the New Additions page... this is why updates have always been infrequent. I'm not learning anything anymore and it's not as if I'm inundated with hits on the site. There is no motivation to put myself through the wringer for every update.

I had wanted to automate the web page generation and I had thought about writing a small VB tool. However, I wanted it to be flexible and the idea got out of hand. I still have the designs on my hard drive but they have gone no further than that. I looked at some web site managers - in particular, City Desk caught my eye. It looked good, but was too focused on publishing articles. It really didn't help me out managing pictures and thumbnails. I put it to one side and continued to do the web site the hard way, an excellent way to encourage Repetitive Strain Injury.

Shaping Expectations

If we come back to the last few weeks, I needed to plan Wander. I knew the site would be article-based and was likely to fit City Desk just perfectly. Further, City Desk had been updated - bugs fixed and features improved. City Desk is very attractive because it is cheap (free for a small web site), clean and easy to pick up. Let me clarify a little more.

I tend to think that in software, designers have 100 points to allocate to the flexibility and ease-of-use. If you put 100 points into your flexibility category, it's software that can do anything, but no-one can use it. Put 100 points into your ease-of-use category, it's software that anyone can use, but only performs one specific function. Compare Microsoft Word with Windows Notepad; Word is extremely flexible and essential for many documents but it's a little frightening to the simplicity of Notepad. It's a difficult game to play, allocating those points carefully. The more points to put into flexibility, the longer a user can take to get a handle on it. City Desk has more emphasis on ease-of-use; the downside is that your web site must fit the City Desk model.

If a piece of software is reliable and smart, it's probably a good idea to modify your expectations to match the software. I've seen so many cases where software just doesn't do everything and the resulting customizations create disaster. The software wasn't permitted to do what it did well and that was a mistake. I wanted life as easy as possible, so I deliberately built Wander to fit City Desk. I should use the tools in front of me, not keep on complaining that I don't have the right tools.

After spending some effort becoming familiar with City Desk, I was ready to design the web site. I had a simple idea, just a contents page with recent articles and a picture beside it. The articles were going to be very clean pages with just a header and small graphic; a main archive would enable access to all of the articles. As per usual, I designed iteratively on paper. Took me three designs, written in quick succession, to get all of the features captured correctly and working together. I then got to work on City Desk and began to create design number four.

It doesn't matter how long you spend designing something, you won't get everything. It's best not to over-design - you can end up painting yourself into a corner and, besides, after testing and refinement the final product may not bear much resemblance to the design. As I built the site, things occurred to me which I hadn't noticed before. I had overly streamlined the site design - there were no buttons for going back to the home page or sending a mail. Further, the archive could turn into a massive page, so it was better to offer sub-archives to make it easier to find an article. There were other minor changes too, but nothing worth writing home about.

[City Desk screenshot]

The site, as it is laid out in City Desk, is shown above. Life inside City Desk is very convenient. To make a new article, I just tap the New Article button, put it in the correct folder, type in the title, date and article itself and that's that. All I have to do is hit the Publish button and it will FTP only those files which have changed to my web site.

Graphics

I only wanted three graphical entities. The main Wander logo, the home icon and the mail icon. I knew what picture I wanted to use for the site logo, to give an impression of a journey; it was just a question of how to turn it into the ellipse shape I wanted, and lay on some nice looking text. As for the icons, I wasn't really in the mood for scanning the web for free graphics but I had no ideas initially.

I had recently installed Mandrake Linux and read in my reference manual accompanying the distribution that the free graphical tool known as The GIMP was installed. It appeared to be a strong product and I was eager to give it a try.

If I ignore the problems involved with installing Linux, just learning The GIMP itself took me longer than building the web site. I used X Windows systems when I was doing research at university, so I'm not convinced that Linux unfamiliarity was the cause of my problems. First, the online help had no apparent search function, neither was it easy to navigate; when I did find what I was looking for, it was usually explained in such a way that was only helpful if you understood it in the first place. I was clicking endlessly trying to work it out, unsure of the effects of each option. Undo wasn't the cure-all I expected, and sometimes gave me back a screwed-up image; I was resigned to close the application and re-open again to avoid these problems.

[Snapshot of The GIMP]

Eventually, I got what I wanted out of it. I wouldn't say I understand The GIMP completely, neither is it totally friendly, but it is powerful. It was that suggestion of power that kept me coming back for more and I'm glad I persisted, although I'm not sure if anyone else would have. With the ability to layer images, generate all sorts of picture transformations, it's not bad for a free piece of software. By the way, I settled on hand-drawn wireframe home and mail icons, given a little extra glow by The GIMP.

My other problem was the site name. I couldn't decide what to call it. Even now, I am unhappy with Wander and might change it. Luckily, I've got a variable in City Desk called SiteName which is used throughout the site wherever I use the word "Wander", and the fantastic layering function of The GIMP means I can easily change the text overlaying the transformed photo. Phew.

Outcome

After publishing, I was so happy that the web site was in place. In general, it hadn't taken as long as I might feared. I also know that the web site is very easy to update, which means there is nothing to stop me adding new pages except possibly my own laziness.

However, I was annoyed to find out that Netscape Navigator 4 couldn't show the site properly. Exactly the same problem I had encountered with Intersect. I'm not using difficult HTML or anything like that, certainly no new constructions. It's frustrating to build something simple to find that it can't be rendered properly. It seems one of my fundamental problems, the vague HTML target, is still a problem. I'm hoping no-one uses N.N. now, considering it's quite old. I might make some updates later if I think it can be fixed easily, but I'm not going to break my back over it this time.

The exercise has been quite successful and interesting. I know City Desk so well now and the web site is pathetically easy to update. However, there is a terrible downside to all this. I have started considering building an improved version of Intersect on City Desk. I've already started my three-design marathon... watch this space.

[Intersect II Plan]
End