Improvement report (2,000 words)

View assignment requirements (pdf – 250kb)

Contents

  1. Purpose and scope
  2. Techniques implemented
  3. Improvements
  4. Scalability
  5. Accessibility
  6. Maintenance
  7. Conclusion
  8. Bibliography

1. Purpose and scope

The purpose of this report is to analyse a set of sample pages from the soon-to-be-upgraded A and B Web site and generate a proposal for improving the overall functionality, structure and design of the site as well as suggesting ways in which the pages might achieve a more interactive and lively look and feel.

The suggested techniques to be implemented in the Web site's redevelopment are outlined in section two. Specifications include the use of platform independant code, optimisation of code and content and the use of external scripts where possible.

Section three details suggested improvements for specific areas of the Web site. Using the sample pages as a reference point, an analysis is made on a selection of useful scripts and functions available to enhance the Web site. Improvements include the introduction of more dynamic content, such as an interactive graph displaying the most popular products. This section also details the rationale behind each design choice and, where applicable, outlines reasons for not using some of the features requested by A and B.

In section four the report discusses scalability and how the techniques applied in the sample pages will be integrated across the entire Web site. Key points include the use of external scripting files and stylesheets and minimal document markup.

Accessibility is discussed in section five. Workarounds are suggested for customers who, for example, do not have JavaScript enabled and the benefits of design for accessibility are examined.

Section Six identifies methods in place for site maintenance. Strategies include detailed commenting on all code, use of external files and styling the site with CSS.

⇑

2. Techniques implemented

Key features

Explanation

The tools used to write the sample Web pages are XHTML 1.0 Strict and CSS2 -- with a small amount of JavaScript where necessary. When combined with CSS, semantically well-structured, standards-compliant XHTML provides the customer with pages which load quickly and behave correctly in standards-compliant browsers. For the company, it means that the site is both faster and less expensive to maintain.

The other techniques applied include the use of an external JavaScript file for scripts which need to be called from every page, one default external styleblock and two alternative styleblocks. External files help to optimise page downloading times and avoid code clutter in individual pages, which would otherwise become a mess to maintain.

The pages are loaded in frames to accomodate the requirements of the site's e-commerce facility. The current trend in the Web design industry is to move away from frames, however in some cases they still offer advantages, such as allowing the presentation of documents in multiple views, which may be independent windows or subwindows.1.

⇑

3. Improvements

General improvements

Key features

Explanation

Frames are crucial to the structure of the A and B Web site, but there is a potential problem in that we do not have any control over how customers enter the Web site from an outside source and they could find themselves stuck in a frameless window without navigation. To overcome this problem, a simple JavaScript is added in the header of every page to check whether the customer has loaded the page outside of the frames and if so, it will force the pages back into frames.

One of the key requirements was to create a more interactive and up-to-date Web site. Part of the strategy to achieve this is in giving customers the option of browsing the Web site in their preferred settings including the option to remove styles altogether. This feature is made possible through the use of CSS styling and a JavaScript styleswitcher which enables the site to display completely different themes by clicking on a link.

For customers who have JavaScript disabled, or who have an older browser, the improved sample pages offer alternative support features such as hypertext links instead of JavaScript links. This can be particularly useful for key elements of the Web site, such as site navigation and the shopping cart, where the appearance of the facilities is of secondary importance in relation to their functionality.

Several JavaScripts need to run on every page of the Web site. The most logical way to include these scripts is to group them together in one external file which is called when needed. This way it is possible to provide a faster browsing experience for customers and it saves code clutter in individual files.

⇑

Home page

Key features

Explanation

This feature checks to see which browser the customer is using and prints a message on the homepage to greet the customer, if the result is true. By itself, this script is not particularly useful however it could be used to redirect the customer to a different version of the Web page based on what capabilities it detects in the browser. For example, if the customer has a pre-Netscape 4 browser then re-directing them to a basic version of the site which does not have CSS, could be a simple and helpful tool.
⇑

Navigation

Key features

Explanation

The select and go technique (as seen on the sample pan page) was suggested for navigating the Web site, however this solution alienates all customers browsing the site without JavaScript. Navigation is best kept simple because it plays a vital role in retaining customers on a site -- if a site cannot be navigated easily, the customer will go elsewhere.

The recommended alternative is to implement textual links with CSS link-hover functionality. In addition, JavaScript can be used to complement this technique so that when the customer hovers their mouse over a link, a hint displays in the status bar describing where the link leads to.

⇑

Sample product page

Key features

Explanation

On the product page, there are several pictures of a sample pan and a solution was required for displaying these effectively. One of the images is rather large and JavaScript has been used to launch a new window to display this image.

