I took a look at eBay’s new page design, which they are currently previewing. Verdict: needs lots more work.First impression – everything is bigger, clearer, more consistent, much less scrappy than the old layout. This is probably a good thing for these days of enormous hi-res monitors and iPhones, but bits of it are really a bit too big, and while the white space is pretty, it’s a space-expensive choice given the fairly large amount of info they need to show.
The old layout is variable width, expanding to fill your window. The new one restricts the width to something smaller than my typical window size. The net result is that most auctions now require me to scroll down and right to see all of the content, even though it would all be visible if it expanded to fill the available width. This decision will also break a large proportion of templates used by eBay auction tools (like GarageSale, TurboLister), including eBay’s own cheesy selection. They have gone to the effort of making the layout scale horizontally, but in an inconsistent way. Parts of the layout (top banner, search bar) have a minimum width of 760px (a common choice). The main listing part has a minimum width of 853 pixels, but only expands to a maximum width of 940px. It’s hardly worth the effort of allowing it to scale at all if they are going to limit the variation to such a small range.
The drawbacks become clear when you switch between new and old layouts. In the old layout I can see the full width and usually the top part of the item description. Switch to the new layout, scroll bars appear and I see no description at all, needing to scroll down and maybe right to get to it. This breaks the vital “Above the fold” measure that marketers are so enamoured of, and will only be worse for those using smaller screens than my 24″ LCD.
While I was looking I also checked out how clean the code is. No good news here. It clocks up 246 HTML errors just in tidy.
- lots of misnested tags
- divs inside spans
- unescaped </ sequences in javascript
- </img> tags (no such thing – this is HTML 4 transitional)
- <a> tags nested inside others (where do they want them to go?).
- Missing and duplicate id attributes
This kind of shoddy coding might be acceptable if this was some novice intern project, but this is a page that’s going to get more hits than just about anything short of google’s home page. Oh well, I just hope they’re not dumb enough to complain that it doesn’t render consistently across browsers when it’s so full of rubbish. Tidy’s verdict was “Document content looks like HTML proprietary” – so that’s what they’re calling it now…
Clearly it’s not final from a delivery point of view either – it scores an F (59) in YSlow versus an A (97) for the old version, so tweaks are needed here too.
In short I’d say, shrink the top info section a little, make horizontal scaling limits consistent, allow the whole layout to stretch horizontally, fix the validation errors and keep the general styling changes.