Site Moved

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

Bin-Blog

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

window.onload=setStyle;

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="http://www.wired.com/ly/wired/shared/images/cs1/nav_culture.gif" alt="[Culture]" class="" />
</a>

[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="http://www.wired.com/ly/wired/shared/images/common/icon_text_sm.gif" title="Small Text" width="18">
</a>

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

4 Comments:

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.