Bad site design - Retail sites

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home

Bad site design

• Web development sites
• Retail sites
• Other commercial sites
• Personal sites

Printing

• View tutorial as a single document
• Print styling information
• Printing policy

Other tutorials

• JavaScript tutorial
• CSS tutorial
• HTML tutorial
• Site design

Retail sites

A DIY shop

Previews

• Sample offline

Problems

The site has now been upgraded and has solved the problems mentioned here, and even seemed to have used my comments here as a guide for what to fix. As a result, this item is historic, maintained to make sure that you do not make the same mistakes as they had originally made:

• Loads of image links, and no alt text. Takes ages to download them all due to slow server response. Maybe just the time of day, but it would always be slow on modem connections. Note also that for no apparent reason, except to slow the connection, the words beside products, such as '[Product Name] Was £34.99, NOW £27.99 SAVE 20%' are also images. Why?
• One of their products is 'mdf'. When using the search function to search for mdf, it would say 'Please enter at least 4 characters'. Aren't they clever? I tried the full name (it's an acronym) but in the catalogue it is stored as mdf.
• Loads of JavaScript only links. No <noscript> tags, and no fallback.
• Stupid too was this:

  if (navigator.platform.indexOf('Mac') > -1) {
    //mac users
    document.write("<LINK HREF='mac.css'"+
      " REL='styleSheet' TYPE='text/css'>");
  } else {
    //windows or unix
    if (navigator.appName.indexOf('Microsoft') > -1) {
      //explorer
      document.write("<LINK HREF='win_ie.css'"+
        " REL='styleSheet' TYPE='text/css'>");
    } else {
      //netscape
      document.write("<LINK HREF='win_ns.css'"+
        " REL='styleSheet' TYPE='text/css'>");
    }
  }

  So, reading into that, if you are not using a Mac, then you are using Windows or UNIX. And if you are using Windows or UNIX and you are not using IE, then you are using Netscape. Those are some BIG assumptions there. What about Opera, Mozilla, Safari/Chrome and Konqueror? What about Amiga? What about all the others too? The Mac styles are designed only for Internet Explorer, which assumes it is the only browser on Mac. Besides which, if you try any browser, the links are almost hidden until you move the mouse over them because the CSS is not very good.

Name Withheld

Previews

• Main page

Problems

• The colour scheme is a little painful, but at least it copes with all forms of colour blindness. An unfortunate side effect is that it might cause it instead.
• The design is based heavily on older style sites; needless images (one animated) and centre-aligned text. The layout is made using tables, with styling done using inline tags such as font and b instead of appropriate elements and CSS.
• The majority of the text on the page is not text at all. It is images of text (saved as JPEG which makes it look terrible even for readers without visual impairments). This makes it unreadable for any users of screen/page readers or similar accessibility software. Only two of these images have appropriate alt text. Where alt text has been used, it appears to be used to produce tooltips in browsers that incorrectly treat alt as title. Several images do not exist at all, and are broken spacer images.
• The source code is a hideous mess of debugging output, more than doubling the size of the transmitted file to display nothing more than the contents of various server side script variables.
• Keywords, keywords, keywords, and more keywords. The page is heavily laden with mostly irrelevant keywords, perhaps targeting older style search engines. The keywords are mostly just a long list of local towns. Not satisfied with that, the keywords appear 15 separate times in the source, twice in duplicated meta keyword tags, once in the duplicated meta description tag (which is not a description), three times in a debugging comment (as page title, meta keywords and description), three times encoded in HTML entities in a bizarre location inside the body tag as if they were part of it, 4 times as image alt text (!), once in a debugging comment for an image and once as actual page content. The alt text is the worst offence since it makes the page unusable for page readers. The rest is coped with by error handling in browsers. Search engines will typically rank the page lower in their results for abusing keywords.

http://www.maplin.co.uk/

Problems

• Like many Ecommerce sites, this relied very heavily on cookies. But instead of informing the user of this, browsers that did not accept cookies would get lost in an endless loop of redirects between different pages, each of them trying to set the cookie, and never telling the user there was a problem. Ecommerce sites should never be designed to be cookie dependent like this. If you can't store cookies they should use ?sessionID=whatever.

http://www.farnell.com/

Previews

• Catalogue page

Problems

• Each of the order codes listed on the page refers to about 100 different values (or versions) of the product. I notice, with a laugh, that you cannot choose which of those values you want to order, just how many of them.

Last modified: 18 January 2012

1. Previous
2. Next