For the smaller images, A and B suggested an image rollover effect using JavaScript. Although this technique can prove advantageous in some cases, there are a number of problems associated with using this technique in this instance. For example, it can confuse customers and takes additional time to load the script and images. Displaying images does not need to be so complicated when customers would, in most cases, prefer to have the information easily accessible rather than spend time learning new tricks. The rollover technique has, however, been employed on the sample pan page for demonstration purposes.

The select and go feature, which was originally suggested for the site navigation, could be better used for the purpose of displaying many images. Because there are other pictures available, without the need for JavaScript, the select and go feature can be used as an additional feature for customers who have JavaScript enabled. The difference between putting this feature here as opposed to using it for site navigation is that here the JavaScript function would serve more as an enhancement than as a key function of the site's facilities.

Form

Key features

Explanation

One of the best uses for JavaScript is form validation. In the sample form, scripts have been employed in a number of ways to ensure that the data which arrives at the other end is more likely to be valid than when there were no validation scripts at all.

Noteworthy features include a tab index which moves the cursor logically through the form when the customer presses the tab key or enters the required number of keystrokes. This script assists customers to fill in all sections of the form, leaving little opportunity to miss a field accidentally.

Just in case the customer does manage to miss an important field, there is a script to check that all of the required fields have been filled in. The script will not allow the customer to submit the form until all required fields are completed. To make this requirement less painful for the customer, the alert box explains what is missing and in which format each field should be filled.

At the top of the form is a shopping cart preview box. It is suggested that a feature displaying what the customer has purchased already, would enhance the order form and could be added as a server-side function. However this is outside the scope of this report. There is also a useful select and go function to encourage the customer to continue shopping, and these same links are provided at the bottom of the page for customers without JavaScript.

⇑

Chart

Key features

Explanation

This chart enables the customer to see who is buying what, which may assist them in the decision-making process. The script generates a graph which displays the best-selling products and how they're doing. The user also has the option of selecting a preferred colour with which to view the graph. Whilst the colour selection feature does not bring any purposeful function to the Web site, it does provide extra interactivity for those customers who have the right browser and settings enabled.
⇑

4. Scalability

Key features

Explanation

One of the most effective ways to integrate the techniques applied in the sample pages with the full Web site, is to strip down the code to the bare structural neccessities and move all styles, and as many scripts as possible, over to external files.
⇑

5. Accessibility

Key features

Explanation

All businesses are required by law to take reasonable steps to ensure that their Web site is accessible. This law came into force on 1st October 1999 and any Web site which is in breach of the law is liable to legal action. 2. To accomodate this requirement, the A and B Web site should undergo a thorough validation process and aim to pass priorities 1 and 2 at the very least.

Aside from legal requirements, the benefits of making Web sites accessible includes a much better ranking in search engines such as Google and makes the site more usable by everyone. People can access the Web site in methods that may not have been anticipated. Whether it's wireless Web, text readers, mobile phones or search engines, the principles behind accessible design lead to Web site content that is available to a wider audience.

By creating more flexible documents we can cover those audiences who require the same content but need to have it presented in a way that makes it accessible to them. The flexibility of the demonstration pages has been optimised by writing to the standards, separating content from presentation.

⇑

6. Maintenance

Key features

Explanation

All source code has been documented with comments that clearly states what each script does. There is also a list of scripts included in the sample pages, which can be used as a reference point at a later date. This is particularly important when more than one developer is editing the code and also helps speed up the editing process in future developments.

External JavaScript and CSS files have been used wherever possible to facilitate timely site maintenance. This means that instead of the developer having to plough through every Web page to make adjustments only one file needs be altered.

The original layout of the A and B Web site was done by using tables to make a grid on which to position different parts of the pages, including images. This approach causes maintenance problems, as it mixes presentational data in with content, makes the page sizes unnecessarily large, and make it extremely hard and expensive to maintain visual consistency throughout the site. The improved sample pages of A and B's site have been developed using strict XHTML and CSS, which reflects modern Web design standards and makes the site more flexible and easier to maintain.

⇑

7. Conclusion

The finished product is a Web site which is modern, flexible, light-weight and accomodating of the widest range of customer requirements possible whilst still providing all of the features already in place in the original version.

8. Bibliography

  1. HTML 4.01 Specification, W3C Recommendation 24 December 1999, Retrieved 23rd July, 2004, Frames in HTML documents from http://www.w3.org/TR/REC-html40/present/frames.html
    ⇑
  2. Byrne, J. (n.d.) Retrieved 29nd June, 2004, Web accessibility and the law in the UK: Is your website legal? from http://www.gawds.org/show.php?contentid=59
    ⇑
  3. Negrino, T. & Smith, D. 2003, JavaScript for the World Wide Web, 4th Edition
⇑