How To Design a Professional Website Footer

In the grand scheme of things, you might think that a professional website footer holds little to no value.

But, that’s not true.

It’s okay to not pay much attention to the footer of your website if you are running a blog or a publishing portal but if you have a business website where most of your clients tune in to get in touch with you or to explore your services & products briefly, a poorly designed website footer could be a deal-breaker.

So, in this tutorial, I am going to help you design a good looking website footer that’s functional and offers a lot more than just a few links on your website.

Let’s get started.

Have a good amount of padding and spacing in between the elements

Professional website footer - spacing

Contrast is everything in design.

A good contrast and spacing can help you make the worst looking web design look decent.

The same rule applies to the footer and every other section on your website.

You don’t have to add too much spacing between the elements or else the empty space will use most of the precious online real-estate.

As a rule of thumb, when I design my websites, I use this strategy:

  • add 50px padding to the top, right, bottom, and left side of the footer.
  • add 75px padding to the elements on your footer.
  • don’t insert more than 5 vertical section/footer widgets or it will look crowded.
  • make the text stand out by using white color if the background is dark or black color if the background is lighter. I don’t like using anything other than white or black as the background color of the footer.
  • separate the footer widget section from the footer credit section using a border or by using a different background color.

This is my checklist but if you have been designing websites for a long time, you can improvise to make it look even better.

Include the most important website links in a vertical footer menu

Vertical menus with important links

Whenever you think of “Footer”, site links are the most common things that comes to mind.

Traditionally, almost all the websites today sport site links in their footer section.

So, it is not wrong to assume that we, as the end-users, are trained to look for website links in the footer section if we weren’t able to find them anywhere else.

So, make sure to add a section with links to the most important pages on your website.

For Rankwide, I have included the following website links:

  • Home
  • About
  • Affiliate Disclosure
  • Privacy Policy
  • Contact

I know the “Home” link is not really important but the list looked incomplete without this link.

Furthermore, I avoided inserting the “Blog” link as I had included a “Blog topics” widget.

I don’t have a lot of pages on my website but if it were a business website, I’d have a few more links in there.

To find out the most important pages on your website, create a list of all the pages and try to find out which ones your prospects will be most interested in.

If you don’t have too many pages on your website, you can just create a vertical menu with links to all the pages.

Insert your social media profile icons

Social sharing links

I don’t like include social media profiles on my footer or anywhere on my blogs. They are just irrelevant and bring little to no traffic to my blogs.

But, having social media icons on your website is vital if you run a business.

Many people will try to interact with you on social media.

I use Twitter to get in touch with custom support when I don’t get any replies via emails or if my problems aren’t resolved.

So, I believe, having a social media presence and links to your social media profile will greatly help built credibility and trust among your users.

Use medium-size social media buttons.

You don’t have to use to a WordPress plugin. Just download social media icons from Freepik and design your own social media icons for free.

Use a newsletter signup box for inbound marketing

Professional website footer - CTA Box

Have a product or service to sell and also happen to publish blog posts about your products and the industry?

You can increase your sales, and overall revenue by targeting your blog visitors using inbound marketing strategies.

To actively attract the prospects, you need signup forms.

Yes, you can insert a signup forms in the sidebar area of your blog posts but it would look unprofessional if you insert the signup boxes in the homepage of your website.

So, footer remains a good place to insert a minimal sign up form where users can insert their email and quickly signup for the newsletters.

If you don’t want to insert a signup box right away, you can have a CTA button along with a title. Any interested user can click on the button and access the signup form.

Make sure to include your login/register links

Login links

Many services/products based businesses have a client portal to share information, receive client inputs and share progress about the service that they are paying for.

Most client portals, usually share the login links in the header navigation section or have a dedicated banner section with the sign up, login and forgot password links.

When you visit some other websites, you don’t see these links anywhere on the website. You have to really dig in to find these links.

This makes the users frustrated and irritated.

With short attention span of these users, I’d bet that they will close the browser tab after a few seconds and signup with someone else.

To avoid this, add the following links to the “Header” and the “Footer” section of your website:

  • Login
  • Register
  • Learn More
  • Product links

As mentioned in a previous point, you must include all the important links in the footer section of your website including signup, product, login and custom support links.

A small “About Us” section

About us section

Most probably not suitable for a business website, a small “About Us” section in the footer section will help you in building a connection with your readers.

I have noticed that most blogs, and tutorial portals usually sport an about section in the website footer.

It’s not the most important widget and you can avoid using it but if you run a single-authored blog, having this widget will help in building a loyal list of readers and followers.

It doesn’t have to be long and have multiple paragraphs.

