We’ve all seen the sites that make you think “Uh oh, amateur hour”. It’s easy for beginners to make some basic mistakes that give their sites an amateurish look. So how do you avoid giving that impression with your first website? Here are 20 tips to help you.

1. Look at lots of good and bad sites. Try to list what makes them look good or bad.

2. Keep your pages simple. Look at the way good magazines layout their pages.

3. Do not use a vivid colour or frantic pattern for a background. Most people will find it hard to look at any pictures or read text if the background is too distracting.

4. If you don’t want a plain white background, make sure that your text is still readable. A dark or medium blue background with black text will make what you write illegible and nobody is interested enough to strain their eyes – there are plenty more websites out there that they can read.

5. A black background can work but you must make sure your text is white or another very light colour. It is probably best not used for pages where you are trying to give people quite a lot of information.

6. If you use a graphic for a web page background, make sure it is pale and text is readable on it. You must also check your page with different monitor resolutions because it might not work well in a different resolution to the one you use.

7. Don’t go crazy with fonts. Choose ONE easily readable font like Verdana, for example, and use it throughout the site. You could use a more decorative font for headings if you feel you absolutely must.

8. Don’t use lots of big pictures on one page. It will take longer for that page to load and people won’t wait around for slow loading pages.

9. Make sure that any pictures you do use are relevant to the subject of the page and add something to it.

10. Make sure that all pictures are reduced in file size.

11. Learn how to wrap text around pictures and other graphics, long pages with large empty areas alongside graphics just scream amateur.

12. Don’t put your text in a graphic. If you do, it will probably slow down page loading and it will also mean search engines won’t be able to read it so won’t index your page.

13. Try to avoid frames unless you have a good reason to use them and you understand them. They can sometimes hinder rather than help navigation, stop people linking to individual pages on your site and can stop search engines indexing your site.

14. Make sure your menus are consistent throughout your site and make sure that all your pages are accessible from your menu. It’s surprising how easy it is to forget to add a new page to it.

15. Don’t try innovative ideas with your menu. Stick to tried and tested ways of displaying it. If people can’t find your menu or work out how to use it, they won’t stay on your site for long.

16. Never, I repeat, never put ‘under construction’ signs on your website. Nothing screams ‘amateur hour’ louder than this. When people do this, what do they expect? Are they expecting people to come back periodically to see if it’s finished? If they are expecting that, then they are fooling themselves. Don’t do it.

17. Don’t put lots of little icons from various companies dotted around your pages unless you are getting paid to do so. Leave off things like ‘this site was designed to be viewed in Internet Explorer’. Why do you want to give free publicity to Microsoft – do you think Bill Gates can’t afford advertising? Even if you are getting paid or expect to get commission from affiliate advertising, make sure the ads look good on the page and aren’t annoying. Some flashing ads can actually send people off a site in double quick time no matter how fascinating the content.

18. Don’t use a web counter, they really don’t give you any useful information and experienced web users know that. Instead use something like sitemeter.com which has a free package giving you useful information about your visitors like their location, the referring website, top entry and exit pages, etc. Although you have to display a small sitemeter graphic if you use their free package, you can choose a very small one that doesn’t display the numbers if you don’t want visitors to see them.

19. Check and double check your text. Poor spelling and punctuation look bad and, in the worst cases, make an article hard to understand. Remember the best selling book, ‘Eats Shoots and Leaves’. The title comes from a story about a panda that eats shoots and leaves but a wrongly placed comma changes the sense, ie ‘the panda eats, shoots and leaves’. You should know the difference between it’s and its, their and there and that separate is not spelled seperate – a misspelling I see all over the web. Also, please don’t go mad using exclamations marks – one occasionally is OK, if you must, but not at the end of every other sentence and certainly not several at the end of any sentence.

20. Don’t expect a website about you, your family and pets to become a cult attraction. Only your friends and family will want to visit it and maybe not all of them. If you want to do a website, choose a subject that is likely to interest a variety of people even if it’s a minority interest like bungee jumping, camel racing or tiddlywinks then make it the best website on the subject that you possibly can.

Adding pictures and other graphics can lift your pages, add colour and life as well as make them easier to read. They can give novices to building webpages a real headache, though. Here is a simple guide.

The very first step to adding pictures is to make them the correct size for the space on your webpage. This means don’t just click on the picture in your html editor and push it to the right size because doing that doesn’t reduce the file size. If you do that and have a jpg that is 2mb, for example, even though the picture looks smaller, the file size will still be 2mb.

Use a picture editor to reduce the size of the picture which will reduce the file size too. The free Google graphics management program Picasa has a really easy way of reducing the size of pictures and other graphics. Large files take a long time to download when a page opens and people won’t usually hang around and wait for it to happen so it’s really important.

If you want text to flow alongside the picture, this is the code to align right for example:

<img src=”../graphics/blackpool_tower.jpg” width=”250″ height=”314″ alt=”Blackpool Tower and beach, Blackpool, Lancashire” hspace=”10″ vspace=”10″ align=”right”>.

I’ll unpack this tag:

img src=”../graphics/blackpool_tower.jpg” – this says where the picture can be found on the server, it’s in a folder called graphics and the name of the picture file is blackpool_tower.jpg.

width=”250″ height=”314″ – this shows the size and, most important, the picture has been changed to this size before uploading on to the server. While on the subject of picture file sizes, you usually don’t need more than 72 resolution for pictures online and this helps to keep the file size down.

alt=”Blackpool Tower and beach, Blackpool, Lancashire” – this is what people will read if they browse with graphics turned off so they don’t see the picture. They will know what the picture showed. It is also a useful way getting more keywords on to your pages naturally for search engines.

hspace=”10″ vspace=”10″ – this put a 10 pixel space horizontally (hspace) and vertically (vspace) around the picture so text doesn’t go right up to the edge.

align=”right” – unsurprisingly this aligns the picture right. You can have align=”left” instead, if that suits your page better. When you do either of these, the text will display alongside the picture.

Don’t forget that even if you are using an html editor, you can always change the code yourself. For example, you could copy and paste the tag above and substitute your own folder and picture file name. You could change the hspace and vspace to another number and align left. You would, of course, change the alt to your own picture title.

Trying this kind of thing in your code will help you understand more about using html and what happens when you make changes. Even making mistakes can be helpful as long as you eventually understand what the mistake was and what effect it had.