Daily Blog Tips has a list of 43 web design mistakes that is a must read for anybody who wants your website to be visited and enjoyed by other readers.

1. The user must know what the site is about in seconds
2. Make the content scannable
3. Do not use fancy fonts that are unreadable
4. Do not use tiny fonts
5. Do not open new browser windows
6. Do not resize the userâ€™s browser windows
7. Do not require a registration unless it is necessary
8. Never subscribe the visitor for something without his consent
9. Do not overuse Flash
10. Do not play music
11. If you MUST play an audio file let the user start it
12. Do not clutter your website with badges
13. Do not use a homepage that just launches the â€œrealâ€ website
14. Make sure to include contact details
15. Do not break the â€œBackâ€ button
16. Do not use blinking text
17. Avoid complex URL structures
18. Use CSS over HTML tables
19. Make sure users can search the whole website
20. Avoid â€œdrop downâ€ menus
21. Use text navigation
22. If you are linking to PDF files disclose it
23. Do not confuse the visitor with many versions
24. Do not blend advertising inside the content
25. Use a simple navigation structure
26. Avoid â€œintrosâ€
27. Do not use FrontPage
28. Make sure your website is cross-browser compatible
29. Make sure to include anchor text on links
30. Do not cloak links
31. Make links visible
32. Do not underline or color normal text
33. Make clicked links change color
34. Do not use animated GIFs
35. Make sure to use the ALT and TITLE attributes for images
36. Do not use harsh colors
37. Do not use pop ups
38. Avoid Javascript links
39. Include functional links on your footer
40. Avoid long pages
41. No horizontal scrolling
42. No spelling or grammatical mistakes
43. If you use CAPTCHA make sure the letters are readable

Some of them are really dead no-nos, like (36) using harsh colors (Have you seen those terrible websites with pink words on bright yellow background?!?) while some others are less serious. Still, it is a great list go though whenever you decide to publish a new site.

Oh, that thing about (28) making your blog cross browser compatible. Am I just plain technically stupid, or is it really plain impossible to format a page with CSS and make it look exactly alike (at least, for the alignment of elements) between Internet Explorer and Firefox? I’ve been fiddling with a design for days, and while the designs still look okay on both browsers (like this blog), I still can’t get something to look alike in both browsers.

Most of the designs look as intended on Firefox and then get messed up in IE. Dang! Seriously, I hope the world surfs with Firefox.

A few days ago, my business and CPT mentor Mr KC See, CEO of Quest Group and MasteryAsia, announced to the community that he has started a blog! It was a great choice to start with WordPress, and host it on their own domain. Here is what it looks like currently, using the default Kubrick theme.

Over the next few weeks, I will be helping to optimize and market this blog – so you will see updates to it soon!

Oh, by the way, what KC is sharing on his blog are his years of business knowledge and experience, so you can’t afford not to read his blog! Well… what to do – he started training people when I was three years old!

I was back tweaking my blog templates these days, and I learned that many of the WordPress Plug-Ins for the sidebar use the HTML header H2, for sidebar headers.

For example, in order to generate the list of links from your blogroll automatically (with the headers), one would normally use <?php get_links_list(); ?>. This, however wraps the link category heading with H2, according to the documentation.

While this is suitable for most users using the many templates available for free at the WordPress themes directory, I personally feel that sidebar header (where the blogroll usually goes) do not deserve the importance of having wrapped around H2.

The Blog Information Hierarchy

Like any word processing application, the information on HTML pages should follow a hierarchy, and the HTML headers H1 to H6 exists for the purpose of highlighting this hierarchy.

In the case of a blog main page, the H1 tag obviously belongs to the blog title. No qualms and no worries about that is the template. What I do not understand is, why are sidebar headers put in the same importance as post titles?

I think the most significant sections of a blog should be (1) the blog title (2) the post titles. Sidebar headers should be put further down the hierarchy, not equal as compared to the post titles. The highlight of every blog should be your blog content (which is the content in the post itself) doesn’t it make sense?

My Blog Information Hierarchy

After some consideration, I have decided to implement my own blog information hierarchy, and move away from the typical WordPress blog template information hierarchy. I feel this would better highlight the importance of each section of information to the search engines.

But again, this is only when you are working to please the spiders. A H6 heading can be tweaked to look more prominent than a H1 tag using CSS.

