Begin at the Beginning

Things you'll need to know before you design your website

Clea Saal <cleasaal@booksandtales.com>

A fair warning, this is not a tutorial, it doesn't tell you how to write a single line of html code. There are plenty of those available on the web, and most of them do a far better job than what I could ever hope to do. My intention here is just to provide you with a few basic rules, some "do"s and "don't"s of design, if you will, that are too often neglected by most tutorials simply because they fall outside the realm of html theory.
Plan before you type

When you go on a road trip, you are likely to look at a map before you leave your home, you usually know where you are going and you have an idea of how to get there. Even though you are not necessarily aware of every contingency you may encounter along the way, you are aware that the possibility of running into a detour is not out of the realm of possibility.

Designing a website is not all that different, except for the fact that you get to draw the map.

Before you set out to build your website, you should have at least an idea of what you are going to include, where is it going to fit in and how will the different pages relate to each other. No matter how eclectic, you must always think of your site as a whole, and design it accordingly.

KISS your website

In other words: Keep It Simple... I'll just let you fill that second S on your own.

Make your site easy to navigate and intuitive. You want your visitors to find what they are looking for as fast as they can, you don't want to see them chasing their tails, so try to make sure everything is accessible. The Two Click Rule means that you should try to make every page accessible within two clicks. This may be a little extreme, and not a realistic expectation, but it's a good guiding principle.

On the other hand, sometimes you may want to hide treats for your guests that are a little harder to find. These may encourage people to explore further and see everything your site has to offer, but even then, don't go too deep .

Keep special effects to a minimum... yes, java, flash and a bunch of other things can add some really impressive effects to your design, but unless they add something to your content, maybe you should avoid them. Remember, each one of those little extras you put in, is one more thing that can go wrong (or even crash someone's computer).

Graphics are nice, but they may take a long time to load. Most people appreciate speed more than looks. This obviously does not mean you should avoid all graphics, it just means that you should probably think twice before placing that beautiful 300 k. .jpg on the home page of your website, unless it is really relevant to your content (and, for your home page, even then you should consider the possibility of using a thumbnail instead).

Configurations & speed

When you design your site keep in mind that there are all kinds of computers and configurations out there. Don't assume everyone has the same set up you do. Here you have a few pointers:

- Set your monitor to different resolutions. Is your design functional in all of them? For the time being 800x600 is still a must, and maybe you should also consider providing at least an option for 640x480, even if these screens are no longer numerous enough to warrant the total redesigning of your website.

- If you are going to use a background that has a left "border", just make sure your background is wider than the greatest possible resolution, and make sure that you replace it when a greater resolution becomes available.... otherwise someone might find a second "border" running right down the middle of the screen. And while we are on the subject of border backgrounds, please make sure that no matter what happens, the text won't invade the border, since that makes reading almost impossible.

A tip here: you can keep the text from invading the border by setting your "regular" design in an invisible table, with two columns. Place your content in the right column (you can organize it in any way that pleases you), and then just put a blank transparent .gif that is as wide as your border in your left column.

- Try downloading a few different browsers. Make sure your site is at least functional in all of them. Even if one browser currently controls more than 80% of the market, the others are still out there.

- This is worth mentioning again: graphics are great, but they take a loooooong time to load. Try to find some balance between a that absolutely stunning design you've always dreamed of and one that loads within a reasonable amount of time, otherwise you may end up losing half your visitors before they even get to see your site.

- Not all browsers support java, flash or any of those other gimmicks... if it requires a plug-in, some browsers may be unable to handle it.

Free or commercial host?

Just remember the old saying: you get what you pay for. In other words, the answer to this particular question depends largely on what kind of site you want to build. If your site has any professional connotations at all, you should avoid free hosts and maybe you should also consider getting your own domain.

Commercial hosting is reasonably affordable, and it gives you total control over your site's design (though you may want to consider some external free extras, like a message board or a chat room to make your site more appealing). It also gives you some warranty of the fact that your host won't disappear tomorrow without a warning.

If you are building a website dedicated to your favorite author, rock star, TV show or pet, then a free host works just fine.

Templates & Tutorials

So how do you go about learning how to build your website? You could buy a book, or you could let the web be your teacher. There are plenty of free html tutorials on line, find one you like and work your way through it.. If you are interested, one of my favorites can be found here:

W3Schools Online Web Tutorials

A word of caution though, this tutorial is my favorite because of the amount of information it contains. It is massive and comprehensive and it reaches a very high level, but it may not the easiest one to work through for a beginner.

You should also try to see how some professional sites are put together. This may give you a better idea of just how does html code look like in the real world. For this maybe you should consider the use of a Page Ripper (or "off line browser" this is a program that allows you to download a complete site for off line viewing).

However, if the idea of designing a site from scratch seems too daunting, you can always get a free template or layout. This will take care of some of your design concerns for you, and it will enable you to get a general idea of just how your site will look like before you even begin your work.

WYSIWYG editors

For those of you who don't know this, WYSIWYG stands for What You See Is What You Get. A WYSIWYG editor is a program that functions almost as a complicated word processor, but that produces webpages instead. Keep in mind the fact that html files are really just text files that include html code, all a WYSIWYG editor does is add the special characters and tags behind the scenes, instead of having you type each and every single one of them.

Now, if you listen to what most professional designers have to say on the subject, you would believe that using a WYSIWYG editor to design your website is some sort of mortal sin that will undoubtedly condemn you to eternal damnation. Simply put: this isn't so.

While it is true that the code produced by WYSIWYG editors is not too elegant, it is functional , it produces acceptable results with a minimal effort and, unless you go snooping into the source code itself, you probably won't be able to tell the difference... not to mention the fact that using a WYSIWYG editor eliminates the risk of typos.

There are, however, some serious drawbacks to their use. If, for instance, you want to add some code to include a counter, you should not attempt to do this using a WYSIWYG editor, since you run the risk that your editor will modify that code somehow, rendering it useless.

So how do you strike some sort of balance between the advantages and the disadvantages of a WYSIWYG editor? My advice is that, unless you are a full time designer (and perhaps even then!), your best bet may be a compromise: design your website using a WYSIWYG editor and then try fine-tuning by hand.

Well, this is it for now. I hope you'll find these guidelines useful, but remember, they are just guidelines, don't be afraid to experiment with different possibilities. Keep in mind that, at least when it comes to your website, you are in control.
  
Featured Books
Scales at a GlanceTales To Be Told By Children

©Clea Saal, 2001-2004. All rights reserved
HomeGo home
Web Design
Sitemap