Critique of site redesign - gamesradar.com

Who wants to let rip on this one ?

http://gamesradar.com is a re-design of http://gamesradar.msn.co.uk
(old site layout still temporarily visible at http://mac.gamesradar.com)

Any comments ? I know there are still a couple of bugs in there (next
week's job), but I'm interested to hear anything before I finally sign
off on it.

Andy Dingley wrote:

Who wants to let rip on this one ?

http://gamesradar.com is a re-design of http://gamesradar.msn.co.uk
(old site layout still temporarily visible at http://mac.gamesradar.com)

Any comments ? I know there are still a couple of bugs in there (next
week's job), but I'm interested to hear anything before I finally sign
off on it.

Doesn't fit in my browser window; has horizontal scrollbar.

<quote your css>
/* Headers
- Big <h1>s are deprecated - we'll move to <h2> for the big article
title and keep <h1> as something tiny for the site title
This looks the same (almost better in fact) and is more friendly to
screen readers */
</quote>

H1's are not deprecated. Hx is not for sizing, it's for the semantic
markup of headings. If you think your default display for H1 is too
large, either change your browser, or set a font-size in the css.

HTML: 17 errors:
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.gamesradar.com/>

CSS: a few errors and hundreds of warnings:
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.gamesradar.com/>

On Fri, 23 Sep 2005 20:39:44 GMT, "Beauregard T. Shagnasty"
<a.nony.mous (AT) example (DOT) invalid> wrote:

http://gamesradar.com

Thanks for your comments.

Doesn't fit in my browser window; has horizontal scrollbar.

It's under 800px wide, so I'm not too bothered about that. Anyway -
scrolling is good, it allows you to hide the huge banner ads 8-)

One of the obvious characteristics of the design is that it's rigidly
and proudly fixed width. That's from the original designers
(bitmap-bashers par excellence) who clearly don't hold with "fluid"
design. As the site is basically a showcase for bitmap screenshots,
then they might even have a point.

quote your css
/* Headers
- Big <h1>s are deprecated - we'll move to <h2> for the big article
title and keep <h1> as something tiny for the site title
This looks the same (almost better in fact) and is more friendly to
screen readers */
/quote

H1's are not deprecated. Hx is not for sizing, it's for the semantic
markup of headings.

That's my point - There's only one majorly visible "title" on each page,
yet it's the second or third hierarchy down if you take the rigid ISO
view of HTML header nesting. So this article title is now marked up as
a <h3> or <h2> rather than the original <h1>, and the CSS makes it the
only large heading on the page.

<h1> isn't deprecated, large <h1>s in the context of this redesign are
deprecated.

HTML: 17 errors:
http://validator.w3.org/check?verbos...amesradar.com/

Oddly, Tidy doesn't see any of those (which just shows you shouldn't
trust Tidy!)

Like I said, there are still a few glitches to get to. Most of the HTML
errors are from the externally-served ads. Annoyingly these are somewhat
outside my control.

CSS: a few errors and hundreds of warnings:
http://jigsaw.w3.org/css-validator/v...amesradar.com/

Mostly those are several hundred instances of the same warning - setting
a background-color without a color. As this is to do with the
per-platform colour branding and the color itself is unchanged, then I
just don't care about that warning. It's not even a CSS warning, it's a
use of CSS warning - it's perfectly valid to do so, just risky unless
you test carefully.



Does anyone have any feedback on more general usability issues ? The
tech stuff is obvious, it's the design side I'm less sure of.

Andy Dingley wrote:

On Fri, 23 Sep 2005 20:39:44 GMT, "Beauregard T. Shagnasty"
a.nony.mous (AT) example (DOT) invalid> wrote:

http://gamesradar.com

Thanks for your comments.

Doesn't fit in my browser window; has horizontal scrollbar.

It's under 800px wide, so I'm not too bothered about that. Anyway -

No it isn't under 800px wide. The inside edge of my vertical scrollbar
is very near the S in the word GAMES in the upper right, with about a
half-inch or so to go. Both Firefox and IE6.

scrolling is good, it allows you to hide the huge banner ads 8-)

Do you mean where the microfont "Click Here for More Information" is at
the right? Also, that blue bar under those buttons extends beyond the
side of the browser window.

One of the obvious characteristics of the design is that it's rigidly
and proudly fixed width. That's from the original designers
(bitmap-bashers par excellence) who clearly don't hold with "fluid"
design. As the site is basically a showcase for bitmap screenshots,
then they might even have a point.

Why the blank white area down the right side? Why not increase the
content font sizes to something legible, and fill the width?

That's my point - There's only one majorly visible "title" on each page,
yet it's the second or third hierarchy down if you take the rigid ISO
view of HTML header nesting. So this article title is now marked up as
a <h3> or <h2> rather than the original <h1>, and the CSS makes it the
only large heading on the page.

h1> isn't deprecated, large <h1>s in the context of this redesign are
deprecated.

Deprecated has a definite meaning. If you want to say your <h1>'s are
unimportant, just say so, but don't call them deprecated.

HTML: 17 errors:
http://validator.w3.org/check?verbos...amesradar.com/

Oddly, Tidy doesn't see any of those (which just shows you shouldn't
trust Tidy!)

Like I said, there are still a few glitches to get to. Most of the HTML
errors are from the externally-served ads. Annoyingly these are somewhat
outside my control.

CSS: a few errors and hundreds of warnings:
http://jigsaw.w3.org/css-validator/v...amesradar.com/

Mostly those are several hundred instances of the same warning - setting
a background-color without a color. As this is to do with the
per-platform colour branding and the color itself is unchanged, then I
just don't care about that warning. It's not even a CSS warning, it's a
use of CSS warning - it's perfectly valid to do so, just risky unless
you test carefully.

You should still fix it. Your CSS had more warnings than I think I have
ever seen while using the CSS validator.

Does anyone have any feedback on more general usability issues ? The
tech stuff is obvious, it's the design side I'm less sure of.

Increase the font sizes.

--
-bts
-When motorcycling, never follow a pig truck

Andy Dingley wrote:

Who wants to let rip on this one ?

http://gamesradar.com is a re-design of http://gamesradar.msn.co.uk
(old site layout still temporarily visible at http://mac.gamesradar.com)

The DOCTYPE is incorrect. It should be HTML 4.01, not 4.0.

A number of HTML validation errors:
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.gamesradar.com/%3Fsubsectionid%3D1574>
A couple of CSS errors. A *lot* of warnings.
The Music/Radio/... menu does not work without Javascript.
The body text font is rather small.
<h1> is wasted. There is only an image there. In fact, you don't <Hx>
hardly at all despite all the headings in the page.

It seems a rather good layout overall.
The layout adapts well to changing font sizes. I went up 200% and saw
no layout breakage.
I presume that gap on the left is to filled with, um, something?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)