D3: My Website and How it Meets the Defined Requirements and Purpose

Introduction

In this document I will demonstrate that my created website meets the defined requirements and achieves the defined purpose. I will also explain if need be why some requirements could not be met and why it could not completely achieve the defined purpose. Important points to consider in this document are semantic web design, overall design, web accessibility and ease of use.

Requirements

Accessibility

In terms of accessibility, the colour palette that I have selected achieved the desired and adequate text-to-background contrast. This allows people to read it affectively, as having a bad text-to-background contrast will make it hard to read. And people with visual impairments will find it even harder to read than others.

Font size and spacing was made easy to read, and I made sure there’s a difference between a heading, the main title above the navigation bar and the actual navigation bar items. I made sure text in the content of the webpage was not too small or too big, and users could tell the difference between a heading and some content text. It’s also consistent, it doesn’t change its style if you go to a certain page, and it will keep its selected style throughout the entire website.

All links are found on the home page, since they just appear in the navigation bar and the banner. The banner takes you to the homepage and the navigation bar will guide you through the website.

All <img> tags as seen here have alt tags allocated to them.

Identity

The company’s logo is probably when the website falls short, as I am currently deciding between two logos in the demo, the original company logo can be found in the footer. But the new company banner can be found at the top, which also takes you to the home page unlike the company logo. This is the seen in both images, the nearest contains the code for the footer image which is the logo, and the top image shows the code for the banner.

The home page has an introduction that describes the website and why it’s there, it does it well enough that from the home page, the purpose of the website is clear.

Navigation

Main navigation has been made easily identifiable as it is above the fold and is at the centre of the user’s vision. Since the navigation bar is a series of buttons stating the names of webpages it should let the user know that’s how to navigate through the website. It also has visual animations which work as ques to show that the navigation bar can be interacted with and that each button is clickable.

The navigation bar also changes depending on the page the user is on, the page that is selected will be highlighted yellow to match the content of the page. It is also used to guide the user as to where they are on the website.

Each navigation bar label is clear and concise and contrasts well with the overall theme of the website. The number of buttons is reasonable since there’s a total of five pages in the whole website, so there needs to be a total of five buttons on the navigation bar. The old company logo is not linked to the home page, but the banner is, which is located above the header above the navigation bar. Links are also consistent and easy to identify since the buttons react to the user’s mouse, and the banner is in a blue border showing that it’s a link.

Content

All Major Headings are clear and descriptive, and summarise what’s below, this allows for experienced users to skip most of the website if they need to. It also allows users new to the concept of pc gaming to understand it more in depth.

Critical content is always above the fold on every webpage the user goes through, and as seen throughout the document, styles and colours are consistent using a yellow/blue colour palette. Emphasis (bold) is hardly used in the website, other than for headings and the primary header on the top of the webpage.

A good example of critical content being above the fold would be the construction page where the embedded video appears above the fold so that the user can see the video first before reading the description. If the description was before the video than it would not be an informative page and would be in my opinion failed design.

URLs are meaningful and user-friendly, they appear in the description below the video on the “Construction” page. The URLs are originally part of the original video’s description to credit different sources.

As you can see below different credits are placed, for example the iTunes link to the music used in the video and the YouTube channel that is the owner of the music. There are also meaningful links to the community of the author of the video, and the links to the system components list used in the video.

These are user friendly since they have a description describing where they go before they are listed. So for example “Join our community forum:” is before all the social network links.

HTML titles were not explanatory however, this was not done because I did not see the need to as the title was already on the navigation bar and highlighted for the user. However in the future I will implement page titles as the buttons do not react to screen readers, but it should not be a problem if the title is the same as the navigation bar selection.

Purpose and Target Audience

The purpose of my website was to teach people who were into console gaming the ins and outs of pc gaming. The website should be an introductory stage for pc gamers, and will be able to teach a console gamer to build their own pc and play games on it. This is mostly done via an informative video, but the other pages on the website play a role as well, they are used as descriptive pieces. And of course the store page is a demo page for purchasing items with a validation form at the bottom.

