Website Design information is basic, so that it will be flexible with whatever software you choose to use.

We cover getting webspace, domain names, extra features, creating a page, making a site, and long term growth.

I saw my first website in May of 1998. I built my first website the same month. Within five months I got my first website design contract, with the Town of Medicine Bow. Things were simpler then, but overall principles have not changed much.

When I built my first website, I was building on a foundation of writing, page layout, graphic design, and generalized computer skills. It was easy to learn on top of all that. And I still learned a lot of things the hard way! Starting cold without experience in one of those areas already will make designing an effective website difficult for all but the most inately talented of people. So if you choose to hire it out instead of doing it yourself, don't let it make you feel bad.

If you need software to design the site with, you can download a copy of NVU. It is free, and works well if you read the userguide. We also have instructions for building a simple site with it on the SuperMom Shoestring Startups page.

You need to think about potential costs in the following areas:

1. You must have internet service so you can do uploads.

2. You need a computer capable of both handling the software necessary, and of doing the uploads. This means a computer 6 years old (approximately) or newer, and a modem or other ISP interface.

3. You need software to do common tasks. You have to be able to create the web page in an HTML Editor. Front Page Express and Netscape Composer are functional for basic tasks - more free software is mentioned in the Shoestring Startups section of the SuperMom site. In my opinion, Front Page is not the best software. It generates too much useless code. Using a Word Processor, or other program whose primary function is not that of generating web pages will give you problems, as code is not very accurate, and page layout is not as flexible as it is in a true HTML editor.

You also need software that you can scale and crop photos in if you want to put pictures on your website. Adobe PhotoDeluxe is fine, as is any of the Corel or Microsoft photo programs - free stuff also listed on Shoestring Startups page. Expensive software does more, but you won't need expensive stuff unless you intend to go pro! A scanner or a digital camera may be an asset, but are not required.

4. You need space to put the website in. It can be free space, paid space, part of your email space (some ISPs allow you to upload a website to your email account space), borrowed space, or whatever, but you will need the upload address, and username and password, and destination folder.

5. You do not need a domain name, but you may want one. If you use free space, you will get a default domain name that is a sub-domain. You only have partial control over what that can be. Some free server spaces allow you to use a paid domain name with them, some do not. The advantage to a domain name is that it looks more professional, and that it is easier to advertise with because it is less confusing. You can also use a bargain domain name, which is a less common version. Domain names with .com sometimes cost more than ones with .us, .biz, or other new extensions.

6. If you do not have the skills to build the site yourself, you may need to hire it done. If you hire it done, expect to pay $100 to $250 for a quality site with 5-25 pages. This should get you a PERSONALIZED service, not a cookie cutter service. And the designer should listen to your preferences. Yes, we offer those services (see, I told you these things were for advertising!), visit Adventure Tech-Web for more info.

The Process

Some of these things need to be done in order, some do not. The order things are listed here helps you not have to pay for anything until it is strictly needed.

1. Get your computer system, and software lined up. Play around with the software (use the help system to find instructions using terms below) and become familiar with the following functions:

• How to create a new page. (Look for an Assistant or Wizard to simplify the task. You can always customize a site template after it is finished.)
• How to make a table and how to set how many rows and columns it has.
• How to make a table invisible (hide the border).
• How to size the cells in a table (make the boxes bigger and smaller).
• How to duplicate a page.
• How to make text larger and smaller, and different colors.
• How to make a text link.
• How to make an email link.
• How to put in an image.
• How to make that image into a link.
• How to place a Horizontal Rule
• How to color a cell in a table.
• How to set your page title (the ones the visitors will see).
• How to set the page background and page text colors.
• How to upload pages and sites.

If you can do all that, then you can create a web page with the most commonly used features and make it look good! There is lots more you can learn, but that will get you started.

2. Create a Site Template (you may use a pre-designed site template, if you do, just change it to work how you need it to). This will be a page that has your navigation standard on it, and that has links to all the pages you expect to need for your basic site (Home, Products or Services (maybe multiple pages for these if you need), Order, Policies, About Us, Contact Us, etc). You will set it up with an image of your logo on it, some standard text at the top, your "designed by" information at the bottom, an email contact link somewhere on the page, colors and style will be what you want the whole site to feel like, including borders, a general table to put all the information in, copyright and designed by info at the bottom, any standard disclaimer that needs to go on each page, and a standardized layout. More on templates and navigation below.

3. Make sure you save your site pages in the same folder on your computer - create a new folder just for your site. Create another folder inside that one, and name it "images". Put all your images that you are going to use into the folder BEFORE you insert them into your page. This is very important, so that when you upload the site the images will get uploaded too. If you don't do this, your page will "lose" the images once it is uploaded.

4. Research and find your webspace. If you need free or low cost space, you can try www.freeservers.com, www.netfirms.com, www.register.com, or www.godaddy.com. Each has an advantage and a disadvantage, so read the Service Agreement and Terms before you sign up with any, and compare carefully so you get what you need. Freeservers does not allow you to easily change something once set. A good web host will allow you some flexibility for what you need and provide good instruction pages. iPowerWeb will cost you about $10 a month, but provides exceptional service with liberal limitations for small businesses - and they are constantly improving it. Some reviews of providers are listed in the Creating a Webstore on a Shoestring tutorial.

