Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.


Wired Design Reviewed

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.

The page I decided to review was the page announcing the redesign.

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...


Or you could use one of the many addEvent() functions.

Image Based Navigation Links

Moving down, we have the navigation - this are linked images. All the images have alt attributes - but it still does not sit well with me. See the code..

<a id="nculture" href="/culture.html" title="Culture Story Index">
<img src="" alt="[Culture]" class="" />

[Returns added by me]

I don't know why it has ' class="" ' - but it was there when I got it.

A better method is using a list of links and using any image replacement technique to insert the image.

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...

<a href="#" onclick="setActiveStyleSheet('Small Text', 1);return false;">
<img alt="Small Text " height="18" src="" title="Small Text" width="18">

Bookmarking using name

<a class="skiplinks" name="content"> </a>

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.

Why Wired?

Why did I review a site like wired - especially when all 'big' sites fail to provide a standard code. Because I thought that if a site has articles promoting web standards, they will design their site so. Clearly, I was wrong.

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


Ajay said...

Well, big sites don't bother about web standards. Thats the sad thing about designs today.

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.