home

Tips on designing web pages

In order to design a good website, it can be beneficial to follow certain guidelines.

Although pictures do have a place in some websites, most pages should be, so far as possible, text based. Text takes much less memory than graphics, and will therefore load much quicker, a matter of some importance particularly for viewers who have a fairly slow internet connection. It also saves precious bandwidth on the busy internet infrastructure as a whole.

Another thing about pure character-based text is that it will show on essentially any browser, including a text-only browser, or a browser which for whatever reason has had image loading disabled. character-based text can also easily be indexed by search engines. Text which is stored not as characters but as part of a graphic image may look all right to a human viewer (provided the brower is set to show graphics), but will not be easy to search, cannot so easily be modified, and will slow the connection.

One useful purpose, however, of showing text as a graphic instead of as individual characters, is to make it difficult for spammers to use automatic trawling methods to retrieve people's email addresses off web sites - a site might display a person's email address as a graphic showing a picture of the entire message, perhaps as handwriting.

Regarding pictures, e.g. photographs, the larger they are and the better the resolution, the bigger the image file that must be downloaded, and the more time it will take to download. If the web page contains a graphic, it can be an advantage to set an alternative text to display while the graphic is loading, or if for any reason it does not load.

Regarding the use of fonts, bear in mind that injudicious use of too many fonts can make the page glaring and unattractive. Also bear in mind that some users may have their browser set to use default fonts which differ from the fonts you have set for your page. It is possible to select a colour for page background, and colours for fonts; but again some viewers may have their browsers set to use defaults which override the choice stipulated by the web page. If the text colour is the same as the background colour then the text will be invisible.

It is also possible to stipulate a patterned image to use as the page background - this image is typically a small graphic which (if the browser is set to load graphics) will show on the background above the default plain colour, generally in tiled form. For the reasons stated above it is best for this wallpaper graphic to be as small a file size as possible, so as not to slow down the page loading unduly. Some of the pages on this site have patterned wallpaper, and since, at the time of writing I have access to broadband, I did not for some time, realise how long the pages were taking to load, for people who only had a dialup connection. When I did realise, I substituted the largish wallpaper image files for ones which, although of lower resolution, were of a much smaller file size and so downloaded much quicker. Even with patterned wallpaper, one should still set the background colour for the page so as to contrast well with the text colours, so the text can be read even if the wallpaper images are not shown.

It is possible to set paragraphs, divisions, etc, to show the text left, right, center aligned, or justified. It is also possible to use different alignment for different parts of the page.

The page can be divided into parts, including tables (assuming the viewing browser supports this). Tables, and individual cells within them may have their own background colour and wallpaper set, or they may be transparent, in which case the underlying colour or pattern shows through. Tables can be nested, i.e. there may be a table which is itself within one of the cells of another table (subject to browser support for this). Sometimes however, depending on the software used, and other factors, this may create problems.

A table may be set to have an absolute width, or a width which is a percentage of the window width (or in the case of a nested table, a percentage of the enclosing cell width). Similarly, cells may have absolute or relative proportions.

A page can make use of Style Sheets, which contain formatting and other information about various components on a page. One advantage of styles is ease of making modifications, viz., for example, if a style includes information on the formatting of a certain class of paragraph, then one only has to adjust a parameter in the style, which will reflect in all the paragraphs of that style, without having to go through the page(s) altering the paragraphs individually.

The Page Header

The source HTML code for a web page is divided into sections, of which the main are the Header, and the Body. What normally shows on the web page as displayed in the browser, is contained within the Body, between <body> and </body>.

The Header, which is what is contained between <header> and </header>, contains various bits of information about the page or its author, which will not normally show within the browser window. One very common part of the header is the Title, between <title> and </title>, which shows in the title bar of the browser program.

The header may also contain style information. Styles may be defined for a page in the header for that page, between <style> and </style>; or there may be a link to a style sheet which is a separate file, and which may be used by more than one page. In the latter case, modifying the styles in the style sheet will alter the rendering of all web pages which link to that style sheet.

Another, very common, part of the header are what are known as meta tags. These serve various purposes, including giving information about the program used to create the web page, various keywords, or other things about the page. Some types of meta tags are used by search engines, which index the page. Which meta tags are used depends on the search engine.

Some search engines make use of the robots meta tag, which can be one of the following lines:

            <meta name="robots" content="index,follow">
            <meta name="robots" content="index,nofollow">
            <meta name="robots" content="noindex,follow">
            <meta name="robots" content="noindex,nofollow">

To understand what these mean, be it noted that to submit your web site to a search engine which uses an automatic robot crawler, one send them the URL address of the home page, not the URL addresses of all the pages, separately. The crawler will then follow links in the page which has been sent, and thus retrieve other pages automatically. "index,follow", the default, means that the crawler should index the page, and follow any links in it to other pages. "index,nofollow" means index the page but do not follow any of the links in it. "noindex,follow" means do not index this page itself, but do follow links in it to other pages. "noindex,nofollow" means do not index this page, and do not follow any links in it.

