About the design of this website
I've been getting emails from people asking how to design websites and how I design this one, so I've compiled this page of frequently asked questions.
How do you design your website?
I design the site using an early freeware version of Homesite, which is basically a text editor. I type the words in that I want to appear on the page, and I type in markup codes to tell it what I want it to look like. It's quite a time-consuming way of developing websites (at first), but it does give you a lot more control and leads to websites that download more quickly. You can also be more creative with your designs when you start from scratch. Click here to search the web for the freeware version of Homesite.
I manage the content of my blog and update it using Google's free Blogger service.
What design techniques are you using?
I'm using server-side includes (SSI) on this site to enable me to change the navbar easily across the whole site, and to enable me to run the same navbar and adverts across similar pages. For example, I only need to change one file to have the same advert ripple across nearly every page on the site.
I'm using cascading style sheets to control the layout, so that I can change the layout of different page sections on the whole site by altering just the stylesheet file. It also makes the site faster to download and more accessible.
I also find these webmaster tools useful for checking expired links, checking for any errors and so on.
How do you create the graphics?
The Seti@home and Virtual a&r cartoons were drawn on paper with an ink pen and coloured pencils and then scanned in. I do a lot of image conversion and resizing using the excellent freeware image browser and converter Irfanview.
The first incarnation of the website used a font that looked like letters cut from a newspaper which I created with Paint. It was removed because it became a bit of a cliche on websites, and because it imposed a download burden that wasn't justified by the benefit of having the text look a bit different, as my design priorities changed.
How long did your website take to develop?
This is hard to answer because I've been working on it off and on for several years. It went live in January 1997 and it's been online since (at a different address until I started using this domain name). The site has had several major phases of design over that time.
Here's what my oldest saved version looks like. It's dated 1998 but probably stems from 1997:
Why all the changes?
- The background colour changed randomly: this was confusing and was soon replaced with the same background colour on every page in the site so people could easily tell when they had left my site. There wasn't enough of a hook in the design to carry that kind of dynamic change without confusion.
- The panel on the left contained random messages, scrollers and greetings. This made the site look like it changed each time you visited, but had a penalty in download time. This was a neat feature, but not important enough to force the download burden on people on the homepage.
- Scrapbook font: Lots of people had the same idea as me and this soon became a cliche. Again, it made the site slower to download headlines.
- Form field pop-up: This is a creative abuse of technology. When you clicked on the form, it opened up with a long message you could scroll up and down. But it put a barrier between people and that information: they had to click to read it, even though it had already downloaded.
- All in one: the idea here was that the homepage should all fit within one screen so there's no scrolling, but there's no real encouragement to dig further into the site with this design. Subsequent designs have struggled to balance the need to show at a glance what's on the site with the need to provide enough information to make people follow up on links. Many of the design problems I've had with this site over the years stem from the fact that it's got lots of unrelated, diverse content on it.
That first site looks pretty amateurish now, but I had to go through that design stage and the others in between to get to this design, which I'm happy with.
What are the principles behind your website design?
That first design (above) suffers from not taking a stand on the core issues of design. For example: are you in favour of an impressive site, or a fast one? Pick between a site that can do something new and unusual and one that will work with any browser? After I'd played with design for a bit, it became clear where my priorities lay so I took fewer arbitrary decisions. These are the ideas I've used to guide my design:
- It should work with any browser
- It should download quickly
- It should make sense with graphics switched off
- It should be original: I've created all the text and graphics, except for syndicated content (eg, news feeds, currency converter), adverts and product pictures. I've scaled the design with my skills, instead of using a lot of other people's content and graphics at the start to build something whizzy. When I first started using the internet, I saw the same clip art and templates everywhere and I wanted to make a statement along the lines of 'even if you think my site looks rubbish, it is at least my site'. Today, I'm happy for the site to represent me professionally but it would have been easy to take a short cut and just buy a template rather than learning the skills to make something unique.
- The website should be easily navigable: easier said than done, but I'm happy that people can find the most important stuff here quickly.
These principles will probably evolve with the technology: already broadband is making new types of content available, but it's important not to forget people in countries that don't have broadband or those using low-bandwidth devices such as PDAs.
It's also worth noting that the site has changed from being a hobby personal site to being a small business site in line with my change in work. My benchmarks for the site have changed accordingly and the site's structure and the navigation has changed to reflect its changing purpose.
Why is it purple?
The idea was to pick a colour that would contrast with most other sites I link to, so that people could see when they were on my site and when they had left it. Purple is one of my favourite colours and I created a colour scheme that meant I could still put dark text and default colour links on top of white and yellow for ease of reading. The purple has been one of the constants in the site design since 1998 and the colours still form a distinctive combination. If you'd like to have a go at creating a colour scheme for your website, try my free Rainbow colour picker program. The purple fadeout to blue was introduced to give the design a bit more charisma than a solid background without increasing the download time noticeably.
The striking colour scheme was also introduced to provide some relief to the page without using graphics: pictures take time to download, but huge coloured text boxes can be put on screen instantly, so mixing colours helps to break up the page without increasing download time. There are few pictures on this page, and the chances are that many of those were already cached if you've been on another page at this site. Few pictures are used purely to beautify the page: most pictures on this site help tell the story (eg, photos of people, places or things; charts and tables; screenshots).
Any other questions?
Anything else you'd like to ask about website design or the design of this site? Email me.