Share the most important information about yourself and have a “Read More” link for anyone who’s interested in learning more about your journey.

Use a darker color to highlight the footer section of your website

Professional website footer - dark background color for footer

Having a darker background color for your footer will help your readers and visitors in determining the start of your footer section.

In some cases, I find it hard to figure out when the footer section had started.

Many blogs and business websites that sport a blog section disable comments, have no related blog post or social media share buttons.

Soon after the blog post ends, the footer section starts and there’s no way of differentiating them.

This creates an unnecessary confusion.

If you don’t want to use any social media share buttons, comment section and related article section, the least you can do is highlight the footer section using a dark background color.

I prefer using Black or Grey to highlight footer sections on my websites.

Have a “back to top” button

Back to top button

With the long-form content being the star of the search engine ranking show, content centric webpages have become long and lengthy.

I know for a fact that nobody reads these lengthy blog posts and most of them usually skim through the content.

And, when your readers reach the bottom of the page, they might look for a way to reach back to the top without having to scroll for the next 5 minutes.

Believe me, I have gone through this painful task on some of my favorite SEO blogs.

It’s funny how User-Experience has gone for a toss to make a website fast and “SEO-friendly”.

It will not affect your search engine rankings and it will definitely not help you in making more money right away but adding a “Back to top” button will help some of your users in reaching the header section of your website, and perhaps, read more articles.

Include a search bar/icon

Adding a search bar

You cannot include all the website links in your Footer section.

If you have a large website with hundreds of pages, inserting them all inside the footer will make the footer look crowded.

So, how do make these pages available to your customers and other website visitors?

You add a search bar.

With a search bar, your users can find just about any web page on your website. If you want, you can also power your website’s search bar using Google custom search.

In WordPress, it’s relatively easy to add a search bar. All you have to do is drag the search bar widget to the footer widgets section and you are done.

These were some recommendations and checklist for business and brand websites, but if you run a blog, here are a few more elements that you can pick from when designing the footer:

The popular blog post lists

Professional website footer - popular posts

This one is strictly for the blogs and publishing portals that sell ads and make money using affiliate marketing deals.

Insert a “Popular Blog Posts” lists on your footer widgets area.

This list of articles doesn’t necessarily have to be the list of the most popular blog posts on your website.

You can create a list of the most important blog posts that you want your users to read and react to.

These blog posts can be revenue generating articles with affiliate offers or display ads that needs some push online.

Affiliate disclaimers

Professional website footer - disclaimer

Disclosing your relationship/partnership with a company or product is one of the most ethical and legally safe way of promoting an affiliate product on your blog.

Users look for answers and solutions online.

When they read your articles, they assume that it’s written with unbiased mindset.

If the product you are promoting in this info-article is worth the money, there’s no harm in letting the users know that you get a small referral commission when they purchase the promoted product.

Bluehost and most other companies legally require you to disclose your relationship with the product to comply with FTC guidelines.

The two best ways to do this are:

  • Have a separate affiliate disclosure page and place a link in the footer section of your website.
  • Insert a short affiliate disclosure in the footer section of your website.

Affiliate disclosure at the bottom of your blog posts and in the footer section is really the best way to post the disclaimer.

Again, you don’t have to post 10 paragraph describing your affiliate partnership but, having a sentence with all necessary information is more than enough.

Latest affiliate deals & coupons

Professional website footer - deals and coupons

Blogging is becoming a tough road to take when you have YouTube and other digital media competition.

So, it’s vital to make use of all the space on your website.

Although this may seem a bit unusual, I insert affiliate deals and coupons in the footer section of my niche websites.

Every now and then, someone will click on those links and it earns me a few bucks.

No matter how little, this money is made passively and I don’t have to do anything to generate this revenue. I am making money by just inserting a few affiliate links inside a footer widget.

That’s awesome.

Conclusion: Designing a professional website footer

Yes, you can add a few more elements but I prefer keeping the footer section clean and minimal with only the most relevant and useful information.

Most visitors that you blog receives are content hungry people looking for answers.

So, it’s unlikely that they scroll down to the footer section to find information about your blogging business.

But, if you don’t have any website links on your navigation menu, having them in your footer will help those few visitors that are looking to hire you or sponsor a blog post.

But, most people believe that designing a professional footer takes a long time and tons of research.

That’s not the truth.

You can easily design an informative and professional looking website footer within a few hours without anybody’s help.

Before writing this article, I had visited almost 200 website (Blogs and business portals) to see what they have included in their footer.

This list article is the summary of my research.

Whatever you do, don’t remove footer from your web design.

It looks odd.