CHP 09

Website Design
Chapter 9. Website Design

Table of Contents
Objectives .............................................................................................................................................. 2
9.1 Introduction .................................................................................................................................. 2
9.2 Website Design ............................................................................................................................. 3
9.2.1 Guidelines for Developing a Website............................................................................... 3
9.2.2 Analysing Overall Site Aims ............................................................................................ 3
9.2.3 Website Architecture ........................................................................................................ 4
9.2.4 Navigation Planning ......................................................................................................... 7
9.2.5 Designing for Hyper-Reading .......................................................................................... 8
9.2.6 Estimating Download Times ............................................................................................ 9
9.3 Formats of Web Graphic Images ................................................................................................ 10
9.3.1 Main Features of the GIF Format ................................................................................... 10
9.3.2 GIF Headers ................................................................................................................... 11
9.3.3 GIF Colour Palettes ........................................................................................................ 11
9.3.4 Interlacing ...................................................................................................................... 12
9.3.5 Transparency .................................................................................................................. 12
9.4 Features of JPEG Format ............................................................................................................ 12
9.4.1 'Lossy' and 'lossless' compression techniques ................................................................ 13
9.5 Designing Website File Structure ............................................................................................... 15
9.6 Review Questions ....................................................................................................................... 16
9.6.1 Review Question 1 ......................................................................................................... 16
9.6.2 Review Question 2 ......................................................................................................... 17
9.6.3 Review Question 3 ......................................................................................................... 17
9.6.4 Review Question 4 ......................................................................................................... 17
9.6.5 Review Question 5 ......................................................................................................... 17
9.6.6 Review Question 6 ......................................................................................................... 17
9.6.7 Review Question 7 ......................................................................................................... 17
9.6.8 Review Question 8 ......................................................................................................... 17
9.6.9 Review Question 9 ......................................................................................................... 17
9.6.10 Review Question 10 ..................................................................................................... 17
9.6.11 Review Question 11 ..................................................................................................... 18
9.6.12 Review Question 12 ..................................................................................................... 18
9.7 Discussion and Answers ............................................................................................................. 18
9.7.1 Discussion of Activity 1: Bad Websites ........................................................................ 18
9.7.2 Discussion of Activity 5: Using GIF Files .................................................................... 18
9.7.3 Discussion of Activity 6: Image Sizes........................................................................... 20
9.7.4 Answer to Review Question 1 ........................................................................................ 20
9.7.10 Answer to Review Question 7 ...................................................................................... 21
9.7.13 Answer to Review Question 10 .................................................................................... 21
1
Website Design
Objectives
At the end of this chapter you will:
• Understand some basic global trends in e-commerce;
• Understand basic guidelines for website design;
• Understand some of the common mistakes in website design;
9.1 Introduction
There are at least four design issues that must be addressed when developing a website for e-commerce:
1. choosing the user interface for the content;

2. choosing the required images;
3. choosing the appropriate technology; and
4. devising the directory and file structures that will allow for the development and maintenance of
the site.
The first aspect belongs to the discipline of human-computer interaction (HCI) and the second to
graphic design. This course does not cover graphic design, but will mention some of the computer
graphics technologies involved. The chapter examines elements of HCI as it applies to the Web in
order to explore how websites can be made more usable, especially for potential customers.
The fourth choice does not directly affect the user. It is concerned with the organisation of the HTML
files, the graphics files (e.g. JPG files), etc, on the server. Of course, a failure to properly organise
these components of a website can lead an inability for the site and its developers to quickly respond
to changing business priorities and circumstances.
Internet commerce has become a major part of business. A report by the International
Telecommunication Union indicates that globally, 3.2 billion people are using the Internet, of which
two billion live in developing countries1. Further, the report indicates that between 2000 and 2015,
Internet penetration has increased almost seven-fold from 6.5 to 43 per cent of the global population.
The proportion of households with Internet access at home advanced from 18 per cent in 2005 to 46
per cent in 20151. Much of the growth in web connectivity has come from mobile. Mobile broadband
penetration has gone up 12-fold since 2007 2. A 2015 study by Price Waterhouse Coopers (PWC)
indicated that many countries are seeing more online shopping than ever before. It also revealed that
while behaviors vary by country, consumers around the globe share the same expectations when it
comes to online shopping — they want efficiency, convenience and enjoyment 3. The report also
indicated global online shopper behavior by country. For example, Figure 4.1 indicates the online
shopping behavior of South Africans. The survey indicates that South African residents are the most
willing to pay for same -day deliver (79%) 3. On a global scale, the products that are purchased the
most online are books, movies, music and video games. The study revealed that 63 percent of
shoppers said they prefer to purchase these items online, while 31 percent said they would rather buy
from a store4. Recognizing these trends, browsers running on personal computers are no longer
assumed to be the only means for potential customers to access a site. They are connecting via
dedicated Internet appliances, such as phones with built-in browsers, via interactive TV, via hand
held devices, etc.
1 http://www.itu.int/net/pressoffice/press_releases/2015/17.aspx#.VmEaVfkrLIV
2 http://time.com/money/3896219/internet-users-worldwide/
3 http://www.pwc.com/gx/en/industries/retail-consumer/global-multi-channel-consumer-
survey/survey-highlights.html
4 http://www.pwc.com/gx/en/industries/retail-consumer/global-multi-channel-consumer-
survey/retail-subsectors/books.html
2
Website Design
Figure 4.1: Online shopping behavior of South African residents (Source: PWC)
A website designer must, therefore, guarantee that consumers will:

