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:
Well, big sites don't bother about web standards. Thats the sad thing about designs today.
Post a Comment