Build a Website - Ultimate Guide for Beginners

Choose an Image Processing Program

Even if you don't plan to add many images to your site, you will need an image processing program. Again, the choice is rich but I personally recommend the open source GIMP, which has really a lot of features or the paid Adobe PhotoShop. Both programs allow to create your own images or to edit existing ones.

Prepare Your Content

One of the most time- and effort-consuming tasks in building your site is preparing your content. Of course, the time and effort you will need for this, largely depends on how many pages your site will have and what you will put on them.

There are two approaches to preparing your content - you can prepare it yourself or find somebody to create it for you. In any case, start the preparations early because it takes a lot of time.

Images and Graphics

Getting your images and graphics ready before you start building your site is very important because many of the design decisions you will make depend on what imagery you have.

Images and graphics can consist of: logos, product photos, diagrams, other photos (i.e. pictures of your office and/or your team), Flash banners, movies, etc. You may create more images than you will actually use, so that you have the choice and flexibility.

Flash and movies are not mandatory for a small site. In fact, many search engine optimization and usability experts will frown at the idea of using any Flash but as with all poisons, Flash in small quantities is acceptable - just be careful that you don't overdose because having too much Flash will drive your users mad and search engines will hate you. Movies are also great to have but their preparation takes more time and skills, so you can safely skip them, at least in the beginning.

While you are preparing the images and graphics for your site, you can also start thinking about what colors you will use. Of course, you will hardly be able to decide on the exact color of every site element but you should have an idea at least about the color gamma (i.e. blue, green, gray, red, brown, etc.) you will use.

Texts

In addition to images, your site will need text - lots of text. As you guess, writing it all can take a lot of time. So, if you want to make your life easier, you should start with creating a list of the pages your site will have. If you have researched your competitors' sites carefully, it shouldn't be a problem to come with a list of pages. When you create the page list, do not forget standard pages, such as Terms and Conditions, Privacy Policy, Disclaimer, etc.

If you want to go one step further, you can write a draft, or at least a bulleted list of the items that go on each page. Of course, it is best if you have all your texts ready before you start building your site but even if you can't do it, it is not that much of a problem.

After you see how much content you will need, you should decide who will write the text - you on your own or you will hire a writer. Again, as with images, you should take into account the time necessary to prepare the content.
When you are done with the preparation stage, you can finally move on to building your website.

Building Your Website

So, you have come to the stage when you will start building your website. By now you should have already decided whether you will build your website from scratch, use a website builder, or hire a professional developer/designer to create the site for you. Even if you decide to hire a pro, you should have some idea of site building, so that you can check if what they have created is good or not, so reading this chapter is also feasible.

If you have decided that you are capable of doing it on your own or that you will use a website builder, this chapter will show you the steps to do it. Depending on the website builder you have chosen you might have more options than the ones described here but in any case, the steps we discuss are the absolute basis for building the website.

Another important clarification that is necessary to make is that there are online and offline website builders. However, no matter what kind of website builder you use, the steps are generally the same. In my opinion, it is better if you build your site locally, test it and then upload it to the server but even if you build it online, do not forget to save locally a copy of it. Though most web hosting companies do make frequent backups, if you want to be certain that you have a copy of your site, just store it locally. This way if the hosting server crashes, or you decide to migrate to another host, your sites' files will not be lost.

Choose a Template

The first step in building your website is to choose the template. The template of a site is similar to a document template in Microsoft Word - i.e. it is a skeleton of the pages and has elements such as colors, formatting, positions for images, etc.

Most website builders offer hundreds and thousands of templates to choose from. Very often one and the same basic template is available in several variations - i.e. with different color schemes, or for different resolutions. Additionally, almost any template can be further modified by you to your liking but generally it is better if you pick up a template, which matches all your requirements without the need for further modifications. The reason for this is very pragmatic - if you are new to website building, there is a substantial risk you will ruin the template, if you start modifying it, so if you want to be on the safe side, just choose the closest match to your dream template and stick with it.

Tip: Although in most cases you can select different templates for the different pages, you'd better not do it, unless you have a really good reason. Choosing a different template for different pages creates a mess and your site will lack consistency. The only case when you could go for different templates is when your content is different and you want to accentuate that - i.e. you can use one template for your product pages, another template for the knowledge base, etc. - but even in this case you should select templates, which are close to one another (i.e. use the same fonts and colors).

Types of Templates

One of the greatest advantages of using a good website builder is that it comes with many templates for different types of sites. Choosing a ready-made template, which you can customize further, can save you weeks and months of work, if you were to create it on your own.

