The Anatomy of a Winning Website

Like this?
share it!

Most websites are made up of common pieces that are standard for any website. It’s these common characteristics that make websites easy and intuitive for visitors to use.

I work with business owners in a wide variety of industries, and I typically start projects by familiarizing myself with the terms and vocabulary they use so that I can understand their needs.

Similarly, when you hire someone to build your website, it’s important to have a basic understanding of the way a website works and the elements that make up a website.

While website development is a complicated and in-depth subject, a general understanding of the basics can help you communicate with your developer more effectively.

Going through this article will help you understand the basic fundamentals of the types of pages, typical sections and the most common elements found on most modern websites. By the end you should be able to identify and understand the functionalities of these basics.

Of course, it gets much more complex than this, but with this sturdy foundation you will begin to understand how a website is constructed.

Types of Pages

There are quite a few different types of pages you can have within your website that serve different needs. For the purpose of this article, we’re going to lump all of them into three categories: Homepage, Interior Page, & Landing Page.

To help visualize some of these sections, I’ll be using examples from the site I built for Gainesville Economic Development Corporation, which has most of the elements we’ll be talking about.

Homepage

The home page is where most of your clients will land. This is the page that lives on the “root domain” of your website address (like “www.ogalweb.com” not www.ogalweb.com/services“). It serves the purposes of giving a brief overview of your company, it’s services and/or products, as well as allows the user to easily find and navigate to the information they are looking for. Typically your homepage will get the most views.

There are many pieces of content that are important to have on your homepage, and that can vary some by industry.

Interior Page

All the pages that are NOT your homepage are commonly referred to as “interior pages”. If you think of it like a book, the homepage is the cover, and the interior pages are all the pages inside the cover. Most websites have interior pages like; “services”, “about us”, “contact”, etc. These pages will often be in your navigation menu (more on that later) and are easily accessible to visitors on your site.

Landing Page

A landing page is kind of like an interior page, but it’s typically not in your navigation menu, and serves a very focused purpose. Most landing pages are used for sales, to collect leads, or for products. They most often have a specific “call to action” you want the reader to take.

These types of pages are great for sending traffic to from paid ads (like Google AdWords or Facebook ads) because they remove all the “clutter” and focus the visitor on the single message you are trying to deliver.

Here’s an example of a landing page on my website: https://ogalweb.com/lp-5-features-every-website-must-have/

Download the Free Web Page Anatomy Cheat Sheet!

Typical Sections on Most Pages

Each page of your site, no matter if it’s the homepage, an interior page or landing page, is made up of different sections that help break up the content into digestible pieces.

While the possibilities are almost limitless, below are the most common sections each website contains.

Header

The header is typically at the very top of every page of your website (except for landing pages, which most often do not have your header on them). Here’s what you typically find on a website header:

Company Logo
Primary Navigation
Secondary Navigation
Call to Action
Address & Phone Number (for local, service-based businesses)

The header is a consistent section of your website that allows the visitor to easily understand who’s website they are on and how to navigate to different pages.

Page Header & Hero Sections

The section that goes right beneath the header is often referred to as the “page header”. This section usually tells the viewer the title of the page that they are on so that they can orient themselves as they navigate from page to page. Page headers aren’t necessary, and aren’t on every page, but they are very common and a good thing to have.

The exception to this rule is the homepage. Typically we refer to the section just underneath the header as the “hero” section. This is one of the most important pieces of your homepage and is meant to instantly connect with the customer through the use of a statement about the problem you solve and a call to action. This strategy behind this can get very in depth, but for the purposes of this article we’ll keep it brief.

Content Section

The content is usually the biggest part of any page, and can be made op of a lot of different sections. When we refer to the “content sections” of a page, we are most likely referring to anything that is not the Header, Page Header or Footer of a page.

This section will be the bulk of the words and images on each page.

Sidebar

While sidebars aren’t on every page, or used on every website they are still very common. Most often you see these within the content section of a page. Sometimes you will see the content broken up into 2 or more vertical columns. The sidebar is usually smaller than the rest of the content and often contains related information or navigation to related topics.

Footer

The footer (I bet you can guess) is the section at the very bottom of every page. Much like the header, the footer is usually present on every page of your website, and has a lot of the same elements that are in your header (like your logo, navigation, contact information). It serves as a bookend for the bottom of the content allowing visitors to navigate to where they want to go next.

It’s also common to see more navigation options in the footer. This is where people will put some of the links to the legal information like terms of service, privacy policies, and credits.

Common Website Elements

Within the sections of your website you can have any number of elements, including; text, images, buttons, menus, tables, videos, and much more.

Each of these elements serve a purpose and can be used in conjunction with one another to create a completely custom layout for your website project.

I will skip explaining the obvious, like text and images because I’m sure you already know you will need those things. Below are some of the elements you might not fully understand but should familiarize yourself with from the start.

Call to Action

A call to action (or “CTA”) is an important part of every website. This is where you tell the reader exactly what their next step should be. It’s always wise to try and guide the viewer through a path that is beneficial to reaching your end goal. Common calls-to-action are things like “Contact Us Today”, or “Buy Now”, or “Schedule an Appointment”. These direct messages tell the reader what their next move should be.

Button

A button is one of the most common elements on any website. Buttons link to additional content or pages and are a strong visual queue to the reader that they can click that link to go to another destination.

Primary Navigation Menu

Your primary navigation typically lives inside your header. These are the most important links to different pages within your website.

There are typically 3-7 “top level” links that you can see in the header, but some may contain sub-navigation items within a drop down menu. This goes back to your sitemap and hierarchy and helps you organize the information and content on your website. The most important links are at the “top level” and always visible, while the more narrow topics live underneath it in your drop down items.

Secondary Navigation Menu

It’s possible for websites to have many different navigation menus. The primary menu will contain the most important elements, but it’s often necessary to create a secondary navigation menu. Often you’ll see secondary navigation menus used for things like “log in”, “donate”, or “volunteer”. They are still important items, but not important enough to make it into the primary navigation.

sign up / opt-in / contact form

Signup, opt-in, & contact forms are a way to capture information from visitors without them having to leave your site to go to the inbox. You can use these forms in a variety of ways, including:

Collecting Leads
Signing Up
Correspondence
Inquiries
Downloads

It’s a great way to lower the barrier of entry so that it makes it easier for visitors to get in touch or join your email list.

Sitemap

Sitemaps are organizational or visual lists of the hierarchy of your website. It contains all of the pages and shows the relationship between parent and child pages. Sitemaps aren’t typically something you show on your website, but they are important to search engines like Google so that they can understand the structure of your site.

Planning your sitemap is one of the first steps in developing a website, like having a roadmap to all the pages and content you will need.

Wrapping Up

While the development and pieces of your website are a lot more vast than what we covered here, this overview should give you a good start on being able to communicate effectively with your web developer.

Using the proper terminology and a basic understanding of the functionality will help ensure that you communicate your needs effectively and understand the purpose behind different elements within your website.

ABOUT THE AUTHOR

Kyle Van Deusen

For the past 15 years I have helped businesses like yours increase their online presence through powerful websites, strategic marketing strategies, and recognizable brands. I want to partner with your business to help you succeed.

Hiring a web developer could be a complete waste of time and money...

Unless you know these 5 things first

The Anatomy of a Winning Website

Like this?
share it!