Intelligent use of client side languages

There are two types of web language, server side languages run on the webserver itself and are used for very dynamic web pages, client side languages run on the visitors browser itself. For this reason, your visitors need to have the right browser software to run your client side languages.

HTML was the original web language and is only capable of displaying very basic static pages. HTML was based on XML but is not as strict. XHTML is a much more strict form of HTML and ensures that all tags either have a closing tag, such as <html></html>, or have a closing slash inside the tag, such as <br />. XHTML also requires that all tags are in lower case, <html> not <HTML>. HTML has been hijacked by several browsers where companies have added their own tags that only work on their browser (such as <blink> on Netscape and <marquee> on Microsoft Internet Explorer) and different browsers also allow different variants of incorrect HTML in an attempt to make poorly designed websites work better for the user. Unfortunately this has not only permitted sloppy web developers to get away with being unprofessional but actively encouraged it. Most websites now do not comply with international web standards. Also, most people don't realise that search engines are only capable of understanding the most basic (and therefore least sloppy) of HTML or XHTML. If your website is poorly coded, search engines can't understand your web pages and you won't get a high ranking. There is more on this in the Website Promotion and SEO section. I cannot urge strongly enough to use XHTML instead of HTML, there's no excuse for not doing it. It's good web design, it shows professionalism and it's financial sense if search rankings are important or if just having a website that can be understood by "everything" is important. Anything and everything that attempts to read or interpret webpages can understand strict XHTML, from search engines to web enabled refridgerators, but only the top web browsers have the extra code that enables them to understand poor websites. XHTML will henceforth be referred to as HTML on this website because it is assumed you would only use XHTML anyway, the "X" is superfluous.

The next most popular client side language is javascript. This is not java, they are two different languages. Javascript allows some dynamic client side calculations and was developed by Netscape for their browser and quickly became popular so was copied by the other browsers. However, they didn't copy it very well so javascript has a habit of working differently, or not working at all, on different browsers. Javascript can be very useful but it is very difficult to get it working the same across all the browsers. It is not good enough to tell your users to use a different browser if your javascript doesn't work on their browser. They will not use your preferred browser, they will go to a different website and buy from them instead. Life is hard, get over it. Browser compatibility is vital to web design.

As it was Netscape (now Mozilla) who invented javascript, technically, if you're javascript doesn't work on Mozilla, it's wrong. Others would claim that if it doesn't work on the most popular browser, Internet Explorer, it's wrong. In my opinion, if it doesn't work on every single browser, it's wrong. Javascript is probably the most browser incompatible language so you have to test it on as many browsers as possible. You should test on IE, Mozilla and Opera in the minimum.

You also need to make sure that people who have switched off javascript, or who don't have a javascript capable browser can use your site. The <noscript> tag was not invented for you to say "Switch on javascript". You should use the <noscript> tag to provide the functionality that javascript gives you but in a less elegant manner. For example, if you are using javascript to automatically submit a pulldown menu value as soon as it is selected, then you should use the <noscript> tag to add a submit button so users can do it manually. If you annoy visitors by demanding that javascript is switched on (most who switch it off will be IT professionals who buy online frequently and have a lot of money) they will not buy from you.

Until recently, I was dead against javascript for all but the most basic uses. It was just too volatile and some search engines even ranked your site lower if it had javascript on it. It was just too difficult to ensure that your javascript would work well across all the browsers. Frequently, web developers would resort to code of the form:

