Bad site design

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

Table of contents

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

Web development sites

http://www.bullnet.co.uk/

Previews

• Main site
• Shopping section

Problems

• In the index page, all the main links are done as image maps even though they are text. No alternatives. This already makes the page inaccessible, but if you cannot use image maps, you cannot use the page.
• The shopping section is very poorly laid out, and cluttered, making it hard to read.
• In the shopping section, there are far too many links, without any proper sections. They are attempting to set themselves up as an e-commerce solutions business. Do they really think that sites that look like this will entice customers. Would you want them to design your site? One of the links on the page is called 'Worms, wormeries and wormerys from bull electrical'. See how long it takes you to find it without using your browser's search function (if it has one, that is).

Name Withheld

Previews

• Administration section

Problems

• There is no alt text behind any images. This is very annoying if you text browse. Every link on the page is an image. There is no way of knowing what you are doing. Fortunately, I had the job of testing that site and so it no longer suffers from that problem as I recommended it be changed to use alt text.
• If you have images switched off, you can hardly see the links down the left hand side. They all but disappear into the background with default link colours.

http://www.frozen.com/

Previews

• Main site

Problems

• I might be wrong, but I think they are a web development company. You prove me wrong.

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.

Other commercial sites

http://www.it.co.uk/

Previews

• Only page

Problems

• The kitchen towel background leaves a lot to be desired.
• Because all browsers have different default CSS settings, and because the site was designed assuming that all browsers are exactly the same, the only link on the page is obscured by one of the animated bits of text in Mozilla, Netscape 6 and other Gecko based browsers.
• Huge script - totally unnecessary, I have done something similar in less than a quarter of the size. It has obviously been generated - by Macromedia Dreamweaver I believe.
• The script only works in Netscape and IE, mine works in far more than that, and it really is not hard to do.
• The design is based on an 800 x 600 screen resolution, which we all have don't we? The words that slide in are supposed to be hidden when you start.
• <FONT face="Comic Sans MS"> Very good. Only one font specified. And a Microsoft font. Not everyone has this font installed, or can install it. If you do not have it, tough.
• <A href="mailto:info@it.co.uk">. This is the only link on the page. People should not have to email to get information. That is what a Web site is for.
• "We know the Internet's killer application -its Television". Oh yes, you're killing me.

Somebody, please tell me what the site is for. It only has one link on the page, and that is a mailto link.

http://www.clearwellcaves.com/

Previews

• Information page

Problems

• The entire page is a series of image maps except the telephone number at the bottom. There is no alternative.
• Almost everything on the page is text. Why do they feel the need to use an image. If saved as text instead of an image of text, the page would load far faster. They might be doing it for some form of copyright but it's not going to work is it. All it does is make the page slow and inaccessible.
• The links at the bottom don't work because they are image maps and the coordinates of the links have all been set to 0,0,0,0.

http://www.wb.com/

Previews

• Main page

Problems

• The page nedlessly relies on Flash. They do not seem to realise that professionals can have good Web sites without being dependent on Flash. Instead, you are faced with a stupid page telling you to download Macromedia Flash™ Player, - or you shall go no further.
• What about Opera, Mozilla, Safari/Chrome, Konqueror, and the rest? They all can use Flash.

http://www.therapyquestionmark.co.uk/

Previews

• Splash page

Problems

• The site itself does not need Flash, but the splash screen will not allow you to continue without it. Try getting past it without Flash. I have a copy of the Flash movie if you want to see it. It is disabled if you try the preview link, so you get an idea of what it looks like to non Flash users. It is not quite right. You should see a broken image but this is close enough. There is no workaround that I could see.

http://www.macromedia.com/

Problems

• I tried visiting this site using IE. At the time I did not have Macromedia's Flash Player installed. In fact I was going there to download it. The site detected that I was using IE without Flash so it decided to give me a VBScript version. My install does not support VBScript so I got a white screen with a broken image on it. Very pretty. Almost everyone supports JavaScript and only some versions of IE support VBScript, so why not just use JavaScript? Besides which, you should always have a defualt page design that does not use script.

http://www.bonustrax.com/bonjovi/

Previews

• Offer page

Problems

• Minimum requirements Internet Explorer on a PC. That annoys me. What about Macs? What about linux? What about Opera, Mozilla, Safari/Chrome, Konqueror? Oh, but don't worry, you can return to download it once you have "upgraded" to a PC with Internet Explorer.
• Oh, I see. That's why. It's only in Media Player format. So, almost every OS and browser can support Flash (or other players), but they use Media Player. Even so, the Mac platform supports Media Player, but Mac users are not permitted. Other browsers on Windows can also use the Media player plugin too, but they are forbidden.

http://www.ecma-international.org/

Previews

• Real site

Problems

• You need a PDF viewer to use anything on the site - there is no alternative.
• The only means of navigation on their older site was their on board search engine, not using links. It made their site very uncomfortable to use.

Personal sites

http://members.fortunecity.co.uk/tonybond1/cave/homepage.htm

Previews

• Main page

Problems

Note, I have removed all the cookie stuff from this mirror, as well as the right click catch, and all the JavaScript that pops up ad windows and ad pictures on the page.

• Far too many gimmicks, mostly totally irrelevant. Marquees, Java, JavaScript, Animated Gifs. Ok, have some but this is far too many. It is obvious that this person has just found gimmicks on other peoples' sites and decided to copy them onto their own. The problem is their page is just not big enough so it has just become overcrowded.
• Underlines everywhere - which ones are links? None. The pictures that are hiding at the bottom are.
• Colours, colours and more colours - a colour scheme is ok but this is so over the top.
• Slow Microsoft fade-ins between each page. No chance of fast browsing here.
• The background image is so small, it looks wrong, even on an 800 x 600 display.
• Quick links at the top only work with JavaScript, and only in IE and Netscape. Ok, I'll let them off because if you try hard, you can find your way around using the other links. (Note, these links are not on my mirror of the site).
• Because it is hosted by FortuneCity, you have to have cookies enabled to view it. If you don't, all images are replaced by FortuneCity logos. Not only is this an invasion of privacy, but some people cannot accept cookies. Sort your act out FortuneCity, please! What makes this worse is that they don't even tell you why it failed. You have to search the hosting site to find out.

http://www.dhtmlshock.com/

Previews

• Forum page

Problems

• This site looks fine in most current browsers, but there is something very wrong with their CSS in older browsers. Try a browser like Opera 5 or 6; the background turns black and so do the links on top of it. They use JavaScript to set the CSS and they use browser specific JavaScript. As is always the case, you should make the default look good (or at least visible), not just the look that is created using script.

http://www.grimsoc.homestead.com/home.html

Previews

• Main page

Problems

• Yellow text, white background and a dark background image. You can't see the text without images.
• Useless and needless browser specific script (removed) giving only Netscape and IE. You cannot view the page in anything else!
• If you view the page without JavaScript, you cannot see the page (removed by me).
• If you do not use frames, javascript will reload the page into the frameset. Basically, those last two points together mean that you cannot view the page without both frames and JavaScript.
• They have removed it now since I complained, but they had a search facility as their means of site navigation. It was held in an iframe with no alternative. So if your browser could not view iframes, you couldn't do anything.
• Last but not least, I tried a gimmick they had on the site. It's like that magic 8 ball thing. You ask it a question, shake the cube around with your mouse (Java), let it roll over and it gives you an answer. The answer was so perfect I had to include a snapshot.

  

http://www.giveitup.com/

Previews

• Only page

Problems

• I fail to see why people do this. Register a site, and put - well - this there.

Last modified: 18 January 2012