TMA 01 Report
Introduction
In this report I am going to explain the meaning of Standards compliance in terms of HTML and CSS. I will then go to explain what is meant by the term usability in terms of websites. I Will then go on to discuss the changes I had made to the OU Running Club Website/Protoype to ensure it was a usable website.
Standards Compliance Total word count 616 words
Standard Compliant code complies with the universal web standards set by World Wide Web Consortium (W3C). By having Standard Compliant code you are ensuring that the website is displayable across all Browsers and devices. Prior to HTML 4.0 there were a few issues as web developers were looking to enhance the look and feel of their websites, to avoid these issues Cascading Stylesheets were introduced, which will be the new presentational language for HTML documents.
Even in today’s modern web development environments some websites will render differently and react differently on some browsers and not all websites are HTML5 fully compliant for example; http://home.bt.com/ has 10 issues relating to HTML5 Bugs.
By using a W3C validator we can ensure that our webpages are syntactically correct and free of errors for example a missing bracket or forward slash or invalid reference.
<a href="#" class="newanchor">Text to be shown on screen,
//Missing Closing Tag
<a href=”#” class="newanchor">Text to be shown on screen<a>
//Missing Closing Tag
<a href=# class="newanchor">Text to be shown on screen</a>
//Invalid Reference
Some of the above mistakes are common mistakes made by developers this why we use CSS and HTML Validators. A CSS Validator will check the CSS of a web page to ensure it complies with W3C and a HTML Validator will check whether the HTML complies with W3C. However W3C cannot ensure the webpages will display the same in each browser.
The HTML and CSS documents provided by the Open University were not HTML compliant, some of the issues I ran into were:
• Invalid Document Type specified caused by an extra ‘!’ after <!doctype…
• The Document had no <Head> element which meant that metadata could not be specified, author name, viewport and title could also not be specified.
• Incorrect and extra Closing Tags found such as;
Line 7 <header id="header">↩
Line 8 <div class="title">Open University Running Club</div>↩
Line 9 </div>↩ //Unnecessary Closing Div Tag, no starting div defined
Line 52 <footer id="footer">…
Line 58 <footer/>
• Other issues include inconsistent use of HTML5 Tag’s such as; <Article>, <Section>, <Nav> The current document is still reliant upon Div Tags.
To resolve the issues, I had used a CSS and HTML Validator to highlight any issues the documents had. I then went through the document and removed any extra tags. I then went on to replace code such as;
Line 10 <div id="navbar">
Code Omitted…
With the <Nav> element to make use of HTML Structure Tags and to make the code easier to read for other developers. I then went on to add commenting on both documents to highlight when specific areas of code ends, for examples the start and end of the navigation block will be highlighted by having HTML/CSS comments in the relevant location.
I then went on to add the <Head> and specified metadata, the HTML document now complies with W3C and is usable across all three of the Major browsers, the CSS has also been validated and complies with W3C, some alteration were made in order for the sponsored ads to appear correctly in the browser, this is because the location of the element within document was incorrectly placed.
Without compliance we could create code which is unreadable on the majority of devices unless you use a specific browser, compliances enable the majority of users to be able to see the webpages on cross-platforms and browsers. The future of the internet will be from Mobile devices, so it ever so more important for compliance.
From a development perspective compliant code is easier to maintain and debug and search engines are now running tests of there own to ensure websites are W3C compliant when deciding the positioning of a website in a search engine.
What is Usability? (Total word count 481 Words)
Usability has a strong focus on UX (User experience) and UCD (User Centered Design). This means that everything from planning to implementing has to be focused from a users perspective.
There a 5 key principles defined by Neilsen which form good website usability.
1. Learnability
This principle questions how easy is it for users to carry out tasks on the website.
An example of a feature which took a while to learn was the hamburger menu, people firstly initially did not recognize its use and therefore did not know how its function, this is evident in a study under taken by James Foster, a Web Developer based in New Zealand who conducted a study into the icon. The results were:
1. Adding the word "menu" underneath the three lines increases the button's use by 7.2%, according to Foster's tests.
2. Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.
3. Switching the lines for the word "menu" makes 20% more people click, Foster found. (BBC, 2015)
2. Efficiency
This principle evaluates how quickly a user can perform a task on a website so for example the process of ordering Dominos on a Saturday Night. Users will want to order their food within 5 minutes. Figure 1.1 The Homepage presents you with the menu/ choices of food
Figure 1.2 The Next step for the user is to confirm and purchase the order.
Figure 1.3 Amazon Menu
3. Memorability
The principle memorability in short asks the question will a user remember how to use the site on return, back to the earlier Dominos example the site is pretty self explanatory which makes it easier for users to reestablish proficiency.
4. Errors
This asks how many errors do users make and how serve are they errors. Drawing on a recent example when purchasing a new dining table at Argos.co.uk I accidently got delivery address wrong, however I changed the billing address. I found the delivery address was not obviously made clear to the user.
5. Satisfaction
This principle has a focus on the overall design of the website and whether the right site structure has been used to display the content.
To make the OU Running club usable I had to move the paragraph elements back within the wrapper of the website, the website was unreadable initially as the text was coming over the bottom of wrapper. The menu was also at the bottom of the wrapper.
I Then fixed these issues and the text was displaying nicely and the navigation was then in then in the right place. However the sidebar was still unreadable, , this required me to change the background colour to make it readable.
I also gave the wrapper a central position so that it had a cleaner appearance, as websites are not traditional left positioned if they are contained within a wrapper.
Accessibility (Total Word Count 590 Words)
Accessibility in terms of HTML and CSS means making the website accessible for those with disabilities for example the blind or deaf. A business can looked upon negatively if they are not providing equality for their users. There are a few ways in which we can make websites accessible for users using HTML and CSS.
W3C has four principles of web accessibility; Perceivable, Operable, Understandable and Robust, these principles apply to all users with and without disabilities, there must be no features which puts a disabled user at a disadvantage.
HTML Attributes such as the ‘Alt’ and ‘Longdesc’ this allows read aloud to tools to interpret the image, the ‘Alt’ Attribute allows the web developer to provide alternative text for the image for example a short description, however some images require a long descriptions this is when web developers will use the ‘longdesc’ attribute. In terms of CSS it is important to use websafe fonts and colours so that all users get the same experience.
In the provided HTML and CSS, I provided alternative text for images within the browser, added a web page title which enables users to know what they are looking. I marked up all headings using the HTML Heading tags, previously, headings were styled as div tags, I kept the div tags and wrapped the heading tag inside the div tag to keep the styling, I have also made sure I have a kept consistent hierarchy of heading tags, with H1 being the title.
I had also made sure that when resizing the browser the text does not overlap, you will see that when resizing the browser the sidebar text pushes the article text to the left and creates a new line, I had also made sure that the navigation is still accessible and no buttons become inaccessible.
To make the data page accessible I ensured that all the correct tags were applied so for example the Tables header had a <th> tag and the rows had a <tr> tag, to ensure it can be interpreted by a text-aloud tool, I had also ensured I continued to use the heading hierarchical structure.
I checked all of these features using the W3C Markup validation service, as well as W3C’s Easy Checks checklist to perform a series of tests to ensure the website remained accessible for all users.
To further improve the website prototype, I would advise using web safe colours and colours which can be interpreted by all, for example some people who have poor eyesight may not be able to see the grey on a yellow background, so colour choice is really important, assisting users by changing the colours of links and making buttons obvious will really help users, what would not be help is if you links are white and your main text is also white.
The proper use of typography is also really important size 11px text will be difficult for the visually impaired to read, some web developers you an image as a website which will make it difficult for the blind to access and listen to the page. It is also important that any CAPTCHA’s have a text-aloud tool.
To assist the color blind you could provide a high contrast version of your website, which will help the user navigate, this version will be identical to the main website except for the use of a high contrast colour scheme.
For deaf users it its important that any media such as videos has a transcript for the user to read as an alternative.
Conclusion (Total document word count 1974)
In this report I have discussed Web standards and why they are important, I had also identified some common mistakes why lead to non-compliant code as well then going to explain how I adapted the Original OURC HTML and CSS to make the code W3C compliant.
I then went on to discuss what is usability in terms on web production, I then went on to discuss the 5 principles outlined by Neilsen. I then went on to explain how I adapted the OURC website to make it usable for users. Initially then website was completely unusable, this primarily because of the poor coding standards used such as missing closing tags.
Lastly I went on to discuss Accessibility and what accessibility means in terms of HTML and CSS and how I have adapted my website to be accessible for all users. I went on to discuss tags which can be used to improve accessibility across a website. I outlined W3C’s four principles which all websites should comply with to be fully accessible to all users. I then went on to discuss how we can improve the accessibility of the prototype website.