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: 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).
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…
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]