Most search engines do not guarantee that they will index a page; also, with these automatic crawlers, particularly if they do not charge for indexing your page, may not index it for some time after you have submitted your URL. It just has to wait till they next crawl the web. Also, changes to the site, and/or changes or removal of links will not be reflected immediately.

Software for Designing Web Pages

There are a number of software programs around which can be used for creating web pages. If you are familiar with HTML code and can hand-code yourself, all you need is a simple non-formatting text editer, even Notepad or Edit. If you wish to include any graphics in your page (including wallpaper) then you will need to create the graphics separately. You will also need access to a web browser in which to view your developing page. Ideally, you should view your page in more than one browser, to see how it will look, since not all browsers render pages indentically.

There are a number of packages which can take some of the labour out of web page design. However, some of these can make it difficult to modify the page later without leaving a lot of junk around in the page, for which reason it is a good thing if there is also an ability to see and edit the HTML code directly.

Some desktop-publishing software can create web pages. Some of these do not always develop good code. One thing that sometimes happens is that text might for some reason be made into a graphic. This happened with me when I originally created a photo album using a commercial desk-top publishing package. (This particular album is no longer on the web.) On most of the pages, the column of links to the left of the page, though looking like text on a coloured background, was actually a graphic combined with the background, and if you loaded these pages without the images loading (which incidently meant you wouldn't see the photos either) you would no longer have been able to read the index column to the left. This meant that I could not easily alter any of the wording in the column should I have wished to do so. It also meant that text in the column would not be found be search engines.

On the whole I now tend to avoid where possible, using desk-top publishing or similar elaborate software for designing web pages, particularly where they do not provide the facility to edit the HTML code directly should one wish.

One can buy books which teach about HTML coding. Alternatively some software programs may have fairly detailed information on their online help. One can find sites on the internet which give information. One such site (at the time of writing) is http://www.obliquity.org/computer.

Some people hand code their pages. I have myself handcoded or edited parts of my pages, even some which also made use of software tools for their creation. Many people, including myself, prefer pages to be viewable with any browser, using industry-standard protocols. Some software appears to create web pages which will only render properly, if at all, on certain (proprietary) browser software (which uses their own proprietary protocols). This can make it difficult or impossible to view the pages in any other environment or configuration. I do not design web pages which can be viewed only on IE, and nothing else!

One annoying thing about some web pages is that their links seem to use the backslash (\) instead of the forward slash (/) to indicate directory structure. This may place restraints on the (particularly non-Microsoft) environments under which one can view the pages, and be able to follow the links.

It was the forward slash which was traditionally used to mark directory structure, and it is still the industry standard for the web. Use of the backslash on DOS and MS-Windows for directory (or "folder") structures is supposedly a historic accident arising from the fact that the first version of DOS (which was designed for use on diskettes with very little capacity) did not support subdirectories - and therefore used the forward slash for other purposes such as to indicate "switches" for some DOS commands. As a consequence, when subsequent versions of DOS came out which did support subdirectories, some other symbol (the backslash) had to be used to indicate the directory structure, since the forward slash was already used for something else (in DOS).

http://validator.w3.org is a service which can be used to check web pages for conformity to W3C Recommendations and other standards. (It appears that this may not work correctly on certain browsers.) Clicking the link at the very bottom of this page (below the date and my name) should take you to this site, which will then confirm that the page bearing this link conforms to the rule of the relevant standard.

When I first discovered this validator service, I found upon using it that some of my own pages did not validate with it (although this particular page did). They used features which, I have now discovered, are not strictly part of the standard checked for by this validator. These pages did, however, display on a wide range of browsers. It seems most modern (graphical) browsers are quite tolerant of design errors, which is why I did not realise they they are not part of the official standard. Certain browsers (mostly older ones) did not render all my pages as I had designed them to look, but they were still readable. There is always a risk with careless design, that a page might render significantly differently on different browsers (or even on different versions of the same browser). I did once find that a certain part of a web page, which I thought I had commented out in the page source, still appeared on some people's browsers, although it did not show on the browser I used for testing it on.

I have since, adjusted the format of some of my pages, so that almost all of them validate (although there are a small handful which I have not bothered doing). In addition, even when a page does validate, some older browsers may not implement all the features of the standard, or may implement them imperfectly. If compatability with older browsers is important, one should if possible, view the pages on the browsers in question while designing them, to be able to modify them if need be.

The author of the site http://www.obliquity.org/computer (under - HTML 3.2 Tutorial - The World's Worst Web Pages), hilights a number of issues concerning pages with FRAMES. In this (my) web site, I do not think there are any pages which use FRAMES. One problem which might occur is a search engine causing a frame to be displayed on its own, out of context.

If you wish to submit your site to search engines, you might like to look at the following URLs:

             http://www.submitcorner.com/Guide/SE
             http://www.submitcorner.com/Guide

It should be borne in mind that some sites might appear on search engines anyway, even if we do not specifically submit them. This can be because the search engine follows a link to it from another site.