To David's page

The easy DIY guide to web design

Before anything else you need the basic capability to make webpages. You can:

(a).  Learn HTML. (Takes a while).
(b).  Get a what-you-see-is-what-you-get webpage editor like Macromedia DreamWeaver or similar. (Costs money).
(c).  Settle for the entirely functional what-you-see-is- what-you-get webpage editor Netscape Composer, that comes with Netscape Communicator -- available free over the Web or on virtually all of the free CDs that come with internet magazines.

You also need a graphics package like Paint Shop Pro.

If you have an old web browser and can't see the even-numbered points below, read this footnote.

So, you're all set to make a lovely set of webpages.
It's at this point that a lot of people accidentally make the wrong turn of making a horrible set of webpages instead. Avoid that by following these simple tips.

Under no circumstances have text that goes from the left hand edge of the screen across to the right hand edge of the screen. That is the classic sign of a horrible webpage. The human eye hates running along those long lines. That's why newspapers come in columns. In order to have shorter text lines and a nice layout, put all (or most) of your webpage within a table. [In HTML it's the <table> tag. In visual editors pick 'Insert' --> 'Table'].

Obviously having everything in a grid on the screen would be horrible -- when you're happy with the layout, you make the table invisible (border = 0).

For example, the layout of this page is based on one table which houses all of the numbered points, and then within that, for each point, there's another table which has the number-on-a-flower graphic in the left hand column, then a blank column, then the text column. Look, here it is with the grids showing:

You get the hang of this once you've had a go.

Don't go mad with colours. That sounds a bit boring... but a mass of colours just looks horrible. What you really need is to select a small number of complementary colours and use those.

On this site, for example, things are predominantly grey and red on a white background. The flowers add a dash of colour -- but even with these, the colours are carefully chosen to complement everything else (and each other).

At, the combination is light purple, a light blue for borders and a darker blue for text, white backgrounds again, and the odd dash of red.

I'm not recommending these specific combinations -- I'm just pointing out that colour schemes exist, even if you're not very aware of them.

Colour schemes like these run throughout a site, giving it a visual consistency. It's part of the visual identity, letting visitors know they're on a particular site. An [external] site you can use to see which colours go nicely together is the Color Laboratory. (If you go there, click 'lab help' for an explanation).

Having other repeating elements -- such as the same logo at the top of each page -- also contributes to the visual identity of the site. That's what you got the graphics package for.

Don't do anything very very big. In general, if things are smallish they look more stylish, whereas huge things have a tendency to look dumb. (There are always exceptions, of course -- for example, large Courier [typewriter-style] fonts can look cool).

One theory is that this is because we associate big text with children's books. Anyway, there's certainly been a trend recently to make everything look more compact.

Avoid using lots of tiny text that is too small to read, of course.

Be aware that your webpages will look different on different people's computer (or Web TV) screens.

You might have an amusing 'Haunted House' font on your computer, but there is no point specifying 'Haunted House' as the font you want text to appear in on your webpage, because most people won't have that font installed.

You have to give a list of fonts, in order to cover as many bases as possible. For example the tags around the text you're reading at the moment say:
<font face="Arial, Helvetica, sans-serif">
which has the result that PC users see it in Arial (almost all PCs have Arial installed), whilst Apple users who don't have Arial see it in the similar, and similarly ubiquitous, Helvetica. And for in case the visitor doesn't have Arial or Helvetica, we also list 'sans-serif' in the hope of getting something similar.

For this kind of font:
<font face="Times New Roman, Times, serif">

For this kind of font:
<font face="Courier New, Courier, mono">

The fact that your webpages will look different on other people's screens has further implications. The text won't be laid out on screen in exactly the same way -- so if you used manual line breaks (<br>) to arrange the text nicely on your own screen, it could look really jumbled on someone else's.

The least you can do is view your pages on different browsers with different screen resolutions or window sizes and see if anything awful happens.

What about Cascading Style Sheets?

You may have heard of 'Cascading Style Sheets' (CSS), which are meant to be a super thing for web designers. They allow you to establish a global 'style sheet' which all your web pages then refer to. The style sheet tells the pages how you want to present the main titles, the subtitles, the main text, and so on.

Alas, Netscape and Microsoft implemented this idea in different ways, which means that your CSS won't work quite right for Netscape viewers if you do it the Microsoft way, and vice versa. Plus there will be some other people with older browsers for whom it won't work at all. You can make different versions of your site for different browsers, but if you have that much time on your hands you should donate it to charity or something.

I think you might as well specify how you want text to look just by applying it directly to the text. The only really 'different' thing CSS can do is to let you have links that aren't underlined. But the underline is a useful device to indicate a link. Hey, I even put underlines on text-within-graphics to show when it's a link.

One day nearly everybody will be using browsers that interpret Cascading Style Sheets the same way, and then they will be worth using, but until then I reckon it's cooler not to worry about them.

At least graphics always look the same (more or less), and so you do finally get the chance to use your funny 'Haunted House' font by producing the text as a graphic, in your graphics package, and saving it as a GIF (for logos and stuff) or JPEG (also called JPG; for more photographic images). You then insert this into your webpage.

Most of the headings on most webpages are graphics, even if they just look like text. Web designers prefer to have headings done as graphics because it's the only way you can determine exactly what they will look like.

Yahoo!'s home page is designed to load extremely quickly, so the only text that is a graphic here is the red logo at the top.

Whereas at MTV Online, where style is more important, not only is the MTV logo (obviously) a graphic, but every bit of text that appears on the screen is actually a graphics file, except for the longer descriptive text below the (graphic) headlines.

Keep things crisp and clear.

Some webpages have horrible backgrounds which mean that it isn't so easy to read the text. Why? Avoid that madness.

Make sure it is clear how the visitor can navigate around the site and get to the different pages.

And make sure the title of each page is different and informative. This is particularly helpful for when people are bookmarking your pages... and when a search engine lists the page by title.

It's not exactly a design issue -- or else it's the ultimate design issue that you should have thought about before you did anything else -- but your site needs to be about something if it is going to get anywhere in the world.

Unless you are excitingly famous already, producing a website about yourself isn't going to make you excitingly famous. So make your website about something instead. This will help a lot when we get to the marketing.

Ultimately, of course, you have to hone your skills by trial and error. You can also learn a lot just by looking at other websites. And go for a wander around Webpages That Suck regularly. Hurray.


Once you've mastered all that, consult the guide to
Marketing your website.

You can also read the guide to harmonious web design, Internet Feng Shui.

Back to main page



Footnote about old browser displaying this page wrongly:

I have been told by a couple of people who are still using Netscape 3 that it has a bug in it which means that this page won't display properly. This was particularly frustrating since I've deliberately kept the page simple anyway, using invisible tables for layout. I tried to make an alternative, even simpler page, just for those visitors, but it became too much trouble, especially for making amendments. Instead I have decided to advise people who are still using Netscape 3 to get a newer browser. They're free! And you must be missing out on loads of stuff on the web, if you haven't got a newer browser than that. I don't want to be prescriptive about which browser you use, but download any type of newer browser, for free, from Netscape or Microsoft or Opera, and we'll all be happier.

Return to the top of this page.

Back to main page