Valid (X)HTML – Is it important?

Lee — Tue, 02 Dec 2008 09:00:04 +0000

As a web designer you’re encouraged to write valid code, but is it really important?

I’ve took a look at the reasons behind validation and checked out 25 of the web’s most popular websites to see if they bother validating their code.

What is validation?

Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking…W3C

Why validate, what are the benefits?

1. Non uniform browser correction

Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn’t and you end up with a broken layout.

2. Rendering time

If your code is valid the browser has to do less thinking as it doesn’t have to correct any code, therefore the page will render faster.

3. Future proofing

You never know what’s around the corner in regards to technology but the chances are that if you have valid (X)HTML, you’re ensuring that your website will work with future technologies.

4. Google prefers valid code

Shaun Anderson conducted an interesting validation test; Does Google like valid code?.

This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.

5. Accessibility

A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.

6. Self satisfaction

If feels good when you run a validation check on your site and you see the green bar appear

What are the common validation errors and how to fix them?

a. Ampersands

This always catches me out. Ampersands must be written ‘&‘ and not just ‘&’. This is true for writing urls too.

Paragraph

Do the web’s biggest sites validate?

So do all the big and popular websites out there validate? Below I’ve put together a selection of some of the most popular websites and ordered them from best(valid) to worst.

BBC

Wikipedia

Apple

Facebook

Number 10

Digg

Yahoo

Twitter

Times Online

Google

YouTube

Barack Obama

Microsoft

eBay

What about the design community?

Looking at some of the biggest sites (and authors) in the design and technology community.

A List Apart

Smashing Magazine

Web Standardistas

Zeldman

Future of Web Design

Use It

37 Signals

Simple Bits

Freelance Switch

Slashdot

TechCrunch

Conclusion

I think it’s worthwhile validating your websites and it’s good practice. From looking at the sites above however (which are all great sites and designs), it’s obvious that not having a validated website is not the end of the world.

If you’re like me though you’ll sleep better at night knowing your website validates.

Does your site validate?

It was very hard work trying to track down valid websites for this post so it would be great to see some examples. Use the W3C Validator to check your site then submit your link and comments below.

It would also be good to hear your points about validation and if you think it’s worthwhile.

10 old skool no-nos for web designers

lee — Fri, 25 Apr 2008 08:35:25 +0000

I was talking to Kyle Boyd recently and we were discussing a website that he was due to revamp. He asked me the question “Guess what they’re using?” and I then rhymed off 10 things that, as web designers, we should try and stay away from. So I thought I’d share the list with you.

1. Frames

We’ve come a long way from the standard frame website. As well as being poor for usability and SEO, they generally look awful too.

2. iFrames

Similar to frames, but these are small embedded frames within the page. If you need something to replicate an iFrame, e.g. a Terms & Conditions box, make use of the overflow:auto declaration in CSS.

3. Tables

If you’re a web designer and you still use HTML tables to layout a page, then you shouldn’t call yourself a web designer. Get yourself a Web Standards/CSS book. Of course using tables to display tabular data is fine.

4. Animated gifs

Really old skool websites used to fire a load of animated gifs on a page (I was one of them 10 years ago when first experimenting with web design). They usually look poor and more than one can mean there’s too much going on. They can still look well though if used tastefully (on occasion).

5. Inline formatting

If you use something like to format the text on your web pages, you’ll have a fun time when the client asks for a slightly larger font (and you’ve got a website with over 1000 pages). Use external CSS files to format your designs and content. One amendment changes all.

6. FrontPage

I used to use FrontPage years ago and I remember it being a really poor environment to work in, that usually added a lot more code to a page than needed. I don’t know if it’s any better now, but in general it still seems to be frowned upon by web designers. Microsoft now has Expression Web, which I haven’t used, but I suspect is much better. I would say Dreamweaver is the industry standard software for web design, but I would recommend learning XHTML from scratch and hand coding.

7. Internet Explorer 6 (or even worse, 5.5)

Non-web designers don’t realise the agro that we go through when we finally get a website looking brand spanking fantastic in one browser (usually Firefox in my case) then we do the inevitable browser test in IE6 and the website is a mess. Remember to check your work in at least Firefox, Safari, IE6, IE7 and Opera. If you’re using Internet Explorer, think about using Firefox instead, or at least make sure you have the latest version of Explorer (7).

8. Pop-up windows

I hate pop-up windows. Pop-up adverts and notices are even worse. If you must insist on a pop-up/fullscreen website, at least offer an alternative link for a normal window or look at Javascript work-a-rounds.

9. New windows

I prefer to have control over how many windows and tabs I have open in my browser, I don’t like the website deciding for me. Using target=”_blank” launches a new window but disrupts the users experience, so try not to use it. I have to admit though that I still use it myself the odd time, if linking to an external website from a clients site (but I’m trying not to).

10. Flash intro pages

This one really depends on your target market and the purpose of the website. If you really want to impress the pants off someone on a one off experience (e.g., a website for a new movie) then you can get away with it. But if you’re looking repeat visits then a flash intro page will most likely turn users away, as it acts like a barrier to the main content (and also poor for SEO). If required, consider including the Flash intro into the homepage of the site, surrounded by the content and navigation, just as Adobe do.

World’s Worst Website

I’m not saying you shouldn’t ever use any of these points,but as a general rule of thumb I think it’s safe to say you should try and stay away from most of them.

Oh, and it turned out they had used FrontPage and FrontPage extensions.

If you’ve any other tips, send them through below.

Lee Munroe » web standards