Tips on building your own website

I've been asked this before, so thought it was time to write some of these down. These are things I've run across in either developing my own sites or viewing others. These are all my OPINION, however, I've tried to pare it down to things I've noticed that good sites have/do and bad sites don't.


1. Allow all your visitors to enjoy your site.

I've seen so many sites that either don't work on my monitor or tell the visitor that they HAVE to download IE or Firefox or some midi program to see it properly. I don't want to be told to download and install something to see a site, that makes me simply close my window and never check it out again. As will most people I know. While it's impossible to make a website look exactly the same in every browser being used, it is possible to make it functional and look fairly decent everywhere.

1a. Check your sizes! 1280x740 resolution does NOT mean 1280x740 in your browser window. A typical internet browser has the menu bar and various other bars on top, status bar on bottom, and scrollbar space on the side. Some people have more menu/taskbars on top of their browser, so you have to adjust for that. Width is more important than height, as most people have no problem scrolling up and down, but don't like to scroll side-to-side. Typical width for an 800x600 resolution monitor is 780 pixels wide, and for a 1280x740 resolution is about 1000 pixels wide.

1b. CSS is your friend, but can be overused. Now, I am a firm supporter of using tables instead of CSS to layout the page, simply because it's easier to do. I'm not saying you have to do that, but don't just use CSS because everyone else is. For some layouts, it may be easier to do it with tables, and it would be more likely to be cross-browser compatible. Which brings us to the next tip:

1c. Cross-browser compatibility is key! If you don't want half of your viewers to just navigate away from your page, you need it to be visible and usable in BOTH Firefox and IE. That will pretty much also cover other browsers. Not everyone will be viewing your page with the same setup you are, and if someone can't make out parts of your site or if you tell them they won't be able to see it unless they download some software, they'll leave. Most people don't like to be told they HAVE to download something extra to check out your site. (Incidentally, that's another reason I prefer tables for layout over CSS: it's much simpler to make work across all browsers.)

1d. Check your loading times. Some people still use dial-up modems. If your site takes longer than about 5 seconds to load, chances are people will just leave. Both Photoshop and Paint Shop Pro have functions that allow you to compress your images, and tell you how long it will take to load on a dial-up modem. This is very helpful, and will help you keep your images to a small enough loading time to make it easier for people to see.


2. Multimedia should be used sparingly.

Yes, Flash is pretty. Yes, it can be useful. Yes, that may be a good song. But having some large Flash file that's just eye candy, or using a ton of random animations or loud music just overload the senses and become very annoying very quickly.

2a. Don't use auto-loading songs. I personally will simply navigate away from a site that has an auto-loading song, as will most people that I know. If you MUST have a song on there, don't set it to play automatically! Include a small control window for it so that someone can CHOOSE to play it or not. Nothing is more annoying in viewing a website than having some loud midi suddenly come on and mess up what you're already listening to.

2b. Don't overload on JavaScript. Yes, JavaScript can be fun and can do all kinds of neat things. But it also breaks easy and can increase your page's loading time. Only include JavaScript if it is USEFUL, such as preloading images, and avoid the flashy eye-candy scripts.

2c. Flash is not the answer to everything. I have seen some very pretty Flash sites, designed by people that are able to make it load quickly and easily. But I have also seen many that take a very long time to load, are full of bad animation and very loud sounds, and in general just make me cringe. If you're going to take the time to build a Flash site (or a Flash element like a navigation bar), please take the time to do it right! There are tons of great sites like FlashKit that provide free tutorials and resources, and just looking through their stuff, you can get an idea for what's a good Flash movie and what's a bad one.


3. Take the time to organize your site.

Does your site navigate easy? Can someone who's never used the internet find what they want quickly? Helping your visitors find what they want will go a long way towards them coming back again.

3a. Minimize clicking. The more a visitor has to click to find what they want, the less likely they are to stay around and finish the trail. Put as few clicks between your main page and your information as possible. A main landing page and one more click for a subpage are usually all that's needed.

3b. Always provide a home page link on every page. On the off-chance that a visitor gets lost, you want them to find their way home quickly so they can start looking again, instead of getting frustrated and leaving.

3c. When using an image navigation system (such as an image map), use the NAMES of the landing pages, not random images or numbers. Visitors like to know where each link will take them before they click on it. Same goes for a text navigation system, by the way. Choose names that are descriptive of what is on the page (like 'The Library' for stories and so on).


4. Good design is almost as important as good content.

You could have the best story in the world, or the best art anywhere, but if your visitors can't see anything, can't find anything, or can't even look at your site, it's basically useless.

4a. Good color combinations are essential! It's hard to read light text on a light background, or dark text on a dark background. Most of us agree with that statement. But not all color combinations work either. For example, red text on a blue background. If in doubt, run it by several friends. Remember, not everyone's monitor will display colors the same as yours, so there's nothing wrong with getting advice from other people. There are lots of tools available online for free to help you plan out color combinations, starting with my personal favorite, Kuler from Adobe.

4b. Never use photo backgrounds under text. I say under text, because there's plenty of ways to use photos in your page design, but under text is not the place for it. Because the colors of the photo will vary, as well as lightness and darkness, there's no easy way to adjust the colors of the text. And even if you did, the constant shift between colors and light and dark will make it extremely hard to read!

4c. Watch your links. I don't hold with always using blue color for text, because that can lead to some odd color combinations. However, it's a good idea to still underline text links, as people automatically look for that.

4d. Don't launch internal links in new windows. If you have tons of windows opening up from your site to other pages in your site, it's very frustrating for your visitor to keep navigating along. Plus, having multiple windows open eats up computer resources, and for people with slower computers, this is a Very Bad Thing. Having EXTERNAL links open in new windows, however, is fine as long as you warn people that it will happen.


5. Refine your site.

Keeping your site current and as error-free as possible is the best way to keep people coming back.

5a. SPELLCHECK. Spellcheck, spellcheck, spellcheck! Leaving obvious spelling errors up, bad grammar, and leet-speak just tell your visitors that you don't take your website seriously and that you are, perhaps, a very young kid that's just fooling around. If you want your site and your content taken seriously, take the time to proofread it. Or, copy the text into an editor like Word, which will spellcheck it for you.

5b. Leave some kind of 'Last Updated' message on the main page. You don't have to write a long blog-type entry on what you did, but just a little message saying when the site was last updated is helpful, because it lets your visitors know you haven't abandoned the site.

5c. Check your external links from time to time. It's pretty easy to keep your links intact, as you know when it's changed, but sometimes sites go down and you won't know it, and having dead links wastes your reader's time.

5d. Provide some way for people to contact you. NEVER put your email address in plain text on the website! Ever. Never, ever. Well, unless you LIKE spam. It's no longer a question of IF a spambot will farm it, but WHEN. (this also applies for when you sign guestbooks and so on). The easiest way around this is to provide a contact form that people can use to email you without opening their email program. Providing an image of your email or using something like {at} in place of @ can work, but they're also very annoying and require your visitors to do more work. Lets face it, people are lazy, and if someone has to do extra work to email you, chances are they won't. There are some very good PHP scripts for making contact forms, as well as various free providers out there that will make the form for you. 

Graphics by Dubird, JadeSlash Graphics and dubird.net © Dubird 1997-2011. All Rights Reserved.
Downloading and using graphics or resources from this site means you have read and agreed to our terms of service.