Web Design

1While the design of any website can be a personal matter of taste, most designs usually have to take into consideration the intended nature and purpose of the website. For example, a commercial on-line retailer, like Amazon, needs to consider the clarity of the products on offer, the customer purchasing interface, security and contact information. In contrast, Wikipedia has evolved to become a global online encyclopaedia, where the content is essentially developed by its users, and therefore requires an interactive editing interface. While the Amazon site tends to support a lot of images, which can collectively be a bit garish on some pages, its overall design, like Wikipedia, uses quite a simple background colour scheme. This is often in sharp contrast to the many advertised web design templates, which seem more focused on adopting a kaleidoscope of colour and forms to catch the eye of their prospective customers.

So what criteria were considered in the design of this website?

Well, based on my own educational focus, there was some initial interest in using a lot of innovative ideas that were then compounded by some 'experiments' with colours schemes that were capable of inducing migraines in minutes, both in terms of looking at the screen and the implied complexity. Therefore, it soon became apparent that there was some advantage in using muted colours with a relatively plain font, especially for a website that was being designed as an information base, i.e. one that takes time to read. In addition, it was felt that web navigation would be an important consideration when trying to find specific information. While deferring the detailed discussion of the navigation mechanisms to later, there are 4 options on each page, which had to remain consistently positioned, irrespective of the changing content.

  • Top Menu: Horizontal bar across the top of the screen
  • Page Menu: Display inset on the left of the screen
  • Tree Menu: Another inset on the left of the screen
  • Page Menu: Horizontal bar across the bottom of the screen.

Added to this, it was decided that each page needed a distinct header and footer section for titles and other site-wide information. Finally, another section on the right of the screen was added to provide some symmetry to the design layout, plus facilitate the ability to provide supplementary annotations and comments to each page.

Based on earlier the use of Microsoft Frontpage, which produced verbose and non-standard HTML, it was decided that the new design should adopt the latest standard, which at the time aligned to HTML/4.0 and CSS/2.0. On this basis, the formatting of the site would be done in external CSS files included into the <head> section of each HTML page

Within the historical development of HTML, the <div> tag appeared in HTML-4 and is intended to be used as a section divider within the HTML page, which is then complemented by CSS definitions. As such, we shall start by illustrating the general definition of the <div> tags used within every HTML page, as required by the layout design being outlined.

<html>
<head></head>
<body>
<div id="webpage">
<div id="header"></div>
<div id="tbar"></div>
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="bbar"></div>
<div id="footer"></div>
</div>
</body>
</html>

The format of all the <tags> used in the HTML is then complemented by a style in an external CSS file. In this context, the <html> tag essentially represents the entire display on the client-side device, based on the following CSS statement:

html {height: 100%; width: 100%;}

The <body> tag can also be assigned a default set of formatting attributes, which may be overwritten by subsequent definitions associated with other HTML <tags>.

body {
background: #FFF url("../images/system/body.bmp") repeat;
font-family:Verdana, arial, sans-serif;
font-size: 0.8em;
line-height: 1.25em;
text-align:left;
padding-bottom: 5px;
color:#333333;
background-attachment: fixed;
}

When you look at the layout of the webpage, the design appears to be centred on a mottled grey background, which is defined by <div id="webpage">, which inherits the size assigned to <html>, but which is then centred with a margin.

#webpage {
position: static;
width: auto;
margin: 25px 25px 25px 25px;
overflow: hidden;
display: block;
background: #FFF url("../images/system/webpage.bmp") repeat;
border: thin solid;
border-color:#C0C0C0;
}

The <div> sections required by this website now exist as nested <div> declarations, as shown above, where the CSS and relative positioning is illustrated in the table below:

#header {width: 100%; float:left; background:#E1E5D5;}
#tbar {clear: left; width: 100%; background:#656565;}

#left{
float: left;
clear: left;
width: 20%;}

#content{
float: left;
width: 60%;}

#right{
float: left;
width: 20%;}


#bbar {clear: both; width: 100%; background: #525252;}
#footer {clear: both; width: 100%; background:#E1E5D5;}

The CSS definition included in the table above are referred to as <#> IDs, which are unique and primarily used to format the basic layout. However, CSS also allow <.> classes, which can be used by many type of HTML <tags>. For potential flexibility, both methods were used to format the data placed in the sections above.

.insetHeader{font-size: 1.25em;}
.insetTbar {width:90%; height:40px;background:#656565;color: white;}

.insetLH {
font-size: 0.85em;
color:#333333;
background:#E1E5D5;
margin: ..(10px);
padding: (10px);
border: solid thin;
border-color:gray;}

.insetContent {
font-size: 0.875em;
text-align:justify;
color:#333333;
background:white;
margin: 10px 0px 10px 0px;
padding: 5px 10px 5px 10px;
border: solid thin;
border-color:gray;
min-height: 500px;}

.insetRH {
font-size: 0.85em;
color: maroon;
font-style: italic;
background:#E1E5D5;
margin: ..(10px);
padding: (10px);
border: solid thin;
border-color:gray;

.insetBbar {font-size:0.85em;font-weight:bold;height:50px;background:#525252;color: white;}
.insetFooter {background:#E1E5D5;color:#639D02;text-align: center;}

In practice, there are myriad of CSS definitions distributed across many external files, but it is hoped that the description above is enough to remind myself as to how and why this site adopted its designed. It should also be highlighted that not being an expert in either HTML or CSS, the design being described probably contains syntax errors, which in retrospect should be corrected.