It is to entice people to play on a PC rather than a home console, it would provide reasons and benefits for such a choice to the user viewing the webpage. I believe it does not do a good job of that simply due to the presentation of the website, compared to other sites of other top branches this would not compare to them. This definitely needs improvement and needs to look like a professional website if I want to successfully persuade console gamers to convert to pc gaming.

However the purpose of being informative and helpful to people who do want to build a gaming pc is in my opinion successful. Simply due to the amount of reasons I gave for why a PC, the short lesson on clearing technical jargon and presenting those components for their very first budget pc build. The video on the construction page I believe actually achieves all of the topic above as it’s an informative and well-presented video (courtesy of LinusTechTips on YouTube) which will make people think about getting a pc. Especially since the pc presented is not that expensive.

The purpose is suited to a certain targeted demographic of people, the target audience is for teenagers mainly to people around the age of 20/21. It’s mainly for teenagers and young adults that are able to get a job, and want to spend their money on a gaming PC. Some younger teenagers also save up their money for a gaming pc or a console, and I want to make sure they come to the right decision for a better gaming experience.

Can my Website be improved?

I do believe my website can be improved and should be improved, it needs to be in the development stage for a lot longer so that the presentation and theme can be straightened out. There also needs to be some consideration for the visually impaired as this website would not be completely compatible with screen readers. However it does follow the law, so there is no problem with <img> alt tags.

The W3C recommendations need to be fully covered as shown in the D2 submission, some of the recommendations they talk about have not been fully checked, and so my webpage is not fully accessible to the world. This needs to be done before the website ever gets published.

Differences to Original Design

The final website is mostly different to the original design as seen in my submitted wireframes, a lot of elements changed and did not become a part of the final design. I do regret some changes, I believe the header should have stayed the same as the intended design as it would make it simpler. In the future I will most likely move the logo back to its intended spot along with the header. The home page was not changed much except that the images do not have a description, as they didn’t really need one in the first place.

The “Why a PC” page is completely different to the intended design. It is just a big list of reasons why someone should go for the pc, this was mostly due to time constraints with the project.

The “Where to Begin” page was changed due to the realisation that it would not be compatible on mobile smart phones if it was implemented as intended in the design. So I changed it to the same layout as the home page which presented no issues.

My biggest regret is the store page, I was planning to programme a carousel design with selecting store items, and below would appear an information box containing the item name, item price and item type, along with an image and description of the item. This was simply not possible as I did not have the technical capability of achieving such a desired effect, combined with the time constraints, I simply did not have enough time to learn how to achieve the effect and implement it into the website within the deadline. The store page was changed to a normal grid layout with a JQuery popup box code that shows information when the user hovers their mouse over any of the store items.

The “Construction” page actually turned out better than its intended design, the implementation of the video was a much better solution than just images and text.

Conclusion

In conclusion the final website successfully meets the defined requirements and satisfies the needs of those who want to build their own PC. I believe it has met its purpose even though I regret some design changes to the website, it has still fulfilled the intended goals. This website will most definitely need improvements as it needs to be completely accessible to those who are disabled and those who have a visual impairment. This is also to maximise the audience the website can be viewed by, because if it isn’t easily readable by the disabled, then you are cutting out a huge audience base.

The design phase could’ve been done with a lot better results as I did not realise my technical inability to create the things I envisioned, like the carousel feature on the store design. Now that I have learnt a lot more about HTML, CSS and JavaScript any future websites I create will not have these design flaws.

Overall I am impressed with what I have created, as it fulfils all defined requirements and the purpose I originally thought of. I would say the most important aspect of this website is the colour palette, as that is the only thing to stay true from the start of the design to the finished product.

References
http://www.w3.org/TR/WCAG10/full-checklist.html
https://tecnocode.co.uk/2005/11/14/semantic-web-design/
http://www.thesitewizard.com/gettingstarted/startwebsite.shtml