User Comments

A worthy successor to Aston indeed! The overall effect on the frontpage of the blog is a dramatic improvement in readability.

The sidebar is a massive improvement, it just fits in perfectly. Great to see thoughtful use of plain english too.

My only criticisms: Viewing this page at work (15” CRT @ 1024x768x32bit) the header looks fairly obscure, I really have to squint at the screen to make out the detail of the image. The search input area is virtually invisible against the dark background. The entire header just seems a little out of shape compared to the rest of the page.

Perhaps there is just too much dead space at the top of the page for my tiny resolution, I found myself skipping over it not noticing the breadcrumb trail or search box until I read about them in the body of the article.

Other than that, a great sub-48 hours work, well done.

A worthy successor to Aston indeed!

Thank you kind sir.

The overall effect on the frontpage of the blog is a dramatic improvement in readability.

I think so too. I think it’s a much more logical configuration:

• The latest entry is the only one that really needs a full summary
• The linkblog changes daily and thus is always fresh content. It is much more visible in its new format
• Finally, the title summaries of the ten most recent entries (excluding the most recent one) is obviously intended to make recent content easily accessible to those users who haven’t visited recently and to first-time readers.

The sidebar is a massive improvement, it just fits in perfectly. Great to see thoughtful use of plain english too.

I really like the sidebar now. I think it’s eminently more usable than its predecessor. It’s also cleaner and, of course, it’s now distinct from the principle content area.

15” CRT

My God! Do they still exist? ;-)

the header looks fairly obscure [@ 1024x768x32bit on a 15” CRT], I really have to squint at the screen to make out the detail of the image

To be honest, I wouldn’t expect anything else. I can’t imagine many visitors will be using such a high resolution on such a small screen.

If anyone else has a problem with this, then please let me know and I’ll reconsider my position.

not noticing the breadcrumb trail or search box

Well I could maybe make the search box a little bolder?

Other than that, a great sub-48 hours work, well done.

Cheers James. Thanks for the critique, I really appreciate it.

Just as a test I’m now looking at the site on a 21” CRT @ 1280x1024x32bit and as expected it really is a dramatic improvement.

The breadcrumb trail now jumps out at me as it’s supposed to.

The search bar is slightly more visible, although I still feel that the outline could be just a little less subtle for those of us who tend to let large areas of graphics wash over us in our search for content.

I think its time to put the ol’ 15” CRT out to pasture.

as expected it really is a dramatic improvement

Aha! :-D

I still feel that the outline could be just a little less subtle for those of us who tend to let large areas of graphics wash over us in our search for content

How about now?

I think its time to put the ol’ 15” CRT out to pasture.

Damn right!

Hi, Just a quick note.

The tabs at the top right dont display properly in Firefox, Linux SuSe. They are about 10 px too high.

>User Tabs: IE adds spacing that breaks the tab effect:

Have you tried this…

- * html #account { font: 70% ‘trebuchet ms’, verdana, arial, helvetica, sans-serif; text-align: center; width: 200px; margin-top: 120px; float: right; } -

obviously without the ‘-‘

NOTE: This comment has been edited by its author! Additions are shown in italics, deletions with a strike-through.

The tabs at the top right dont display properly in Firefox, Linux SuSe. They are about 10 px too high.

Damn. Firefox isn’t consistent across platforms - I would never have anticipated this!

>User Tabs: IE adds spacing that breaks the tab effect:

Got it this time, try this…

- *html #horizontalNav { margin: -2px 0px 0px 0px; border-bottom: 1px solid #c0c0c0; background: #ffffff url(../../../../assets/template.graphics/header_bg.png) top repeat-x; } -

By the way you might wanna try this in Opera, as its got a couple of inconsistencies

NOTE: This comment has been edited by its author! Additions are shown in italics, deletions with a strike-through.

Smitty - you are my new best friend!

The CSS you offered in comment #8 works perfectly, thank you.

It’s funny, I never thought of raising the navigation bar, I only attempted to push the tabs downwards. Amazing that a solution comes easily when looked at from a different perspective.

As a footnote Smitty, I minimised your CSS down to:

   { margin-top: -2px; }

Now, onto the Linux and Opera bugs…

Noah, I don’t have SuSe Linux anywhere. Any chance you could email me a screen capture (jonathan [at] digital-word [dot] com)?

Thanks in advance.

Mike P. has sent me a screen capture of the website in Opera to illustrate how strange the header looks.

I have added “padding: 0;” to the “body” tag via the CSS - has that fixed it?

sorted it Opera now

Great, thanks Smitty.

Oh no, the tabs don’t work properly in IE yet!

Everything looks fine until you mouseover the tabs…

Re: Highlighting on search box.

