You are currently browsing the HTNet archives for December, 2005.

When browsing through web sites, especially corporate web sites, there are a few things that make me go “Eurghh!”. Surprisingly though, not many of these things are aesthetics related, to me they are more of a structural issue. Here’s my list of Common Web Site Structuring Mistakes in no particular order whatsoever.

  • 100% Flash content
  • Overly Complex Dynamic URLs
  • Hardcoded Presentational Layer
  • Lack Of Contrast
  • False Standards Compliance Advertisement
  • Overly Restrictive robots.txt
  • Not Updating the Front Page
  • Use of Frames/Iframes
  • Non-descriptive Titles
  • Using Popups for Important Pages

Mistake 1: 100% Flash Content

First of all, I don’t have any deeply seeded hatred for all things Flash. Wait a minute… I do! I hate flying widgets and Flash banners with a passion.

However, I’ll be the first to concede that Flash has its uses and if used properly, it’s an excellent presentational tool. The problem with Flash is that it’s often used for all the wrong reasons. Flash advertisements are irritating. I’ve yet to find someone who disagrees with this statement.

Creating an entire web site with Flash is very much possible. Hell, I have to maintain one myself, mostly due to bureaucratic reasons (I am making progress in convincing the relevant parties to convert it to XHTML though). It provides pleasing eyecandy, and if constructed properly, can provide an easily navigable interface.

The major problem with constructing a web site entirely in Flash is that it is not search engine friendly. Search engines don’t “understand” Flash content, to put it simply. That is why it is important to have descriptive text content to go along with your Flash content.

The Flash content is for humans whereas the text content is for search engine spiders. If for some reason you don’t want the text content to be seen by your visitors, you can use the CSS property display: none to hide it from them. Search engines would still be able to see it though, and that is what matters the most.

Mistake 2: Overly Complex Dynamic URLs

Granted, this was an old-school search engine indexing limitation. All popular search engines now have the ability to spider dynamic URLs. However, I’ve yet to see a search result that has more than five embedded embedded variables.

To illustrate this, let me give some examples:

  • URL A:
  • URL B:
  • URL C:

If you were to bookmark the URLs above, which one would you be most comfortable with? I’d figure that most people go for URL C. It’s short, simple and descriptive. Another plus is, if you somehow forgotten to bookmark it earlier, search engines tend to find it easier compared to URLs with dynamic URLs such as URL A and URL B.

By the way, URL A has five embedded variables whereas URL B only has one. More importantly, stay away from them whenever possible. If you have some basic programming background, you might want to check out mod_rewrite if you have web sites hosted on Apache. If you’re on IIS, then I’m afraid I can’t help you much. I’ve yet to seen a free URL rewriting module for it.

Mistake 3: Hardcoded Presentational Layer

This is quite a common phenomenon. My only question is, “WHY?!”. I mean, if this was 1997 then yeah, tables are a perfectly good way to place elements of a web page. And yes, <font color=”blue” size=”10″>this is way cool</font>.

The good news is, it’s no longer 1997 and we have nice toys like CSS so that we no longer need to mash our presentational layer along with our content. The bad news is, too many people are still trapped in the mid-90s. This is further compounded by the fact that most WYSIWYG HTML editor doesn’t output valid XHTML or integrate proper CSS support. Just when you thought it couldn’t get any worse, tens of thousands of “budding web designers” sharpen their “skills” on such tools, and see web standards as “getting in the way of getting ‘real’ work done”.

My advice is if you’re serious about authoring web sites, then you have to be serious about fulfilling W3C standards as well. In all honesty, if you’re arsed enough to actually learn something, it wouldn’t hurt to learn it properly now, would it? For instance, you could still drive a car on first gear alone… but is that the proper way to drive?

Mistake 4: Lack Of Contrast

This one literally drives me blind! I’ve seen more than enough dark gray fonts on black background as well as light silver fonts on a white background to last me a lifetime. Believe me, there’s nothing “l33t” nor “artistic” about those stupid colour schemes! There are also web sites that are way too colourful for even a kindergarten activity room.

