The Header, Body, Footer & Sidebars are the basics of websites

Learning the basics of websites, their development and theming such as what they do, how they function and where the header, body, footer & sidebars are located will help you drastically. These insights will better inform you of where to look for your theme files or just understand the structure much better of your website before you begin your own development. This series is mostly specific to WordPress, but this specific article is or could be considered across the board language in any website development whether its WordPress or not.

You may have seen a few websites, such as my example on another blog post or others such as:

• http://www.ovenbits.com
• http://pand.co/
• http://sailingcollective.com/

You will notice that in my example the logo is in the center and that the navigation is to the left and right of the logo at the top of the page. This custom navigation was created by editing the PHP, CSS, using a custom navigation plugin and inserting DIV containers (or <div class=”classHere”>NAVIGATION</div>. However, before you develop a custom CMS or more specifically a WordPress CMS development there are some basics of websites that will help you.

The first thing you or any other newbie should understand is there are three main parts to most any website and one additional element that you may have not even noticed or considered:

A Header – The header is the upper most portion of your website, and although each website may appear different, the idea is still going to be the same. I remember in one of my graphic website design classes at DeVry University we were always told that creating a website can be different, but that your users expect a certain feel of a website. What that means is that typically you should always create your navigation at the header. But why? The reason is a vast majority of the websites on the internet have this design feature. There is no need to confuse your users by “thinking outside the box” and sometimes that can increase your bounce rate because… well… they are confused and do not know how to navigate your website.  We only have a matter of seconds as developers the last thing we need to give our users is an excuse to leave our websites prematurely.

A Body – The body is the middle portion of your website and although each body may appear different the idea should be the same. The body typically holds the content, body copy, additional sidebars, social sharing tools and so much more. The body of the website is very important and if you do not have one it could mean a big issue for you especially when it comes to Google & SEO. Although SEO is very important to any website, its pages or posts, we will cover this more in depth later in another article.

A Footer – The footer is the lower most portion of your website and again although each footer may be different the idea will still be the same. The footer may have additional navigation, contact forms, social media stuff and probably a whole slew of things that the developer has chosen to perfect their design. Typically a user does not scroll through to a bottom of a website, but if they were to do so they have an option to navigate somewhere else within the website by using the footer.  The developer may also put their very own signature at the footer below anything else, that also leads to SEO, cross-linking & assist with site authorization, but we’ll cover this later in another article.

A Sidebar – The sidebar can be anything within the body of the website and although each sidebar may be different the idea is still the same. The sidebar is typically within the body of the content, which pushes the content to the left, right or smack dab in the center of the body area where you have a left and a right sidebar. You may have noticed a sidebar when reading an article where there is additional navigation, small images, additional information, advertisements to the left, right or both to the left and right of the content. Sidebars help with further navigation to or outside of the website and are a great way to accomplish this because as a user reads they see more things to click on that they feel of interest. When using WordPress sidebars are edited using “Widgets”, but we will go more into depth of what Widgets are in a later article.

Now that you know the basics of websites are laid out, you can start learning the design portions of each part of the theme. Follow my blog series of creating a “Custom WordPress Website” & the “Basics of Websites”. Stay tuned and I will show you examples of how to customize your WordPress website the way that you see fit, I will give you examples of what I did and how you could use the same ideas to do your own customization.

See more on my latest blog…