In this post, I’ll be breaking down and unpacking the main sections that nearly every single website homepage should include.
We call this the Crucial Content Framework. Looking exclusively at only one of these website sections, you may not recognize its individual importance. But if you zoom out and consider how each section moves into the following one, you’ll be able to clearly identify the “big picture” that your website audience will experience.
Before diving into the specifics of the Crucial Content Framework, it’s important to note that the terminology and implementation of some of these sections may change from industry to industry. For instance, a for-profit business may implement these website sections in a slightly different way than a non-profit might. Remember, we don’t want a cookie-cutter strategy, even while implementing these sections to your website’s homepage. Every organization is different and so the implementation of these sections will vary from one website to the next. However, this framework is designed to serve as a general launch point for the order and structure of your homepage’s website sections. Let’s take a look at the framework.
(In addition to the written breakdown below, feel free to watch the accompanying video for more information)
Section 1: Website header
By website header, I’m not necessarily referring to the top “section” of the website’s homepage. That’s what we’d call the “above the fold” section. Instead, I’m referring to the bar at the very top of your site. It’s worth noting that your website header typically is a site-wide feature that shows up not only on your homepage, but also on every other page of your site. That’s why it’s imperative that your site header has the right elements featured in the correct order. There are a few things I typically recommend that every website features in their website header.
First, your logo needs to be prominent and easy to find in the top left corner of the header. I’d even make it clickable so that if someone is on a different page of your website, they could simply click the logo to have it link them back to the homepage.
Next, you want to have your navigation menu featured in the middle section of your website header. Build your navigation menu intentionally. People don’t like sifting through an endless amount of folders and tabs. Put yourself in your website visitor’s shoes and think about how you can make it as easy as possible for people to find what they’re looking for in your navigation menu. I’d even make sure to put your navigation tabs in plain, simple language that is easy to understand. For instance, many churches like to use insider language like “reach in” or “reach up” or “reach out” in the navigation menu of their websites. The problem is that a first time visitor to a church will likely have no idea what that means. Regardless of your industry, err on the clarity as it relates to labeling your navigation menu.
To the right of your navigation menu, I’d recommend including a call to action button. This should be featured in the very top right corner of your website and should be an obvious button to push. When you visit a website for the first time, the top right corner is where your eye naturally gravitates toward when you’re ready to take action. An online store might have a button in the top right corner that reads “shop now,” a non-profit organization may utilize a “donate” button, while a church’s top right button may say something like “plan a visit.”
Lastly, your site may even feature an “announcement bar” in the header. Usually this is above the previously mentioned items and can be utilized to feature upcoming events, sales, or news related to your organization.
Section 2: Above the Fold
We’ve referenced the “above the fold” section of a website a few times in other blog posts and for good reason. It’s most likely the most important section of your entire website. If someone lands on your website after scanning a QR code, clicking the link on your Facebook page, or even manually typing in your URL, they’re most likely going to land right on top of this section. Therefore, it’s critical that your “above the fold” section is optimized for engagement, clarity, and eliciting action from your website visitor.
First, be sure to feature the right kind of photography in this above the fold section. Remember that photos carry significant weight. This section of your website should feature a happy, smiling person who looks as though they are benefiting from your business, church, or non-profit. Many organizations like to feature photos of their product, building, or city in this section, but a photo of happy people is far more powerful in eliciting an emotional response from your audience.
Next, we want to make sure that we’re including our compelling clarity statement directly on top of your background photo. Your audience shouldn’t have to scroll even once before seeing your clarity statement. At a glance they should have the clarity they need about your organization.
Lastly, we want to make sure that we’re featuring a call to action button underneath our clarity statement. Remember, your website audience needs to be guided and led as they interact with your site. Ideally, your intentional photo in the background of this section and the compelling clarity statement on top of it should have done a good job convincing someone to dig deeper and take the next step. This call to action button underneath the clarity statement gives them the opportunity to do just that.
Section 3: Identifying the Problem
Your audience is experiencing some sort of friction in their lives. That’s likely why they landed on your website in the first place. Maybe they’re visiting a plumbing company’s website because they just had a pipe burst at their home and they’re concerned about finding someone who can do the repair within their limited budget. Perhaps they’re visiting a non-profit or church website because they’re lonely and are searching for a community or place to get plugged in. Perhaps they want to give back to the community and feel the burden to pitch in and make a difference. Regardless, there’s a reason why someone is landing on your homepage. The goal of this section is to address that reason. What’s the friction? What’s the problem? In this section of your homepage, you’re showing your website audience that you understand the pain points they may be facing and you’re clearly listing those pain points out. You could showcase these pain points in a written paragraph, or you could list them out in bullet points with customized iconography.
For example, maybe the plumber features the following paint point list in this section of their website:
- Are you overwhelmed by the price of most plumbing repairs?
- Are you frustrated by the lack of clear communication from your plumber?
- Do you feel like your concerns are not being heard or addressed?
- Are you tired of paying for unnecessary plumbing repairs or installations?
- Are you concerned that your plumber won’t do the job right the first time?
Section 4: Position Yourself as the Solution
The previous section of your homepage was all about identifying your website audience’s friction and pain points. This section is designed to position yourself as a solution to those pain points. After all, your website visitor is on your website looking for a solution to begin with. Why not paint yourself as the obvious choice? There’s no need to be bashful. Brag on your brand. Talk about your great customer service. Your money-back-guarantee. Your 24/7 customer support. Your dedicated technicians. Whether you’re a business, a church, or a non-profit, this section gives you the chance to tell your audience what sets you apart, makes you different, and you’re solving the issues and problems that were previously addressed in the last section of your website’s homepage. Be sure to include a compelling call to action button in this section as well. You just told your audience why they should choose your brand. Including a button that they can easily click helps them to do just that.
Section 5: Clear Process
I said it before and I’ll say it again. People need to be guided. Led. Funneled. The goal of this “clear process” section of your homepage is to clearly lay out three easy steps to getting involved with your brand. You can get creative with how these steps are positioned on the screen. The traditional way would be to have three or four “blocks” that are side by side, each block briefly identifying a step in the process. But we’ve also seen this done in other creative ways, whether it be a vertical list with custom icons, a horizontal timeline using hover effects, or even utilizing website animation that trigger each step in the process to make an entrance on the screen as you scroll through down the page. You can get as fancy as you’d like, but be sure that clarity takes priority. I don’t recommend more than four steps in your “clear process” section. Three or four steps should be plenty. In addition, each step shouldn’t include an entire paragraph. Ideally, each step might feature one sentence and an accompanying icon. The final step in the process should convey the success that your website visitor would experience if they decide to partner with your brand.
For example, a plumbing company might have the following three steps featured in this section of their website’s homepage:
[Icon]
Step 1: Get a Free Quote
First, contact us to get a free quote so that we can discuss your plumbing needs.
[Icon]
Step 2: Schedule the Job
Next, we will work with you to schedule a convenient time for our team to complete the job.
[Icon]
Step 3: Sit Back and Relax
Our team will take care of everything else! You’re a click away from a stress-free plumbing solution.
Make sure to include a compelling call to action button toward the bottom of this section as well. Your website audience now knows what the first step is. We want to make it as easy as possible for them to take it.
Section 6: Testimonials
There’s power in proof. People want to hear what others think about your business before they buy from you. They want to hear what other people think about your church’s culture and DNA before they show up on Sunday morning. They want to hear what others have to say about your nonprofit’s community impact and how you’re making a difference in the world. That’s where the testimonials section of the homepage comes into play. Google reviews can also positively impact your website’s Search Engine Optimization, or SEO, but we’ll cover SEO more specifically in future resources and articles. Right now, we’re simply talking about social proof. We’re showing your website audience what others have to say about your organization in hopes that they decide to take the next step with you as well. Testimonials qualify you. They show your organization as reputable. And they elicit action.
Section 7: Lead Generator
This section of your homepage plays a critical role in your website’s marketing performance. The goal is simple. We want this section of your website to generate leads from your website visitor. But people don’t simply give out their email addresses for free. They need some sort of incentive or freebie to make it worth their while. This could be something as simple as a free pdf guide. It could show a nicely designed mockup of the pdf’s front cover and then some text that briefly describes the free resource and how it could benefit someone. Then, we want to include a form field where someone can easily type in their email address to receive the pdf freebie. The button to the form field should say something like “get the guide” or “download the resource.”
You might think that a lead generator section only applies to a for-profit business, but this isn’t true. We’ve also seen churches and non-profit utilize this section effectively. A church will likely try to earn the email address of a potential first time visitor to their church so that they can follow up with them, see if they have any questions, and hopefully get them to show up some Sunday morning. A non-profit may be trying to earn email addresses of potential donors, partners, or volunteers.
Once someone decides that your pdf freebie is worthy of their email address, you’ve earned your first website lead. At that point you could manually follow up with your lead or drop the email address into an automated email campaign.
Section 8: Footer
Like the header of your website, the “footer” section is typically a site-wide element, meaning it shows up on every single page. I’ve heard people refer to the footer of a website as the website’s “junk drawer.” I understand why one may call it that, but it’s certainly more important than a random assortment of miscellaneous items. Because it shows up at the bottom of every page of your website, you should build intentionality into crafting your footer. There are a few items I encourage every website owner to include in their footer.
I’d recommend including your logo so that your visual brand is prominent to someone interacting with your footer. Like the logo in the “header” section, consider hyperlinking this logo so that it redirects to the website’s homepage if someone clicks on it. Next, the footer is a great place to include your website’s compelling clarity statement. This normally would be positioned directly under the logo. I’d also recommend including some “quick links” in your footer. You don’t need to have tabs in your footer for every single page of your website, but perhaps the top five or six pages that someone may want easy access to. The footer is also a great place to feature social media links. Odds are, if they are interacting with you on your website, they’d also be interested in interacting with your organization on social media. Lastly, be sure to include some sort of call to action in the footer of your website. This could be to prompt someone to sign up for a newsletter, or perhaps it’s a call to action button that directs to your “shop” or “donate” or “plan your visit” page. After someone scrolls through a long homepage, this call to action button in your footer is one final chance for them to take action on your website and engage your organization.
There you have it. These eight sections of a website’s homepage may seem unimportant or random at first glance.
If you only consider one of them by itself, you may wonder why it carries the weight that it does. But remember, these website sections move in order from one to the next, to create an effective “big picture” for your website audience. If each section is built with intentionality, it creates an effective homepage design strategy that communicates the right things about your brand and elicits action from your website visitor.