The human eyes assist in making sense of a presentational message, be it pictures or text, by comparing the primary patterns with its surroundings. The easier it is to differentiate the “main message” from the “backdrop”, then the easier it becomes for our brain to make sense of what the eyes are feeding it.

If you feel that you have a daft sense of colour, you might want to check out Steel Dolphin Color Scheme Tool. It will help you pick a colour scheme for your web site based on a primary colour of your choice.

I’d personally go for the Complimentary, Split Complimentary or the Triadic schemes most of the time. You don’t really have to strictly follow the generated scheme. Slight hue variations of the generated scheme might be more to your tastes. The important thing is to experiment… sanely!

Mistake 5: False Standards Compliance Advertisement

Seen any of these images recently:

Seen any of these images recently:

  • Valid XHTML 1.0 Button
  • Valid CSS Button

You won’t believe how many pages that display the buttons above actually validates! Try clicking those images the next time you see them. Chances are, many of the web sites that display them don’t really use valid XHTML and/or CSS. To me, this is one of the biggest forms of fraud that is plaguing the internet, especially the Malaysian blogosphere.

I mean, if you know that your pages don’t validate, then why the heck do you still stick those links on your site? It’s like sticking an “EVO IV” sticker on your Proton. Only an idiot wouldn’t notice the difference, but to the rest of the population, you are the idiot.

So please, before you proudly display those standards compliance images on your web pages, double check to make sure they are really compliant.

Mistake 6: Overly Restrictive robots.txt

First of all, in order to understand robots.txt I’d recommend that you visit this page.

As you can see robots.txt is a very important tool that will determine how your pages are indexed by search engine spiders. Now, the problem is that a lot of people use downloadable CMS scripts or other site management tools and build their web sites on those scripts. Some of these scripts bundle their own robots.txt, and more often than not the default settings are way too restrictive for most web sites.

Another funny thing about robots.txt is that in theory, it’s supposed to “protect” certain areas of your web sites from nosey search engine robots and other crawlers. However, more often than not, it provides nosey visitors hints on where to start digging on your web sites for “goodies”.

Let’s take the example of PHPNuke, one of the most popular CMSs available on the web. Take a look at its robots.txt contents. You’ll notice in there that important areas of PHPNuke are disallowed to robots. However, to us humans, we now know where they are located.

Perhaps a more interesting example would be’s robots.txt. My oh my oh my…

Mistake 7: Not Updating the Front Page

The front page of your web site, also oftenly called the home page, is the doorway to your other pages. It should provide links not only to key pages of your web pages, but preferably a summary of important areas which would entice a visitor to click visit these areas. However, there’re many web sites out there that don’t make proper use of its front page.

Imagine the following scenario; You have a web site at and a “News” section at In your news section you have an entry about your company’s recent acquisition of a competitor at

Wouldn’t you think that this is very notable news and should be announced to the whole wide world? Then would you “hide” it under a few layers of links? Don’t you think that it should be placed prominently on your front page?

Therefore, it is of absolute importance to update your front page with current news, eventhough you might have a dedicated page just for such purposes.

Mistake 8: Use of Frames/Iframes

This is another web technology that’s considered passe. Whatever a <frame> or an <iframe> can do, <div>s can do it about just as well. If you need dynamic updating of its contents, then a little bit of AJAX can emulate that behaviour pretty well.

If you need more convincing on why you should drop frames in your web pages, consider the following scenario; A page that uses two frames will need at least three HTML files:

  1. The frameholder (where you define the <frameset> element).
  2. Contents of the first frame.
  3. Contents of the second frame.

In addition to this, link targets need to be defined properly. A simple mistake could result in an external link to be opened in a site menu frame. I’m sure that you have encountered this problem every once in a while. It can be quite irritating to see a web page squashed in a small frame.

Furthermore, search engine spiders tend to index the contents of your <noframes> tag better than the actual frames themselves!

Mistake 9: Non-descriptive Titles

Perhaps one of the more easier issues to fix. The contents of your <title> element is very important. It should provide a brief description of the page it’s on. Many lazy web authors template the titles of all their pages, thus making it the same for all pages in their web site.

