• Affordable Web Site Design.
• Domain Name Registration.
• Hosting and Email Set Up.
• SEO (Search Engine Optimization).
• E Commerce Stores.
• Web Site Updates And Maintenance.
• Update And Maintenance Training.

This is divided into two sections, web page elements and web site elements. Each subject description is basically a synopsis, not a complete discussion on the matter. There are some examples of elements that may be viewed by expanding the section to show more on the subject. There are also some links to other sites to see examples. It is usually easier to right click the external link and choose open in a new tab than to leave this page and have to navigate back to where you were. This information covers the basic items used to create a web site and by all means does not include everything possible. This content should help you decide the look and feel you want for your site and help you understand what function each element is designed to have on a web site.

Design is not just what it looks like and feels like.
Design is how it works. ~ Steve Jobs

Basic Design

The most important item to consider is how the visitor views a web page and what information is presented to them. The area of a web page which is commonly known as "Above The Fold" is what the viewer sees when the page loads. The term was originally common to newspapers where the most important or breaking news and headlines were placed. The content and layout were designed to be eye catching and sell more papers. This practice naturally migrated to web design. We were taught to read top to bottom, left to right. Studies have revealed that the first area viewed is the top left of a web page. The eyes then scan the page area from the top and mostly down the mid section of the page looking for the information they are seeking. You have about 10 seconds to get their attention, if you don't they will leave your site.

Page Elements:

Page Header

The page header is considered to be the most prime area of a web page. This will usually contain the company logo and slogan. This is the first part of the page the viewer looks at, any images or elements must load quickly and be visually pleasing to the eye.

Navigation Menu

The navigation menu contains the links to pages within the site. It is often however not always located at the top of the page within or just below the header section. It may consist of just links or be a drop down menu of links for each category or site section. There should be a similar navigation menu at the bottom of the page in the footer section. This site uses a simple text based menu, drop down menu examples can be viewed with the following external links.
RippinH2O
Farm Addicts

Content Section

The content section contains the information you want to deliver to your viewers. The design and flow of this area is important to keep the visitor on your site and invite them to delve further into the site's content. Some of the key elements contained in this section are:

Blocks of Text

Blocks or paragraphs of text are scanned not read by the web site viewer. With this in mind the information must be delivered quickly and concisely. Keywords and phrases are used to draw attention to the information. It is a synopsis of information that may be more detailed on other pages within the site.

Tables with Data

Tables are designed to deliver data in a format that displays the information in an organized logical manner. Many programmers and designers use tables to format the presentation of a web page. This is not the recommendation of the W3C standards. Tables should deliver data; presentation should be delivered by the use of Cascading Style Sheets.

Click on the    + Expand

Lists

Lists are another way of delivering data to the visitor when there is a small amount of information on a subject. They may be Ordered Lists that are numbered or lettered or Unordered Lists that are usually bulleted list items. Another type of list commonly used is the Definition list. The definition list has an item listed with a definition of the item below and indented. Lists can contain images and links to more information.

Click on the    + Expand

Images

These may be a photo, thumbnail image, complex graphic art, or just a simple line. They can be beneficial or detrimental to a web page depending on what they are, how many there are, how they are displayed, and in what way they relate to the content and flow of the page.

Forms

We have all seen and used forms of some type on a page. Most forms are designed to deliver user input for one use or another. Some form types are used to deliver dynamic content to a web page in a particular format chosen by the visitor.

Flash Objects

Flash objects are just what they imply, flashy content. Care and consideration must be used when adding this type of content to a web page. While they may be pretty and entertaining they can also be irritating and distracting. Flash objects are not read well by the search engine spiders and therefore do little to nothing to enhance the page ranking.

Streaming Media

This type of content may be background audio on the web site, a RSS feed from another source, or full motion video in a player window on the page. As with the Flash objects care must be used with this type of content. This type of content typically demands resource use and may slow down the delivery of the page or bring it to a halt. There are still many people still using low bandwidth dial up connections. If a web page takes too long to load they will close it and you will loose them. In short the page should load in less than 10 seconds unless the visitor has been notified and expects to wait for a large amount of data to be displayed.

Links

Hyperlinks to other pages or web sites are often placed within the content body of a web page. Some links are used to display information in hidden sections on a web page, deliver more dynamic content, or jump to a section on the page.

Dynamic Content

This type of content is delivered to a web page from an external source. It can be customized to the users request by use of a form. The source of data is usually a database or XML document. The table example above is populated with data from an external XML document.

Graphs or Charts

Graphs and charts can be used to quickly deliver data in a pleasing manner to the visitor's eyes. Charts or graphs with good color combinations and placement can be a nice visual enhancement to the page.

Hidden Sections

Expanded information on a subject may be contained in a hidden section on the web page reducing the visible area of the page. The information may be displayed or hidden using a hyperlink with the presentation controlled by the use of page styling. You will see several places on this page with links to expand a hidden area containing more information or examples of a subject. I prefer using this method over Pop Up windows since the modern browsers can be set to prevent the Pop Up window from opening.

Pop Up Windows

Most of us have experienced Pop Up windows on sites. They are a good way to display more information on a subject without the visitor leaving the page. Unfortunately the over use and even abuse of this feature by programmers has lead to the modern browsers having the option to block them from opening. The user must allow the windows to open for each site when requested by the browser and can be annoying. If a site is going to use a Pop Up window it should be stated the page is using them and ask the visitor to allow them for your site. I personally dislike the automatic pop ups finding them distracting. Pop Ups should have a hyperlink giving the visitor the option of opening the window or not.

