How NOT to code

Let’s look at a site that I pointed to in an earlier post.  This is an example of what I think of as a badly coded site.  There isn’t any inappropriate content for humans, just for computers.  There’s nothing in there that’s malicious, but there are plenty of mistakes with the code behind the site.

Go to www.topmuseum.org  and wait a few moments (the front page is extremely long), and I’ll tell you just what’s wrong with it and how you can avoid the mistakes.

If you click on the about us link on the sidebar, you get to a page with this URL:http://www.topmuseum.org/1.html  How will you ever remember that that page is the about-us page?

Rule 1 of website design: Name your files with a name that actually means something.

Now, look at the little image on the right.  It’s 115 by 215 pixels on this page, but when you go to the actual image file, it’s a huge image, 500 by 700 pixels!  Plus, the filename is mi1_165_14_1.jpg.  How would a search engine know what that image was about?  There’s no alt text and the filename isn’t helpful, not to mention the fact that there are no context clues.

Rule 2 of website design: Images are best when served small.  (Make your images small so they don’t have some huge file size)

Ok, now we’re going into the source code.  Right click on the page and select View Page Source (or similar).

Make sure word wrap is off, then look at lines 1-52 and 54-68.  All you can see is a bunch of JavaScript and the header of the page.  Now look at line 53.  There are 14518 characters on that one line alone.  That’s where the entire document that you see is.  Now, if you tried to change some part of this page, you would have to scroll horizontally until you got to what you wanted to edit.  You could be looking for what you wanted to edit for longer than it takes to edit it!

Rule 3 of website design: If you don’t put all your eggs in one basket, you shouldn’t put all your code into one line.

Now look closely at the sidebar.  That’s not text, it’s an image.  In fact, each one of those links on the sidebar are two separate images (one for mouseover and one for default).  That means 56 images are loaded per page that don’t need to be.  When you think about getting 56 extra requests per visitor to the site, that’s a lot for your server to handle.

Rule 4 of website design: An HTTP request saved is some bandwidth earned.

Speaking of http requests…  There are 102 http requests on this page alone.  That number should be much lower.

Anyway, moving on…

Her email address is displayed in a very easy-to-find area.  This means that spam bots can quickly take it and spam it however they like.  And since the email address is already in a JavaScript, changing said JavaScript will be easy.  http://javascript.about.com/library/blemail1.htm has a quick email address encryption tool.

Rule 5 of website design: If you post your email address, spammers will spam you out of existence.

Have you ever heard of css-cascading style sheets?  The most important way to format a page (and make it look visually pleasing) is just that.  The only visually pleasing parts of this site to me are few to none.

One of my pet peeves with webpages is the fact that people have blue links on their sites that turn purple when you click on them and to try to fix this problem, they use a FONT tag.

  • You should never capitalize html
  • There’s a much easier way
  • The font tag is no longer supported

Plus, I see people lining up four to five separate font tags right inside of each other.  That sort of destroys the point of font tags.

Rule 6 of website design: Links are best served without font tags, but also without the default colors.

Please, if you’re making a website, use these tips.  They really help your site to look good.

Stay tuned for the next segment of How NOT to code.

[tags]How2code, How NOT to code, Programming, websites[/tags]

6 thoughts on “How NOT to code


  1. Good advice & well-taken. My favorite is the one about meaningful file names. There are some well-named sites in a book I’m reading (references for more information), but other sites have such bizarre names I think a computer (no offense) made them up!

  2. Pingback: How NOT to code 2 « The Daily Llama

Comments are closed.