• find the business website that they are developing;
• consider it interesting and attractive;
• find it easy to use; and
• be encouraged to return.
How do we, as developers of Internet commerce websites, attain these goals? To answer this, we begin by
examining an approach to website design, and follow that by highlighting what a designer should not be
doing.
9.2 Website Design

Unlike with software development, there are no accepted, well organised and documented methods for
developing Web sites. There are, however, some good practices — for example, it is best to avoid
'technology traps' by not committing to new, but untried, technologies.
9.2.1 Guidelines for Developing a Website

The development of many websites is driven by the enthusiasm of designers and implementers — people
who are often keen to use the latest technology. Being driven by technology rather than business and
customer needs can lead to sites that are slow in execution, complicated to use, and do not achieve the
intended results. Ironically, committing to a new technology too early can cause a website to rapidly look
dated, either because the technology did not become popular and so stayed in an old form, or because the
adoption of the new technology was so expensive that little budget remained for site maintenance.
As a general rule, avoid the unnecessary use of technology. While doing so, also recognise that any
technology that has been avoided at some point in a website's lifetime may become vital to the site as the
site's needs change, or even as user interface fashion progresses. This idea of change, and the fluidity of
the guidelines, is important. Technology that is unnecessary today may be acceptable or even necessary in
a few years’ time . For example, it was once considered inadvisable to use frames or scrolling text. Now,
these are less of an issue: frames are supported by most browsers in current use, and users are used to
scrolling. (However, we will still discuss these below.)
9.2.2 Analysing Overall Site Aims

The first activity of website development is the definition of the site's purpose. Begin with the broadest
idea and refine this.
Once the broad, high-level description of the site's purpose is known, refine the goals in more detail. Ask
yourself, "What are we trying to achieve?" and answer the question in a way that adds detail to the
description. Do not only consider the obvious questions concerning the site's purpose, but also the issues
around the implicit messages a potential customer might receive from the site. For example, if a website
selling holiday packages offers most of its packages in, say, Italy, as that is where most of the company's
customers have traditionally wanted to go, then the site might give the impression that Italy is the only
country that the company knows about. While some messages should be avoided, there might also be
positive messages that the site should given, such as those concerning the quality of the service, or how
long the company has been in business.
3
Website Design
Thus, one aspect of website design is to identify primary and secondary goals for the site. The primary
goals may be achieved by directly implementing facilities to meet those goals, for example, by providing
a catalogue of goods and services. The secondary goals may be achieved in more subtle ways, by, for
example, choosing colours that suggest stability, excitement, or so on; or by providing subtle, positive
messages to the customer concerning the company running the website and the services on offer.
Let us pursue these ideas with an example. Say you are in the business of developing software on behalf
of clients, and that you also sell programming language compilers and development environments. Your
clients might choose both the programming language and a specific compiler for it. For instance, one
client might choose Java, and another might choose C++. The second of these clients may or may not
have an opinion as to whether Microsoft Visual C++ should be used in preference to IBM's VisualAge C+
+. You sell both, as well as other C++ development systems, so you can cope with the choice of either.
You have decided that the main purpose of your new Web site is to 'sell the services' of your company.
How do you determine the details of this? One method is brainstorming, in which a group of people
briefly consider all aspects of an idea. Participants in a brainstorming session are expected to contribute to
discussions, to arguments in an unstructured, anarchic, often unruly way. They will often jump from one
idea to another, calling out words, arguing for and against points — sometimes simultaneously. In
brainstorming the ideas of all the participants are initially given equal weighting, so the most lowly
employee may argue freely with the most exulted. Brainstorming is usually thought of as a fun way to
generate ideas; it is a very creative process and the outcomes can often be surprising with unexpected
benefits.
As can be seen from the previous exercise, expressing many ideas using brainstorming or a similar
technique, may result in a mixture of ideas concerning the purpose of the site and how to achieve it.
Ignore the detail of the 'how' and try to understand what it means. One suggestion of, say, using grey to
suggest reliability may contradict a suggestion of using bright colours to convey excitement and being a
'go-getting' company, but that does not matter at this stage. The important information here is that both
aspects of the company are to be conveyed. The question is whether it should be a primary or a secondary
goal.
One question concerning primary goals that the brainstorming did not settle is that of what the site is
primarily selling — software development skills or programming language implementations. The sooner
this is answered the better — but it might require debate, and the decision may, to some extent, depend on
what can be achieved in the time and budget available for site development. For example, it may be
difficult to organise the selling of programming language implementations because the website might
have to interact with a database of information about stock levels. Another reason for not promoting that
side of the business might be that the company could not cope with too much extra business of that kind.
The irrelevance of distance when selling products might increase sales of compilers and programming
environments, whereas the need for software developers to meet their clients might naturally limit take-up
if that side of the company's business was promoted.
As well as the website developers knowing what the site's purpose is, they must also know its audience.
With knowledge of your audience, you can tailor both content and presentation to suit their needs and
keep Web customers returning for more business.
Ultimately, knowledge of the business requirements and expected audience is the starting point of
understanding the site requirements and design. Knowing these facets provides a foundation for site
development. Such a foundation must be the basis for the design. It should drive the design. You must not
start with an arbitrary design and force other choices to fit it.
9.2.3 Website Architecture

