The W3C html and CSS validators are very useful tools. They are easy to use, give clear results and provide lots of information about site errors as well as potential ways to fix them. These code checkers will highlight some basic coding errors such as incorrect attributes and missing opening or closing statements. These errors are easy to make but very hard to find and fix without a tool like the validator. Valid sites are more likely to be future proof, more likely to look good on a range of browsers and devices and should gain some sort of ranking benefit over websites with invalid code. However there is no guarantee that a website that validates will look good in all browsers. Browsers still interpret valid code in different ways and in some circumstances this can have a big effect on how your website looks and behaves. These validation tools are great but there is still no shortcut to manually testing your website on as many different browsers as possible. A second caveat is that valid websites can still load very slowly and be inappropriate for viewing on mobile devices. Website speed is important – slow websites lose viewers and can dramatically increase bounce rates so it’s always a good idea to check your speed performance with a tool like Pingdom. This tool typically highlights huge images that you might have forgotten to resize and widgets from some social media that can be very slow to load. Simply finding a “light” version of the widget can dramatically improve speed, we applied one of these lighter social media plugins on this number plates website.
Conversely there are lots of websites out there that perform well and look good in a range of devices that do not validate. Not even the Wikipedia home page validates, it has 3 errors and 1 warning. How can this be??? Some of the errors and warnings just don’t matter. Social media, flash and other widgets are notoriously bad at validating even from websites like Facebook. Hundreds of thousands of websites use them without any issues. But how do you know which errors are important and which are not? We are going to use a few case studies from real commercial websites to help you understand how to go about getting the most from these validation tools and to help you decide which errors you can ignore.
There are three main ways of looking at the problems one of which should give you a few quick wins. 1) See which line numbers the errors appear on. You often find loads of errors and warnings with a few lines caused by a single bit or code, script or error cascading. 2) Focus on the errors first and ignore the warnings. Focus on the errors rather than the warnings first. Often there will be some missing opening or closing tags which can cause a cascade of errors. By cascade I mean that a single missing bracket or closing div can create reports of errors for following correctly coded divs. Fix the first missing div and the rest of the code order suddenly makes sense again to the validator; and lots of errors disappear. It can be hard to see where your opening and closing divs are but the tool usefully gives you a line number for the start and end of the phrase it does not understand so you can find the missing or duplicated tag. Click the revalidate button and I bet your error count goes down drastically. 3) Sort the information by type. There can be lots of error or warning titles you don’t understand that require researching. Clicking the “Group error messages by type” option and then clicking revalidate is helpful here. You can easily visualise which error types are most frequent and focus your research effort on them.
Case Study One – Scripts
Beautiful World is a travel guide to the most beautiful locations on the planet. It has an attractive and colourful design with heavy use of images and navigations so that locations can be found by either continent / country or by type of feature e.g. lake, mountain, river etc. The pages load quickly even though they have a large number of reasonably high quality images and it performs equally well in all browsers and all devices including mobiles and tablets. However a quick W3C check reveals the home page has 17 errors and 18 warnings (17+18=35)! We used each of the three strategies to analyse the errors. For this website the line number strategy was most useful. Of the 35 issues; 33 of them all occurred on line 4 of the code! Viewing the page source and looking at line 4 we see that there is a chunk of script code in there (i.e. not html or css). It is quite common to use a bit of code from a third party to add functionality to a flat html website. Typical examples are contact form plugins, image scrollers to highlight different categories of doors, analytics scripts or social media widgets. You are unlikely to understand this code and so fixing it will be very difficult if not impossible. Ideally you would replace this script/widget with one that validates – but this is a very time consuming and technically difficult job. In some cases it is not possible for you to change the code at all. Google analytics code and Facebook widgets are coded by Google and Facebook and if they do not validate there is nothing anyone external can do about it. If the widget works in the browsers and devices that are important to your website but creates lots of validation errors; our advice is don’t worry about it. Don’t waste your time, move on to something more important like a speed test. This is what Beautiful World has done; they know there are errors but they understand how they were created and have been able to determine that the validation issues are not causing a performance problem for them. The important job of delivering lots of fast loading images of beautiful destinations and presenting a well structured navigation is unaffected.
Case Study – Images and Videos
Cultivar are a manufacturer of quality greenhouses in the UK. The validator is showing 27 errors and 3 warnings – ouch! The sort by error type and line number strategies are both useful here.
The 3 warnings were easy to fix. First of all the greenhouse website which is purely for an English speaking audience, has not declared it’s language. This information should be provided in the opening html tag on each page. On this website this is easy to do as every page is in English: so in the header file we just changed <html> to <html lang=”en”> . The other two warnings were both caused by excessive commenting tags which were simple to remove. Of the 27 errors, 20 were all the same; “An img element must have an alt attribute”. This is important for the accessibility of your webpage and is also a great help to the search engines so filling in alt tags on the greenhouse pictures was important. The remaining errors were all within a line or two of each other and related to a couple of youtube videos that have been inserted into the site using youtube’s embed code. This youtube code does not validate, however, it is outside the control of anybody except youtube so if we want to use youtube we have to live with the errors! This is not uncommon if you have used social media widgets (such as Facebook and Twitter) you will find that their code generates multiple validation errors. Again this is outside your control so you can simply ignore these errors.