Another fine document that some developers seem to ignore is the list of plugin API hooks. Please, read that section, and include these hooks in your template! Some plugins need that API hook to work at all. My surprisingly popular snowstorm plugin for example certainly does.

While you’re at it, think about how you want to style, for example, the wp_footer() call. When I visit pages that give me a backlink through that call, sometimes the backlink is displayed in very odd places and with weird colors.

Finally, although it has already been said on the pages I linked to, get the theme unit tests and use them! It’s quite embarassing for a designer to release buggy WordPress templates.

tmp.templateFile = COA
tmp.templateFile {
	10 = COA
	10 {
		if.isFalse.numRows < styles.content.getRight
		10 = FILE
		10 {
			file = fileadmin/template/1col.html
		}
	}
	20 = COA
	20 {
		if.isTrue.numRows < styles.content.getRight
		10 = FILE
		10 {
			file = fileadmin/template/2col.html
		}
	}
}

The ifs check if there is or isn’t content in the right column and the COA returns the correct cObject, FILE in this case.

And then in your main typoscript something like:

page.10.template < tmp.templateFile

instead of the more usual

page {
	10 = TEMPLATE
	10 {
		template = FILE
		template {
			file = fileadmin/template/1col.html
		}
	}
}

That’s all.

Usability

Tab Kit: My favorite tab extension. Has many many features, I use it mostly because it allow more than one row of tabs and tab grouping/collapsing.

Clear Fields: This solves a quite annoying issue with Firefox and the xorg clipboard. Xorgs lets you paste things that you have highlighted with the mouse by simply clicking the middle mouse button. However, the previous contents of the search and address fields don’t get cleared. This adds buttons to clear those fields before pasting.

Development and Webdesign

Firebug: The swiss army knife of web developer add-ons. To quote from it’s description: “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”. Very power- and useful.

Gridfox: Indispensable while making grid-based layouts or aligning text to a base grid.

Live HTTP headers: This is rather esoteric, but very useful for JavaScript debugging and web app development.

Web Developer: This is what I used before Firebug existed, and it’s still useful today.

MeasureIt:This is very useful for quickly measuring the size of various elements on a page.

Privacy/Security

Cookie Monster: The best cookie manager I could find. I always block all 3rd party cookies, and by default no website is allowed to store cookies on my computer. Cookie monster makes it very easy to allow cookies for sites I visit. Another nice feature is to only allow session cookies for some sites.

Flashblock: Blocks all annoying flash animations. Can whitelist sites of course. A must.

NoScript: Blocks all (3rd party) JavaScript. Indispensable security tool and gets rid of most ads as well.

There was a time when websites used “Best viewed in Internet Explorer” or “Best viewed in Netscape” kind of texts and banners. Some sites even blocked you if you were using the ‘wrong’ browser (it still happens today). That was stupid in the 90s, and locking out IE6 isn’t any smarter today.

If you want to behave like the “Best viewed in Internet Explorer” crowd of the 90s just go ahead. There was a different movement back then that still exists today: Viewable With Any Browser. There’s really no need to punish some minority browsers.

Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.

Tim Berners-Lee in Technology Review, July 1996

I guess I’ll just go on and build sites that are more or less standards-compliant and hopefully don’t require special tweaking for IE6. There are enough cross-browser tools out there. Just use your favorite search engine to find JavaScript libraries, CSS frameworks etc. Of course, something will always break in the old IEs, but don’t waste time breaking it on purpose.

Update: Just found this gem from the gif-crazy 90s and had to add it:

<?php
if ( have_comments() ) { ?>
    <ol class="commentlist">
    <?php
    wp_list_comments();
    if ( get_option('page_comments') && (
        get_query_var('cpage') > 1 ||
        get_query_var('cpage') < get_comment_pages_count() ) ) {
            ?> <!-- pager HTML --> <?php
            next_comments_link();
            ?> <!-- pager HTML --> <?php
            previous_comments_link(); 
            ?> <!-- pager HTML --> <?php
    } ?>
    </ol>
<?php
} ?>

If you want to get started with 2.7 theme migration have a look at Otto’s or Matt’s posts on the new comment system and ping/comment separation.

Update: No, get_previous_posts_page_link() is incorrect and get_previous_comments_link() doesn’t exist (yet).

Update 2: Thanks to Viper007Bond for pointing me in the right direction.

Update 3: trac ticket

Update 4: Additional conditional to not show the pager at all if paging isn’t enabled.

#foo {
    border-radius:          8px 4px 4px 8px;
    -moz-border-radius:     8px 4px 4px 8px;
    -webkit-border-radius:  8px 4px 4px 8px;
    -khtml-border-radius:   8px 4px 4px 8px;
}