The design of a site involves many considerations, not least of which is navigation, a discussion of which
occurs later. Other than navigation, the following points need to be considered as well:
• the structure of the site — how the pages are organised (logically, rather than physically on disk);
• the possible paths through the structure — both the paths you might prefer or expect a user to
follow, and the paths you should provide to make the structure truly hypertext;
• the style — the so-called 'look and feel', that is, the layout of the actual pages;
• the structure of individual pages — how each page is organised (or how categories of page are
4
Website Design
organised).
All the above points are related to each, and so it is not possible to prescribe an order in which they should
be considered. For example, the structure of the site is related to the possible paths through the site, as will
the structure of the individual pages. All should be strongly influenced by the site's purpose and target
audience. Now let us consider an abstract view of how a site is organized. Figure 4.2 shows this structure.
A structure such as Figure 4.2 is sometimes called an information architecture. The structure implies that
users start at the home page, then visit pages A1, A2, and A3; followed by visiting pages B1, etc., through
D3. This sequence of page visits, however, may not be the sequence the user chooses to view. Say the
page organisation reflected the departments of an office equipment supplier — desks, filing cabinets,
pens, paper, computers, fax machines, and the like.
Figure 4.2 Website information architecture
Let us represent these departments as A, B, C, D as in:
• A represents the furniture department;

• B is for electronic (non-computer) equipment, such as fax machines;
• C is computers and associated items such as, scanners, printers, disk drives, etc; and
• D is copying services, including the production of brochures, business cards, etc.
Clearly, the information architecture is not devised with navigation primarily in mind. Let us briefly
consider navigation: imagine a scenario in which a user wishes to buy a computer, a combination fax /
scanner / printer, and furniture to hold these. From the home page the user might visit C, for computing
equipment, then perhaps move between pages C1 and C2 as they decided which computer and fax /
scanner / printer they want. Having bought the computer equipment, the user might want to go directly to
A1 for a desk, then A3 for a chair, and finally A2 for a monitor stand. The diagram above does not
represent this scenario or even the possible navigation paths. It only present a 'logical' view of how the
pages in the website are related to each other.
Now examine a second version of the site structure, with navigation paths added:
5
Website Design
Figure 4.3 Website information architecture with navigation paths
In this second version of the information architecture, explicit navigation paths have been given, each of
which is a two -way path. This is based on the assumption that a user of the site would need to move
backwards and forwards between 'sub-departments'. Notice that no navigation has been included between
departments, between A and B, C, or D. This is an arbitrary decision, which in reality would be made
knowing the site's purpose and audience. Navigation planning will be discussed further later in this
chapter.
Having come up with a plausible information structure, the structure of the individual pages need to be
designed — this is called the Web page architecture, and another design effort is required for this. This
should be done before settling on the layout and style. For example, Figure 4.4 shows two possible page
architectures for displaying the same information, namely a page of book or report style.
Figure 4.4 Page architecture for displaying a book or report style
These structures can be implemented in different ways, inasmuch as the fonts, colours, button styles, etc.
could be varied for each. These are important facets of style, usually decided by graphic designers.
Software developers should be primarily interested in the structure of the page elements. When these have
been decided, the graphic designer's 'look and feel' can be achieved using HTML, JavaScript, and so on.
Figure 4.5 shows instances of the above page architectures. Both have the same content, but different
layouts and styles. The HTML facilities required by each is quite different. For example, it may be
convenient to use tables to implement the first layout and frames for the second (although neither have
been implemented with either tables or frames). Design is all about making choices, as can be seen here.
6
Website Design
Figure 4.5 Websites showing different layouts
9.2.4 Navigation Planning

