Design Oahu

Web design blog from the middle of the pacific.

Top 50 Websites – Disappointing Validation Report

I found out today that my web site did not validate as valid (x)html markup (I had mistakently left out a closing “a” tag). I fixed the issue and am now validating properly. I then started to get curious about how many other bigger websites fail in validation. I went over to the Alexa Global Top Sites list and took notes on how many of the top 50 sites validate. Granted Google dominates a large portion of this list with their sites for specific countries, however I noticed that different errors were presenting themselves on different sites, so I just played along. So, how were the results? Extremely disappointing! Only five out of the top fifty site’s home pages were valid html or valid xhtml (that is just 10%). Sina, Imageshack, and were not even able to report how many errors there were to complete the test as some of the characters used were not even found in their specified text encoding. The sites that passed are MSN, Wikipedia, Skyrocket, Yandex, and Craigslist.

  1. Yahoo! – Failed validation, 34 Errors
  2. Google – Failed validation, 30 Errors
  3. YouTube – Failed validation, 78 Errors
  4. Windows Live – Failed validation, 64 Errors
  5. MSN – Passed validation
  6. Myspace – Failed validation, 123 Errors
  7. Facebook – Failed validation, 37 Errors
  8. Wikipedia – Passed validation
  9. Hi5 – Failed validation, 297 Errors
  10. Orkut – Failed validation, 16 Errors
  11. – Failed validation, 122 Errors
  12. – Failed validation, 19 Errors
  13. Megaupload – Failed validation, 86 Errors
  14. – Failed validation, 38 Errors
  15. Friendster – Failed validation, 93 Errors
  16. Yahoo! Japan – Failed validation, 457 Errors
  17. Microsoft – Failed validation, 31 Errors
  18. – Failed validation, 95 Errors
  19. – Failed validation, 345 Errors
  20. Google France – Failed validation, 41 Errors
  21. Ebay – Failed validation, 181 Errors
  22. – Failed validation, 525 Errors
  23. Google Brazil – Failed validation, 39 Errors
  24. Skyrock – Passed validation
  25. Sina – Failed validation (Unable to complete test due to character encoding issue)
  26. Google Germany – Failed validation, 43 Errors
  27. Google Chile – Failed validation, 44 Errors
  28. Google UK – Failed validation, 45 Errors
  29. Google Spain – Failed validation, 49 Errors
  30. Flickr – Failed validation, 30 Errors
  31. Seznam – Failed validation, 1 Error
  32. Google Poland – Failed validation, 45 Errors
  33. – Failed validation, 1588 Errors
  34. IMDB – Failed validation, 211 Errors
  35. Photobucket – Failed validation, 122 Errors
  36. – Failed validation, 6 Errors
  37. Imageshack – Failed validation (Unable to complete test due to character encoding issue)
  38. Wretch – Failed validation, 541 Errors
  39. Google Mexico – Failed validation, 39 Errors
  40. – Failed validation, 4 Errors
  41. Yandex – Passed validation, 3 warnings
  42. – Failed validation, 302 Errors
  43. – Failed validation (Unable to complete test due to character encoding issue)
  44. – Failed validation, 172 Errors
  45. Universo Online – Failed validation, 1276 Errors
  46. – Failed validation, 32 Errors
  47. BBC – Failed validation, 35 Errors
  48. – Failed validation, 224 Errors
  49. Allegro – Failed validation, 61 Errors
  50. Craigslist – Passed validation

Using valid XHTML markup with CSS (part II)

If you haven’t read it yet, you may want to check out part I of this series where we go over the basics of the differences between HTML and XHTML and start off wit a simple markup. Thank you to everyone that sent me an email of their site that they would like to be sed as the example. I have decided to go a slightly different route though. I wanted to pick a website that is familiar to a lot of people that suffers from the old table based HTML design, so I picked MySpace. MySpace is great way to keep in touch with old friends, but I think the websites user base grew much quicker than their web designer team. If you have ever tried to customize your MySpace, it is a pain in the @ss trying to figure out how all the tables work. Mike Davidson wrote a nice tutorial on Hacking A More Tasteful MySpace that helps you get past the mess of markup to style your MySpace. What I will be doing is taking the default profile layout which is table based HTML and turning it into valid XHTML/CSS markup while keeping the look the same. I will show you step by step what I am doing, so that you can do the same with your own project. Read the rest of this entry »

Using valid XHTML markup with CSS (part I)

A question that still often comes up is how to turn your table based image sliced layout into a valid XHTML/CSS design? The answer is quite complicated and is why I will be going over it in several tutorials, but I will start by giving you some reasons why you should do this.

  • Adding your style information to a Cascading Style Sheet (CSS) file rather than inside your HTML markup allows a visitor of your website to download all the style information the first time they visit your website. That means that they will have a slightly longer page load the first time they visit, however the styles are now cached on the client side and subsequent page requests can load up lightning fast as the style information has already been downloaded.
  • By moving your style information to an external file, you have now separated the content from the design. Previously if a request to change the background color of a container was made, you may have had to fire up Photoshop change the color in the layer, and re-slice the images. With CSS you would simply change the background-color element to the desired change and it would change all pages that reference your stylesheet.
  • Markup is straight forward and easy to figure out where a possible text change is located. If you need to fix a simple spelling mistake for example, rather than searching through all the <tr> and <td> to find where the misspelled word is you would simply look for a <div id=”sidebar”> tag to quickly get to your sidebar for example.
  • Having valid markup is the first step towards accessibility. Accessibility is the idea that someone is able to view your website regardless of their platform (mobile phones, old systems, screen readers, etc). Plus you can refine each of these by simply adding a new stylesheet which specificly target that platform.

Read the rest of this entry »