| T171 | TT280 | B200 | B202 | DD202 | D319 | M150 | B300 | TMA scores |
My Report - its quite long though! :-)
Introduction
Planning a website is a large task for any company. There are numerous issues that have to
be addressed regarding designing and publicizing the site to make it accessible
to the maximum amount of potential clients. This report will highlight
the main issues and indicate my proposals for your site to make the maximum
impact with the minimum amount of maintenance.
Mission Statement
The main aim of your site, as you have pointed out, is to increase direct sales to the
public. As you market research shows the majority of present sales are
to "professional" women aged 30-40 so the design of the site has to reflect
that this will probably be the main audience. It needs to cater for the
more sophisticated audience and I feel that things like animations and the
like such as flashing banners should be kept out of the site design.
In order to measure the effectiveness of the site and the customers thoughts on the site design and navigation there needs to be a feedback form incorporated into the design. This will give you an indication of the type of people that are viewing your site.
Cross-Browser Compatibility
There are a number of web-browsers on the market and as you may expect it is impossible
to predict the browser that your clients will be using to view your site.
This creates a number of problems when coding the site as each browser
can interpret information differently and if this is not planned for some
people will not be able to view your site and others may not see the site
as you intend them to.
In order to avoid this it is necessary to ensure that any HTML coding on the site is done to the Lowest Common Denominator. This means that for your site coding should be to version 4.01 of the World Wide Web Consortium's guidelines for HTML. This is currently widely supported by most browsers and would ensure the maximum number of people can view your site correctly.
Design Issues
Structure
There are a number of ways a site can be structured but to stick to a specific "type"
would not be wise for most sites and your is included in this. The main
part of your site should be based on a catalogue structure. This gives the
user a chance to look at the contents and choose the items they wish to view
or search for particular item and then proceed to purchase the item(s) and
give their details. There is also the historic aspect of your company to
take into consideration. This needs the site structure to be more lenient
and include a web structure from the main page for the addition files. A
diagram of the proposed structure is shown below. These are not the only
pages I anticipate you to want for your site but it give a brief view of
how the site should be structured for maximum ease of navigation for the
user.
I have chosen this structure as it best defines the facilities that your client will be looking for and has clear links from the homepage to each are of the site which may be of interest. This reduces the amount of time a client spends looking for something which in turn increases their view of the site. There are bad points to any site design from a single persons perspective but I feel that this structure should please both yourselves and the customer.
I would also recommend that the bulk of your basic files be kept in one folder in the root directory. This would mean that your files were kept in the same place. It does not make anything work any quicker or easier it just makes sure that all your links are active by keeping the filenames structured the same. The exclusion from this rule, I would recommend, is the individual product pages where each product image is shown in full and a more detailed description shown. This would be best kept in a separate folder within the root directory as it would make maintenance of the site simpler as if a product changes in some way the file can be found with more ease.
Navigation
Customers are more likely to re-visit a site and recommend it to others if the navigation
is simple and straight forward. I recommend that the best way to give
this feel is a standard navigation bar on the left of every page of the
site. This can be achieved and maintained easily by creating a template
and just inserting the text into the other areas of the site. The bar should
include links to all other areas of the site and most importantly to the
home page where, if a person gets lost, they can begin again.
The methodical navigation should also apply to ordering from the site. I recommend that you use a structure like the one below.
This is a basic shopping structure which likens the site to a normal shop whereby the customer can choose items, put them in the basket, choose more items if they wish, pay at the checkout, and obtain a receipt. This process is seen to work best and is used widely in retail sites.
Frames
Frames are a method of structuring individual pages and can be used for navigation purposes
as part of the page can always remain the navigation bar. Although this
is a good feature I have not chosen not to use frames. My main reasoning
is that they are not fully supported by browsers and a number of people
"turn off" frames in their browsers. This means that they are unable to
access your site. There is a method of including and excluding frames but
this requires a lot of extra work and maintenance. It is perfectly feasible
to get the same structure using tables.
Tables
Tables can be used to display information on pages in a structured and easy to read way.
They can also be used to provide standard layouts and create a uniform look
to web pages within the same site. They are fully supported by browsers.
For this reason, and because tables are easier to maintain than frames,
I have chosen to use them for structure. They can make pages appear uniform
(allowing clients to tell they have not followed an external link) and allow
image positioning with ease. This is particularly important for your site
both for the product pages where numerous images of products will appear
and the social-history side of the site which will enable images to be placed
next to the relevant text with ease.
Stylesheets
Another method of creating a uniform look to the site is to use Cascading Style Sheets.
These limit the amount of HTML code per page for defining styles. They
also enable the same styles to be attached to several or all pages within
a site to make design, development and maintenance a lot less work. They
work by attaching a style to a certain element of the page such as a table,
background or heading. This makes, for example, the background of each page
associated with the Cascading Style Sheet or CSS sheet appear with the same
background, essential for sites with many pages.
There is a negative side to style sheets though and this is that they are not, yet, widely supported by browsers. This makes some elements of the page display incorrectly as the browser could not determine what the CSS sheet was telling it to display.
I have, however, decided that adding certain minimal elements by CSS will make the design and maintenance of the site easier and would not greatly detract from the look of the site if the browser did not support them. The majority of the style of your site, however, has been designed using HTML to ensure that the page displays correctly.
Browsers are adding more support for CSS all the time and in the future it may be advisable and feasible to work more of the style of the site into the CSS sheet and remove much of the HTML style coding such as font types, colours, layout and other factors. I would not recommend this though until a much later date as users may not be able to follow the site if their browser was unsupported.
Images
Images can add interest to large otherwise "boring" sections of a text on a site but they
need to be used wisely. Images are imperative for your site to allow potential
customers to see your products but the size and use of these images needs
to be limited to ensure the maximum number of visitors. Potential customers
viewing your site only allow of time for images to download before the give
up and go somewhere else. The method I have chosen to reduce the effect
of the download time is placing a limited number of images on each page,
especially the catalogue pages. By reducing the number of images and increasing
the number of total pages in the site the download time per page is proportionally
reduced. By limited the size of each image in megabytes also, the download
time is kept to a minimum.
Another way of including images without increasing the download time is by using the same image repetitively which makes use of the browsers cache. The cache stores images from pages that have recently been visited so instead of having to download the same image through the Internet each time it retrieves it from memory. For your site this is impractical for the catalogue and social history pages but should be used for all other pages. I have incorporated this by using the company logo in the standard header for each page. This is also in keeping with the uniform theme for the site.
Despite reducing the size and use of images some browsers wills till not display them. This is because they are either text-only browsers or because the user has them switched off in their graphical browser. As your site relies heavily on a person being able to see the product this can pose a great problem. The best way to reduce the impact of this is to include alternate text for every image. In text only browser and those with graphics turned off the alternate text will display where the image should have been.(1) To make this work effectively for your site, especially on the catalogue pages, a concise but full description of the product should be in the alternate text. This will allow the potential client to develop a mental image of the product and it will increase the potential sales.
Screen Resolution
Different clients have their screen resolution set to different sizes which can pose a problem
for designing as it is impossible to predict what settings each customer
will have. To avoid this affecting your site I recommend, as my designs
show, that you code your site to variable screen resolution and not one fixed
resolution so that the page adapts to each individual browser window depending
upon the customers settings. If fixed resolution was to be used and coded
to a small screen resolution, for example 800 x 600, anyone viewing at a
larger resolution (where not as much information is provided on the screen
area at a time), for example 640 x 480, would have to scroll left to right
as well as top to bottom in order to read the entire contents of the page.
This is frustrating for the customer and they may be put off visiting your
site again if half of the content is on part of the screen they cannot view
without scrolling.
Javascript
This is a coding type that allows more interactivity with the user and allows basic HTML
to do much more on a web page. I will not go into too much detail at this
stage as I do not feel that running javascripts on your site will be an advantage.
The main reason for this is that the site does not require excessive amounts
of interactivity and a number of web users disable javascript in their browsers>
by including javascript in your site this will effectively stop almost
10% of users (according to the latest statistics available) viewing your
site correctly.
Page Overcrowding
I recommend that the total number of pages in your site be increased so as to avoid
information overload on each page. By keeping pages simple and not overcrowding
each page with information the customer is more likely to locate the text
or link that they require. It is important to make use of the active white
space that appears between each section of information on each page. This
gives logical divisions between separate pieces of text. Horizontal bars
can also be used to segregate areas of text. Both approaches will result
in a clean, uncluttered look.
Search Facility
I would also recommend that you offer a search facility for customers who are looking
for a particular item. This is especially useful if you have a large number
of products or a large selection of product types. It reduces the clients
frustration at having to wade through numerous page to locate the item(s)
they require and they are more likely to return to the site knowing they
can find exactly what they are looking for.
Preliminary Templates
There are four basic page templates enclosed with this report showing the recommended
page layouts. They have been written according to the latest widely used
HTML version which is version 4.01. They should therefore be viewable in
most browsers by the most potential customers. There is also one basic
CSS style sheet enclosed coded simply to version 1 which is the most widely
supported by browsers. They illustrate all the design issues I have raised
in this report.
Publicizing The Site
Once your site is ready to be viewed it needs publicizing as widely as possible. This
will mean adding the URL (address) of your site to every media available
such as letterheads, business cards, invoices, brochures and the like. It
may also be advisable to see if the local newspaper would run a short story
on the launch of the site. This would increase the number of people who
have heard of your site and many may just browse through the social history
side and decide to make a purchase.
Once the site is launched it is also recommended to list it in as many search engines as possible. This will be where any new customers will find your site. In order to make the most use of search engines I recommend that you add what are known as meta tags to your home page. This is what the search engine reads to tell customers what your site is about. By using meta tags correctly you can get your site listed correctly by search engines and increase potential customers.
Conclusion
If the design issued raised in this report are adhered to, maintenance should be minimized
to updating new products or product prices. The navigation bar is also
easy to increase in size if further pages or services are added to your site
such as a wedding list service.
As the templates adhere to HTMl version 4.01 they will be supported by most browsers on the current market and any new browsers released shortly. These codes will not become obsolete until new versions of the HTML code are brought out by the World Wide Web Consortium and even then there is no rush to adopt these new versions as browsers will continue to use version 4.01 for some time. This means that there should be no major coding changes needed for quite some time to come.
I trust that the designs are to your satisfaction but if there are any areas which you are unclear on please feel free to contact me.
Footnote
(1) Please be aware that borders/edges in graphics do not display on Netscape version 6.x
so I recommend that the templates are viewed in Netscape 4.x.