It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Site design FAQ

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 use a javascript rollover effect to change the graphic on the navbar. If you see a handwriting font on the homepage in your browser, the effect's achieved by embedding the font. It enables text to be styled without compromising on accessibility or the ability to search and spider content.

I also find these webmaster tools useful for checking expired links, checking for any errors and so on.

How do you create the graphics?

I created most of the graphics (eg, the bullets and textures) using the Macromedia web graphics program Fireworks. The South Park caricature was created at Janine Norn's website.

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:

Screenshot of Sean's homepage from 1998

Why all the changes?

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:

With the latest design of the website I've tried to make it as accessible as possible. If you've got any comments on the website's accessibility, please email your feedback.

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.

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.