How about now?

Looks great, really draws the attention to this useful feature.

I’ll give Firefox and Opera a try on Debian Linux when I get home later tonight.

Update: I’ve now got the tabs operating identically in Firefox 0.9.2 and IE 6 (Win XP).

The trick was to use “position: absolute;” guys!

How does the site look in the other browsers (Opera, Firefox on Linux, etc.)?

Tabs still look the same to me. Also, is the search box ment to have a black background as in the screenshot i sent you?

James: Glad the search is now satisfactory.

It would be great if you could test the website with Debian. Cheers.

Tabs still look the same to me.

With SuSe Linux Noah?

Have you tried clearing your cache to force the loading of the revised stylesheet?

Also, is the search box ment to have a black background as in the screenshot i sent you?

Yes, it’s not really black though, it is the same as the base colour of the header image. I was trying to get it to blend in.

Is there a problem with this (usability, etc.)?

Yes. I cleared my cache and with FF on SuSe Linux it still looks the same.

I think the search bar could be a little more visible - I wouldn’t be surprised if it got overlooked by many people. I think it needs to be more of a banana for your site as search is very important to new users.

If you don’t know what I meen by banana you should check out The Big Red Fez: How To Make Any Web Site Better for an explanation. Here is a quote from one of the summarys:

A web site visitor is a lot like a monkey looking for one thing: a banana. If that banana isn’t easy to see and easy to get, your visitor is gone with a quick click on the “Back” button.

In the book he states that all pages should have a banana of some sort - the one thing your eyes are automaticaly drawn towards. Try going to Amazon and seeing if you can spot the banana. It’s right there in the big yellow box - the one thing most users initialy want to do.

Just a thought! :)

All good in Opera now, good touch on the search box, more visible this way.

Nice work Jonathan!

I cleared my cache and with FF on SuSe Linux it still looks the same.

I don’t know what to do about this. Tackling IE bugs is easy since I can add IE-specific code to the style sheet. This one is quite worrying though - Firefox should render exactly the same across platforms.

One option I have is to use a sniffer and serve a Firefox/Linux-custom style sheet - but that is really kludgey.

I’m going to wait for James’ report on Firefox/Debian before I try to fix this.

it needs to be more of a banana for your site

A banana for a website, that’s a new one to me.

No offence Noah, but I think I’m going to leave the search field alone (for now).

If this were an e-commerce website, or one with a vast amount of disparate content then I would make search the centrepiece of the design - but it isn’t.

On the whole, people visit this site for one of two sections: Project Iceberg (thanks to hundreds of inbound links) and this Weblog. The other areas get very little activity.

The Iceberg visitors can’t go wrong because they follow long-established links in.

The weblog is easy to navigate (I believe) and, because it’s linear by nature, it’s virtually impossible to get lost in there.

Don’t get me wrong - search is useful and necessary, but I think it has all the prominence it needs on this website (top of the screen, dead-centre).

I do welcome and appreciate your ideas though Noah, please keep them coming.

All good in Opera now, good touch on the search box, more visible this way.

Great. As far as I can tell, the only remaining problem is Firefox on *nix, as highlighted by Noah.

One word J: great work!!!!!!

Well that’s two words my friend but, because it’s a compliment, I’ll forgive you. :-)

Tested last night in Debian (Unstable) with FF 0.8: Everything renders perfectly.

Noah’s problem is perhaps peculiar to Suse only. It would be interesting to see what other *nix distro users find.

James, thanks for performing that test. It’s good to know that the site is okay with some Firefox on *nix platforms.

Any comments Noah?

you may wanna check this page in the validator, as its got a couple of errors

Good catch Smitty. I’m going to have to get the debugger out again!

Thanks for letting me know.

I’ve noticed two significant things since this redesign:

• Usage of the search-engine has increased considerably
• The number of daily page views has more than doubled, as has the number of unique visitors

Obviously I am very pleased with this. But that’s not the reason for writing this - I’m more interested in why these changes have occurred:

• The search-engine input field was moved to the top of the page and a “submit” button was added - I believe that both of these factors are responsible for the increase in usage. The search-engine is simply more visible than it was before. Of course, it is possible that the increased usage of the search-engine is simply because visitors can’t find things on the website any more. However, I think this is unlikely as I made no changes to the navigation or architecture of the website during the redesign.
• As for the increase in page views and unique visitors, I can see only one change that could have had such a dramatic impact in this area - the addition of the orange “XML” button! As the increases are consistent, I suspect that the Urban Mainframe may have acquired a block of new subscribers and been added to a few more blogrolls.

If I’m right in these conclusions, then my experience here is a testament to the importance of UI design. If the UI is right then more people will use it.