Everyone’s going on about XHTML nowadays, and you’re probably beginning to get a bit worried that your site must be infinitely inferior to the rest of the web as you’ve got no clue what XHTML is, and your site’s just coded in plain old HTML.

XHTML stands for Extensible Hypertext Mark-up Language and is a hybrid of XML and HTML. The basic principle behind it is that all pages designed in XHTML should look the same across all browsers and platforms, thanks to the way in which XHTML documents are parsed. I won’t try and bore you with an indepth explanation, but those nice people over at Wikipedia have an explanation that might make your head hurt. But if I were you, I’d just take my word for it that you should be coding in XHTML, and if you do so your sites should continue to look as you intended as the Internet continues to evolve. It’s all about trying to get a set of global standards that everyone follows so that no-one gets left behind… not too much anyway.

So anyway, you want to change your old HTML coded site into an all singing all dancing XHTML site. It doesn’t take a lot to drag your site out of the dark ages, just a few common principles to follow and some minor changes to your site. Optimising for search engines and building your site with CSS is another story though, which I’ll cover sometime in the near future.

1. All tags in lowercase please

Turn your caps lock off, do a match-case find-and-replace for all <P> tags and replace them with <p>. Find the next tag and repeat. We all hate stuff written in all caps anyway, so it shouldn’t be much of a chore.

2. Close all tags!

XHTML must be valid and able to be correctly parsed! I’d hope you’re in the habit of <p>Closing your paragraph</p> tags anyway, as well as your <li></li>, <ul></ul> tags and so on. But what about all these tags like the <img> one, and <br>? They’ve gotta be closed too, but not like your paragraphs. Tags without a closing element need to be closed as follows with a “/” before the “>” (/ >):

<img src=”hand.gif” width=”100” height=”100” border=”0” alt=”John Leslie’s Right Hand” />

<br />

<hr />

I’m sure you get the idea. But please note, this also applies to header tags such as:

<meta name=”keywords” content=”keywords, go, here” />

<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />

Close them all! This way the browser will know not to go looking through the rest of your code for a closing tag that’s not there!

3. Nest your tags correctly

You should close your tags in the order that you opened them. Here are a couple of examples:

WRONG – <p><strong>Hello!</p></strong>

CORRECT – <p><strong>Hello!</strong></p>

Seems obvious doesn’t it, but you’d be surprised how many people do it the wrong way.

4. Use double speech marks

Inside your tags, for example the image tag, remember to use your double speech marks. So not width=100, but width=”100”.

5. Add your alt tags

I’m not 100% sure if this is a requirement for XHTML, but you should be doing it anyway. Images are no use in text-only browsers or screen readers UNLESS you add alt tags explaining what the picture is of. And if you’ve got spacer images, use alt=”” for consistency. Please don’t put the word “Spacer” in as that’ll just be really annoying and doesn’t actually add any value. The spacers are only there to aid the visual structure of the site.

6. No more <font> tags!

They’re horrible, clunky and limited. Get rid of them! Use your paragraph and span tags where applicable to style and size your text. It’s some of the most basic CSS to do this, and if you’re not familiar with the basics yet, you really should be – so get Googling!

7. Use character entity codes

This is reasonably simple, instead of using & use &. There’s a huge list of them all here.

That wasn’t that hard was it? Now you’ve tidied your code up, it’s probably time to start thinking about step number…

8. Code your sites with CSS

Not part of the XHTML thing, but it’s definitely the next step. Coding your sites in CSS will allow for much more control over the appearance of your site, it’ll make your page size loads smaller, and you’ll be well on your way to fully optimizing your site for all the major search engines. My tips on how to do this will be winging their way to you via this blog soon!

A useful link: HTML Elements Index. It’s a great list of what you can and can’t use in different versions of HTML and XHTML.

http://www.roundedcornr.com

RoundedCornr is another brilliant generator, and all you have to do is fill in the required details such as the corner radius, border size, colours, even a gradient if you want, and the best bit is that you don’t have to have them at a fixed width, they’re fluid.

There are so many great tools on the net now to help make life easier and I’m always interested to try out new ones and spread the word, so if anyone comes across any that may be of interest, let me know!

Admittedly, this one doesn’t save you huge amounts of time if you already know what the tab you want to create looks like, but being able to experiment and play about a bit with minimal effort is great. There’s a lot of trial and error involved in web design, and anything that’ll help save me some time I’m all for.

So check it out, http://www.tabsgenerator.com, and try not to get quite as excited about it as I do – it’s a bit sad really. Great tool though!

One of my Web 2.0 style sites has over 10,000 pages indexed in Google now after just 1 year, and I manually created about 5 of those. Not only that, but the beauty of the whole Web 2.0 concept is that as people are effectively creating the content for you, they want to share what they’ve done with others. Hey presto, looooooads of backlinks.

Lots of content + lots of backlinks, many of them deeplinks = brilliant search engine traffic. And brilliant search engine traffic = more visitors, more users and more content. Once you’ve got site that works, it’s just going to grow and grow, particularly if you’re creating a strong user base that’ll continue to return to your site.

It’s genius really. And while I’m in a proverby mood, if that’s a word, lets go with a slightly modified version of an old classic – “They do the work, so you don’t have to”.

It’s something that has always irritated about a lot of web design companies and freelancers out there – the complete shoddiness of their work coupled with the ridiculous amounts they charge, while they prey on unsuspecting small businesses who know very little about the web other than it’s getting bigger and they should probably have some sort of online presence. 9 times out of 10, once they’re online they’re unlikely to ever do much business directly from their site because of how small they are anyway, so an expensive all singing, all dancing site really isn’t the most cost-effective solution for them.

I’m one of these people who (a) takes pride in their work (I see my work as an advert for my services – the better my sites are, the more likely I am to get more business) and (b) refuses to take these businesses for a ride by charging 10 times what the site’s worth. All that’ll happen is that they’ll be calling the designer a month later when they learn they’ve been ripped off, and when you couple that with the shoddy site they made that’s some pretty awful PR there.

I’ve found I’ve managed to have a nice steady stream of work come through by making quality and reasonably priced websites, leaving the customers pleased with the end result and the feeling they got great value for money. Next thing you know, you’ve got 5 other people contacting you wanting a site thanks to you good word of mouth.

Now my prices are by no means “cheap”, but I pride myself on creating something of the highest quality and value, and I’d much rather continue to get a steady stream of work, or often too much work, coming through than to take some poor soul for a ride for 20k and struggle to get much work again in the future.

This leads me to another point I’ll quickly make which also comes as a result of the conversation I had with a friend the other day. Nowadays, anyone can make a website, the real battle’s it getting found. Now, what’s the likelihood that these web design cowboys are offering any sort of SEO or PPC (if applicable) advice, or even bothering to optimise the websites properly?

As the old saying goes, “if a jobs worth doing, it’s worth doing well”.

StripeGenerator.com!

It’s great. Just pick your colours, the stripe directions, even add a gradient to them if you’re feeling adventurous, and hey presto, stripes generated for you in a .PNG format. It’d be nice to have the option of downloading them in .GIF of .JPG formats, but that’s just because I’m lazy and it’d save me having to open the file and resave it.

Great site anyway – let’s paint the web stripey!