So here are how I use my headers in my blog.

H1 headings

Blog main page – Blog title

Blog single (permalink) page – Post title

Blog archive page – Archive title

Blog custom (WordPress pages feature) page – Article title

Notice I highlight the post title and article title in the pages where I feature single articles or posts. In that page, I don’t even put my blog title. I want the search engines to tell immediately and very specifically what the post or article is about.

H2 headings

Blog main page – Post titles

Blog single (permalink) page – “# of responses”, “Join in the conversation”

I think H2 represents what is second most important after the main title of the page. I normally have only one H1 tag on a page, but several H2 tags. In the blog main page, the post titles are definitely important enough for H2. In the single post page, I think after reading the post, the next thing you want to highlight are the responses that follow in that post, and invite conversation.

H3 headings

Blog archive page – Post titles

Actually, I think the blog archive page post titles, can be done with H2, but I since I use only the excerpt in the archive page, I thought that as compared to the blog main page, this should be of less importance.

The emphasis of an archive page is that “from here you can link to the older posts”, and not in presenting all the information that has been posted before. I feel that blog archive pages should be seen a “content page”, or a “list of links”, rather than an information source by itself.

H4 headings

Sidebar headers

Since most information on the sidebar should be miscellaneous information (if not they won’t be on the sidebar, should they? ), the importance of that information should be pushed down to a H4. While this means that I will have to do something like this : <?php get_links(28, '<li>', '</li>', '', false, 'rand', false, false, -1, false, true); ?> to display the links for my blogroll (I don’t know of any other way yet), I think the optimization is worth it.

H5 headings

Subtitles within a post

One of the ways to highlight the start of a different section within a post is to use one of the header tags within the post. I personally use H5 for this.

Search Engine Optimization

Some people don’t believe in tweaking too much code or optimizing for search engines, but I believe that all things equal, a better optimized template would make a difference between a second place and first place. Since tweaking the template is often a one time job, spending the time into these details are worthwhile.

The original Kubrick theme shipped with WordPress, and many other themes provided in the WordPress themes directory are optimized for aesthetic appeal, with a lot of very beautiful graphics which really appeal to human visitors. I admit, I’m terrible at web design, I’m “old fashioned”, but as far as search optimization is concerned, until the day search engines can categorize images without meta data, tweaking the HTML code is the way to go.

An ugly website can perform better than a pretty website… as long as it is not too ugly to irk all your visitors away.

Over at TechCrunch today, Michael Arrington shared his findings on the messed up WalMart Video Download Store on Firefox. Although from the comments it seems that the problem can be fixed with a hard refresh on Firefox, for my case, every single page needs to be hard refreshed! Its not going to work this way.

So it seems WalMart is not doing their work to make sure the pages load nicely in both IE and Firefox!

Here is the screenshot in IE:

And here is the mess in Firefox!

To tell the truth – I wouldn’t believe they were the exact same site! Come to think of it, its not an easy task to pull off, this one! How did they get the sites to look so different between browsers?

I think this really serves as a reminder for us to always test across browsers – and IMO, at least on IE, Firefox, and Opera (and even better with Safari). Like one commenter said

when your site looks like this, expect them to never come back.

This also reminds us about usability in optimization – some of us are so caught up in the SEO process that we neglect the aesthetic appeal. I think ultimately, there must be a good balance between optimizing for humans verses search engine bots. That, I think, is what a true SEO expert capable of.

Yesterday, I spent some time out and I met up with my friend, coach and mentor – Patrick, so we could discuss on the things that I have done up for his blog. I’m currently working with him to help him optimize his blog about Designing Your Life and Making Good Decisions.

Here was his blog before:

… and here is his blog now.

So as you can see, over these few weeks, I basically got the blog template revamped and optimized.I mentioned it earlier here on this blog that I wasn’t very familiar with Blogger templates, because I was working with WordPress all the while. This project gave me the opportunity to look back and restart from the basics.

While the new Blogger allows us to use the drag and drop, widget-style template, I reverted back to the old HTML, just using the classic style templates. I think widgets are great for quick editing of templates, but when it comes to optimization for search engines, we really need to know what is the underlying code that these widgets produce. If you are familiar with the widgets and how to control them, its great, but for myself, I really prefer more control over the HTML codes and exactly what code is shown behind the scenes.