As observed in Chapter 1, the provision of navigation aids in hypertext documents is very important.
Navigation aids prevent users from losing their place. When reading a book, people start at a particular
page and read the subsequent pages in order. Perusing a catalogue might not be as linear an activity, but
the page numbers, table of contents and the index provide the means to navigate backwards and forwards,
and to jump to arbitrary pages. Hypertext documents do not follow this fashion for two reasons:
• the reader can arrive at any page, via a hyperlink; and
• a reader can read or interact with the pages in any order.
One technique for designing the navigation paths is to storyboard the tasks that the users might undertake
when visiting the site. Storyboarding is a technique taken from cinematography: the story is developed by
roughly sketching each scene — as well as the actions in each scene — on a board, and placing each
image in the desired sequence. For Web site development each page does not need to be sketch out, but
each scenario does need to be documented and analysed.
Ideally, a storyboard should be developed for all the pages in a complex website so that style can be
compared with function. As with all these design activities, the storyboard may have to change — but it is
easier to change a storyboard than the final product, and a storyboard acts as a good starting point to
website design.
Navigational aids are an important ingredient for successful website design. Browsers themselves have a
variety of navigation aids including Bookmarks (Favourites) and History lists, while the JavaScript
language has facilities to access these. A website designer can make use of these facilities, but the page
architecture should provide the navigation aids that are considered necessary.
Overcoming the 'Lost In Hyperspace' problem is a difficult problem to solve. It occurs when a user
follows a series of links and discovers that they do not know where they are in a site or how to retrace
their steps to a previous page. There has been much research into this phenomenon, but this appears to
have been ignored by Web designers.
The 'Lost in Hyperspace' problem can be prevented, or lessened, by applying three rules: in general every
page in
your website should include: where you are; where you have been; and where you can go For example,
the Middlesex University academic home page, shown below implemented two of these rules. It shows
where the user is by the down pointing double -headed arrow ( ) beside the word Academic. The other
words on that navigation bar (preceded by the symbol) show what the designers see as major
7
Website Design
navigational steps to other topics. By contrast, under the 'Academic' heading there are nine links, from
Studying at Middlesex University through to ‘What's New’. The user has left the mouse pointer over
International Students, which has been highlighted by a rectangle outline. (You will study how to achieve
such an effect a later chapter).
Figure 4.6 Middlesex University academic homepage
9.2.5 Designing for Hyper-Reading

As mentioned above, books are presented in a linear fashion while hypertext documents can be read non-
linearly. The ordering of hypertext documents within a site is a related issue: visitors to a Web page may
start in the 'middle', read through to the 'end' and finish at the 'beginning'. Within a single Web page, the
top to bottom (and left to right) nature of the text may dominate, but if a user arrives at page somewhere
other than at the document's top, there may be no order apparent to the reader. A Web designer must be
sensitive to these many possible readings of a Web page, just as they should be ensitive to the
navigational possibilities in an information architecture. The implicit ordering of a page architecture must
be considered. Dynamically changing content (such as animations or JavaScript- produced content) will
influence the order a user reads a page. This is something that does not happen in books.
Clearly, people adopt different reading manners between reading Web pages and books. In their 1997
study, Jakob Neilsen and John Morkes discovered that 79% of people merely scanned the text of a Web
page. They found that only 16% read every word. Other work has found that less than 20% of readers
scroll beyond the information that is visible. From these findings it could be concluded that Web pages
should:
• contain 'scannable' text, in which keywords are highlighted to aid quick perusal;
• employ meaningful sub-headings;
• use bulleted lists to provide a quick summary of the main ideas;
• use only one idea per paragraph, concentrating on the introductory words of the paragraph;
• use the 'inverted pyramid' style of writing, where the document begins with the conclusion;
• use half or less of the word count of conventional writing; and
• ensure that all the information is visible on the screen without scrolling.
Such guidance should be used were needed, but should not be relied on slavishly. It is important to
remember the intention behind the above suggestions. For example, from the third point, do not remember
it as a statement to only 'use bulleted lists', but remember that the bulleted lists are meant to summarise
information explained fully on the page. A study by Nielsen and Morkes emphasised the need for Web
designers to instill in users a sense of the site's credibility, as well as a trust in the content provider: if
readers do not believe what they read in any section of a page, they may skip the rest of the page.
Credibility and trust are important to businesses wanting to establish commerce on the Net.
8
Website Design
Activity 1: Bad Websites

