Dabs.com, an online electronic retailer, has converted to a CSS-based design and XHTML. This is a cool step forward, and hopefully they can disclose what real world commercial benefits they come across. The design is a fluid, full-width affair, with nice icons, a good choice of colours and round-edge boxes. However, it's far from perfect, with a lot of room for improvement, but it's a great start.
The navigation features the tried & test methadology of tabs. Each main section of goods has it's own colour scheme in the "browser category" sub navigation. Unfortunately, this colour scheme potential isn't reflected within these sections in any obvious way, if at all. The design/markup separation seems good -- only content images remain with stylesheets turned off. Lists are used for the main navigations, however this thinking wasn't applied everywhere correctly. The footer links (delivery charges, business terms etc) aren't marked up as a list, which they obviously should be, this is same for the breadcrumb trail.
The bottom of the site features the two W3c validation buttons. I don't think these really belong on any site, especially something commerical like this. They're pretty bulky, unsightly and don't look professional in the slightest. Clicking on the XHTML 1.0 button validates the pages markup. The homepage features three errors which really isn't too bad when talking about heavily dynamic and complex data. Two of these can be fixed by simply escaping the ampersand. And the third is just amusing -- there is no attribute 'aternatetext' -- who let the intern loose?
A while ago Ebuyer.com changed to a CSS-based design. Again it's fluid and full-width, rounded corners, tab navigation and nice colours. However, they've used the section navigation colours within each section. The horizontal bar across the main navigation (as well as the selected tab) is colour coded correctly. For some reason they also neglect to markup the breadcrumb trail as a list. Another niggle with the markup on this site tables! No, not misuse, proper use, just not fully executed. Mainly it's missing Both sites fail to use labels on their forms. I'm not sure why both sites, which have made a great efforts to become standards-compliant, seem to miss some fairly simple, and easily corrected issues. Hopefully, these could be ironed out quickly and are just temporary issues. Noticeable conventions: The logo is linked back to the homepage. Tabbed main navigation. The main navigation is followed by a thick, coloured, divder. Sub-navigation is on the left of the page in a vertical list. Round-edge boxes for some (not all) containers. A search box is presented underneath the navigation in the center of the screen. All of the conventions, noted in the paragraph above, are also true for Amazon.co.uk (although not CSS-driven), and the majority are also true for Play.com, another large online only retailer. That's some pretty strong convention! My tip: if you're building an online shop, use the ideas in the paragraph "noticeable conventions"., and to markup the table headers, but it could use scope and header attributes for more accessible tables. Ebuyer is slightly worse for wear, when it comes down to validation. A total of 352 errors on XHTML transitional, but again, most can be fixed by escaping the ampersand in the URLS.