Join Now

Basic Components of Any Good Website

There are over 1 billion websites in the world today. Some of these sites are simple placeholders, while others serve as the online hub of International corporations and government agencies. The United States government alone has ​over 2,000 websites. The many websites of the world range immensely in size, scale, and complexity, but despite this diverse landscape of bits and bytes, there are a handful of important components that any website needs to be successful.

With all the diversity and innovation of the Internet, websites remain very simple at their core. A well made website, no matter how simple or complex, will have some common components that are easily recognizable to the visitor, their browser software, or both.

 



Importance of Organization

Organization is one of those elements that should be apparent in every area of your website. Organized sites are not only easier to scan through to find important information, but they convey professionalism and legitimacy. 

Visual elements are what the visitor can see on the front end of your website. These are the vital components that your visitor uses to experience your site and include navigation, branding, content, contact information, copyright, and more.

These elements are so commonplace that they are expected, and when any of these things are absent, something will seem off to the visitor. Even subconsciously, the absence of a navigation system or a logo could put the visitor off and increase your bounce rate.

The bounce rate is the percentage of visitors that go to your website and leave before exploring past the page they first land on. A good website will have a bounce rate of less than 40% while most sites will sit between 40-60%. Anything higher is an indication that you’re not capturing their attention – or that your website is confusing or difficult to navigate.

In this guide we’ll explore the three main sections of a website from a visitor’s standpoint. These are things that will affect their experience and your ability to convert once a visitor has found your home page.

To make matters simple, we’ll separate a typical webpage into three main sections: header, body, and footer. 

 


 

header

The header of your site is, as the name implies, generally at the top of the page. The content on the header may be different on each page of your site, but there are usually two components that stay the same.

 

Logo

  Branding / Logo

The most popular position for your site’s logo is in the upper-left corner. It could also be located in the center or right side of the header, but generally this is placed where users are most likely to place their eyes first.

Logos can be as simple as the name of your site in a big font or more commonly an image or in-line scripted design called an ​SVG​.

 

Navigation

  Navigation

The main menu of your website is the primary way people navigate your site. Whether you’re building a multi-page site or a one-page solution where all of the site’s content is in a single place, a navigation bar will help users to get where they need to go.

 


 

Body

The body of your site is its meat and potatoes – it's where your content lives. The rules of layout are flexbile – you can have blocks set aside for featured content you want to highlight, big sections of text and images, and/or a sidebar to add some useful links or navigation tools to help your visitors get more out of their visit.

 

Compelling Text

  Compelling Text

The text in the body of every page on your website matters. This applies to not only what is written, but also how it is written. Proper spelling and grammar are important not only because your visitors associate these things with credibility, but also because search engines like Google and Bing grade your website’s trustworthiness on how well written the content is.

Keep sentences short whenever possible and avoid common traps, such as overuse of ​passive voice​ or industry jargon. A good rule of thumb is that any website intended for the general public should be written at no more than an eighth grade level. There is an online tool called ​Hemingway​ that can help you to test your text to make sure it is easy to read.

 

Imagery

  Imagery

The modern web is visually driven. Having video and/or images in the body of your home page and subpages will help break up the text, while also providing visual appeal, making your site look more polished and thought out. Make sure you optimize any image files you use on your website. This will keep loading time down and reduce the odds of a visitor leaving because pages are taking too long to load.

 

Call to Action

  Call to Action

Now that you have traffic going to your site, you need to have some way to convert that traffic. What is the intention of your website? Are you raising awareness of a cause, drawing attention to your small business, or promoting yourself as a freelancer?

Find a way to incorporate a call to action in the body of your front page and possibly even your subpages. This could be as simple as adding a newsletter sign-up form in the sidebar next to your free content or a contact form near the bottom of your home page.

At the very least, you should have a contact form, contact information, and/or a comments section enabling visitors to reach out to you.

 

Story

  Tell a Story

You don’t have to start every page on your website with “once upon a time,” however, each page should tell a story. This could be the story of your business, a specific product that you’re featuring, or the members of your team. It doesn’t have to be formatted as a traditional story, either – it just needs to make sense to the visitor.

Every website should answer the following questions:

  • Who are you?
  • What is the website about?
  • How can we take this information a step further (conversion)?

 


 

Footer

The footer is at the bottom of every webpage. It might be tempting to leave this space blank, like a clean Word document – this is a bad idea. Your footer plays an important role not only in giving users a secondary navigation point, but also in protecting your site from copyright infringement.

 

Copyright

  Copyright

It might seem trivial to have a copyright notice at the bottom of a webpage, but it serves an important purpose. It lets the visitor know that you are actively protecting the content under the law. It helps you in the event that someone rips off your content that there is some record that you have claimed copyright of it in a way that is clear and obvious to the visitor. The copyright also gives visitors the ability to see the company or person’s name that owns the website. A lot of websites are product-focused from the text down to the logo. This makes it hard for visitors to understand the company name behind the content, and more specifcally, how the name is spelled when it isn’t incorporated into a logo. It’s a small, yet useful tool for journalists, potential business contacts, and customers.

 

Branding & Navigation

  Additional Navigation and Branding 

Just like the header of your website, the footer can host a smaller version of your logo and a navigation menu. This doesn’t have to be the same as the one at the top of the page; it could look more like a bullet list of interesting pages, but including it here is useful. If anything, it saves readers the extra step of scrolling to the top of the page to keep browsing.

 

Social

  Social Information

The footer of a webpage presents a great opportunity to provide links to your social pages. Twitter, Facebook, Pinterest, and other networks are great ways to keep in contact with your community and build a long-lasting relationship with them. Don’t neglect this useful element!

 



Summary

These components will help your visitors navigate and experience your website the way you want them to. You can adjust and customize your user's experience in any way you see fit. It just helps if there are some familiar elements that people can depend on for a seamless, and enjoyable, browsing experience.

Tags: Tutorials
Kevin DuCommun
Kevin DuCommun / St. Louis, MO

Kevin DuCommun began at MuseThemes in 2015, as the Developer-extraordinaire. He is the man behind the curtain for all our widgets and uses this creativity in his personal life as well, as a musician, writer, and soap maker…yes, soap maker.

Comments

Alexandria Dunham
Alexandria Dunham

Thank you for this it was a great help for me to layout my companies website.

Post A Comment

Trusted by Web Design Business Pros

Join now to grow from our entire library of templates, widgets, and tutorials Join Now