Visit the following websites:
• www.websitesthatsuck.com [http://www.websitesthatsuck.com]
• www.worstoftheWeb.com [http://www.worstoftheweb.com ]
Write down your view of these sites. Choose three of their featured websites and, for each chosen site,
identify one aspect of its design that you find particularly poor. Try to find four or five examples of bad
Web design and discuss them with colleagues on-line or in tutorial.
See Discussion on Activity 1 at the end of this chapter
Activity 2: Top Ten Mistakes

Go to Jakob Nielsen's useit.com website and read his original 1996 advice
[http://www.nngroup.com/articles/original-top-ten -mistakes-in-web-design/] on what to avoid when
designing a Web site. Then follow the link to his revised (1999) advice
[http://www.nngroup.com/articles/the-top -ten -web-design-mistakes-of-1999/] and read it. Also have a
look at some of the newer top-10 lists that can be found at the bottom of that page.
Take note of the main mistakes he lists and the extent to which he has changed his view. What about the
other lists? Are there any inconsistency? Write down what you think of the current advice found on these
lists.
Activity 3: Design Issues

Read Nielsen's The Ten Most Violated Homepage Design Guidelines
[http://www.nngroup.com/articles/most-violated-homepage-guidelines/]. Can you find an example of
common websites that violates these guidelines? Also discuss whether or not you agree with the ranking.
Take note of the main mistakes he lists and the extent to which he has changed his view. What about the
other lists? Are there any inconsistency? Write down what you think of the current advice found on these
lists.
Review
Do Review Questions 1, 2, 3, 4 and 5
9.2.6 Estimating Download Times

Hypertext research has shown that a user needs to be able to move between pages in less than a second for
the site to have maximum effectiveness. Even with the increased use of fast modems, most pages remain
painfully slow to download.
Factors in page download speed that are to a large extent beyond your control include:
• the throughput of the server;

• the server's connection to the Internet;
• the performance of the Internet itself;
• the user's connection to the Internet; and
• the rendering speed of the user's browser, computer processor and graphics hardware.
As far as possible, decisions that affect Web page speed should take this information into account. For
example, if the website is to be used within a company as an intranet, or with limited access for registered
customers as an extranet (see Unit 13), then the configuration of the users' computer systems should be
completely known.
The main factor under a Web designer's control is the use of high-bandwidth information:
9
Website Design
• Video and audio resources require the largest files; streaming technologies are offered by
companies such RealNetworks (via their 'real' media formats) and Apple (via QuickTime 4).
• Animation formats such as ShockWave (which include video and audio) require external
applications or plugins in order for a browser to view them. This requires the designer to
consider the large file sizes of the content, and interaction with external software.
• Graphics files may be large: JPEG is often used for high definition images and GIF for simpler
ones. Various strategies may be employed to reduce the number of colours contained in an
image (and hence reduce the file size, download time and the rendering time). For example, the
distracting animation used earlier can take between 2 and 8 seconds to download depending on
modem speed; this time can be reduced by half when colour reduction and other optimisations
are used. The technologies involved are discussed later in this unit.
Apart from reducing image file sizes, a number of other techniques can be used to improve the apparent
performance of a browser. For instance, browsers cache all the content that they download on the
assumption that this content may be used again. So, a graphic used on a variety of pages can be reused
from the cache rather than downloaded, as long as only a single copy of the image is used on the website.
Using multiple copies of the image will circumvent any advantage that could be obtained from the
browser's cache.
Specifying the size of the image to be displayed allows the browser to reserve the space needed for the
image while the image is downloading; in the mean time, the rest of the page can still be displayed:
<img SRC="http://www.myCompany.com.au/general-images/ headquarters-

photo.jpg" height=200 width=320>
There are also various 'tricks' that can be used to make download speeds appear faster. For example, an
image can be downloaded twice — once on a page where the image will not be displayed (by setting the
image width and height to zero), and then once again on a page where the image will be displayed. The
browser will, when downloading the image for the first time, store it in its cache. Later, when the image
should be shown, the browser will find the image in its cache, and so the image will appear to have
downloaded much quicker than it truly has.
Netscape Navigator also provides a LOWSRC attribute for the <IMG tag; this allows for the designer to
specify a file to load in advance of the true image. This should be a temporary, low-resolution, low colour,
small image file — essentially a place holder for while the true image is being loaded.
9.3 Formats of Web Graphic Images
9.3.1 Main Features of the GIF Format

The GIF format was originally developed by CompuServe, who provided information of the kind now
found on the Web. They provided email services before the Internet became popular and before the Web
existed. They required a file format that could be used on different platforms (and which did not rely on
specific hardware features) and supported some form of compression.
GIF files support any resolution (up to 65536 x 65536pixels). They provide indexed colour images
supporting 8-bit colour information (256 colours). LZW (Lempel-Zev-Welch) compression is used to
reduce file sizes. It works by compressing 'runs' of identical colour information. For example 100
contiguous red pixels in the same row take up 100 8bits, with LZW compression it is converted to 100 red
pixels that takes up 16bits. LZW is a lossless compression technique, and so the compressed image is
identical to the original image.
Although GIF met its original requirements, it does have its limitations: GIF allows a colour table of a
maximum of only 256 colours, and LZW compression is a general technique not particularly efficient at
compressing graphical images.
10
Website Design
9.3.2 GIF Headers

GIF headers contain the information required by the client programme to display the image, as follows:
• the first 6 bytes denote the GIF version;

• GIF87a (the original 1987 definition);
• GIF89a (adds text overlays, multiple image overlay and transparent colour);
• 2 bytes for screen width;
• 2 bytes for screen height;
• 1 byte for colour information (0—2 palette size, 3 palette sorted, 4—6 colour depth, 7 global
palette);
• 1 byte background colour;
• 3n global palette.
9.3.3 GIF Colour Palettes

Adaptive Palettes
As an example of adaptive palettes, examine the image below and its full 255 -colour palette. Each colour
in the palette has an index which is used when specifying the colour. Index 40 has been selected (with the
black square around it) in the palette below. Its colour is a brown made up of a Red value of 153, Green
102 and Blue 51.
Figure 4.7 Adaptive palette with 255-colour palette
By contrast the almost indistinguishable image below has only 64 colours and a correspondingly smaller palette. A
light green has been selected, with index 58 — Red 204, Green 255, Blue 204.
Figure 4.7 Adaptive palette with 64-colour palette
11
Website Design
While adaptive palettes provide greater colour detail in images, they have some problems. Each image has a palette,
which takes up extra space in a file. Furthermore, some machines can only deal with only one palette at a time,
which results in palette clash if multiple palettes are used
Fixed Palettes
Rather than creating a palette for each individual image, it is possible to use a standard palette, with the following
pros and cons:
• The advantage is that the images will be smaller as no palette need be saved with each image;
• Conversely, this is quite a restriction on the image and is only suitable for 'drawn' rather than
photographic images.
9.3.4 Interlacing
• Rather than storing the image in row order, GIF files can be stored with every 8th line at the head of
the file, followed by every 4th, and so on.
• This file layout allows a low resolution version of the image to be displayed while the file is still
downloading. As more of the file is downloaded, more detail can be displayed.
9.3.5 Transparency
With the 1989 GIF format, one colour in the colour table can be defined as transparent. This allows the background
image/colour to show through, and for graphics to appear non-rectangular. However, allowing only one colour to be
transparent can cause bad feathering effects to appear around the image's edge. For example, the world image was
originally designed to be on a white background. This becomes clear when a Web page is given a non -white
background colour, as in Figure 4.8 below. By designating white to be transparent, the background will show
through, as in Figure 4.9.
Figure 4.8 Non-white background Figure 4.9 Transparent background
9.4 Features of JPEG Format

JPEG was designed to store photographic images. It employs a 'lossy' compression technique, in that it throws away
information unlikely to noticed by a human viewer. It allows the degree of compression, and hence the degree of
degradation, to be specified (on a hundred point scale). The figure below is the dialogue box used by Adobe
PhotoShop when saving a JPEG file.
12
Website Design
Figure 4.10 Photoshop dialog box

In photographic images with lots of variation in detail, degradation of this form does not matter — but it is
noticeable for many types of images, especially those with sharply defined boundaries such as text. The figures
below show enlarged versions of JPEG images saved with lowest compression and best quality (Q1); medium
compression and quality (Q40); and maximum compression and lowest quality.
Figure 4.11 Enlarged versions of JPEG images with lowest and medium compressions
Figure 4.11 Enlarged versions of JPEG images with maximum compression
While lossy compression works well for photographs, line art (particularly text) blurs or 'ripples'. Because JPEG
discards information, repeatedly editing and saving JPEG files causes a progressive worsening in the image's quality
— this means that JPEG is usually only used for the final copy of the image, and not for any of the intermediate
stages.
9.4.1 'Lossy' and 'lossless' compression techniques

13
Website Design
To round off our discussion of the GIF and JPEG graphic formats, we now briefly consider the different approaches
to compression and colour transformation.
LZW compression
LZW compression, as used in the GIF format, builds a dictionary of common data sequences found in the image. It
then replaces these sequences in the image with a short dictionary code. The dictionary need not be transmitted with
the data, as it can be easily reconstructed. The algorithm is simple, and the technique is used in various file formats
(not only graphic file formats), such as TIFF, DoubleSpace, Stacker, GZIP, ZIP and ARC. LZW is patented, but
payments to the owners need only be made by those implementing the algorithm, not those using it. LZW
compression works best on images with large, 'flat' areas of colour, as in cartoons, and drawings, rather than
photographs.
JPEG Colour Compression

JPEG colour compression exploits the human visual system. The compression technique begins by reducing the
colour table. Most systems use an RGB (Red, Green, Blue) colour space, but this is difficult to compress. HSL
(Hue, Saturation, Lightness) is better, as human eyes can more easily detect fluctuations in brightness than they can
fluctuations in colour.
Using a technique called subsampling, the colour information in the colour table can be reduced while retaining
lighting information (which is how black and white TV signals are sent).
JPEG Colour Transformation

When looking at a far off image, all one can easily discern is the overall colour. Moving closer provides
increasingly greater detail to be visible. JPEG uses a mathematical technique to replicate this effect.Treating each
colour component (HSL) separately, each component is subjected to Discrete Cosine Transformations (DCT) . This
calculates the average colour of an area, as well as the rate at which the colour changes. These changes in colour are
then quantized (rounded) so that sudden colour changes are removed but more gradual changes are retained (which
results in the rippling artifacts, as the technique involves a cosine calculation).
JPEG Compression
After applying the transformation to the colour table, the data is then compressed using traditional techniques.
The most common of these is Huffman encoding, which works as follows:
• Calculate probabilistic occurrences of each character;

• Take the two characters with the lowest probabilities;
• Replace these with a set, having the combined probabilities of both elements;
• Repeat until only one element remains;
• This set is then split into a binary tree, which is used to encode the data.
Activity 5: Using GIF Files

Experiment with reducing the quality and size of GIF files by changing colour palettes and introducing dither.
Use whatever graphics applications you have, or go on the Web and use the online tools available there.
Among others you might use Spinwave [http:// www.spinwave.com/].
Sites like these will invite you to select a GIF file on your computer hard disk or to select a GIF via an URL. The
uploaded GIF is then compressed using their tool. All you have to do then is wait for the results! If you want a GIF
on your disk for experimentation, save any GIF file from the many available on the Internet, or you can save and use
this image below.
14
Website Design
Activity 6: Image Sizes

Using the supplied graphics application, save different image types (photographs, line drawings, text) in different
formats. Compare the file sizes of these formats, and experiment with different compression ratios, number of
colours, and so on. Go to the Netscape homepage to examine the range of JPEG sizes.
Review
Check your progress by doing Review Questions 9, 10, 11 and 12
9.5 Designing Website File Structure

The final aspect of design Web developers have to deal with is the organisation of the files making up the website.
This is particularly important if, as is typical, the website is to be developed by multiple individuals, and maintained
until some future date. Web designers need to be familiar with the directory structure that a Web server assumes,
and what the URLs mean in these terms.
To Do
Read up on Web servers' directory structures in your Web design book, and then go on to read about what an
URL means with respect to these structures.
Recall the abstract information architecture of a website, which we explored using the example of a company that
sells software development services and programming language implementations:
How would you implement this structure on a Web server? The most obvious way might be to locate the files
related to individual pages in their own directories — one directory for the home page components, one for pages
A1, A2, A3, B1, and so on. However, this may be excessive and lead to relative addressing mistakes. More
importantly, such a design does not anticipate change. If the information architecture reflects departments of a
business — department A, department B, etc. — then changes within the departments could cause a large
15
Website Design
maintenance overhead. A preferable structure might have directories for the main departments only:
The folder for Department A would contain all the files for A1, A2 and A3 — both the HTML and image files
(and maybe even the JavaScript files, QuickTime files, etc.). With this structure a link from A1 to A3 might occur
as follows:
<A HREF="A3.HTM#pricelist">See price list for chairs</A>
On the other hand, a link from A1 to C2 would have to include a relative file path, as in:
<A HREF="../DepartmentD/C2.HTM#configurations">See computer

configurations</A>
In fact, you will discover as you browse websites and develop your own, that it is useful to have a separate set of
folders for generally useful components. For example, an Assets folder could contain files for GIF buttons, GIF or
JPEG icons, JavaScript programmes, Acrobat PDF documents, and JPEG photographs:
9.6 Review Questions
9.6.1 Review Question 1

Name the aspects of website design.
Answers can be found at the end of the Chapter in Discussions and Answers.
16
Website Design

What are the six main activities in site design?

What is the difference between an information architecture and a page architecture? Answers can be found at the
end of the Chapter in Discussions and Answers.

Write down guidelines for navigation aids.

How does clarity affect the performance of users reading the content of a site? Answers can be found at the end of
the Chapter in Discussions and Answers.

What aspects of download performance can a website designer not affect? Answers can be found at the end of the
Chapter in Discussions and Answers.

Why is it important to specify the height and width of an image?

Give an example of a tag that would assist a search engine to find a website which sells software development
consultancy services and programming language implementations (such as compilers or programming
environments).

Name the three standard graphic image formats used on the Web, and note which is not yet widely used.

When should you use GIF formats?
17
Website Design

Write down three advantages of GIF format. Answers can be found at the end of the Chapter in Discussions and
Answers.

What is a palette? Answers can be found at the end of the Chapter in Discussions and Answers.
9.7 Discussion and Answers
9.7.1 Discussion of Activity 1: Bad Websites

The given two sites on poor Web design make for interesting exploration. Their designers have adapted the old
adage of learning from other people's mistakes: 'learn good Web design from bad Web design'. Here we simply note
common problems. The frame examples with bad navigation and overuse of JavaScript are clear examples of bad
Web design.
9.7.2 Discussion of Activity 5: Using GIF Files

The following GIF images were produced by GIF Cruncher. The information given for each image are the tool's
output. As you can see, you can gain dramatic space and time savings.
96 Colours; 0 dither; 3.2% (0.2 secs.)saving 64 Colours; 10 dither; 7.6% (0.6
18
Website Design
32 Colours; 20 dither; 26.3% (2.2 secs.)saving 16 Colours; 30 dither; 41.6% (3.4 secs.)saving
19
Website Design
9.7.3 Discussion of Activity 6: Image Sizes

The Netscape site clearly shows how photographic images visually appear to suffer little from the quality degradation
caused by 'lossy' compression.
You can experiment with JPEG files yourself using a graphics application or a website that offers the facility, such
as JPEGCruncher [http://www.spinwave.com/crunchers.html]
9.7.4 Answer to Review Question 1

• choosing the user interface for the content you might wish to provide;
• choosing any graphic images you might need, and the appropriate technology;
• devising the directory and file structures that will allow you develop and maintain a site.

• Analysing Overall Site Aims.
• website Architecture.
• Navigation Planning.
• Designing for Hyper-Reading.
• Estimating Download Times.
• Site Promotion.
20
Website Design

An information architecture is a description of the structure of a site. Page architecture is a description of the
structure of a page.

Every page on a site should include navigation facilities that allow the user to see where they have been (history),
where they are (current), and where they can go (future).

Poor clarity in a website's content appears to slow readers down. This is probably because readers pause while
trying to understand the content. Further, if users do not trust what they read they will question the usefulness of
the site and may abandon it.

A website designer cannot affect the capabilities of a user's network connection, computer system (hardware and
operating system) or browser.

By specifying the height and width of an image you allow a browser to continue to layout and render text while
the image continues to download.

By specifying the height and width of an image you allow a browser to continue to layout and render text while
the image continues to download.

GIF, JPEG, and PNG formats. PNG is not yet widely supported.

Answer: for two dimensional images, i.e. no lighting or shading required, compression will occur cleanly and
precisely.

'Lossless' compression (LZW), transparency and interlacing.

A palette is a table of the colours available in an image. These colours are represent by indexes into the table.
21

CHP 09

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CHP 09

Uploaded by

Copyright:

Available Formats

Website Design

Chapter 9. Website Design

1. choosing the user interface for the content;

A website designer must, therefore, guarantee that consumers will:

9.2 Website Design

9.2.1 Guidelines for Developing a Website

9.2.2 Analysing Overall Site Aims

9.2.3 Website Architecture

Figure 4.2 Website information architecture

Let us represent these departments as A, B, C, D as in:

• A represents the furniture department;

Figure 4.4 Page architecture for displaying a book or report style

Figure 4.5 Websites showing different layouts

9.2.4 Navigation Planning

Figure 4.6 Middlesex University academic homepage

9.2.5 Designing for Hyper-Reading

Activity 1: Bad Websites

See Discussion on Activity 1 at the end of this chapter

Activity 2: Top Ten Mistakes

Activity 3: Design Issues

9.2.6 Estimating Download Times

• the throughput of the server;

<img SRC="http://www.myCompany.com.au/general-images/ headquarters-

9.3 Formats of Web Graphic Images

9.3.1 Main Features of the GIF Format

9.3.2 GIF Headers

• the first 6 bytes denote the GIF version;

9.3.3 GIF Colour Palettes

Figure 4.7 Adaptive palette with 255-colour palette

Figure 4.7 Adaptive palette with 64-colour palette

Figure 4.8 Non-white background Figure 4.9 Transparent background

9.4 Features of JPEG Format

Figure 4.10 Photoshop dialog box

Figure 4.11 Enlarged versions of JPEG images with maximum compression

9.4.1 'Lossy' and 'lossless' compression techniques

JPEG Colour Compression

JPEG Colour Transformation

• Calculate probabilistic occurrences of each character;

Activity 5: Using GIF Files

See Discussion on Activity 5 at the end of this chapter

Activity 6: Image Sizes

See Discussion on Activity 6 at the end of this chapter

9.5 Designing Website File Structure

<A HREF="A3.HTM#pricelist">See price list for chairs</A>

<A HREF="../DepartmentD/C2.HTM#configurations">See computer

9.6 Review Questions

9.6.1 Review Question 1

9.6.2 Review Question 2

9.6.3 Review Question 3

end of the Chapter in Discussions and Answers.

9.6.4 Review Question 4

9.6.5 Review Question 5

the Chapter in Discussions and Answers.

9.6.6 Review Question 6

Chapter in Discussions and Answers.

9.6.7 Review Question 7

9.6.8 Review Question 8

9.6.9 Review Question 9

9.6.10 Review Question 10

9.6.11 Review Question 11

9.6.12 Review Question 12

9.7 Discussion and Answers

9.7.1 Discussion of Activity 1: Bad Websites