Website Design: Your Website Must Look Good, Read Well, Have Useful Information, Relevant Graphics, And Must Download Quickly!
Start by Selecting the Background...
A big mistake that is all too easy to make is to use technology simply because it is there, and to use many colours, fonts, and graphics just because you have them on your computer!
The technology wizards tell us that it is easier to read text on a computer screen with the format of dark background and light text. Indeed, the original word processors in the days before Windows™ used blue backgrounds with white text.
Microsoft Word still makes this option available, and I have only used it about twice in the past 15 years!
This Website uses a cream coloured background with black text, because that it makes reading easier on the eye. Many graphic designers will use colourful sidebars and boxes with weird background colours and peculiar mixtures of colour with the fonts, and these are so difficult to read—unless you are under 30 with 20/20 vision. Keep those vibrant colours for the younger market, who will appreciate them.
If you are designing a Website for a mature market, make sure you use colours that they will appreciate and enjoy using.
Printing Pages by Visitors
Many people like to print a Webpage, because they want to keep a hard copy for reading at leisure or for storing in their archives. If you have used a dark green background with red and yellow text, you can lose these visitors.
You will find that many Websites now provide printer-friendly versions of a Webpage, and if your Website is going to use colourful backgrounds, I advise this method. You may have noticed that many Websites provide a printer-friendly version from a link in the top-right corner of every page.
The best way to create these printer-friendly versions of your Webpage, is to use a CSS file for the printed page that excludes unwanted advertising, graphics and images, and uses only black and white colours. In the HEAD section of each page you will need script similar to the following:
<link href="scriptfolder/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="scriptfolder/print.css" rel="stylesheet" type="text/css" media="print" />
In the above code "scriptfolder" is the name of the folder containing your CSS files; "styles.css" is the name of your CSS files used to DISPLAY the Website page; "print.css" is the CSS file used to PRINT the Website page. It is important to set the MEDIA for "screen" and "print" where relevant.
In the HTML Body section, somewhere near the top of the page, you need to include the following code:
You can change "Print Page" to your own choice of words for the instruction.
The 800 x 600 screen resolution was the most popular for the past 15 years or more; before that it was the 640 x 480 resolution, but there are not many computers operating with that resolution today.
Increasingly popular, especially with high-tech modern computers and laptops with their wider screens, is the 1024 x 768 resolution and higher. Many Web designers use a high resolution because of the increase in space on the screen. Try it yourself for one week, and you'll never go back to a smaller resolution.
Some 99% of visitors to this Website use a 1024 x 768 or higher resolution. You can check the most popular screen resolution, and a lot more similar information, at W3Schools.com
The natural inclination when designing a Web page, is to set the property to 800 x 600 so that it will show on nearly all computers. Unfortunately, the vertical scroll bar will take up width, and this means the horizontal scroll bar will show on all your Website pages. You can easily prevent this with the correct design of your pages.
Many amateur Websites are created by using a series of nested tables, which was a popular system many years ago. While you can adjust these to view correctly on your computer, they may well look odd when downloaded off the Internet. A table is best used for dynamic data that is downloaded from a database.
This Website uses CSS (Cascading Style Sheet) for the design and layout of each page and feature, including fonts, colours, forms, and other objects. It will ensure that your pages appear similar throughout the Website, and this makes your visitor feel more comfortable.
A CSS document is basically a text file and is written in plain English to a specific format:
/* CSS Document */
FONT: bold 24px Georgia, Times, serif;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT: 12px Verdana, Arial, Helvetica, sans-serif;
...and so on. You can define every element on a Website page with CSS; where it is positioned, the colour, size, and much more. If you're not familar with using CSS, you many find it difficult to create a good Website.
When asked how long should a Web page be, the guru answered "as long as necessary". The emphasis is on the word necessary, and the comment does not give free license to develop extraordinarily long pages that never seem to end.
Web designers, and the Internet millionaires peddling their latest software that's going to make us all rich, keep all relevant information about the main topic on the one page for a very good reason:
The visitor is more likely to click "close" than "next". This means they will exit the Website rather than view further content on another page, particularly if the pages are slow to load.
We are all in a hurry, and if we cannot find it fast, we do not bother to look on a new page that might take 10 or 20 valuable surfing seconds to download. Unless you give them a valid and compelling reason to stay on your Website and open the next page.
Images and Graphics are excellent for using on a Website to illustrate a particular item, service, or event. As they say, one picture is worth a thousand words!
Unfortunately, that is not strictly true on the Internet for a number of reasons:
- The suitability of the image. Does it add power to the copy, or is it merely decoration. Every image you use must have a purpose.
- The size of the image; it's physical size or appearance, and it's file size, which affect the download time—the time it takes to appear on the visitor's browser window.
- The position of the image on the page. Is it with the copy that it illustrates, or is it 'floating'? Where pertinent copy is wrapped around a small image, you provide effectiveness.
- The image may not have been optimized for use on the Internet with a Web browser. This subject can be read in our Website Guide.
It is advisable in most instances to put a small, optimized image on the page, with a link to a larger or full-size image. You can see this feature in action on many Websites, where you can click the thumbnail picture to see a full size image.
One of the great features for ensuring continuity and a regular appearance to your Web pages, is to design your first page and then save it as a Template. You can then use this page as the format for all future pages, but there is one other great feature of using Template design that makes them imperative. Let's imagine that you have 25, 100, or even 350 or more pages on your Website, and you decide to make a small but significant change to the design.
With a Template, you simply amend the Template page, say change the background from white, to cream, and immediately this change is reflected in every page on your Website. Imagine how long it would take to make the change manually!
You can also download free Webpage templates, or purchase them from Web design companies online. This ensures a professional appearance to your Website and you might like to check this feature.
The use of frames is an excellent method for designing your Web pages, especially when the content of the top frame, or the left frame is to stay constant, and only your main frame is to change.
However, the downside is that many browsers don't like frames and will not display them correctly. Also, many Web surfers do not like them, and say they make the Website look as if it's built by an amateur!
You have to decide who is your target audience, and is your information best displayed in frames to your market...if the answer is yes, then use frames.
They are best used when you are going to turn a Website into an eBook!
You may not be familiar with Website page layers, and the best way to think of them is to imagine they are sheets of acetate laid one on top of the other. Each sheet has different information, colours, graphics, images, or data for the visitor.
You can give layers attributes, and decide which will load in a browser first, and which will remain on top of all the others.
Once again, the problem is that layers will appear differently according to the various browsers, and the settings of each browser. If the text is set to large, then the frame size will change and hide others, or if it's a fixed size, some of the text can disappear.
You can make a layer appear or disappear, according to the controls you apply. Click on the show and hide links below to see an example of this process:
You can also close it very easily with the link above, or by using the HIDE link inside the layer. The designer also put a hyperlink that opens another Web page inside the layer.
You can put in graphics, different colours and many other features using this facility, but always remember that older browsers may not display them.