Although it varies from one website builder to the other, generally there are several types of templates you can choose from. Most often the choices include a personal site, a business site, a shopping cart, a photo album, etc. If you see your type of site listed as a template, just pick it; if not - pick the closest match and be ready to customize it a little.

Additionally, very often website builders offer templates for additional modules, such as Contact forms, sitemaps, guest books, etc., so if the website builder you have chosen offers this, consider picking up some additional components to further enhance your site.

Templates and Screen Resolution

One of the tricks in choosing a template is the resolution it is for. Without going into two much technical details, I will say that there are several popular screen resolutions, such as the standard 800x600, 1024x728, 1280x1024 or the wide-screen resolutions of 1680x1050 or 1920x1200. It is almost always technically possible, though generally difficult, to create a template, which looks great at all (or most) resolutions but many designers don't take the pain to do it. Additionally, very often the templates, which look great at all resolutions, have less elements than the templates, which are optimized for one resolution only. So, it is a trade off - less features or more supported resolutions.

When you browse the template galleries of your website builder, you may see tags that a given template is for a particular resolution only. Depending on the website builder and the template itself, you might be able to change this - i.e. if you see that a given template is 800x600, the website builder could offer to expand it to 1024x768. For now, 1024x768 is the most popular screen resolution, so if the template is really great and it offers no alternatives but 1024x768, you could still take it.

Choose the Page Layout

One of the components in the template you chose in the previous step is the page layout. Very often one and the same template comes with variations and one of the most common variations is the page layout. The page layout, as the name implies, is the way the website elements are arranged on the page. Here are some page layout considerations to keep in mind when you are choosing the page layout:

• Number of columns. Generally most sites have 2 or 3 columns and chances are that you will hardly need more or less.

1 column sites are usually one-page sites, which promote something. Typically these sites have only one page but it is a very long one. You could also go for 1 column page, if you have decided that you won't be using a side menu but only a top menu. However, this is not the best idea in terms of usability, so you may want to reconsider it.

2 or 3 columns are more common. Usually one column (the left one but it could also be the right one) is for the menu and the other column is for the page text itself. However, sometimes you will need a third column - i.e. one more column on the right for additional pictures, quotations, short news, links, etc., so in this case you'd better go for a 3-column page.

4 and more columns are not typical for most of the sites. One of the cases when you will need so many columns is when you have a blog and you need one more column just for the ads, or when you are publishing an online magazine and its homepage consists of many short pieces (mainly a title and an abstract), arranged in 4-5 or more columns. In all other cases 2 or 3 column pages are just what you need.

• Menu position. Another important site element is the menu. Needless to say, this is something you can't skip. Usually most sites have at least one menu, which is generally placed in the left column, but you can also position your menu at the top or in the right column. Very often you will see sites with two different menus - i.e. auxiliary items such as Home, About Us, Contact Us, Links, etc. are placed in the top menu and the main items are located in the main menu on the left or on the right.

Basically, when you go for a top-only menu, this limits you a lot because you can't include 7-8 or more menu items and additionally you should keep them short because otherwise they might not be able to fit on one line. Probably this is the main reason why top menus are not used so widely.

• Headers/Footers. Headers and footers are components you could skip, especially the footer, but you'd better don't do it because this will make your site look uncompleted.

Headers usually contain your logo and a picture, while footers can contain links to your Privacy Policy, Contact Us form, or simply a copyright notice. You see why I say that you can skip the headers and the footers of a site but this will make it look uncompleted?

Usually footers are small. They use a smaller font size and generally are 1-2 lines only. On the contrary, headers occupy a lot of space and their purpose is to be visible. However, have in mind that large headers feel like a heavy hat over your site, so avoid headers, which are more than 200-250 pixels high.

• Empty space. Probably you have noticed spacy sites and you might have wondered why so much space is wasted. Well, calling the empty space a waste of space is not very precise because you certainly need some of it, unless you want to clutter your site with all possible stuff.

Sometimes the empty space is a better option. You can go for a spacy template, if you don't have much content to fill your pages with. Very often the empty space is not white but is a repeated pattern - most often on the left and on the right of the main body - so it can even look interesting.

However, have in mind that if you use a 800x600 template, your content fits into 600-650 pixels horizontally and the rest is empty space (or a pattern), when you view this page on a 1680x1050 monitor or larger, the pattern will occupy most of your screen. You will have your content in the center and large areas of pattern o the left and to the right. This is not totally unacceptable, but you'd better avoid if you can.

As you see, the page layout is a very important component of your site. Because of this, you'd better spend more time choosing the layout which fits your needs best. As with almost all site elements, you can change the layout later but usually such changes lead to complications, so you'd better choose the layout before you start adding your content and stick to it.