Home To Swedish Main Page Technical Documentation and Translation Technical Information Running a small business Producing websites Marketing Methods About Myself Downloads

Producing Websites Websites: modern-day shopping windows Internet has made such a forceful impact on western society that it is today the rule, rather than the exception, to find a business in a western country, large or small, represented on the web, with their own site. Many small business owners prefer to construct and update their websites themselves. And why not? It´s creative, many consider it rather fun, and there are sophisticated software tools, such as "Dreamweaver", available for those who are not familiar with the HTML-language and simple scripting. But there are drawbacks as well. It is easy to detect an "amateurish" website, and, after spending a few minutes on a supposedly professionally made website, one discover details that are not functioning as well as they should. If the content of your website is interesting enough, visitors are likely to look past these shortcomings. But will they come back? Well, that depends on whether there are competing websites, producing the same information in a better way. This is, thus, the same phenomena as with shop windows. Unless a shop has extra-ordinarily low prices or hard-to-get merchandise, it has to make a good display window, so that passers-by will stop and look. Also, when you come to think of it, what impression does it convey to the visitor, if you have a slip-shod website? - "Here is a business, doing so poorly that they can´t afford to have a good website made!" In that situation, you can choose to do what I once did. With business going poorly, I had rather much time on my hands. So, I devoted that time to teaching myself professional website production. It´s not so difficult, but it takes an awful lot of time. So, you might choose the other option; to devote your time to your real business, and let someone else fix the shortcomings of your website.

Website architecture, that´s how your website is structured. For small sites, this is not important, but if you have ever gotten "lost" while browsing on a big site, you will appreciate how important it is to have some structure that would enable both the webmaster and the visitor to find his way without spending too much time. It is a matter of: physical file structure, to help the webmaster internal link structure, to help the visitor. The building blocks of site architecture are: Sub-directory structure on the webserver Site navigation scheme Type of Web page URL structure Page layout and structure Cross-linking structure.

Figure 1

Sometimes, while surfing the sites on the Web I find sites that have so much going on I wonder where to go first. If you have visited your daily newspaper´s website or software download sites lik Tucows you will recognize the situation. Everything all jostled together, pixel-to-pixel, crammed into that one tiny space called the browser with no breathing room. Crisp organization coupled with clear navigation generally produces sites that keep visitors longer. These professional sites I mentioned have been with us for so long now that they can manage that. But how about your website? We will take a look into why less can be more powerful. Now, I'm talking about the increasing amount of sheer stuff that keeps appearing on an already jam-packed site. Elaborate plug-ins like Quicktime and Shockwave, flash animations and java applets, not to mention ad banners and plain ol' animated gifs. We sometimes feel that what we need is some breathing room, a bit of zen-style emptiness, in short a little more space. The print industry refers to places on a given page lacking either text or images as "white space" because in print the background is almost invariably white. Good judicious use of white space is one of key elements of print design. On the web, empty space doesn't necessarily need to be white but it is still an important aspect of good design and should be visible. Or not visible. Depending on how you want to (not) look at it. White space is important because it allows the eye to be guided along a page in a fluid seamless manner. Without white space the viewer is confronted with an enslaught of options all appearing equal and overwhelming. Too many images, too much color, too many fonts or just simply too much text might confuse and aggravate your visitors, more readily enticing them to close the browser window rather than to click further into your site. There are quite a number of layout tricks you can use to add clean appealing open spaces to your web site and the simplest of them all starts with the non-breaking space, otherwise known as   or  .  A whole group of non-breaking spaces functions like a small block of emptiness.

You can put five of them together at the front of a paragraph to make indents or use groups of them to push images and words father apart from one another. You've probably seen the non-breaking space at work in w i d e l y s p a c e d w o r d s where a &nbsp; is placed between each letter to add roomy variety to headlines and titles. Along with spacing your words and letters horizontally you might also decide to add some vertical distance between them in order to help delineate sections, title headings or just break up large potentially monotonous blocks of text. You can give your text a break with the <BR> tag. The <P> tag is even better; it adds a single empty line wherever it goes. As opposed to other HTML-tags, it does not have to be followed by the </P> tag. Another trick is to wrap a font tag around a <BR> tag which effectively resizes the Break to be larger or smaller according to your specified FONT tag SIZE attribute. Even a lot of nicely spaced paragraphs can look funny if their individual lines are too long, so it's important to strike a balance between width and height by adjusting your horizontal margins to keep up. The <BLOCKQUOTE> feature gives you a quick and dirty way to pad paragraphs with wider left and right margins. This tag has been around from the beginning, and most browsers will indent both sides but some choose only to indent on the left. Of course these days the most popular way to control both horizontal and vertical margins is through tables. Tables were not intended to be used as a layout tool, but with the release of HTML 3.2 in 1996, designers far and wide jumped at the chance to layout their text more precisely when finally given a tool to "abuse". While this kind of layout need is exactly what Cascading Style Sheets are meant to fill, tables still provide a decent means of separating sections of text. Putting your text into a table cell surrounded by empty cells on either side is an obvious way to set margins on the fly.

For example: <TABLE border="0"> <TR> <TD> </TD> <td>Main Text Goes Here.</td> <TD> </TD> </TR> </TABLE> Points of interest in the above example: Set the table border to zero, or else you won't have the invisible margin effect so much as you'll have a "look I'm formatting with tables" effect. The second thing to note is that some browsers have difficulty with empty cells. So, since you want the cell to look empty without actually being empty the ideal candidate for the job is our friend the non-breaking space. The last trick for inserting empty space is in some ways the most precise; the 1-pixel gif. The beauty of this method is that you can insert exactly as much nothingness as you want, one pixel at a time, simply by setting the tiny graphic's <IMG> tag HEIGHT and WIDTH attributes to exactly what you want. Because the gif is a scant 43 bytes (that's .04 K) it takes no time to download itself into your visitors' browser cache and can be used as many times as you'd like. A slightly less precise method but one that works in an even more behind-the-scenes manner is to set the HSPACE and VSPACE attibutes of the 1-pixel <IMG>. Sizing the invisible graphic this way prevents the "loading-graphic"-square from appearing when the downloading from the server is slow. Many browsers show an "outline" of images before they're fully loaded. If your image has been sized to be 200 pixels wide, visitors will probably notice such a square whereas a 1 pixel image with a 199 pixel HSPACE border will slink by unseen. The HSPACE/VSPACE attribute is far less consistent cross-platform. But the choice is yours.