5. Get your domain name if you want one. Read the instructions from the registrar company and your web hosting company and see what you need to do to link (point the domain name at) the webspace. Usually the company that hosts your site can help you register the domain name - some even offer it free for the first year.

6. Upload your site template. You will need to get the username, password, domain name server, and destination folder from your server space company. This information is usually listed on their Welcome pages, or there is a link to it. See if your page looks the same online as it does off. Make adjustments if you need to. Most common adjustments have to do with alignment of text or pictures, and table cell sizes (sizes can be set by percentage, pixel numbers or to auto adjust - play with those settings to see what they do). When you reupload your page, you may need to tell your browser to Refresh the page or it will still show the one from before (even if you reloaded the page it can do that).

7. Duplicate your site template (Open it and use File->Save As to rename it and make a copy - this will leave your template untouched so you can work on the copy) and rename the duplicates with the names of the other pages on the sites. Save a blank copy to use later as your site grows. Make sure your new page names are the same as your links on the navigation on the template. Your homepage name needs to be "index.htm" or "index.html" to work best. Now you just go through and put in the content (pictures and descriptions) for each page. Having a template can save you TONS of setup time and keeps your site consistent.

8. When your content is in place, upload the whole site and preview it to see if it looks at works right. Fix any links that don't work, correct any visual problems.

Now for the Details - Things you need to Know

You are going to have to learn how to use the software. And you are going to have to learn the common terms used for web parts. If you do the tasks listed above under number one, you will learn a lot of that. And then you are going to have to learn some good web design guidelines.

1. The three font rule. This has been used by page layout experts for years. It changes some on a web page because it can have different sections for ads or whatever that do not follow this rule, but in general, the parts of the web page that all work together should not have more than three font styles. Too many fonts on a web page can cause the page to display weird anyway because if you use a font that the person looking at the page does not have on their computer, then it will come out odd anyway as the system uses a substitute font. So stick with common fonts like Arial, Times, Comic Sans. You can make them any size you want, bold them, Capitalize them, Italicize them, whatever, just keep the overall font design simple.

2. Use colors for emphasis. You don't want it to look crazed, so choose colors that coordinate together. Reds and pinks for emphasis of dire importance, Blue for calm and trust, Black for strong statements, Yellow (dark yellow in bold text is all that shows up well) for cheer, Greens for freshness, Purple for quirky or humor, Red for boldness and attitude, etc. Use a standardized scheme though, using the same color all the time across your pages for the same type of message. Make sure there is enough contrast between your background and your text to be clearly visible, even for people with visual difficulties. Not all monitors show it like yours does, so stand back about three feet and see if it gets confusing or not. Use bold text to be easily read over textured backgrounds.

3. Be consistent. Keep your design similar throughout the whole site. It can change for certain areas, but should still work the same and feel similar to help the user feel comfortable using it. If you put ads in the margin on one page, put them there on all the pages. If you put useful tips at the bottom, make sure they are there on all the pages in the same place (so your visitors know where to look). If you email link goes at the bottom of the navigation, keep it there.

4. Navigation. Navigation is the single most important thing to think about first when you design your site. Whether or not it is efficient and consistent through the site makes the difference between an easy site to use, and a hard one, a professional looking site, and a bad one. Make sure that you have links to all your major categories on each page. Also make sure you have links from each page to any other page that most of your users will want to go to next (in other words, if you have five product pages, they do not all need to be linked to the home page, but you need to be able to get from page one to any other product page if you need to). Use Chapter like pages for introducing a new category that has lots of options. For example, the Product link on your home page can go to a Products page that has links to each of the five product pages with descriptions of what is on each page to save your users time. Always make it clear where a link will take you so people do not waste time looking for things in illogical places.

You should have a standardized navigation scheme - Page links should always be found in the same place, such as the left side. The right side is less popular because if you have a large page on a small screen, the right side gets chopped off. You can also have navigation at the top of each page. It is recommended, especially if your pages may be very long, that you also have a navigation bar (at least with simple choices) along the bottom of each page.

Think about how you want your site to link together before you design it. Do you want all pages to link to the home page? Do you want it in a Ring format where one page only links to the next page (ok for info pages), do you want it to branch out in layers, with the top layer containing just categories, and the next layers containing more details and more choices? This will affect how you make your navigation work.

You can also create a splash page for your site entrance. This is not a good idea unless you put more links than just "enter site here" on it. We have a good example of an effective page of this type at http://www.adventuretech.us. Because we have several different and unrelated site areas, we start the site with a page that has basic descriptions of the site areas and links to each one. No useful content other than that is present on that page, the site is divided up into separate sections from there, each with their own design, navigation, and entrance pages. We do not recommend doorway or splash pages for any other reason, because they are too annoying.

