The Website Building Process

Now the fun begins!  We get to take the design, which is on paper and in our mind, and create a website which is an electronic media that is normally displayed on a computer monitor, laptop, handheld device or a smart phone using a program called a web browser or internet browser.   People all over the world can see your website because it is stored on a computer (web page server) that is connected to the internet or World Wide Web (WWW) and it is stored in an electronic digital format that is commonly used throughout the whole world.

Websites are made up of one or more pages and all web sites have a Home page.  The Home page is the page that a visitor is taken to if they simply type your domain name, such as, into an internet or web browser’s address field and press enter or click the search button.  Because we have search engines like Google or Bing visitors may also enter your site from a page other than the Home page and this is based on which page in you website had the information the visitor was searching for and which page the search engine returned for the search.  On a single page web site the only page is the Home page.

Here is an outline of the normal steps taken to produce a simple multipage website.

  1. Create the Home page
  2. Create any secondary pages which can be navigated to directly from the home page
  3. Create a means of Navigation to all the visitor viewable pages on the website. 
  4. Create common site wide information 
  5. Add words and images and other media to the Home page 
  6. Add words and images and other media to all the other pages

Let’s begin!


Create Home Page

So we start by creating a Home page.  Actually most website Content Management Systems (CMS) automatically create a home page as the point of reference from which we build everything else.

Create Secondary Pages

If we know that there will be more pages than just the single home page we can also create some or all of them at this point.  We don’t have to put anything on the pages to start with but we will need to name them as each one is created.  Some of the more common secondary pages include About, Contact Us, Search, FAQ, Blog, Events, Products, Services and Store.  Each of these and other secondary pages can have secondary pages associated with each of them also.  As you can see a large website starts to look like a tree’s roots which branch down to lower and lower levels.  Each level drills down a little deeper and gets a little more specific about the topic that started at its parent page (the page or pages above it in the tree structure).

WNCWD_Site_Map_Vertical_200x480_Optmzd.jpgSite Map

Create Means of Navigation

In order for a visitor to your website to find the information they are looking for they will need to navigate from page to page until they get to the page that has what they are looking for.  In some cases they can also use a built in search function to find information on your website – this is very useful for visitors on large websites.  
Most up-to-date websites have various forms and styles of Navigation menus which allow the visitor to see what pages are below and above the page which they are currently viewing.  Some websites provide a Site Map which shows all the pages of the website and their relationship to each other.  So the next task in “fleshing out” a web site is to provide a means of navigating your web pages.  Normally the Home page will have a Navigation Bar or Nav-Bar on the top of the page which shows all the secondary pages which reside just below the Home page.

WNCWD_Header_Navigation_Bar_w_Dropdown_980x200_Optmzd.jpgHeader Navigation Bar

Create Site Wide Info

Once all of the most common secondary pages have been created we can go back to the Home page and start creating areas that are common to all or most of the secondary pages.  The header area, at the top of each page, can have a common Logo, which should also be displayed on all or most of the other pages.  The header area also commonly contains a Navigation bar, breadcrumbs (a page trail from the Home page to the page you are currently on) and sometimes a user login link.   Then there is the footer area, at the bottom of each page, which often contains copyright notices, a site map link, a user login link, links to areas of popular interest either on your website or on other web sites – whatever you feel would be an appropriate footnote common to all or most of your web pages.

WNCWD_Breadcrumbs_400x140_Optmzd.jpg Breadcrumbs

WNCWD_Footer_Area_900x160_Optmzd.jpgFooter Area

Create Home Page Media

The home page it the focal point of your web site.  It should not be too busy but rather it should set the tone, theme, character, image you want your entire website to portray.  This page should also be simple, simply because it needs to load in your visitor’s browser AS FAST AS POSSIBLE!  If your visitor has to wait more than a few seconds to see the page they will probably go somewhere else and not come back!  Words and a few, well placed, pictures and/or graphics are all that are needed.  This page should be just the right balance of elements to portray your Logo, any branding and appropriate wording to gain your visitors interest immediately so that they will want to see more pages.

Create Secondary Page’s Media

Finally, you can start fleshing out your entire website by creating the appropriate mixture of words and images to keep your visitor’s interest and provide them with the product, service or information they came to your website to find.



Next stop: Maintenance Prev: Design