Site Moved

Wired Magazine have redesigned their magazine - and since it is one of the best technology magazines, I decided to review the code of the site. The magazine redesign gave me the idea of doing the review for the site's design. I am not an expert in graphical design - so I am not going to say much about it.

Does not validate

The page does not validate - and not just any small mistake like missing end tags - it does not even have a doctype! In all I found 126 errors.

Includes too much Files

The page calls 10 JavaScript files and 9 CSS files in the head section - with more in the body. Splitting up code to multiple files is a good method for managing code - but it would take up more requests. A better method for a high traffic site like Wired is using just one external file that includes all its javascript code and one CSS file.

Don't get me wrong - I would not advertise that method in smaller sites. Using just one file for all your code is a maintenance nightmare. If you want to do this the best choice is to use a merging tool like the merging tool by Ed Eliot.

Inline JavaScript Code

<body id="storyPage" onload="setStyle();">

A much better way of doing this is to store all the javascript in an external file and use this code...

And those images they used are not all that good. Maybe they look better in a CRT monitor - but in my LCD monitor they look really bad. But I am not a designer and I am overstepping my bounderies when I say that - so why don't you decide...

Text Resizing Function

Wired gives the user a chance to change the size of the text. This is duplicating a functionality that already exists in the browser. Any decent browser can resize the text of the content. Note: IE does not count as a 'decent browser' - but if you use em as your font size unit, resizing works in it as well.

Currently the code look like this - ignore the inline JavaScript - we already covered that...

Bookmarking using name

This is for the skip links to work - but a much better method to do this is using ID for that section...

<div id="content">...

Unsemantic Code

<h1 class="lg"><cite>Wired</cite> Redesign: Change Is Good</h1>

<cite>? What do they mean by that? <em> should be a better choice here.

There are some code to display advertisements - but as a rule, I ignore that when I review a design. That is because most of the advertisement provider's code are very bad - and it is beyond the control of the designer.

By this time I got enough of it - after this much code cruft, I don't think anything better is going to come along in this page.

I found a few good things about wired - like their 'Standards Notification' and Skip Links.

Just for your information, I reviewed a site and complained that it did not validate - but this site will fail validation as well. Blogger inserts too much stuff that fail to validate that I stopped trying a long time ago. But my sites will validate - if you have any doubt, take a look at the code of OpenJS or Bin-Co. Its not perfect, but still is much better than wired's redesign