No browser seems to support the first notation yet. That’s fine as CSS3 isn’t complete. However, mozilla, webkit and khtml-based browsers should be ok. IE and Opera will just ignore those.

The syntax differs in some details though, see for example:

    -moz-border-radius-bottomleft:      5px;
    -webkit-border-bottom-left-radius:  5px;

Oh, and Safari doesn’t seem to support a radius given in percent, mozilla does:

    -webkit-border-bottom-left-radius:  10%;

This doesn’t work for me in Safari.

By the way, this blog’s wordpress template uses CSS3 border radiuses. Hi IE users

Update: This post led me to Drew Diller‘s blog. He has an interesting technique for rounded corners in IE. Another technique by Remiz: see other technique for rounded corners in IE. Who knows, maybe I will be able to deploy sites that use border radiuses in the future, even if Microsoft has no plans for supporting them in IE8.

It’s good to know which features the users use, how often, in what order etc. Do you need to advertise some functionality more? Maybe you need to prepare better documentation so that they even know how or why to use some things?

If you have outgoing links, you may want to know where your users are going? The ugly way of doing this would be to use some sort of redirect URLs and monitor those. But I don’t like that way. If I use mootools anyway I can track outgoing links more elegantly. And redirects certainly can’t handle ajax stuff.

1
2
3
4
5
6
7
8
9
10
11
12

function clicktrack(id) {
    var elements = $(id).getElements('a');
    elements.each(function(item, index) {
        $(item).addEvent(
            'click', function() {
                new Image().src = '/usability/?click='
                + $(item).getParent().id + "&" + $(item).id;
            }
        );
    });
}
clicktrack('mode');

Add a HTML that looks somewhat like this to get an idea what buttons your users are clicking.

1
2
3
4
5

<div>
   <a id="1" href="#">option 1</a>
   <a id="2" href="#">option 2</a>
   <a id="3" href="#">option 3</a>
</div>

Of course, in an ideal world, you’d want to offer non-JavaScript links too. Tracking outgoing links is even simpler, i’ll leave it as an exercise for the reader

I like to tweak my wordpress theme. And I’m far too lazy to set up a second blog just for development. So I’m looking for a solution to work on my template without distracting visitors. I think one day I’ll write an extension that is a little more powerful than this trick, but it’s a start.

The easiest case is that you sometimes want to play around with your CSS styles. In this case, just add something like the following example to your template header. Put it where you include your CSS, and only logged in users will see your experimental CSS.

1
2
3
4
5
6
7
8
9

<style type="text/css" media="screen">
    @import url("<?php
    if ($user_ID) {
        echo bloginfo('template_directory') . "/experimental.css";
    }
    else {
        echo bloginfo('stylesheet_url');
    } ?>");
</style>

Of course, you can be more specific than showing any logged in user the testing style. Just compare the $user_ID with some specific ID.

Seriously, how can somebody miss that his complete page layout shifts some pixels to the left or right when looking at different pages of the same site.

Consider this, twitter without a scrollbar (I think this was my profile page).

The same site, but now with a scrollbar. Notice how all the content moves to the left.

On the next image I made an overlay of both shots to make the layout shifting more obvious.

In my opinion this is one of the biggest design errors, and everybody does it. And – it’s ridiculously easy to fix:

html {
    overflow-y: scroll;
}

Not using this is really hurting a website’s usability. When a user clicks on some navigation element the navigation is supposed to be at the same place on the next page. So, force the vertical scroll bar!

Now I just need to hire myself a good designer to make my page look good

Whenever you list things, IE scripting breaks if you add a comma behind the last element. It’s probably incorrect to add a comma and the examples at docs.mootools.net are all correct. But it surprised me nonetheless as IE lets terribly broken HTML pass and other browsers are more forgiving. Anyway, fixing sloppy code is always a good thing.

This won’t work in the Internet Explorer I tested:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out',
                });
                myFx.start('background-color', '#ccf', '#eef');
            },
        });
    });
});

(Errors on lines 13 and 16)

This will work:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.addEvent('domready', function() {
    var elements = $('sidebar').getElements('a');
    elements.each(function(item, index) {
        var elem = $(item);
        elem.addEvents({
            'mouseenter': function() {
                elem.setStyle('background-color', '#ccf');
            },
            'mouseleave': function() {
                var myFx = new Fx.Tween(elem, {
                    duration: 250,
                    link: 'ignore',
                    transition: 'sine:out'
                });
                myFx.start('background-color', '#ccf', '#eef');
            }
        });
    });
});

Some day I may read through the JavaScript specs and find out if this behaviour is to be expected. Another resource I haven’t gone through yet is this excellent post at the mootools blog.

If you’re interested in debugging JavaScript for IE you should read this How to debug JavaScript in IE as well.