Since I’ve taken time to look at the template tags for Blogger, I guess it would be good if I can share with the rest of you.

Let’s start by talking about about SEO for blogs.

SEO for Blogs

Most SEO practitioners would understand that a well optimized site requires a lot of attention to be paid to the underlying HTML of every page. This means that in order for you to build a well optimized static HTML site (i.e. no database queries and stuff like that), the optimization process will require that every page be looked into, so that the very key items like the page title, and meta tags are changed accordingly for each page, so that the search engine bots will be able to easily tell the difference between pages.

This however, becomes a little challenging for blogs – because in a blog environment you cannot edit just one post (well, you can do that in WordPress, but not for Blogger, as far as I know it). The WordPress template system runs on a hierarchy, making tweaking flexible, because you can easily use a different page for a category, or for a single post, or for a blog archive page. For the Blogger template, however, all you can do is to make changes to one template file. This means that that ONE file will need to cater for the different sections of the blog, whether you are viewing a permalink, or a category or the main page.

That is the challenge.

Fortunately, Blogger provides a couple of very nifty tags for you to customize this. The tags are:

<MainPage>...</MainPage> – Anything that goes between these tags will be processed in the main blog page, so for example, if you are hosting with blogspot, code between these tags will be shown when you access http://yourblog.blogspot.com. In this page, the part between the tags <blogger> and </blogger> will be repeated many times, one for each post.

<ArchivePage>...</ArchivePage> – HTML code that goes between these tags will be processed when the user surfs on to an archive page. So for example, if the user surfs on to the January 2005 archives, the code betweent these tags will be processed. Similar to the previous one, the part between <blogger> and </blogger> will be repeated once for each post

<ItemPage>...</ItemPage> – Code between these two tags will be processed only when the reader surfs on to a permalink page – that is, a page that shows typically shows only one post, and then followed by a string of comments.

There is also a tag that goes <MainOrArchivePage>...</MainOrArchivePage> – and these are basically a combination of <MainPage>...</MainPage> and <ArchivePage>...</ArchivePage>.

So what, when you have these tags?

I guess that is the question on your mind right now. Well so what? How do I apply that to tweak the design?

Let me give an example as to how you can use these three tags for work on SEO. Remember every page needs to have a different title? If you look at any typical template, what you will see in the in the head section of the HTML (where the title tag is), is something like this:

<title><$BlogPageTitle$></title>

What this generates, however, is not so SEO friendly, because the <$BlogPageTitle$> tag works in such a way that if you are displaying your your blog main page, it displays the blog title, and when you display your permalink, the title changes to something in the format [Blog Title] : [Post Title].

So if my blog name is “My Daily Thoughts”, and my post title is “I started Internet Marketing”, what I will see in the title when I surf on to the post page is “My Daily Thoughts : I started Internet Marketing”.

This is not good, because your keywords for the post are in the post title. You want to emphasise that to the search engine, and the best way to do that is to change it to the format [Post Title] : [Blog Title].

How do you do that?

Ah ha! 😛 That is when the tags come into good use.

Let me first display what I would use. That single line previously, would be replaced by something like this:

Note what goes on now. I have used the three different tags to work on each individual type of page separately.

On the main page, I want to show only the blog title. So within the <MainPage>...</MainPage> tags, I will show only default <$BlogPageTitle$>.

On the archive page, I want to show something like “My Daily Thoughts Blog Archive”, so I appended the word “Blog Archive” to the back of the <$BlogPageTitle$> code.

Lastly on the item page, I want to show something like “I started Internet Marketing : My Daily Thoughts”, so what I did was I had to extract out the item title from the post, which will come in the form of this:

So, with the use of these three tags, I now have more control over what exactly is being displayed on each page. This title example is just one part of the template which I tweaked. Using the same principles, I made changes to the way how things are displayed for the main page, archive page and the item page, to make sure the important titles and keywords are highlighted to the search engines with header tags like <h1>...</h1>.

Of course, optimizing the template is just one part of the whole blog marketing process. After that, it is really up to the blogger himself to keep writing good articles, and go around leaving links to his blogs through comments, articles, forums and whatever means (minus spam! :mrgreen:) to get his blog up the listings of Google.