Web design tips

The following tips are a guide that we follow when designing web sites. Click on the links below that take you to the different parts of this page.

Contents:

Content is king!
Style consistency
Colour and backgrounds
Images and graphics
Navigation
Compatibility issues


Finding a host

Publishing
Promoting your site
Webpage editors
Advanced issues
Final thoughts

1. Content is king!
People use the web for a variety if reasons, but the main ones are for information and entertainment. The content of your site is what can attract more people than fancy graphics and pretty colours. If you want visitors to keep coming back, then updating the content on a regular basis is a good idea.
Make sure your pages are free of spelling / grammatical errors and don't forget to make good use of punctuation. 
TOP

2. Style consistency.
Try to keep to the same theme throughout the site so that users feel accustomed to it. I've visited sites where different pages have completely different layouts / colours and they make me feel like I'm on a different site altogether. 
TOP

3. Colour and backgrounds.
Use colours that contrast or compliment each other well. Try to make them applicable to your sites' purpose. A bad example would be to make a humorous site using beige and dark brown! Bright colours would give the pages a more fun feel.
Patterned backgrounds can make the text difficult to read so if you have to use them, just have them in the navigation bar.
Choose colours from the
web friendly palette so that visitors with lower spec machines still see the right colours. TOP

4. Images and graphics.
Keep image file sizes below 20K if at all possible. Large images can take a long time to download for your visitors. They may become impatient and decide to go elsewhere. There are many ways of making image files smaller including re-sizing the actual image or saving it as a .gif file - which will compress it. Photos should be saved as .jpg files for the web.
Thumbnail images are another option. A thumbnail is a small image that the visitor can click on if they want to view the larger version. Don't forget to use alt labels so that people who don't have graphics enabled in their browsers get a text explanation of what the image is about or what it is linked to. This also helps sight impaired visitors who use a text reader.
If you need to add any large images to your pages (e.g. an image map), another good idea would be to slice the image into smaller pieces, then to put each piece into a cell in a table. This can reduce download times. 
A bad idea in my opinion is the use of animated clip art. When I visit a site with these I tend to click my browser back button! I find that they distract me from reading the content of a page and don't seem to have a purpose. 
TOP

5. Navigation.
A simple, easy-to-use navigation system is important. Visitors want to be able to find information they require without having to wade through too many pages. Every page of your site should be accessible within 2 or 3 clicks of the main page.
There are many ways of making pages easy to find. Drop-down boxes, search boxes, frames, and a site map page are good ways of making information easy to find. Be careful with frames though. Too many can confuse visitors and they also make it difficult for search engines to link to. They can cause problems when visitors want to add certain pages in a framed site to their favourites / bookmarks list. 
TOP

6. Compatibilty issues.
When developing your site, bear in mind that your visitors may not have the same browser or computer as you. Try to check your site in different browsers. The most popular ones are Internet Explorer and Netscape Communicator / Navigator. Another browser becoming quite popular is Opera. Another thing to watch out for is that some of your visitors may have an older version of a browser which may not display your lovely DHTML scrolling text (lucky for them I say!). 
You could go even further by getting your site checked by someone else on their computer. Your site might look great on your PC with I.E. 5.5 but could look like a dog's dinner on someone else's Mac with Netscape! ]
Another thing you can do is to check the site with different screen resolutions so that you can see what it will look like on a smaller / larger screen. TOP

7. Finding a host.
There are plenty of companies on the web offering free webspace although some have a catch. You may have to have a banner advertisement of their's flashing away at the top of your pages. Or you may have to have a long domain name like www.myisp.com/yourname/home.htm - not easy to remember!
You can by your own domain name for a very low price from several reliable companies who also offer cloaked web redirection for a small fee. I'll be adding some links to these and lots more free web stuff soon. 
TOP

8. Publishing.
There are different ways of publishing your site but the main way is by using an FTP (File Transfer Protocol) program like Cute FTP or Terrapin FTP. Some of these are available totally free to download or for a 30 day trial.
Another way of uploading a site to your webspace is directly via your html/webpage editor like FrontPage or Dreamweaver (if you have one). 
TOP

9. Promoting your site.
When your site is finally uploaded and ready you may want to register it with search engines. You can register them manually yourself by going to each search engine site or you can use a program to do it for you. I personally submit my url to search engines manually as some of them let you choose an appropriate category to add your url to.
Another way of attracting visitors to your site is by getting someone you know to link to yours and vice versa. If it's a commercial site then you could consider advertising with other forms of media including local papers. 
TOP

10. Webpage editors.
There are a vast amount of programs available to use when building webpages. Some are WYSIWYG (what you see is what you get) programs which enable you to layout everything on the page and see it as you build it, with little knowledge of html. Examples of these are Macromedia Dreamweaver and Microsoft FrontPage. These programs are expensive but trial versions are available to download from the web for free.
Other editors help you to write the html code of your pages. This is by far the cheapest option and is also a good way of improving your html coding skills!
My favourite editor has to be Dreamweaver as it doesn't mess up code like FrontPage seems to. I like to use FrontPage for laying out tables on a page, then tweak the code using Dreamweaver. It also has more advanced functions like layers, behaviours and a templates function which enables you to make a template that can then be changed (to change all of your pages in one go). 
TOP

11. Advanced issues.
ASP, CSS, DHTML, Flash, Perl, E-Commerce. These are a handful of the more complex features you can add to your website. I will not even try to go into detail about them as I will be learning some of them myself! There are plenty of websites with lots of useful information about these aspects. 
TOP

12. Final thoughts.
Remember that not everyone who visits your site will like purple background with yellow spots and orange text. Try to make the design of your site as appealing as possible to as many people as possible.
Write about things that interest you because this will show in your content and is more likely to make the visitors interested.
Read as much information as possible about web design and join newsgroups about it.
Enjoy yourself!
When you've published your site, why not send me the URL and I could link to it from here. 
TOP

MENU
Email us
Search
ABOUT THIS SITE
Webmaster:Stephanie Bell
© 2009 Ding Dong Design
SOFTWARE USED

Dreamweaver
Dreamweaver icon

Flash
Flash icon

Photoshop
Photoshop icon

Paint Shop Pro
Paint Shop Pro icon

Microsoft
FrontPage icon

BROWSERS TESTED

Microsoft Internet Explorer 5.5 & 6
I.E. icon

Netscape Navigator 4.75
NN icon

Netscape 6.1
N 6.1 icon

Opera
Opera icon

Web TV Viewer
Web TV viewer icon

The UK Web Design Associations

home     I    special offer     I    services     I    prices     I    portfolio     I     enquiry form     I    email us

Webmaster: Stephanie Bell © 2009 Ding Dong Design