Website Design Extras

Website design extras both decorative and functional

Contact us

Custom Search

Share this Page

Home

Preparation

Build Website

Create Content

Publish

Build Traffic

Make Money

Cool Clicks

Website Design - Finishing Touches

Website design extras for your master page.

Website design extras can be decorative or functional. An image, for example, creates a visual focal point which may be mainly decorative in its intent, or it can be an essential part of the content.

If you can, design your website to be beautiful, so long as your content is still easy to find, and easy to read.

Anything you wish to add into all pages of your site will be a great deal easier to do while you are creating your master page, or template. After you have created all your web pages, you will have to work on each page individually.

Adding extras into a website page often involves copying a script from a supplier's website onto your clipboard, and pasting it into your HTML code, at the desired point. A very large number of extras are available on this basis, and most of them are free.

Most of the extras you include in your website design will make it slower to download, so don't go overboard!

Too many visual extras near the top of your page will make your website design appear uncoordinated or chaotic.

A medley of website design extras

These are some of the extra goodies you can incorporate into your website design:

Graphics and Images. Add images to the master page if you want them to occupy the same position on all pages of your website. Otherwise add them to a specific page when you prepare the content for that page.

In general it is best to keep images small. Actually it is not the size of the image that is the issue, but the size of the graphics file (normally a .jpg or a .gif) which has to be downloaded by the browser for each visitor.

Aim to keep each graphics file smaller than 10 kilobytes and to have no more than three images on any one page.

Images, as well as various types of textured patterns, can be used to good effect as backgrounds. If you use one, don't allow the image to reduce the legibility of your text.

Images whose purpose is mainly decorative should still be relevant to your page content.

Only use graphics from the web if you know them to be free of copyright restrictions.

Where possible use CSS stlyle commands to define the alignment and appearance of your images (including background textures). Where CSS styles must be available to all of your web pages, store them in an external CSS file (preferably only one per website)

Search Box (for your site, not for the web) is a useful website design extra, especially if you have a great deal of information on your site. It is another aid to website navigation.

Where you place the search box is up to you, but the higher it is on your web page the more it will get used. If you are a Google Adsense account holder then you can get the Google Site Search box which displays advertisements with the search results when your visitors use it. If they click on an ad, you earn a few cents. Few will.

There are several suppliers of free search box scripts.

Bookmark / Share icons enable your visitor to share the location of your site and make a few comments about it to their usual social network group (Digg, Delicious, Stumbleupon, Twitter etc.) This benefits your visitor and it benefits you too, because they are helping to promote your site.

You can obtain icons for each of these social networking groups (each organisation supplies its own icons). The problem is deciding which ones to include on your site and which ones to leave out. Also, putting them on your site individually is time consuming and may take up a fair amount of page space, . The Add-This button which I use on this site is a useful solution and provides a pleasing website design feature.

Advertisements. We discuss this topic in more detail under Make Money- Sell Advertising. If you intend to display advertisements on your site, you need to have some idea how they will fit into your website design. Generally, higher on the web page is more effective, but may make your site appear rather commercial.

Of course if you can actually place the code (for the script which retrieves the ad) into your HTML at this stage - that will be the easiest. You can do that if you already have an advertising account with an agency.

But if you are creating your first site, you may not be able to open such an account yet, anyway not with Google. They like to approve your completed website before they open an account with you.

Other Extras.

These are just some of the website design extras you can add to your site:

Surveys and Polls
Bulletin Boards
Guest Books
Clocks
E-commerce (online store)
News Tickers
Horoscopes
Hit Counters
Site Statistics
Links
Contact-me form

Most of them are available either as paid-for items or free downloads

Extras and decoration used in this website design.

For this website I added these extras:

Google Site Search box at top left.
Add-This button at top right.
Banner ads (centre column top and bottom)
Skyscraper ad (left column).
Script for Google Analytics (a free statistical traffic analyzer)

Not all of them show on the page (e.g. Google Analytics script).

Our master page is just about complete. You can see it in Page Layout Design Step 6 (omitting the ads, so as not to upset anyone!)

And now, for decoration of my site:

I changed the colour of the table border to dark yellow.

Ha! How's that for creativity! And to show you what it looks like with the table border, and without the cell border lines, check out the final Page Layout Design Step 7

That's the end of this tutorial. (Good. It was getting too long!). Next we move on to using the master page layout to create all the pages for your winning website...

Prev Next

Links / Resources

Graphics Articles

Mike: Adding graphics to your web page

Page Resource: Adding images to your page

Graphic Goodies:

GR Sites.com

Page Layout Design Step 1
Page Layout Design Step 2
Page Layout Design Step 3
Page Layout Design Step 4
Page Layout Design Step 5
Page Layout Design Step 6
Page Layout Design Step 7

Build Site: Website Design Extras Top Prev Next: Create Web Pages

Adding extras and decoration to your website design