Test and validate

Submitted by sylvia.wong@up… on Mon, 01/31/2022 - 17:18

As we have already explored. UX design relies heavily on testing and validating your solutions. This is the same with code and websites.

In this topic, we will cover validating and testing your site.

Sub Topics

Validating a website is the process of ensuring that the pages on the website conform to the norms or standards defined by various organisations.

Validation is important and will ensure that your web pages are interpreted in the same way (the way you want it) by various machines, such as search engines, as well as users and visitors to your webpage.

Conforming to standards and regulations is one of the many ways you can make your website universally understood. Make sure your codes and styles validate across the board.

That means they have to meet the "strict" standards set by the W3C Organization and pass a variety of validations for CSS and XHTML.

Not all validators check for the same things. Some only check CSS, others XHTML, and others for accessibility. If you are sincere in presenting standardized pages to the public, test them with several validators. The World Wide Web Consortium sets the standards and also hosts a variety of web page validators.

In simple terms, validation ensures that your website complies with the standards accepted by most web designers. That also means that it will be accessible to more people, across more web browsers and operation systems. Having an accessible website is also regarded as good web design practice. As you can see, having a validated website has its definite plus points.

Validation Techniques

Validators detect problems in your web page and style sheet. It could be a tag that was opened and never closed. It could be a misspelled piece of code or a forgotten element the tag or style requires to work correctly. You become a detective, hunting and solving the little problems occurring on your web page. The resources and articles on validation below will help you learn more about validating your web page.

For example, validating your WordPress site means more than just checking the front page for errors. With the modular Themes and template files in WordPress, while you may fix all the errors associated with the index.php and sidebar.php when viewing your front page, errors may still lie within any other template files such as single.php, page.php, archives.php, or category.php. Validate these page views as well to make sure you cover all the template files.

Validation errors aren't limited to your template files. They can also happen inside of a post. When you are writing a post and using HTML, WordPress might not recognise the HTML and convert it to a character entity, or you may have entered it wrong. If you have a page with a lot of HTML coding, validate it to make sure you have it all correct. And occasionally check random posts to make sure everything is still okay from time to time as part of your general housekeeping.

Validation doesn't just mean putting your pages through some web-driven testers. It also means test-driving it with friends, relatives, co-workers, and strangers. Everyone has a different system and way of working, so ask for others to test-drive your styles or themes before you make them public.¹

Validation Checklist

To help you validate your WordPress site, here is a quick checklist¹:

Validate HTML/XHTML
Validate CSS
Validate for Section 508 Standards (accessibility)
Validate for WAI standards (accessibility)
Validate Links (check for dead links)
Validate Feeds
Check across different browsers (include handheld computers, Mac, PC, and cellphones, too)
Re-validate HTML and CSS
Have friends, relatives, co-workers check your site
When ready, you can post your site on the WordPress Forum's Your WordPress for review

HTML - Validation

To get started, you need an environment in which you have available several different browsers.