A common misconception about the page title is that it’s unimportant because it’s merely displayed in your browser window’s title area but not on the page itself. Hence, the preference to template it rather than making it dynamic.

Some even went to the extent of making it cartoonishly dynamic by manipulating the title tag with JavaScript to do irritating ASCII animations! This will irritate most users to no end, so please, stay clear of doing so!

From a visitor’s point of view, the page title is virtually invisible. However, for search engines, the title tag is all important. It should concisely describe the page that’s being returned as a search query result. Here are some examples:

  • Super Duper Company Pte Ltd Web Site (across the entire site): Templating, a very bad way to use titles
  • Super Duper Company Pte Ltd. The best company which only sells super, duper stuff like super duper cars, super duper trucks, super duper whatever, all the super duper stuff you want!: Title spamming, definitely a bad way to use titles. Furthermore, search engines only index on average the first 64 characters of the title anyway.
  • Super Duper Company – Description of Current Page: This is one of the more popular title formats. Clear, descriptive, concise… However, there’s a better way to structure a title.
  • Description of Current Page – Super Duper Company: In my opinion, this is the best title structure a web site can use. The page description should appear before the company name because that is what a search result will show first. In addition, the title should focus more on the current content rather than the overall description of the web site.

Mistake 10: Using Popups for Important Pages

This is yet another scientifically proven web irritation that is used for all the wrong reasons. The common reasoning used by incompetent web designers is that popups shift the focus temporarily from the main content to the popup’s.

What this group of designers fail to see is that after years of being plagued by popups, even the most inexperienced web surfer developed a habit of automatically closing popups (especially unrequested ones) or enabling popup blocking features in their browsers. Hell, most modern browsers already enabled this option by default.

To make matters worse, a lot of corporate websites use popups to announce important news. Sadly, this information is unlikely to reach the targetted recepients, either through the “close all popups by reflex syndrome” or through popup blocking browser features/software.


