For this project I am going to be creating a website for a client, Harry. The website is going to be based on League of Legends E-Sports teams, which is what the client wants the website to be about. The website will have a total of 15 pages - 12 team pages, 1 home page, 2 main region pages.
Components of Production
In order to test the usability of my website, i uploaded my html files to a server at college. Once the HTML was uploaded to the server, it was accessible from anywhere in the college got somebody to test the website for any problems, speed and problems with the website. I also tested on different computers, with different screen resolutions to ensure that the website works on different platforms. Here are the results from the testing.
The most important part of this stage was creating the resource list that the client would use to know what I needed from him, such as images and videos, and when I needed them by. Here is that resource list.
Website Specification
Here is the brief document I created detailing important pieces of the website.
Planning
Planning this project properly is especially important, as I am dealing with a client, and I must make sure is happy with everything every step of the way. To help myself and the client keep up with everything, I made a gantt chart featuring every step of the process with dates and deadlines. Here it is.
I had strict deadlines during this task, as I had a tight schedule in order to be able to complete the project in time and be able to rigorously test it at the end.
Production and Planning
During this task, i had regular meetings with the client, to keep him on board at every stage of production. Here are those documented meetings.
As mentioned above in the meetings, I had to supply my client with a resource list, which included in it, has exactly what I needed from the client and when I needed it. It was important for my client to strictly stick to the deadlines I had gave him for the resources, as without the resources, the website wouldn't work at all, as he has supplied me with everything.
Site Management
To properly manage my site, I used sitemaps, as previously shown, to make sure I knew the structure of my website, and what was going on it. Here it is again.
To actually make sure the website worked, first of all I tested the website on my local PC, which resulted in successful testing, where I found that everything worked.
To actually upload my website to the World Wide Web, I used a S FTP (Secure File Transfer Protocol) to upload the website and its files to the colleges server. Once on there, I could begin testing it on different machines and operating systems, whilst accessing the website on a real server connected to the internet.
To actually upload my website to the World Wide Web, I used a S FTP (Secure File Transfer Protocol) to upload the website and its files to the colleges server. Once on there, I could begin testing it on different machines and operating systems, whilst accessing the website on a real server connected to the internet.
Stage 2 - Building and Testing the website
Accessibility
Accessibility is extremely important when creating any website. I used a number of things to help my website be easy to use and user friendly. One of the things I used was alt text, which helps to explain the images when hovered over. This also helps search engines, like google to pick up on the content of your website, because google can't search for images, only text, and when an images is properly described it will show up on google, and make it easier to find as a result.
Shortcut keys are also very important for making a website easier to use for everybody. These are when certain pages, for example the homepage are accessible from lots of different pages, if not all of them. My website features buttons, on every single page, to go back to the main pages for the regions or the homepages.
Shortcut keys are also very important for making a website easier to use for everybody. These are when certain pages, for example the homepage are accessible from lots of different pages, if not all of them. My website features buttons, on every single page, to go back to the main pages for the regions or the homepages.
Search Engine Optimizations
When creating websites, many, if not all websites use things called Meta tags to help describe what the website is all about. These are very simple to add, and they are just a few lines code you add right at the top of your code. I have included these in my website, as shown below.
I also had to include some code to stop my website being spidered, A spider is a program that visits Web sites and reads their pages and other information in order to create entries for a search engine index, which I didn't want to happen in my website. This small piece of code is able to stop this from happening.
To make sure everything worked, I simply tested thoroughly my website to make sure it was all working. I will speaking more about this in the next section.
To make sure everything worked, I simply tested thoroughly my website to make sure it was all working. I will speaking more about this in the next section.
Testing
Here is the website displayed on a Windows PC at 1366x768 resolution. This is how the website is supposed to look, therefore this PC is displaying the website well without any problems. We tested all of the links too, which all worked perfectly.
Here is us testing it on a 1280x1024 resolution monitor. As you can tell there are some problems with the website in this PC specifically, there are outlines around all of the images on the website. This is unusual as when we tested it on another monitor on the same size, the website worked fine and had no issues. Therefore i have no explanation for why the website didn't work properly on this specific monitor, but on all the others it worked fine.
And finally we tested on a Mac, and at 1920x1080 resolution. As you can see the Mac displays the website extremely well, and performs well with all of the links on the website too. This was also a different browser, Safari, so proves the website is working on multiple browsers.
As you can see i also had a few problems with some content on the website, in the sense that the video that i had put on one of the pages no longer exists on youtube, as the channel was taken down.
Finished Product VS Initial Intentions
In this section I will be reflecting on how I think the website has turned out compared to what me and the client initially thought the website would turn out like. Below I have included a picture of my original Concept art for the product compared to what it actually looks like.
As you can tell, the actual website ended up being different to what the mock up was. However, it is essentially only the visuals that have changed from the mock up, as in terms of the technical qualities of the finished website, it is exactly how the client originally described it, and works exactly how he wanted it to. The content of the final product is also exactly how the first intentions were for the website.
The only thing personally I am unhappy with is the fact that the actual website is basic with not much content - and the layout is also very basic. However, due to the fact that the website includes everything the client wanted me to include I think the aesthetics can be forgiven slightly.
In terms of the planning for this website I think I did a good job, as everything from the client was supplied to me on time, the project was finished in time and there weren't any problems along the way. My time management was also done relatively well, as my Gantt chart i created really helped me and my client do everything on time.
I believe this project was slightly limited by my knowledge of HTML, as I had not used it very much at all before this project. I think that the website ended up being slightly basic because of this. This did not, however, limit the quality of the content of my website as this was supplied by client.
When the website's creation was completed, i got a individual party to test out my website for me, and overall i think they were quite pleased at how the website functioned. A comment they left was complementing the color pallet of my website.
The only thing personally I am unhappy with is the fact that the actual website is basic with not much content - and the layout is also very basic. However, due to the fact that the website includes everything the client wanted me to include I think the aesthetics can be forgiven slightly.
In terms of the planning for this website I think I did a good job, as everything from the client was supplied to me on time, the project was finished in time and there weren't any problems along the way. My time management was also done relatively well, as my Gantt chart i created really helped me and my client do everything on time.
I believe this project was slightly limited by my knowledge of HTML, as I had not used it very much at all before this project. I think that the website ended up being slightly basic because of this. This did not, however, limit the quality of the content of my website as this was supplied by client.
When the website's creation was completed, i got a individual party to test out my website for me, and overall i think they were quite pleased at how the website functioned. A comment they left was complementing the color pallet of my website.