if (IE) {
// do this
} else if (Mozilla) {
// do something else

This is fine until someone wants to use your site with a browser you haven't coded for or haven't even heard of.

Then Google came up with their famous Google Maps and other javascript tools and I've become a bit of a convert. The Google Maps are so complex and yet manage to work well on almost every browser or fail in an elegant manner. Never before has a website convinced me that javascript was a suitable tool to use on a professional website, but Google have shown that it can be done. If you can't do it as well as they have, don't do it. It's embarrassing to watch. Read my javascript article for more specific tips on writing good javascript.

The next language to discuss is java. There are very few uses for java in websites. It is generally only used for writing things that should really be downloaded programs instead. I have a vendetta against java, having been a professional java developer for some time, so I would advise against java if at all possible. If you have to use java, make sure it works on all versions of java. You cannot tell a visitor to use a different java interpreter (JVM), they may need the one they have in order for someone else's crap website to work.

I'm going to group Flash, Shockwave and all those vector graphic languages together. They're all pants, don't use them. Don't get me wrong, they are proprietory languages so they will work identically on every browser that supports these languages. That's not the problem. The problem with these languages is what people do with them. People want the information they are looking for as soon as possible. That's why they pay for broadband instead of standard dial up. They don't want to have to wait another 30 seconds while your pathetic Flash intro bores them to death just so that you can show off your fancy skills, just like they don't want a useless "Intro Page - Click Here to Enter" before they get to the actual information. Don't do it, you will lose visitors. Things do not need to move on your website, people don't care how funky it looks, they care about how usable it is and how quickly they can get what they want. Flash and Shockwave are unprofessional unless your website is designed to demonstrate your skills.

Another useful client side language which is becoming very popular is CSS. This language does not make your page any more dynamic or provide extra functionality, it is basically just a HTML extension that enables you to make your page look more aesthetically pleasing. If HTML had been designed correctly in the first place, there would be no need for CSS, all the functionality would be in HTML. I don't really understand why they didn't just add the functionality to HTML later using extra tags instead of creating a whole new language and a whole new syntax. But there you go, rant over. The browsers that support CSS, tend to do it very consistently. There aren't many aspects of CSS that differ between browsers, so it's a fairly safe language. That doesn't mean you shouldn't test on all the usual browsers, there are still some important differences between the browsers, and most of them will show up in the most unexpected places. One major difference is positioning, especially relevant for divs. Unfortunately, despite many web developers' attempts, it is still not possible to replace tables with div positioning. Read my CSS Positioning article for advice on using CSS.

Throughout this article I've discussed the importance of browser compatibility, but what browsers are the most important and which throw up more inconsistencies? Well, the most popular browser unfortunately is still IE. This has the most security holes and also allows the worst HTML. It is almost single handedly responsible for the poor HTML seen around the internet. Because of its popularity, it is the most important browser that things should work on and, unfortunately, a lot of web developers think it's the only browser pages need to work on, hence the poor HTML that only works on IE. The next most popular browser is Mozilla/Netscape. Mozilla can be quite error prone because it does not support even some valid web pages correctly. Admittedly, this has improved with the release of the Mozilla Firefox browser and it's rendering engine improvements. Opera is the third most popular browser and is the most standards compliant out of the three of them. If it works on Opera, it should work on the others too. Links is another good browser to try, it's a text only browser that gives a good idea of how a search engine might see your website, and how accessibility browsers and screen readers might see your website. It's good for making sure you write good HTML because, thanks to it's simplicity, it makes sure that you are writing pages that can be read by everything, including those web enabled refridgerators. If your pages work in Links, chances are, web browsers for the disabled (such as page readers for the blind) should have no problems with them.

I've been quite negative about a lot of client side languages in this article and I hope this hasn't put you off this website. My goal, and hopefully yours, is to make my websites visible to the highest number of people, regardless of what software they are using. Unfortunately, most client side languages make this either impossible or just very difficult, so if I can, I avoid them. If I can't avoid using them, I make sure that it works on as many browsers as I can test. I urge you to use your intelligence when evaluating these tools and don't get gooey eyed at all the fancy features they have. Most of the fancy features will just serve to alienate your visitors or prevent them from viewing your website properly.

An essential tool for ensuring the HTML in your pages is 100% valid HTML is the W3C Validator. You give the validator your URL and it checks the HTML to ensure that it is 'W3C compliant'. This means that it complies with the World Wide Web Consortium's international standard definition for HTML. It insists on a DTD at the top of every page which is another useful feature, I recommend you add it to your pages, it may help it to render correctly on browsers you and I haven't heard of. Adding this to the top of your page and ensuring your pages validate should ensure everything can be read your website as you intended.