Website Design, Creation and Evaluation
HND COMPUTING
Department of ICT
Module: Website Design
Assignment Title: Website Design, Creation and Evaluation
Submitted by: Josh Gardner
For the attention of: Mike Bird
Date submitted: 30th January 2009
Acknowledgements
I would like to thank Mike Bird for all his help with this project,
Abstract Summary
In this assignment I have researched several current e-business websites, and assessed their respective designs and functionality. The original Assignment structure was:
. Assess the design and functionality of existing and established e-business sites.
2. Examine a range of web authoring tools for creating multimedia websites.
3. Develop an integrated set of web pages / frames.
4. Develop interactive applications on a web server.
For each of the points above, I spent a substantial amount of time researching each area in detail, making sure I had plenty of information so I could make informed decisions. I feel this has had a positive effect on my final results and conclusions.
This report is presented in an organised manner, with a logical progression from the initial ideas and assessments, through to the final design and implementation of my website.
Microsoft Word was used for the creation of this report.
Table of Contents
Chapter 1: Introduction p5
1.1 Introduction to Assignment p5
1.2 Action Plan p5
1.3 Chapter Listings p6
Chapter 2: Assessment of current E-Businesses p7
2.1 Evaluation of www.amazon.com p7
2.2 Compatibility of Amazon with multiple browsers p10
Chapter3: Examination of Web-Authoring Tools p14
3.1 Markup and Scripting Languages p14
3.2 Commercial web authoring tools p15
3.3 Conclusion p17
Chapter4: Development of web pages/frames p19
4.1 Concept and Methodology p19
4.2 Planning and Analysis p19
4.3 Design p21
4.3.1 Look and Feel ideas p21
4.3.2 Design Methodology p21
4.4 Implementation p21
4.5 Pre-Publishing Testing p30
4.6 Promotion p33
4.7 Innovation p33
Chapter 5: Development of applications on web server p34
5.1 Hosting p34
5.2 Post-Publishing Testing p35
5.3 Turning WorldGolf into an E-Business p36
5.4 Evaluation p37
5.5 Maintenance Plan p37
Appendices p38
References p47
.1 Introduction to Assignment
In this assignment I am going to be looking at several existing e-business websites and evaluating them individually with respect to the established rules of web design. Because of the nature of the internet, there are many such websites; however I will concentrate on some of the more recognised ones.
I will also be looking at different software packages which allow for the creation of such sites, in particular multimedia websites. This will involve looking not only at the features of such packages, but also will require research into the scripting languages themselves. Based on my findings I will decide which tools I believe to be ideal for the problem in hand, stating my reasons.
From this point onwards I will begin the design and implementation of my own set of web pages, documenting the process as I go along. The site will be themed around that of an e-business website. It will be tested extensively before the next step of publishing the site to a web server.
From this point the problem of re-testing and maintaining the site will arise.
This will require the creation of a Maintenance Plan.
.2 Action Plan
For this assignment I am going to create an action plan which will help me organise the progress of the project. This will allow me to easily manage my time much more efficiently and ultimately benefit the project.
.3 Chapters
Chapter 2: Assessment of current e-business websites
Chapter 3: Examination of authoring tools for creating multimedia websites
Chapter 4: Development of integrated set of web pages
Chapter 5: Development of interactive applications of web server
Appendix A: Look and Feel Designs
Appendix B: Colour Designs
Appendix C: Development Log
References
CHAPTER 2
Assessment of current e-business websites
In this section I will be taking a look at current e-business websites, evaluating their design and functionality.
After researching, I have decided to evaluate www.amazon.com. I have chosen this website due its huge popularity and its well publicised commercial success.
2.1 Evaluation of www.amazon.com
Before any evaluation takes place, it would be wise to remind oneself of the established proper practices for a website's design and functionality.
The main points to consider are:
. Simplicity is key
2. Design is paramount
3. The website should be easy to navigate
4. The website should be consistent in terms of style and presentation
5. Pick a colour scheme which works well
6. Take care over the content
7. Develop the site with multiple browsers in mind
With these points in mind let us begin our look at amazon.com with a quick first impressions glance at the site as it appears in our browser:
I think that the site clearly reflects the nature of a business. Everywhere you look there are products on offer.
Let us now assess the site against the principles listed previously:
. Simplicity
I think in terms of simplicity, the site is ok but could be much better. Because of the nature of product rich sites, things can often become very confusing and cluttered. This site's organisation is, in my opinion far from excellent. There is rather a lot of clutter, however this is to be expected from what is basically an e-shop. Selling products is the name of the game after all, and the front page is clearly about capturing people's attention.
2. Design
The site is definitely good looking, and is clearly designed to capture the attention of the user immediately. After all, the aim is to keep the user browsing the site as long as possible; logically the more time spent looking means more chance of a purchase. Everything looks clean and tidy, and the presentation of the site is excellent.
3. Navigation
One of the major strength's of the website is the ease at which you can access different areas of the Amazon store. Perhaps you want to see what is the best selling CD, or maybe you would just like to browse for a pair of jeans. Even though at times I feel the website is cluttered, anything you want you can find with relatively little trouble.
The main components for navigation are both the category list at the left hand side of the site, and also the search bar at the top of the page.
Both of these navigational methods are quick and easy to use, and in terms of a business they are crucial to selling more items and making more money.
4. Consistency
Consistency is the key to a good website, and with this site in particular everything is in keeping with the same general theme. Font's, colours, borders and buttons all fit the same general style. This colour scheme is also very important in defining the Amazon brand, making people much more aware of the site.
5. Colour Scheme
Again the website is visually appealing. The site's colour scheme is not too overpowering, combining light blues and oranges with light greens and light reds. All text is easy to read, and the site as a whole is very easy going on the eyes. Prices and stock levels are also indicated by the use of colour, making them much more noticeable to the user, again helping the business.
6. Content
If there is one reason for the success of amazon.com it is the overwhelming choice of items at competitive prices. The site is content rich, with millions of products. Products come with user ratings, detailed descriptions, images, videos, audio samples and reviews. The amount of information available for any product is overwhelming. As well as the products, the other services that are available such as creating accounts, setting up credit cards, and tracking packages are all extremely helpful to the user. These features all add up to make browsing amazon.com an enjoyable experience. There are few e-businesses which can compete with the quantity and quality of the amazon network.
7. Browser compatibility
This is a very important issue, which many websites overlook. Many times a website will be displayed incorrectly on a different browser, or some page elements in particular may not work correctly. Subsequently because of this incompatibility, their consumer base is reduced. With the case of Amazon.com there are no such issues. This is showcased in the following section.
2.2 Compatibility of Amazon.com with multiple platforms
Concentrating on the browsers which make up the majority of the internet user base (using [1]), I will look at Internet Explorer 7, Firefox, Opera, Safari, and Google Chrome.
...
This is a preview of the whole essay
This is a very important issue, which many websites overlook. Many times a website will be displayed incorrectly on a different browser, or some page elements in particular may not work correctly. Subsequently because of this incompatibility, their consumer base is reduced. With the case of Amazon.com there are no such issues. This is showcased in the following section.
2.2 Compatibility of Amazon.com with multiple platforms
Concentrating on the browsers which make up the majority of the internet user base (using [1]), I will look at Internet Explorer 7, Firefox, Opera, Safari, and Google Chrome.
Although it is impossible in the scope of this report to completely test amazon.com with several browsers I feel it is important that at the very least I load up the site and spend a small amount of time navigating around the site, just making sure there are no glaring inconsistencies.
Please note that all these tests were performed on a Windows platform.
Internet Explorer 7
Internet Explorer is the most used piece of software for browsing the internet, and as such you would expect it to display websites correctly. As is evident below:
Google Chrome
Booting up the site within Google's Chrome browser took less than a second. As shown below, the site is displayed as expected:
Opera
With the Opera browser, the result is identical:
Firefox
Second to Internet Explorer, Firefox has the biggest internet user base. It is therefore no surprise to see the site load fine:
Safari
Normally intended for the Mac platform, Safari still displayed the site correctly running on Windows Vista:
Summary
Unsurprisingly, amazon.com works on all major browser platforms without any trouble. On each test I made sure to open several different links, and also make a search. In all cases the results were excellent, with no inconsistencies whatsoever.
CHAPTER 3
Examination of Web-Authoring tools
3.1 Markup and Scripting languages
"A markup language is an artificial language using a set of annotations to text that give instructions regarding the structure of text" [2]
There are hundreds of different markup languages, each having a different purpose.
With regards to website construction the following document markup languages certainly need mentioning:
HTML
Hypertext Markup Language (HTML) is the most widely used markup language for web pages. Using HTML, you can use the structure of text based information to create documents, i.e. web pages. HTML works by using tags. It allows images to be embedded within the document, as well as other objects such as scripting code. The disadvantage of HTML is that it isn't strict, i.e. it doesn't all adhere to the same formatting. This can cause compatibility problems with different browsers. HTML is also static, and offers no dynamic qualities.
XML
Extensible Markup Language (XML) is a specification for the creation of custom markup languages. It allows the user to define the markup elements themselves. Although very similar in syntax to HTML, XML is different in that it separates structure and display, making XML more portable. The disadvantage of XML is that it requires conversion to HTML, currently making it unsupported in several browsers.
XHTML
Extensible Hypertext Markup Language (XHTML) is essentially HTML which also conforms to XML syntax. It is much stricter; documents need to be rigid and well formed. Because of this strictness, XHTML documents can be automatically processed and subsequently displayed faster in XHTML supported browsers. At the current time XHTML is of Limited practical use.
There are hardly any browsers that offer benefits when receiving and processing XHTML documents. The most frequently used browser (Microsoft Internet Explorer) does not even support XHTML.
"A scripting language is a programming that allows some control of many or single software applications" [3]
Again, thinking in terms of web design, the following scripting languages are important:
JavaScript
JavaScript is used for embedding functions into HTML web pages. JavaScript can run locally in the user's browser, and as such it is fast to respond to user actions. JavaScript can also respond to individual user actions, such as slicking the mouse or pressing a key. This allows lots of flexibility within a web page. Business websites favour JavaScript because of
CSS
Cascading Style Sheet (CSS) is a language which is used in the presentation of any markup language document.
It is primarily used alongside HTML/XHTML to style web pages, and works by separating the document content written in HTML, from the document presentation (written in CSS). CSS is useful because it allows an entire website's style and presentation to be changed by simply changing one CSS file. This is much more efficient, and also ensures the site retains the same consistency.
Flash Scripting (ActionScript)
ActionScript/ Flash is a powerful method of adding interactivity and animation to web pages. It allows multimedia streaming and manipulation of graphics. Flash is often used in business websites to make them appear much more slick and professional. There is usually a compromise between high quality flash animation, and the time taken for the site to load.
3.2 Commercial web authoring tools
Current web authoring tools include many different features for creating, testing, publishing and maintaining web sites.
There are several different software tools available today, but I am going to focus my attention on the two big players, Adobe Dreamweaver and Microsoft Expression Web(previously called FrontPage).
From my research, these two packages offer the most complete solutions in terms of web design.
The features of both of these packages are outlined below:
Adobe Dreamweaver CS4
WYSIWYG Interface
Adobe Dreamweaver is a software package which offers user a "What You See Is What You Get" (WYSIWYG) interface for the creation of web sites. The software allows users with very limited knowledge of website design to create very professional sites.
It offers many simple tools, such as the ability to drag and drop objects onto a blank web page, for instance a button or a drop down menu etc... The software automatically generates the HTML code behind the scenes.
HTML Editing
Dreamweaver offers hints whilst coding in HTML to make the process easier. Direct HTML editing is possible, allowing the user to directly manipulate certain sections of the website. All of these changes are displayed in real time in a rendered display.
Extensions
The software also supports other formats including JavaScript, CSS and Flash. This is alongside support for HTML, XHTML, XML, Ajax, PHP and ASP technologies.
Adobe Photoshop Smart Objects
Inserting a Photoshop object into Dreamweaver allows a linked image to be defined, meaning that any changes made to the Photoshop file are automatically updated in the site. This makes the site much easier to maintain, effectively halving the effort required to update sections of the business website.
Summary
To summarise, Dreamweaver is a very user driven application, which can appeal to a beginner or an advanced user. It also offers support for most of the main technologies which are in use today. Impressively the software offers real-time feedback on the site you are developing.
Microsoft Expression Web
Professional Design Environment
Expression Web offers a very clean and organised interface, and uses task panes and menus to separate areas of the design.
Support for new standards
Expression Web supports XHTML, CSS, XML and XSLT standards and helps make sure that the pages are compliant with the chosen standard.
CSS made easy
Expression Web offers "drag and drop" control, allowing automatic creation of CSS documents. There are also professionally designed CSS templates available to use. There are also several CSS management features, designed to allow the user to see where CSS rules are, and what level of application they apply to the site. CSS will be used to on the contacts page to manage the text boxes containing user information.
XML
Drag and drop control over XML files, allowing easy importing of XSL stylesheets. These can then be styled in accordance to the overall style of the site. Also offers options such as filtering and sorting of XML data.
ASP.NET support and PHP editing
Offers powerful support for ASP.NET without requiring the user to have ASP.NET coding knowledge.
Summary
To summarise, Expression Web is also a very powerful suite. The software has clearly been developed with the future of the internet in mind, and ensures correctness of code. It also offers support for scripts, and makes it much easier for the user when it comes to CSS design.
Other Options
I could also use a text editor for my HTML editing purposes for instance Microsoft Notepad, or Microsoft Word. This option would offer much more freedom, however it would provide very little information on the integrity of the html code.
There are several text editors with in-built HTML syntax such as jEdit, or EditPlus.
3.3 Conclusion
Before I begin the design of my own website it is important to pin down some specifics.
Firstly thinking of browser compatibility, I believe that HTML would be the most sensible idea, because all browsers are compatible with HTML. HTML also supports CSS and scripting languages so it will make designing a professional website easier. With all of these factors in mind, HTML seems to me to be the more logical choice.
As I have said, HTML offers the possibility for scripting, and I think that my website would work well with Flash in particular. From my research, I have seen that there are some e-businesses which do not suit Flash at all and there are some which work extremely well. The e-business that I have in mind would use Flash, but not extensively. It would only be used in small touches but I think it would add a level of professionalism to the website.
JavaScript certainly has its uses, and is essential for some e-businesses. I do however believe that the addition of JavaScript would be unnecessary.
With regards to the choice of authoring software, my selection is ultimately reflected in the choices I have made above. Although both packages offer impressive toolsets, Dreamweaver would be the better of the two for my purpose. Not only does it make web design easier in terms of layout and design, but it caters for Flash more so than Microsoft Expression.
I feel that using Adobe Dreamweaver, I will have the tools to successfully design a very professional website.
CHAPTER 4
Development of web pages/frames
4.1 Concept and Methodology
Before I begin designing and prototyping my website, I must have a site in mind. I have decided to go for a golfing e-business, selling various golfing items such as clubs, bags and golf clothes to name but a few. The is prompted by the fact that I myself have a great deal of interest in the sport, and have a good knowledge of golfing products. Also the idea of a golf e-business fits nicely with the size and scope of what I am trying to achieve with this project.
Therefore for this purpose I will be creating the company: World Golf, an online retailer of golfing goods.
Whilst researching development methodologies, it became clear to me that there aren't that many specific to web development. The most suitable I found was the John December methodology .
This is a 6-fold development methodology, focussing on core components of Planning, Analysis, Design, Implementation, Promotion and Innovation.
This will be the methodology that I will roughly adhere to during my development.
4.2 Planning and Analysis
Who is the website aimed at?
The site is primarily designed for the golfing audience, and this will be where the majority our business lies. Attracting customers from outside our normal target zone will be an ongoing problem for the business. Our target audience will be people in the age range of 18 - 50 year olds i.e. the general golfing society. I will have to take this age range into account when designing the website, in terms of layout, colour and accessibility.
Why create the website?
The reason for the creation of the site is to establish an interface between World Golf and its customers, and ultimately allow the products and services to be purchased by the consumer.
How will the website be created?
The website will be designed using Macromedia Flash scripting and Macromedia Dreamweaver.
What maintenance will be required once fully developed?
Ultimately the site will reflect a real shop. Therefore products will need replacing, quantities updating, sales advertised etc...
The maintenance of the site is therefore key to the success of the e-business. With this in mind the site must be easy to update.
4.3 Design
It has been decided that I will be creating a site using Flash and Dreamweaver, and that the website will be a golfing shop. I need to ascertain what the site will look like and how it will operate.
4.3.1 Look and Feel ideas and Questionnaire
I will begin with some initial sketches and ideas of the look and feel of the site. These are included in [Appendix A].
Of all the designs, I think that design number 3 offers the most promise in terms of visual quality, ease of use and professionalism.
To get a good idea of what colours, font's and theme I am looking for it would seem sensible to have a look at some sample designs utilising these elements. These are also included in [Appendix B]
Personally I believe that design number 2 offers the best choice in terms of professionalism and accessibility. Results from the Look and Feel questionnaire also confirmed these thoughts. For the questionnaire results see APPENDIX C.
4.3.2 Design Methodology
I have decided to adopt John December methodology for implementing my website. I have chosen this methodology because I have a rough idea of how the front page of the website will look. By beginning with this page I can then branch off and create the various other pages of the site. In the Design phase of this methodology I will be focussing on making sure the colour scheme of the site works well, and also ensuring the site is easy to navigate and accessible to our audience, with consideration for those with any visual disability.
4.4 Implementation
The creation of the site will begin with the main page. Since I have a rough idea of how it will look it makes sense to begin with this in mind, making sure I achieve the right colour scheme.
Following my guides, the main page will have the logo and slogan at the top, followed by a menu bar across the right hand side. The normal Privacy Policy and Terms of Use links are at the foot of the page.
The initial front page looks like this:
After scouring the internet for a nice background image I found the following using Google Images [Appendix C]:
Using Adobe Photoshop I will modify the image to make It more dramatic. I will also change the orientation, and lose some of the background detail.
The result is rather nice:
Applying this to my site gives me a nice dramatic front page.
Progressing on to the products page, i.e. the first link, I want to aim for more of the same style, maybe even keep the background image slightly visible. To do this I think I will create another page object, and have this appear over the main page. Down the left hand side I will list the different categories of the store i.e.
Finishing the page off with some introductory text and images, the result is the following:
The returns section will follow the exact same style, information down the left and right, with slight variations in image position and size.
Content wise there will be links to refunds, warranty information and insurance policy information. Again, scouring the internet for images relating to broken clubs I have found a couple of nice images which suit the colour scheme of the site. The resulting page is:
World Golf offer several services such as fittings and repairs. These two services are what the services section of the site will revolve around. Again, adopting a similar
Style and using a selection of images from the web, I think the resulting page looks nice. All images which were attained from the website were edited within Adobe Photoshop to make them more appealing to the site, and also for scaling and colour correction.
The page can be seen below:
The About Us page is a simple page which contains information about the history of the company. A selection of in-store photos help to show off the business.
Here is the result of the page.
Finally the Contact Us page. This will need information regarding our location, and it would also be nice to add functionality to allow users to post questions via the site.
At a first glance the page looks like the following:
From research looking at other websites I believe the best idea would be to require Name, Phone number and E-mail address of the user, such that the user could be contacted if necessary. The resulting page looks excellent I feel:
Now that the individual pages are complete it is time to start linking them together. This is where I will begin some simple coding using ActionScript.
When I select the products link from the menu, I want the products page to fade in over the top of the main page.
Basically I need a simple gotoAndStop method.
For instance if I assigned gotoAndStop(5) to a button then the playhead will be sent to frame 5 once it is pushed.
Because of the way I have set up the buttons, frame1 is products, frame2 is returns, frame3 is services etc... Similarly for the pages, frame1 is the product page, frame2 is the returns page etc...
Therefore the code: gotoAndStop(_parent.p) will be used.
Similar code is used for the home buttons and mail buttons found in the top right hand corner, the home icon returning to the initial blank screen and the mail icon directing the user to the Contact Us page:
Another snippet of code was used on the Contact Us page.
The text field where the user writes their comments/questions includes a clear button which removes any text already entered and resets the text box.
The code for this is fairly simple:
on (release) {
for (i=1; i<_parent.fields_descriptions.length; i++)
{
_parent.reset_txt(_parent["t"+i], _parent.fields_descriptions[i][1], _parent.fields_descriptions[i][2]);
}}
The code uses a simple for-loop to loop through each text box to replace the text in there already with the hard coded text found in the array fields_descriptions.
After exporting the site to HTML there were problems centering the flash object on the page.
Eventually I managed to achieve the desired result by using tables and tinkering with the HTML:
<table cellspacing="0" cellpadding="0" align="center" id="main_table_shell">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24" width="766" height="750">
<param name="movie" value="flash/main_v7.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
As you can see the flash file main_v7.swf is referenced within the table object. The table alignment is also set to "center".
There is also a css file, "style" which contains simple html to define the style of the page outside the flash file. It is important as it ensures the site maintains the same colour and theme all over.
Here is the code to ensure the background colour matches that of the flash:
body { background:#444C59;}
For full code see [Appendix 3]
4.5 Pre-Publishing Testing
I now need to make sure the website runs smoothly and that the code functions as it should do.
I will begin by making sure that the website loads up correctly in my test browsers.
Here are some screen grabs to prove this is so.
Note that the speed varied per browser, however the flash loaded up very quickly in each case.
Internet Explorer 7
Google Chrome
Opera
Firefox
Safari
Button Selected
Expected Outcome
Actual Outcome
Working Correctly?
Notes
Products
Should be taken to Product page
Taken to Product page
YES
-
Returns
Should be taken to Returns page
Taken to Returns page
NO
Mistake in the coding. Incorrect ID#. Now FIXED
Services
Should be taken to Services page
Taken to Services page
YES
-
About Us
Should be taken to About Us page
Taken to About Us page
YES
-
Contact Us
Should be taken to Contact Us page
Taken to Contact Us page
YES
-
Home icon
Should be taken to front page
Taken to front page
YES
-
Mail icon
Should be taken to Contact Us page
Taken to Contact Us page
YES
-
I also need to make sure that the site's links all function correctly. Here are the pre-publishing testing results:
4.6 Promotion
With real world projects a lot of time will be spent promoting the website i.e. making it known to the world. Great method of publicising the website would be:
* Posters and Billboards
* Advertisements in Golf publications, or Golf TV channels
* Advertisements on other websites
* Generating Key-Words for search engines to attract users
* Sponsorships
4.7 Innovation
This section of the report focuses on user testing and a critical evaluation of the website. I will complete this further along in the project timeline, ideally after I have uploaded the website to a real server. See Chapter 6 for this.
CHAPTER 5
Development interactive applications on a web server
5.1 Hosting
After researching free web hosting services available on the web I found various sites which all offered similar services. I decided to choose leadhoster simply because they allow files of up to 500kb, which will be an ample amount for my flash file.
Setting up the account and the domain name, I have settled for the domain name worldgolf.leadhoster.com.
Uploading my files to the server took a matter of seconds. Below is the overview of the leadhoster interface showing my uploaded files:
Notice the flash is in a separate folder, as it is referenced this way in the HTML code.
The flash file can be seen below:
5.2 Post-Publishing Testing
Initially I had some small problems viewing the site, however I soon realised that I needed to make sure the flash file was in a separate folder called "flash".
Once this was done, testing the URL, worldgolf.leadhoster.com results in:
Using Google Chrome the site took less than a second on my internet connection of 1meg/s. Looking at the various browsers and comparing the speed of these in turn, the results are very positive:
Browser
Approximate time to load up
Internet Explorer
3 sec
Google Chrome
sec
Opera
2 sec
Mozilla
4 sec
Safari
3 sec
This will obviously change depending upon the content of the site and the amount of information present; however it is a positive start.
Adopting the same testing attitude as in the Pre-Publishing section, each link needs to be tested for consistency.
The result is as expected - every link works correctly.
5.3 Turning World Golf into a fully functional E-Business website
Although I am happy with the site there needs to be more functionality if it is to be a true e-business site. There are certain features that are required, for instance the ability to add items to a virtual shopping basket and to pay for them via credit card etc.... All these features need to be implemented seamlessly.
There are various ways to do this, the easiest being to purchase "shopping cart service" from another organisation. Basically i would be paying for HTML code which has already been written; code which i can insert into my own HTML and it will give our site that added functionality.
A site which offers this is www.ecartsoft.com for instance.
The popularity of Google and PayPal makes me think that integrating Google Checkout and PayPal functionality would also be a smart decision. Both of these are similar to a checkout system, however both simplify the process. PayPal allows users to simply enter their PayPal details and buy instantly. Google allows people a similar service and it also works hand in hand with Google AdWords.
This brings me round to the promotional side of the business. Advertising is crucial. One of the most effective and simplest ways of advertising the site would be to subscribe to the Google AdWords service. Google dominates the search engine market, and so it would be highly beneficial to get World Golf coming up in peoples searches.
Another thing which is certainly necessary is some method of delivering the products to people's homes. This alone is a massive logistical operation, something which goes beyond the scale of this report.
Web security is also extremely important. Secure Socket Layer (SSL) is vital to ensure customer confidentiality and security. SSL certificates can be purchased in a similar way to Checkout Services.
5.4 Evaluation
Overall I am very happy with the finished website. I think that it looks very professional and conveys a very good image to the user. Not only that but it is very quick loading, taking up only a small file size. On an independent server I believe the speed would be truly impressive, even with a huge product database.
I think that the site has rather a nice style, and is different to other golfing stores that I found online. It is always useful for an e-business to appeal to the user, and I think that World Golf would do so; certainly in a visual manner.
I completed the project well, comfortably within the given timeline. My initial planning certainly helped to give me a clear idea of what I wanted to achieve and how best to do this.
Looking back it would have been nice to perhaps implement some basic shopping features, such as a checkout system, just to get a feel of how this would work with my website. More planning could probably have been done to achieve this; however I do not think it is detrimental to the finished project.
The site certainly holds promise for future development, and it would be interesting to see how the site could be transformed into a fully functional e-business, yet still remain easy to use and accessible. I believe it is possible, but care must be taken to ensure the site remains manageable.
5.5 Maintenance Plan
Maintaining the site will be an important part of the development process. I felt that it would be better to separate sections of the maintenance by time scale. For instance different areas of the site only need looking at a few time a year, however content needs updating much more frequently that that.
Below is a maintenance plan for the World Golf site:
Content-Based Tasks
Who Performs
Technical Tasks
Who Performs
Tasks to be performed as needed:
* Update products
* Update organization information
* Update other content
Editor
* Coding as needed
Developer
Tasks to be completed the first week of every month:
Each month the following tasks will be performed on the pages on the site, such that each page on the site is current:
* Review spelling on technical terms
* Review, update, and optimize old content
* Add new content (and optimize)
* Edit content
Editor
Each month the following tasks will be performed on the pages on the site, such that each page on the site is current:
* Spell check
* Fix HTML
* Be sure special elements (scripts, multimedia, forms, etc.) work
Developer
Tasks to be completed every quarter:
* Update broken links
* Review statistics to learn what pages are popular; update home page or features as needed, based on this info
Editor
* Run broken link report
* Review statistics for technical problems
Developer
Tasks to be completed every 12 months:
* Review content on every Web page
* Schedule reviews for technical content
* Review special elements to decide if they are still necessary
* Review major content sections to decide which are still necessary; decide if need new content sections
Editor
* Decide if redesign is necessary (from a technical standpoint)
* Clean up directories
Developer
Although this plan is by no means 100% comprehensive; it addresses some of the main issues which would arise with this certain type of website.
APPENDIX A
Prototype and Design Storyboards
APPENDIX B
Colour Scheme Designs
Style #1
This theme focuses on golfing colours easy to read fonts. I think the colours work well together.
Style #2
This theme is slightly more professional looking, but yet still remains accessible. It also is easier to read, using a more neutral colour scheme.
Style #3
This theme in particular uses a simple two tone idea of greens and whites, with effective usage of gradients to help blend borders together.
Style #4
This final theme uses bold and luxurious colours to give a sense of quality.
The splash of green helps give the otherwise bland scheme a nice kick.
APPENDIX C - Results from the Questionnaire.
Look and Feel Questionnaire
Please look at the different website templates on the preceding page and also the four different colour schemes then answer the following questions:
Question 1: Which style template do you think is most accessible?
Question 2: Which style template do you think is the most professional?
Question 3: Which style template do you feel is the best compromise between Originality and Professionalism?
Question 4: Which colour scheme do you think is the most suitable for an Online Golf Shop?
Question 5: Would you prefer a website with:
Question 6: Are there any other details you feel which are important?
................................................................................................
................................................................................................
................................................................................................
Thank You
Josh Gardner
APPENDIX D
Development Log
Throughout the development of the project several images were used and edited, and HTML code was written.
The Images are accounted for here:
The full HTML code is displayed below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>World Golf</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" id="main_table_shell">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24" width="766" height="750">
<param name="movie" value="flash/main_v7.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<!--[if !IE]> <-->
<object data="flash/main_v7.swf"
width="766" height="750" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object></td>
</tr>
<tr>
<td height="100%" bgcolor="#2F333C"></td>
</tr>
</table>
</body>
</html>
Size of main_v7.swf (Flash Movie): 210kb
There is also the Style Sheet file, Style.css. The full code for this file is below:
td {
text-align: left;
font-family:tahoma;
font-size:11px;
color:#798290;
line-height:14px;
vertical-align:top
}
a {text-decoration:underline; color:#9FEC00;}
a:hover {text-decoration:none;}
img { border:0;}
table { height:100%; width:100%; border:0;}
body { margin:0px;padding:0px; background:#444C59;}
input, textarea {font-family:tahoma; font-size:11px; border:1px solid #6B6B6B; background:#ffffff; color:#313B48; padding-top:1px; padding-left:4px;}
span a { color:#AEBACD;}
span { color:#AEBACD;}
ul {margin:0; padding:0; list-style:none}
li {background:url(images/a.gif) center left no-repeat; margin:0 0 0 0px; padding:0 0 0 20px; line-height:20px }
#main_table_shell {width:766px;border:1px solid #2D313A;}
#main_table { width:766px; height:750px;}
References
] Google Dominance, precursorblog.com/node/749
[2] Wikipedia, http://en.wikipedia.org/wiki/Markup_language
[3] Wikipedia, http://en.wikipedia.org/wiki/Scripting_language
[4] John December, www.december.com/john/