A half-built grid is a dead grid / Daniel Eden

I recently remembered a relatively new redesign of my University’s website. Memories of a well structured grid were conjured in my mind, and I got all dizzy thinking that I’d been looking at this site without noticing it’s excellent design. To my dismay, when I checked the site, it featured nothing but the carcass of a half-built grid.

Throughout a few elements on the home page, there appeared to be some sort of order and consistency — but it was just that. A faint echo between the odd element, and nothing more. The widths of elements were pulled out of thin air until they summed up to something close to the full width of the container.

Worse still, upon closer inspection I discovered some disturbing source code. The ‘header’ (as it appears on the site) is actually written after the content in the markup. Whether this is justified by an argument in accessibility is hard to believe. I can certainly see the logic of it, but it just doesn’t make sense.

The main navigation uses a single <ul> for each item. That’s right. Not an <li>, a <ul>. The links themselves were anchors, nested in list items, listed in an unordered list, for each item. Class names are non-semantic. Things like ‘leftColumn’ and ‘whiteLink’ are everywhere. In short, it’s a little bit of a mess.

Now I understand that a website as large as this, with as much content as it has, (and most likely a CMS that’s generating a lot of the code) it’s going to be hard to keep everything trim. But someone designed this thing, and didn’t do a great job. It’s a shame. What I think it a bigger shame is that the redesign wasn’t documented. I’d love nothing more than to listen to the design decisions made behind the scenes, what was going on in the designer’s head throughout the process — but until that happens, I can only assume that the designer was at as much of a loss as I am now.

When I redesign a website, I think long and hard about everything that goes into it. I can spend hours working out pixel-precise measurements to acheive exactly what I want. I could justify the most minute of design decisions on sites such as my own and Brills, and if I couldn’t I’d be outright about it. I expect the same from other web designers. No decision should be made without justification.

I’m not here to make an attempt at redesigning it myself. It would take a long time, and I’ve more important things to do. I also realise that the topic has taken something of a tangent from it’s title — but the core argument remains the same. The grid on ntu.ac.uk is broken for no reason. It was poorly executed, and that’s a great shame.

http://twitter.com/colourgarden Tom

Addressing just the point about the order of the markup; putting the header beneath the main content is actually a useful technique for both accessibility and SEO.

When using a screen-reader, having to listen through all the navigation items is a pain so being served the main content from the off is much more preferable. The best solution I’ve come across is to have a hidden div at the very top of the source which is shown on :focus which has anchors down to the main elements of the page (content, nav, contact etc). This way, screen-reader users have a short and succinct navigation should they wish to use it and tabbing users get the same menu (tabindex could/should also be used). Regular mouse users see nothing different.

The SEO advantages of the ‘header last’ technique are more obvious. The content is read by the search spider sooner and so is given greater weighting as it is nearer the top of the page. This philosophy is also followed on the NTU site where the left-hand subnav column (on subpages) is put after the main content in the markup but positioned left using CSS.

Tom
- http://daneden.me Dan Eden
  
  Hi Tom, thanks for the comment.
  
  I gathered that was the point with the markup, it just seemed like a lot of effort for something that could quite easily be achieved with a “Skip to content” link in the markup.
  
  As for the SEO benefits, I guess that’s more a case of personal taste: the search engines will have no real trouble finding the content whether the head is at the top or the bottom of the content.
http://www.kingwebsites.co.uk/ John King

That’s a funny story.

When people ask me why I chose to work in the web development field it was due to websites like this. I saw so many badly coded websites (this was 2002 to 2004) that I thought I could do much better myself. And therefore I could earn a living possibly from doing so.

Over the years web standards have become much more common place and yet I still come across too many nasty sites. You want to phone them up and tell them they’ve been swindled.
- http://daneden.me Dan Eden
  
  It is disappointing to see, particularly if you have a connection with the establishment. I think once I’ve graduated I’ll ask them if they’d look at a redesign from myself. I love the University, and I’d quite like to give it a try and see how badly criticised I get myself!
Nadine Clark

Hi Dan

Interesting to read your thoughts regarding the redesigned homepage we launched back in Easter. And I’m glad you’ve picked up on some of the challenges that face large organisations such as NTU.

We’d be more than happy for you to come over and spend a little time with us and happy to talk through the processes that support a large project such as an entire web estate redesign. Knowledge sharing and feedback is always important to us!

Nadine Clark
Digital Marketing Manager — Nottingham Trent University
- http://daneden.me Dan Eden
  
  Hi Nadine, thanks for replying and thanks for the offer! I’ll be in touch at some point, I’d love to talk through it all.
  
  I meant no offense, of course — I understand the struggles that NTU will have faced during the redesign and it’d be great to learn more about the process.