Kudler_Fine_Foods

Moving Kudler Fine Foods Toward an E-Commerce Solution Learning Team A Danial Hernandez Web 237 January 14, 2011 Kristi Ruddle Moving Kudler Fine Foods Toward an E-Commerce Solution Kudler Fine Foods is a gourmet company aiming at providing exquisite foods and ingredients to its customers. To expand their business and give the best customer service Kudler Fine Foods has proposed expanding their current website to incorporate e-commerce. The current website design today, provides information only. The website, though esthetically pleasing, is lacking in several areas. Team Alpha, a group of aspiring web designers have been hired to examine Kudler's website and submit an in-depth proposal on how improvements to the website can be made to boost revenues and make Kudler Fine Foods a house hold word around the globe. Website Design Kudler's current website has an esthetically pleasing layout with excellent use of background images and logos. The navigation bar is functional and easy to understand. The design of the site allows the background and logo to stay static while the content area of the page changes. This is done with the use of JavaScript making the load time and bandwidth consumption optimal for this site. The site also has a rotating image showing aspects of what Kudler is about. This website is top notch and would not need many changes to the current layout. The current website even incorporates a survey tab allowing customers to rate the store fronts customer service. However, to accommodate a shopping cart to move Kudler Fine Food to an e-commerce market, changes to the page layout and code is vital. XHTML Tags In addition each web page is tagged with key words. Using a table helps to keep the items organized, and well formatted. Header tags will be used to title the page. Last, frame tags will need to be used to ensure that the cookie-based shopping cart is executed correctly. Graphics Proposed changes to the website include removing the rotating image on all pages except for the home page. This will allow more room to display the products which will be sold on the website. Cascading Style Sheets will be used to format the graphics so that they are displayed in the same manner. Team Alpha will incorporate a standard six hundred pixel per inch (ppi) to prevent a user from scrolling horizontally to view the rest of the web page. According to Castro (2007),filling up the user’s monitor is not the best thing to do. Additionally each product image, in a jpeg format, will have an alt text with a description of the item displayed. It is recognized that not all visitors will use browsers that will interpret Kudler’s web page as we intend, and so it is important that all graphics have some form of alternative text to be displayed to provide a description to visitors even when the image does not show. Using jpeg format will keep each image file size down so as not to affect the load time of the webpage (Castro, 2007). Content Kudler’s web pages will be redesigned to include Cascading Style Sheets (CSS). The use of Cascading style sheets (CSS) is one of the most important aspects of this type of website. With the use of frames we need more than ever to make sure that the format for information stays the same. The first CSS sheet was designed for basic elements. Each frame has to be set for height, width, margins, padding, background color, border-styles, etc. As the logo frame and background image are the same on all pages, Team Alpha will place the url of the image as a background style eliminating the need to code the image in each page. Other items addressed using CSS are the font size and type for different elements like paragraphs, td (single table cell), ul (unordered list), ol (ordered lists), forms, links, navigation, div's, images, etc. Some inline styles are used for the shopping cart information. Shopping Cart The team decided to go with a client side shopping chart. This type of shopping cart requires the use of browser cookies to store the list of items to be displayed the shopping cart program (Guy, 2008). Once the user has finished shopping the information in the cookies is processed and sent to either a CGI program or one of many available commercial processing sites like PayPal. This method of storing the information in the browsers cookies saves time and bandwidth as all the processing is done on the client side. The biggest drawback with this method is that cookies do not follow page changes, so to enable the user to browse different departments the site must be set up in frames allowing the content of the frame to change without loading a new page. Another drawback to this system is that the product ID and pricing information must be stored on the page within the html code itself. This creates larger pages and makes it difficult to update product information. Team Alpha suggests that an XML document linked to a database be set up if the product line is expanded from its current inventory. This change will allow all the product information to be stored and updated in the database then downloaded with the use of the XML document into the pages of the website. The downside to this is the company will have to hire someone to build and maintain the database. The company could use a third party company to handle this option, elevating the need to by servers. It is easy to see that over time, the company would be better off buying and maintaining its own server equipment. JavaScript The JavaScript shopping cart uses function calls to run logic loops for decision making. The shopping cart is designed to use the browser cookies to create an array used to store the information of selected products. The AddToCart function uses decision making (if, else) statements to check if the products fields are null or empty and if it is empty to clears the array associated with that field by using statements like strID_NUM ="" or strPRICE="0.00." When a field has information in it, the if statement moves to the else statement and the string is set to the value of the input box. The decision-making statements; using both for next loops and Boolean logic, allow the functions to calculate total cost, taxes, and shipping as well as making changes to items in the cart like changing quantity and deleting items. The decision-making loops allow for form validation and alert messages letting the user know if he or she missed required information or inputted invalid information. A good example of this is the radio button verification used to make sure the user selects the proper tax selection. If the user does not select an options, they receive an error message and is prompted to make a selection. Though this method of creating a shopping cart is easier to set up and works on the client side, it is important to remember that with big inventories that a CGI controlled shopping cart with the ability to save the cart information on the server for later retrieval is a much more secure way to do business. The markup on the site will need to be loose to incorporate the JavaScript shopping cart as well as the images and formatting. The site will use tables and frames, so it is important to denote that in the mark up as well. For these reasons, xhtml 1.0 frameset EN will be the preferred markup Metadata To move Kudler Fine Foods to an e-commerce market, metadata will play a key role to bring visibility and traffic to the website. Our goal is to bring Kudler Fine Foods to the forefront when someone conducts a search for “gourmet foods” from within a search engine (e.g. Google, Yahoo, etc). To accomplish this, metadata is embedded in the code of each web page. The title, description, and keywords for a web page are forms of metadata. Meta title.The meta title for Kudler Fine Foods’ will be under ten words, summarizing the content of each web page. The meta title will include two of the most important keywords from the content of a particular page (Stir Communications Group, 2010). It is extremely important to use engaging titles, as the meta title used will oftentimes be the same title a search engine will use to list the webpage. The title of each webpage will clearly explain the content of each page. Meta description. The description of each webpage further elaborates the webpage title, by describing the content in more detail. Again, as in the title, the description must be engaging as search engines users will read this description in the results of a search. Ever search engine user reads the description of the listing results for relevance. If they do not like what they read, they will never visit the site. Content. Content of Kudler Fine Food’s website is another area of. Both the picture names and the alt text will include the name of the product being sold. This allows those searching for that particular food and not necessarily Kudler Fine Foods, or a more general description. As these change when the product is added or removed, the maintenance is taken care of at the same time. The risk of accidentally forgetting to delete the description in the header no longer exists. Meta keywords. Meta keywords for Kudler Fine Foods are to be listed from most important to least important. Keywords will never be used more than three times. Ten keywords will be in each page as opposed to creating a long list of keywords. Using keywords effectively will yield better results than just listing a bunch of words. Metadata is crucial for Kudler Fine Foods. These are the elements search engines use by which to index a search done by an Internet user. The more accurate the metadata matches or reflects the unique content of a page, the better ranking of that page in the search engine results (Stir Communications Group, 2010). If Kudler Fine Foods’ website is placed within the top listing (first three pages) when the user searches for “wine basket,” the better the chances are that the Internet user will visit the website, thus making metadata a powerful promoter of the website (Stir Communications Group, 2010). Prototype Standards Web design has one simple goal, to increase website sales by bringing as many visitors as possible to the website. Team Alpha will create an effective website by incorporating website standards. To maintain a consistent view of Kudler Fine Food’s website, certain standards set forth by the W3C organization were followed. Team Alpha will incorporate XHTML web pages using CSS to present Kudler Fine Food’s website. This will ensure that browser compatibility and accessibility for those with disabilities will be of no issue. Should browsers not display images on the website; each graphic will have an alternative text so as to provide the visitor with a description as opposed to a blank square. Browser Compatibility To facilitate a site that will be beneficial to almost all viewers, ALPH team set up a test facility to compare browser compatibility. Budget and time restraints allowed for testing the browser on the same machine using windows 7. No compatibility testing was done for mobile devices at this time. The following browsers were tested side by side for both appearance and functionality. * Internet Explorer 8 * Firefox 3.6 * Netscape Navigator 9 * Opera 11 * Safari 5 * SRWare Iron 8 * K-Meleon 1.5.4 * Google Chrome * Maxthon 3 * Advent All browsers tested virtually identical when it came to load time, font, colors, pictures, and background. The following is a photo of two of the browsers side by side for comparison. Even though all the browsers look identical and displays the website without any issues, not all of them pass the functionality test. The following browsers had issues with the JavaScript used to store the order information. Maxthon 3, Google Chrome, and SRWare Iron 8. Even though these browser allowed the alert popup telling the user an item had been added to the cart, the cart always came up as empty. The team tried changing the security settings in these browsers to allow JavaScript and cookies without success. It is recommended that more research be done in the future on making a shopping cart with is compatible with these browsers. This leads us to a couple of small issues noticed during testing. First Internet Explorer using its current settings gives a warning popup at the top of the screen stating "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. click here for options..." Even though this is not a big issue and if the user accepts to allow the script to run the site will function normally, it can cause concern regarding the safety of the site to some users. A similar issue was discovered with K-Meleon when the user clicks to add an item to the cart for the first time he or she gets the following security warning: "The information you have entered is to be sent over an unencrypted connection and could easily be read by a third party. Are you sure you want to continue sending this information'" The program is adding the information about the product to a cookie and not transmitting anything. This could undermine confidence in the security of the site. Knowing that the K-Meleon browser is not one of the top browsers in use and that most Internet users will never see this browser, team Alpha has not deemed this to be a major issue worth investing more time and money into fixing at this time. The outcome of the browser test was very promising and shows that the most used browsers are one hundred percent compatible and that only a few minor changes need to be made in the near future. Website Redesign Plan Team Alpha is ready to redesign the current website according to our comments and suggestions. Team Alpha recognizes that there is always room for improvement, therefore satisfaction surveys and comments from the site will be monitored to determine what aspects of the site users may want to see changed. After the redesign, the next step is the site will be testing. Testing will include determining functionality and compatibility issues. Kudler Fine Foods will need to be available for as many people as possible. To do this browser compatibility issues with the cookies and JavaScript should be fixed, and the active X requirement on Internet Explorer should be fixed. Afterward any new compatibility issues from the redesigned site should be addressed. Finally any suggestions that seem reasonable should be incorporated into the site. It should be run through its final tests. Website Publishing Plan Publishing a website is a fairly simple procedure; however, there are a number of things that need to be considered when one is looking to publish. The first is obviously the storage space and bandwidth. If these are not adequate for the requirements of the site you can rule them out. The next thing that needs to be looked at when selecting a server is downtime. Team Alpha recommends that Kudler Fine Foods reviews web hosts when looking for downtime because while 99. 9% uptime might seem like a good measure of time; it is down for very short amounts of time frequently. After these are considered, the databases that the site allows should be considered. The site should allow a number of databases that will allow Kudler to add a frequent shopping program to what they currently have. All of these are important things to consider given the requirements for the web host. Also the software included on the site should be considered as well as an FTP client, and editing software will make it easier to make small maintenance changes. In addition to the maintenance, traffic should be monitored to keep tabs on how much your site is being used, versus the sales. Many web hosts come with tools like those as well. Lastly, are the services the web host provides. Their security and technical support are both important things to consider because the shopping cart will be an integral part of the new site. Website Maintenance Plan Like anything, to keep the site running properly you will need to perform proper maintenance on the site. This includes checking errors that have occurred as well as any links to be certain that they are still in working order. Each of these should be done weekly unless there is a major issue. Next daily the products being offered as well as their prices should be checked, and if they have changed tested to be certain that the new price is working on the site. Finally when anything is changed on the site a new copy of the sitemap should be sent to Google and other major search engines to continue optimizing the search engine. References Castro, E. (2007). Html, xhtml, and css: Visual quickstart guide (6th ed.). Berkley, CA: Peachpit Press. Guy, L. (2008). JavaScript shopping cart scripting: How to build a JavaScript cart program for HTML web sites. suite101. Retrieved from http://www.suite101.com/content/javascript-shopping-cart-scripting-a44702  NOP Designs. (2003). Free shopping cart - no CGI access required. Retrieved from http://www.nopdesign.com/freecart/ Stir Communications Group. (2010). Search engine placement study. Retrieved from http://www.stir.ca/internet_marketing/search_engine_placement_study.html