To gain an idea of which browsers your visitors use most, consult your analytics. Google Analytics provides this information for free. It's a safe bet that you're going to want to code your CSS for the latest versions of Firefox and Internet Explorer, Chrome (version doesn't matter much here in that Google provides automatic updates and does not force the user to manually install new versions) and Safari.

The problem here is that to install multiple versions of Internet Explorer and you will need to set up an emulator that allows you to run another copy of Windows within your existing setup.

Another problem is that Firefox will not even allow you to download 3.6 anymore. So, unless it is already installed and you have not upgraded yet, you are kind of out of luck. This brings us to the availability of online tools such as crossbrowsertesting.com and browsershots.org.

The results are not instant, they give you a range of five minutes to an hour as to when the results are ready, and the results will quickly expire if you don't view them the instant they are made available.

Interesting enough, browsershots.org has a link to crossbrowsertesting.com, which may or may not be a paid advertisement link. It is too hard to tell for sure. According to the crossbrowsertesting.com site, they have over 31,000 happy customers, including Sony and the Los Angeles Times, so if those testimonials are to be believed, they must have a good, working service. At the very least, you now have the means to test your CSS across multiple browsers.

Then there's the W3C CSS Validator. This is a useful tool if it's important for your code to be compliant with W3C standards.

To use the validator, you simply plug in the URL you want to test, upload a file, or submit a direct input and it spits back the results to you, showing where the errors are.

One good use of using this tool is to find any possible errors if you're stuck trying to fix something.

Browsers may include:

Chrome
Safari
Firefox
Edge
Opera
Brave
Internet Explorer
Netscape Navigator
Konqueror
Lynx

Now that you know which browsers you want to design for and know about possible tools for testing, you will need to know how to set up your web pages to allow different CSS files to be used with different browsers. It is best to first code for Firefox and Chrome, as these two browsers allow for the most CSS3 and HTML5 and they don’t have the hang-ups like Internet Explorer. When you are done with the coding, test it in Internet Explorer 9 and then 8, possibly even 7.

Hopefully, when you ran your analytics report, you did not see IE 6 and you can put that monster to bed.

When you learn which differences you need to account for Internet Explorer in your design, most likely spacing issues and any vendor-specific code you might have used, create a special new style sheet that incorporates your updates. Then in the <head> tag, add in the following code:

<!--[if gte IE 7]>
  <link href="ie-specific.css" rel="stylesheet" type="text/css" />
<![endif]-->

The first line of that code, gte, stands for greater than or equal, meaning the special style sheet will work for any version of IE 7 or higher. If you want to account for a specific version of IE, then you can omit the gte portion of the code:

<!--[if IE 6]>
  <link href="ie-specific.css" rel="stylesheet" type="text/css" />
<![endif]-->

This code will work only for version 6 and no other versions. The order in which you list your style sheets is important.

The browser will run through them in order, with each preceding style sheet overriding any tweaks from the previous. Therefore, if you initially styled your page for FireFox and made tweaks for Internet Explorer, then list the main style sheets first and then list the Internet Explorer sheet last with the extra code. For example:

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/secondary.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
  <link href="css/ie-specific.css" rel="stylesheet" type="text/css" />
<![endif]-->

In the above example, the main and secondary style sheets will appear in Firefox, but the tweaks for IE will only appear in IE browsers. Probably the best, easiest and quickest way to test this is to change the colour of a border or text in the special IE stylesheet. Then view the page in Firefox and then in Internet Explorer to see if the changes take place. And yes, of course, you can install FF, IE and Chrome all on the same machine at the same time. It's just the different versions that cause a headache.²

Some clients will specify that their website must comply with web standards. Even if your client does not, there are good reasons for writing web documents using standards compliant mark-up code. One reason is that you will save time trying to get your pages to display the same way in different browsers. Various standards-compliant browsers will display your standards compliant pages in mostly the same way.

By complying with web standards, your web pages will be more accessible. They will be easier and cheaper to maintain and update and their size will be smaller, reducing download time and required bandwidth. Your website will reach a larger audience because pages will be compatible with a variety of browsers, platforms and devices. In addition, search engines such as Google will also find and index your site more easily.³

DTD

Document Type Definition (DTD). This shows which international standard SGML and XML documents should conform to and informs how browsers, search engines etc. should handle the document. All SGML and XML documents (including HTML and XHTML) should include a Doctype reference to a DTD. Doctype is short for 'Document Type Declaration' - here is an example:

<DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd" />

This says that the standard that applies to this document is 'HTML 4.0 Transitional' and then gives the URL where this standard can be found.

W3C

The recommendations from the World Wide Web Consortium (W3C) are widely accepted as the international standards for web mark-up languages.

The W3C website contains vast resources for web developers. Much of the discussion of evolving technologies and standards are highly technical. However, there are also significant tools for general web development, such as validators for various mark-up languages.

You must also validate your website against the industry standards as well, such as: