The Guardian has changed its user-generated comment system - moving from a client-side system to a server-side one.

With the old system, once you clicked to read a story, the web page would download, and some javascript would run. This would go off and look up readers' comments and display them. This wasn't terribly accessible - if you couldn't or didn't run javascript, you couldn't see the comments.

What you used to see with JS turned off

It was also bad for SEO, as search engines couldn't run the javascript (so couldn't see the comments). And if your mobile didn't run javascript (like mine), you couldn't read the comments either.

With the new system, the comments are just part of the web page, like all the rest of the text on the page - so the comments are readable by anyone, javascript or not.

This is a great change by the Guardian, and not before time. If you notice any problems, they've asked you to point them out.

The problems with the old system

You can read some of the background to the change - ie comments by me bitching to various members of the Guardian about how awful the old system was on the Guardian site:

• here (where I point out the old new system surely breached the Guardian's accessibility policy),
• here (where I got a bit frustrated) and
• here (where there was an interesting (to me ...) exchange between me and the Guardian about what was going on).

The only problem now is that a couple of links to my blog that I dropped in the comments section have broken This is only a problem for posts shown on the search results page - on the actual posts, the links work fine.

Although I'll guess they'll add nofollow to links in comments soon anyway, to avoid the Independent's problem with spammers... (Update A Guardian commenter, below, says future links in comments will be nofollowed - but existing links in comments will stay without the nofollow tag).

Google already indexing comments

Google has already indexed the text of one of my comments

This screenshot shows how Google has already indexed the comments on the page shown - a search for the text of my comment returns the page. With the old system, it wouldn't.

The express website is about to have a redesign. You can see it here. Here's a screenshot. They also seem to be moving URL from dailyexpress.co.uk to express.co.uk.

It doesn't seem that much better to me ... a bit like they've tried to bodge the BBC home page into their ghastly colour scheme. And I'm not sure they've thought it through - they're truncating intros in the featured story box like this: "A COUNCIL which was criticised after banning home ba ...". ba what?!?

The new look express

I lack the time and energy to go into it right now. But it's pretty awful when you look at the detail. There is so much copy sliced off by the right of the boxes for a start. They can't think this is good can they?

Also, someone better explain about accessibility to them soon. This is how it looks with javascript turned off - there's nothing there!

Javascript off: nothing there!

I've been experimenting with Google's treatment of links hidden by javascript. I was all set to report my findings when Blogstorm reported that Google had announced publicly what it was doing. Doh (lesson 1: finish blog posts before going on holiday).

Anyway, here's an example of what this means in practice, and the result of my test.

MoneySavingExpert.com

The box hidden by javascript on moneysavingexpert.co

MoneySavingExpert.com uses javascript to add functionality to its forum pages.

With JS off, clicking on a user's name takes you to the login page - you can access the user's profile only if logged in.

With JS on, if you click on a user's name, this box opens up - the pink styling shows nofollow links. As you can see, there is a link to the URL that a user has specified as their homepage - in this case, I've specified the homepage of this blog for my moneysavingexpert profile.

Recently I spotted these links in my webmaster tools account, and discovered that searching Google for 'Visit malcolmcoles's homepage' returns the homepage of this blog, as well as the MoneySavingExpert forum page.

Of course, this might be happening for reasons other than Google indexing javascript-hidden links, so I decided to test it.

The test

I set up a new MoneySavingExpert profile called Nooby19702009, and I set its homepage as www.digitalsparkle.co.uk/jstest4. I then added a couple of forums posting (one even got a thank you from another user!)

I also added a link to the bottom of every post on this blog. With javascript off, this link used anchor text 'Coles TEST XYZ' and linked to www.digitalsparkle.co.uk/jstest3. With javascript on, the URL was changed to www.digitalsparkle.co.uk/jstest4.

If you can make head or tail or it (I just copied it from somewhere), the code was this:

<script>
var hrefLink1 = "http://www.digitalsparkle.co.uk/jstest4.html"
function setHref() {
document.getElementById('href1').href = hrefLink1;}
// alert(document.links('href1').href)
// return hrefLink1}
</script>

Search results for "visit nooby19702009's homepage"

The two pages - jstest3 and jstest4 are identical in every way except the URL. They contain a couple of lines of text, including the unique phrase: "colesABCDEF GHIJKL "

Anyway, the upshot was that the following searches all return jstest4.html and NOT jstest3.html:

• A search for "visit nooby19702009's homepage" (the javascript-hidden text used on the moneysavingexpert site that pointed to the jstest4 page I'd set as my homepage there).
• A search for "colesABCDEF GHIJKL" (the text used on the jstest3 and jstest 4 pages).
• A search for "coles test xyz" (the anchor text used on this site for both the plain HTML and JS-only links).

This is even though on this site, its jstest3 that is in plain view in the HTML and jstest4 links are all hidden by javascript. And on moneysavingexpert, the link to jstest4 was only visible when the javascript ran. In fact, I can't get jstest3 to appear in any search I've tried. Jstest4 has wiped it out completely.

What this means

This shows two things.

The javascript-hidden link must be passing pagerank. Links from two domains to jstest4 have made google index it rather than the identical jstest3 for the unique phrase (colesABCDEF GHIJKL) that both pages contain.

The javascript-hidden link must be passing anchor text - jstest 4 is a result for "visit nooby19702009's homepage" - a phrase used only on moneysavingexpert.com in a javascript hidden link.

The implications

The main implication is that if you are relying on javascript to hide links and foil spammers, it won't work any more ...

I've written before of the importance of occasionally checking how you appear in google. Here are some other examples.

Increase font size - www.euractiv.com

I'm not quite sure what EurActiv is but it has google toolbar page rank of 7, so it must be important, right (I don't want to get into an argument about page rank so shhh)?) Anyway, it looks like this in Google news:

