Dissecting a Successful Web Page

Learning Academy

A successful web page needs a purpose and a goal. It needs to meet these requirements for not only the visitor, but the website owner. Sometimes the website owner may have different or additional goals for the page when compared to the visitor.

Visitors of a page have a specific purpose. They either want to find information about something or solve a problem they have. The goals of a successful web page is to supply this information and/or help solve the problem. For example, solutions to these problems can include selling a specific product or service.

A web page success is also tied to how easily it is found in search engines and how attractive this listing is to your target audience.

Depending on the purpose and goals of the page determines the type of layout you want to have for the page. A page layout is made up of different sections, with each having a different objective and possibly different goals, but all should share the common purpose of the page.

In this example we will look at a website’s homepage.

The purpose of most homepages is to be a starting point, doorway, and guide to the rest of the website and the information and services it provides.

A homepage should be a starting point for most pathways to the goals of your website. A pathway describes the guided journey or pathway visitors take on a website to reach a websites goal. This goal can be a sale, newsletter signup, a submitted contact form, or other similar action. This goal can have just one or several steps before it is achieved.

A typical homepage should help convey:

Benefits

Let the visitor clearly know why they should be on your website and what your organization offers them.

Authority

Indicate why and how you are the authority on the subject of your website.

Trust

This is important to establish and can include social proof like testimonials and press coverage.

Call to Action

Remind the visitor what they need to do to get more information and/or solve their problem.

Lets take a look at the anatomy of a successful homepage, the sections that it is made up of, and what the goals of each part is.

Please note that this page of the page is best viewed on devices with a large screen.

Client Homepage Screenshot

Easy to read drop down menus used for navigation that organize your pages. This is called the Main Menu.

Allow visitors to search for any content on the website.

An important call to action for the organization that they want their visitors to see first.

Bring all of your Social Media together for easy access.

A slider is being used in the Hero section to show a number of different calls to actions which are important to the organization.

A solid colour ribbon section that goes all the way across the page with the organizations slogan.

Collect email addresses for newsletters to grow your target audience.

A Footer Menu highlights important pages for the organization.

A background image that goes the width of the page. Notice that it is wider than the the content width.

Showing actual results of the primary calls to actions listed below. The counter animation draw the eye to the results.

The primary calls to actions of the website. These give the visitors a guide to what the next steps can be.

A page wide ribbon that contains the final call to action. It contains a headline, short description, and video. Videos have a greater chance of being watched than someone reading an article with the same content.

Reaching their audience is important to this organization. This page contains several calls to action for the visitor to subscribe to their newsletter. This one is separated from the other sections to make it stand out.

Lists of important content that the organization offers their visitors. These lists automatically update when new content is added. The items are just a summary of the content offered. Clicking on an item in the list will take you to the actual content item.

The header section for the website that appears on all pages. As the user scrolls down this header sticks to the top of the screen and is always accessible. On mobile devices this header is reduced.

The footer section for the website that appears on all pages. The 3 columns of content for this section stack vertically when viewed on a mobile device.

Depending on the purpose and goals of a website, homepages can be quite different from one website to the next. The design, style, and mood of the website also has to be taken into consideration.

While every page is different the concepts used on designing a successful homepage is universal and can be applied to other page types like the About, Contact, and Service pages.

Hopefully you will find this overview helpful and can apply what you learned here when you are considering the layout, design, and content of your own pages.

About the Author

Tom Homer

Building custom dynamic websites is our specialty. With over 25 years experience in software design and development I have been helping  small businesses invest in their future.

Article Author Tom