User Interface – it matters

I like to format anything I write, whether it be a letter, a report, a blog post etc

Formatting improves readability and , for me, structured presentation helps to promote structured and more comprehensive thinking/analysis.

Problem – My headings don’t work

Accordingly I’ve been frustrated by one aspect of the WordPress – Windows Live Writer integration, which is that when I use headings and subheadings in WLW my post looks great. However when I publish the post to WordPress, my nice headings disappear and my post loses much of its structure. Update: This only happens when using browsers other than Internet Explorer. My apologies to anyone (including the developers) who I mislead regarding this. Update #2: Apparently IE8 will fix this, as WLW renders the WYSIWYG editor and preview using Internet Explorer’s engine, and the IE8 beta is much closer to Firefox/Opera etc in its standards compliance.

See what I mean here.

It finally got to the point today that I had to find out why it was happening.

Cause

Looking at the Source View in Windows Live Writer I found out that the Heading (1-6) formatting is represented in HTML as the <h1>-<h6> tags, which is logical and as it should be. And looking at the WordPress posts a little more analytically I saw that it was just the <h1>-<h3> tags which didn’t seem to display as expected.

After a little bit of research, I found out that most WordPress themes already use the <h1>-<h3> tags in their themes, and have customised their attributes. Updating the theme in Windows Live Writer doesn’t seem to integrate this aspect of the theme’s CSS.

This is pretty basic stuff which anyone who puts a bit of time into WordPress/blogging would probably have caught from the start, and had I bothered to have a look at the CSS files being served with my blog page I’d have realised it too. For a casual blogger like myself though, or someone who knows nothing about HTML/CSS, it could be a source of frustration.

Solution

The workaround for this is to only use Heading styles 4-6 when writing posts in Windows Live Writer, or to modify your WordPress style CSS file. Bear in mind that modifying is going to change the look of the places where Headings 1-3 are already used, generally the blog title, post title and comments.

Anyone using blogging as a means of generating money should be aware of the implication Headings have for SEO.

Update:

The behaviour described above only occurs when using browsers other than Internet Explorer, such as Firefox and Opera (I haven’t tested Chrome). I should have checked those browsers before posting this. My apologies to anyone (including the developers) who I mislead regarding this.

Update #2:

Apparently IE8 will fix this, as WLW renders the WYSIWYG editor and preview using Internet Explorer’s engine, and the IE8 beta is much closer to Firefox/Opera etc in its standards compliance.