Headlines of 'Increase font size'

It's not clear why from the HTML - although it has used <!--googleon:index--> tags but not around the copy that includes the font size changer (which is clearly a bad idea).

Newsticker requires javascript - Peace FM Online

Peace FM (page rank 6, so still fairly important in google's eyes). Its headings appear as 'newsticker requires javascript'.

Headlines of 'Newsticker requires javascript'

Adjust font size - several sites

Several sites appear with the heading "Adjust font size" in Google news.

Headlines of 'Adjust font size'

Font size AAA

Then there is 'font size AAA':

Headlines of 'Font size AAA'

Change font size

And finally 'Change font size' - one site has this has its headings with a bonus '-+' at the front ...

Headlines of 'Change font size'

I have been reviewing the usability of taps - avoiding arrest for getting my camera out in public toilets and showers - in order to see what lessons the design of everyday objects can tell us about web design.

Here are the findings ...

If you need massive instructions, you've cocked it up

So these are the massive instructions pinned behind one tap I came across. Er, people, it's a tap. If it needs all this, it's a rubbish tap.

A massive sign with tap instructions

The lessons

If you're writing loads of help text for your site or tools because of problems in usability testing, there's something wrong with the interface. Start again. From scratch. Help text is not the answer.

Keep important information above the fold

Virgin trains taps and soap

This is what you see when standing there. WHERE IS THE ACTUAL TAP?!? How do I operate it?

Virgin train toilet: What you see when you're standing there

This is what you see when you bend down. Oh, that's where the tap and dispenser are ... I really want to bend right over to waist level to be able to use them.

Virgin train toilet: What you see when you bend over

The lesson

I know people can scroll. And I know not everything should be visible when you first look at a webpage - but you need to give people a clue when they first get there. Making people scroll (bend over) to see important functionality is a bad idea. So don't have a massive header panel, for instance.

Degrade gracefully

These taps aren't going to degrade gracefully. The hot is on the right (the left is usual in the UK) and the blue marker for cold has fallen off the one on the left. If the red marker falls off, no one will know which tap is which.

Two taps - one is missings its hot / cold indicator

The lesson

If you use javascript for functionality, make sure the pages work with javascript off. Some mobile phones don't run javascript for instance - so making your comments run via client-side javascript or having carousels that don't work with javascript off is a bad idea.

Don't use a tiny font

If you have one of those rotating taps, it helps if people know which way to rotate the damn thing to get it to work.

Here's a tap I came across:

A tap with a tiny font

And here it is when I bent forward to inspect the tiny 6 point font that says cold and hot.

Zoomed in on the tiny font

The lesson

Typography and readability are important - I recently chided newspapers for their small fonts:

• Aim for 1em (= 16px or 12pt) for your body copy font if you want people to read it.
• Don't set your font in absolute pixels, as you stop IE6 users resizing it.
• Make sure that if someone ups the font size in your browser, your layout is still readable.

Test it works

So, look at this tap (sorry for picture quality). There's a pointy end and a large white end you hold onto. Guess what - the pointy end shows nothing. You need the large white end to obscure the setting you want for it to work ...

So when the white bit obscures hot (and the pointy bit points at cold), it's cold. And when, as pictured, the point is pointed at 'tepid', well, that's when it's off.

This points the wrong way

The lesson

I presume this is plumbed in back to front. They could have uncovered this if they had tested it with some real users. Make sure your assumptions are correct by testing your designs with users.

Be consistent

So to turn on a tap, you turn it anti-clockwise. Not with these taps! The left one works that way - but the right one works the other way. You have to turn it clockwise to get it to come on.

One goes one way, the other goes the opposite way

The lesson

Be consistent:

• For a start, be consistent on your own site.
• Secondly, be consistent with every other site. Don't invent your own icon symbols or ways of doing things - users shouldn't have to learn how to use your site. It should be obvious and intuitive.

Give feedback

Some taps that you rotate indicate which way to turn them with a blue blob for cold and a red one for hot (or with an H and a C). Here are some.

I can never, ever work these out. If I rotate it to the red side, then the red disappears round the back and I can see the blue. Does this mean it's getting hot or cold?

Four taps with a blue / red blob or H / C letters to indicate temperature

The lesson

Give users feedback that helps them understand what they've done and what's happening. This includes:

• Links that change colour when visited
• Buttons that change on mouseover
• Indications on forms that there is an error - and where it is.
• A progress bar when things are happening.

Avoid confusing feedback like:

• Links that don't change on hover
• Headlines (that aren't links) in the same colour as links.

What do you think?

Here's another interesting articles on tap usability:

• Unusable sinks on Boeing planes <-- very true!
• Modern life is rubbish (again) that features taps alongside air dryers.
• A picture of some knuckle-grazing taps.
• A water fountain where you have to press a button to be told what button to press.

Carousels (sliders as they're sometimes known) are a good way to promote several items of content without using up too much space on your homepage.

Here's a roundup of sites using them - and how successful I think they are. At the end - once I've called Sky a narrow winner over the BBC - I've given some tips on implementing a good one.

Yahoo UK carousel: 1 point out of 10

Yahoo UK news carousel

Yahoo's is a classic poorly-implemented carousel. It's not clear that the 4 items at the bottom control the box - it looks more like they are links to pages. (Which they are with javascript off).

E4 carousel: 2/10

E4 carousel

The E4 carousel is another one where it's not clear to me that the 5 boxes control the page - they look more like links to other pages. (And in fact, with javascript off, this is what they do). If the controls aren't clear, carousels are pretty useless.

Some of the elements are videos that you can play directly, which is good. But personally I find the bold white out of black hard to read.

VNUnet carousel: 2/10

vnunet carousel

On the plus side, vnunet's is clear enough what the numbers are for. On the minus side, who can be bothered to click them when there's no clue what they are going to show you?

Also, it's not clear what to click to get to the story - the headline is in fact a link, but it's the same colour as 'Today on vnunet.com' which is not a link. And with javascript off, the buttons don't do anything.

ABC carousel: 3/10

ABC carousel

ABC's is another one where it's not clear what the 6 elements are. But at least it rotates quickly. The 'watch free episodes' link is confusing as it never changes. And it looks like they were caught out by widescreen - the big grey box is always half empty.

CBS carousel: 3/10

CBS carousel

CBS: great design - lousy functionality.

First, it's obscured by an advert when you load the page. The control showing there are 5 items doesn't appear until you mouseover (so I didnt know it was there, or that the pictures were going to change). And there's no way to see what the 5 elements are. On top of all this, the relationship between the carousel and the top menu items is really unclear.

ITV carousel: 5/10

ITV carousel

ITV's looks good and its fairly clear what the tabs do. However, it's not clear where to click to actually see the page (you can in fact click anywhere, but you have to work this out). And it's a shame for a TV site you can't play video from within the carousel.

And there seems to be some problem with the javascript and my browser as sometimes when I mouse over the tabs the cursor doesn't change. Some more testing needed perhaps?

Express carousel: 6/10

Express carousel

Oh my god. I'm going to say something nice about the Express for once. It's the only mainstream UK newspaper to use a carousel on its homepage. And it's not too bad.

It's clear what the tabs are for. everything that should be a link is, but there's a 'read more' call to action just in case. There are multiple content items in each tab in case the main one isn't of interest.

It's not perfect, obviosuly. It rotates automatically, which isn't clear and therefore annoying. And on the features panel, the headline was too long so the copy was all sitting on top of each other. And the font size is tiny. But these are mainly issues with the Express design - as a carousel, it works well.

Videojug: 6/10

Videojug carousel

I've always liked Videojug's. It rotates automatically but you can also manually control it if you want to go back to one. There's a little timer showing how long until it rotates the content. My only criticisms are that the font is a bit small, and Ive always found it a bit wierd for a video site that you can't play the video from the carousel itself.

Consumer Reports carousel: 6/10

Consumer Reports carousel

Normally i wouldn't give a mark this high to a carousel which made you guess what the elements are. However, it's got an obvious 'Play / pause' control - the only automatic carousel I came across that did. So I gave it some more marks.

BBC homepage: 8/10

BBC's homepage carousel

Beautifully designed, as you'd expect, and you can even play video from within the carousel.

I don't think it's 100% obvious that the tabs control the box, however. Especially as when I load the page, the 4th purple tab seems to be the default one, which isn't very intuitive.

And it's shame that the images are all static photos - some motion might have been good.

Sky News: the winner with 9/10

Sky News carousel

This one has everything. It rotates the content automatically, with a little timer showing when it will change. The images are actually videos, so it has a real energy about it. It's clear what's going on with the 5 elements - and you can also control them manually.

The only issue I has was that when I clicked the first story, there was no sign of this video on the page I was sent to, so it didn't really deliver on its promise. Functionality and design wise, however, I think this one's spot on.

Tips on implementing a good one

If you want a carousel, I reckon you should follow these rules:

• Let users see what all the elements are without clicking
• Make them flexible enough to handle different types of content (pictures, videos, multiple links etc).
• Make sure they are easy to understand how to control
• Make it obvious what to click to change the content of the carousel, and what to click to go to the next page.
• And if they rotate elements automatically, make sure it's clear what is happening and when.

Learn more about homepage carousels / sliders

Here is some more reading:

• Home Page Carousel Showcase: 40+ Carousel Designs (actual examples here).
• S3 slider jquery plugin example - one way to add one of these devices to your homepage using jquery javascript library (documentation here). There's another jquery carousel here.
• Implement a carousel yourself using the YUI Library instead of jquery. There's also a Carousel Pattern at the Yahoo design pattern library.
• Top 10 javascript slideshows, carousels and sliders for your blog or site at Cats Who Code.
• Creating your own slider, again using jquery (I went from knowing nothing about javascript to implementing this one on my mum's website offering st albans offices).
• Here's a 3d carousel using mootools, although I think this is getting away from being a usable one ...

IntenseDebate used to have an SEO problem - with javascript off, comments didn't show so weren't visible to google. At the time, I gave IntenseDebate 0/10 for SEO (and remarked it was a pretty poor non-javascript implementation). They've partly solved it - but they still have a problem counting comments.

Partial solution

The wordpress plugin version of IntenseDebate has solved the problem. Partly.

It outputs the comments in a noscript tag - so that google (and anyone else surfing with javascript off) can see them.

Although Alex pointed out that this is only a solution if you're using the plugin (and he has a wider review of these comment systems) rather than the widget.

Still a problem: comment count is wrong.

However, the comment count is not the same when javascript is off as when it is on.

Take this post, for instance. With javascript on, there are 7 posts. With javascript off, there are only 5 - The ones from Louise and Danny disappear.

New SEO score for IntenseDebate: 7.1429

As it is outputting 5/7 of the comments, I guess its score should be 7.1429 (5/7 of 10, in case you wondered).

BT is the latest company to do odd things with javascript and not notice what their results look like in google as a result.

For some reason, I get a lot of site visitors looking at my post on BT connect email settings. (They now outnumber the Ulrika Johnson readers.)

BT connect in google's results

Might this be because BT's own webpage on the subject looks like nothing-at-all in the google search results.

There at number 2 we have 'Javascript disabled [BT broadband office]'. Sounds helpful ...

BT and accessibility

I'm not quite sure why BT finds it necessary to use javascript to assemble the page, which means google sees precisely nothing (check the google cache).

Especially as it would seem to breach BT's accessibility policy, which states that:

"A website is said to be accessible if anyone can use it, no matter what their disability or what technology they are using ... We're keen to ensure that everyone can find information and interact with us online through BT.com."

Just not if you don't have javascript turned on ...

(For more, see previous posts on the Guardian, javascript and accessibility and Johnston Digital Press and javascript (who have said they are fixing the issue).