Pop Up Sample
>>> Pop Ups must be enabled to view the sample. <<<

RSS Feeds

Really Simple Syndication is a means to deliver content that frequently changes such as news stories. The browser loads them from a web site that maintains the information.

RSS Feed Page Sample

Footer Section

The bottom of the page is the footer section and is usually consistent throughout a web site. It contains navigation links for the site, contact information for the site, email links, and copyright information.

Web Page Anatomy

The diagram above shows a basic design layout for a web page. The sections labeled Top Left and Top Right are also known as the features section of a page. They can be separate blocks as above or combined as one wide section. This area is mostly used to get the viewer's attention. Rotating images, Flash, or other media are often placed in this section. The features section is where businesses will place information about their services or newest products. Most web hosting sites will use this area to promote their hosting packages.

Site Elements:

Domain Name

You will need to purchase a Top Level Domain Name for your web site. The name should be related to your business or services. If it is possible to purchase your company name that is usually the best unless it is lengthy which could become a problem. Long domain names are hard to remember, can create problems finding your site mostly due to typing mistakes and people do not like to type long names to find a site.

Hosting

You need space on a web server to create your presence on the Internet. Hosting services provides these services. The size, scope, and future development of your web site will dictate the services and cost needed to deliver your content to the visitors. There are thousands of hosting services to choose from providing every known service and programs needed for a presence on the web. One of the most important items to consider is the type of control panel offered to maintain your files on the server. There are many other items that will be needed and should also be a part of the decision process for your hosting service. Disk space, bandwidth, speed, email accounts, e-commerce store support, and databases are a few of the most common. Most good hosting services will have all you should need for your web site at an affordable cost.

Architecture

The architecture of your site is defined during the planning and discovery process of creating the site. This is one of the most important parts of your site design. How your content is categorized will determine how a visitor navigates through your site. This is a critical part of making your site user friendly.

Meta Data

Meta Data tags describe the data related to the web page. Most of this data is used by the web browser to determine how to parse the information and deliver it to the user. Most of this is common information and straight forward, nothing you would need to be concerned with. The Meta data that is important to you and your site are the Meta Description and Meta Keywords. These two pieces of data are used by the search engines listing your site and are critical to your placement in the listings. The description defines the content on the page, it is usually what you see listed in the search returns and is almost always truncated to the first 255 characters. The keywords relate to the content of the page and their relevance to the content will also impact the return listing on a search engine. The page title is also a type of Meta data and equally critical to the positioning of the web page in the search engine listings.

CSS

The purpose of Cascading Style Sheets is to determine how the content of the web page is presented to the user. It defines the overall design of the web site and the pages within. The more complex the design elements are may require more than one style sheet for the browser to properly and consistently render a site. The differences in web browsers and how compliant they are to the standards set by the W3C may require additional sheets for a particular browser. Internet Explorer will deliver pages differently from a more compliant Mozilla based browser such as Firefox. If the page content will be made available for printing then a printer friendly style sheet should be created.

CSS File Sample

IE users choose Notepad to view the CSS file sample.

SSI

Server Side Includes are ways to keep parts of web pages consistant throughout the site. Each web site has some content that seldom if ever changes. For example some of the meta data for the site will mostly remain the same as will the Masthead, the page footer, and the navigation menus. The use of SSI allows for editing one file to make changes apply globally across the website. If a new page or section is added to the site it can be only a matter of editing the menu file and the footer file and the changes will take effect immediately. This greatly reduces the maintenance time of the web site. If a company changes it's logo or slogan which is present on all the pages and there are many pages making up the site each page would need to be updated with the new information. If just one file is overlooked the consistancy of the site is comprimised. SSI eliminates the need to edit each and every page to update the site with new information.

XML

EXtensible Markup Language is a W3C standard that can be used to create custom tags to present data on a web page. It can also be used to deliver dynamic content to the page.

XML File Sample

Scripts

There are many different types of scripting languages used to deliver and format content on a web page. Some of the most common are PHP, ASP, JavaScript, and Flash, to name a few. The choice is sometimes the programmer's preference or dictated by the type of content to deliver to the site. Care must be used in the choice and it must be well written. Custom scripting can cause a delay in the load time of a web page.

C M S

A Content Management System is a tool for managing content, usually on a Web site, that separates the design, interactivity, and content from one another to make it easier for content authors to provide content. One common use of CMS can be found on web blogs or wiki type-sites. It can allow for different content to be added to a website by people who do not need to have any knowledge of coding web content. Different departments within a company can publish content related to their role within the company.

ECommerce Store

Electronic Commerce is a popular way to expand sales of products or services. There are many good pre-programmed packages that can be modified to blend into a web site. These come ready to set up with it's own content management system. There are many popular open source packages that are free, however they will incur extra expenses for a merchant account, Secure Socket Layer to keep the buyer's information secure and private, inventory maintenance, payment collection, and shipping to name a few.

Database

Databases are used to contain data for presentation on a web site. One common use of a database would be an e-commerce store. The database would contain all the information about products available for purchase and the data pertaining to the purchasers. Databases are a common part of a Content Management System.

Contact Information

Contact information for a web site and business is critical to driving traffic to your business. People need to know where to find your business, be able to contact someone about products or services either by e-mail, regular mail, or phone. There should also be technical contact information so users can let the site administrator know of any issues that may arise.