I hope that you obtained some useful hints and tips on designing a more structurally sound web site from what I’ve written. The purpose of this article is not to preach. Hell, I’ve made almost all of the mistakes I’ve mentioned above (the only exception is mistake #1, probably because I can’t develop anything useful in Flash, let alone an entire web site).

I appreciate any comments and/or feedback. You may do so by using the comment form below, or if you prefer, you can send me private feedback via this contact form. I will strive to respond in a timely manner.

WordPress 2.0 has been released. Download it here.

I won’t be upgrading in the near future. Some of the plugins I use works kinda flakey in WP2.0. I’ve ran 2.0RC3 on HTNet for about 3 hours and the incompatibilities kinda overwhelmed me.

I’m going to set up WP2.0 on a test server first to sort out some of the bugs. When I’m 100% satisfied with the results, HTNet will, once again, run WP2.0.

Thanks to WTC for the heads up.

Merry Christmas

I won’t be around during the Christmas holidays, so here’s wishing you a Merry Christmas. I’ll be spending my extended Christmas weekend in KL, offline, and of course, unable to update HTNet.

The current Christmas styling on HTNet will be staying for a while until I get some free time to draw some 2006-ish logo and background.

Enjoy your holidays, and for those of you who plan on travelling; travel safe.

Hutan Bandar is one of the rare places of green tranquility in Johor Bahru. It spans over 32 hectares and is maintained by MBJB (Johor Bahru City Council). Translated to English, Hutan Bandar means “City Forest”. In the deeper parts of Hutan Bandar, you would literally feel disconnected from the hustle and bustle of JB. It’s a really strange, yet calming feeling to have, especially over the weekend after a full week of corporate battles and mental drain.

Some of the facilities available at Hutan Bandar are:

  • Lots of lush green flora.
  • Seven scenic lakes.
  • Children’s playgrounds.
  • Jungle Trek.
  • Exercise facilities.
  • Camping site.
  • Children’s swimming pool.

Here are some pictures I’ve taken during my last visit to Hutan Bandar.

A Japanese style bridge leading to the main pathway of Hutan Bandar.

A Japanese style bridge leading to the main pathway of Hutan Bandar.

View of the lush greenery near the biggest lake in Hutan Bandar.

View of the lush greenery near the biggest lake in Hutan Bandar.

Stone dolphins spouting water at the children’s pool

Stone dolphins spouting water at the children’s pool

Paved pathway to the playground and jungle trek.

Paved pathway to the playground and jungle trek.

Full size images are available upon request.

All pics shot with my trusty Panasonic Lumix DMC-FX5 digital camera.

Fun With WordPress Theme Toolkit

I came across WordPress Theme Toolkit while developing my current theme; Tuned… and I thought, what the heck, I might as well give it a whirl.

I’d like to share one of the things I use the toolkit for: Automatically Generating Feeds Links. To implement this project on your WordPress powered blog, you’ll need the feedListplugin, and WordPress Theme Toolkit (of course).

Setting up these plugins are not in the scope of this mini tutorial. If you have problems doing that, then I guess this tutorial is really not for you, yet. No that that’s out of the way… let’s get cracking!

Getting Input

First off, we need some way to get some input to start displaying the feeds. At the very least, feedList needs the feed URL to work. Other info you’ll need to generate a well-structured feeds list are as follows:

  1. A descriptive title for the feed.
  2. URL of the site you’re syndicating from.
  3. How many items do you want to display.

Now, let’s get this project up and running. Create a textarea in your theme’s functions.phpwhere we will enter the items above (refer here for instructions). Mine looks something like this:

'feedslist' => 'Feeds List {textarea|6|50} ## Format: Site Name, http://site.url, http://feed.url, Limit',

As you can see from my example, I want to enter the data in a comma-separated list.

Data Entry

Once you have successfully created the input section, it’s time to populate the textarea. The format you should use is as follows:

Site Name, Site URL (must be full URL, with http://), Feed URL (must be full URL, with http://), Limit (How many items to show, must be an integer)

Each entry must be on one line (input line, not the wrapped line, meaning, don’t press Enter before keying in the limit).

My set of lists looks like this:

LQ Slackware Forum,,, 5
Kernel Releases,,, 10
Recent Diggs,,,5
My Diggs,,,5

Actually Doing Something with the Data

We’ve created the textarea for input and we’ve actually populated it with data. Now let’s turn that data into something useful… you know like, actually generating the feeds!

Now, this requires a little bit of PHP programming. We need to write a function that will automatically output the feeds list on our web page(s). This function should be created near the end of your functions.php, right before the PHP close tag ( ?> ). Fortunately for non-coders, I have already created the function for you to use:

function getfeeds() {
global $mytheme;
$variable = trim($mytheme->option['feedslist']);
$array = explode("\r\n", $variable);
$subarray = array();
foreach ($array as $value) {
$subarray[] = explode(",", $value);
foreach ($subarray as $key => $val) {
$val[0] = trim($val[0]);
$val[1] = trim($val[1]);
$val[2] = trim($val[2]);
$val[3] = trim($val[3]);
$val[0] = str_replace("&", "&amp;", $val[0]);
$val[1] = str_replace("&", "&amp;", $val[1]);
echo "<li><h2><a href='".$val[1]."'>".$val[0]."</a></h2>\n";
echo "<ul>\n";
rssLinkList($val[2], $val[3], false);
echo "\n</ul>\n</li>\n";

Note that the variable $mytheme that I globalised in the function may not be the same as what you’re using. $mytheme is the default name used in WordPress Theme Toolkit, you should definitely change this to your own variable name.

What this function does is to output your feeds in an unordered list. This function will produce HTML compliant codes when placed between <ol> or <ul> tags (commonly used in WP themes’ sidebars).


All you need to do to get your feeds list to be displayed is to call the getfeeds(); function where you want it to be displayed.

I called it in my theme’s sidebar.php. You can output your list anywhere in your theme, but remember to enclose it between <ol> or <ul> tags. You may need to modify the function a bit if you want to add extra stuff like CSS.


The function will definitely break if the site’s feed URL or home page URL contains commas. You might want to use a different separator character if this is the case. You should also modify the getfeeds function accordingly to reflect this.