Navigation should be logical and intuitive. That means that you need to do it in a way that most people can figure out easily, or in a way they are already familiar with. The reason some formats are so common is because they work! If people come on to your site and it immediately feels comfortable and familiar, they are more likely to buy.

5. Choose a background that is uncluttered and contrasts well. If your background is too busy, it will make it harder to read text. This is one of the most common errors that new designers make, and sadly, many college trained designers still make this mistake. Avoid it if you want to keep your customers and look professional. Make sure your text shows up well. If you like a background and it is too busy, you can do one of two things: Put it into an image editing program and lighten the Brightness and Contrast to give it a more washed out appearance, or make your text larger and bold.

6. Keep your overall page layout simple and uncluttered. Make sure people can easily see what they are most likely to want to see. Information that they know they have to really read can be smaller and less visible. Lines of text should not be too long either or it can be hard to read. This page has very long lines, which I would not generally do on an explanation page on a site.

7. Put all the information you NEED them to see (company logo, content title, navigation, and any critical ads or instructions) in the TOP of the page, the part that will be seen without having to scroll. If they are interested in the page, they will scroll, but nobody likes to have to scroll down just to see if this is the page they wanted in the first place. Your pages can be three to four screen lengths long without undue inconvenience. Longer than that is discouraged except in informational situations.

8. Use tables to control where things go. In fact, start your website by making a large one cell table if you don't want to make any other compartments to put things in. Put everything inside that. It helps you control text alignment better (in fact, some browsers do not align text properly unless it is in a table), and helps you to be able to control the size of the page that is displayed also.

I start with a table two columns wide, and two rows deep for most of my sites, because I like a left hand navigation. Then I make the top two cells into one cell across. That gives me a section at the top to put the site logo or title into. I set the properties of the left hand lower cell to about 200 pixels wide. The other one is set to Auto if I don't care how wide it goes. Otherwise I set it to 500 pixels or so. If I want to put the "Designed By" info at the bottom of the page, and a navigation section, I can add two more rows to it at any time, and make each of them into a single cell, so I get two full width cells across the bottom. I put the navigation into one (I have to change the navigation a lot, so this helps me select it easily for copy and paste if I put it in a cell by itself), and my "Designed By" info in the bottom one. I can add or delete cells as I need to make the site look how I want.

You can put tables inside of tables, so if you need to control where an image and text end up, you can use a table to make it go where you want it.

If I want a Doorway page to connect several sites together like a mall, I can use table cells to put the information for each site into so the user can see all of them and choose where they want to go.

9. Use images to bring things to life. Images are the heartbeat of the web. Things sell so much better with a photo! But keep your images small! VERY IMPORTANT! Use as small an image as you can and still have it show what it needs to. If you need greater detail, make a tiny thumbnail image, and link it to a larger image so they can click on the thumbnail to see more detail. This allows your site visitors to only have to wait for downloads of things they are very interested in. Use jpg or gif images to reduce file size and download time. jpg images work best for photos and complex blendings of colors. gif images work best for hand drawn images, or ones with large expanses of solid colors. Images increase how long it takes for a page to show up. But wise use of them will increase user satisfaction with your website.

10. If you use flashing or animated text, do NOT use it for a sentence! Maximum TWO WORDS. Otherwise it drives people nuts because it is VERY difficult to read.

11. If you use a background sound, do not set it to play in an endless loop! It gets very annoying very fast, and people will leave and not come back. Once through is enough!

12. If your page ends up with too little information on it, combine it with another page. Pages take time to show up, especially for people with slower internet connections, so if you are going to make them wait for a page, make sure it is worth the wait.

13. Last of all, remember this: The prime function of your website is not to look flashy. Badly done bells and whistles will be more harmful than helpful. Efficient function that helps a customer feel welcome and comfortable is the most effective quality to achieve on a website. Think about your target market, and what they feel good about. Contemporary customers like a contemporary site. Professional shoppers like clean, sharp and conservative lines. Teens like flash and pop colors. Seniors like something cozy. Aim at your market and keep it simple!

I hope these guidelines are useful to you. It breaks down to a few simple things:

Know your software and how to use it.

Choose services that cost you the least for what you need.

Make sure your website is functional and welcoming, even if you have to pay to get it that way.

If you succeed in creating such a site, it will pay for itself for years to come. It will need regular updating to keep from looking dated, and to keep things running smoothly, but most of the work is done after the initial design and creation. A good site works as your representative online, answers the questions they would like to ask you, presents your product in a way that feels warm instead of cold, while still offering the customer the chance to talk to you if they choose. It will save you tons of time and do much of the repetitive work for you if it is set up right.

Be sure and check out the page on Common Website Mistakes You'll Want to Avoid in the Shoestring Startups page.

Here is a link to Google's Webmaster Guidelines, which offers some info on what works with search engines and what does not: http://www.google.com/webmasters/guidelines.html

Adventure Tech-Web also offers a website assessment service, where we assess the function of your site and make recommendations for improvement. This service costs $25 for most websites. We don't ever pressure you to hire us for anything, our recommendations for your website will be made with the assumption that you will do the improvements yourself. Of course, if you need additional help, we will be happy to assist you.