There are countless articles out there about what your website footer needs. They’ll say you need this, and don’t forget that, and they’ll tell you how it’s the perfect place to hide all those small lonely pages.
Well we asked industry professionals a few questions about the crucial elements of a great footer to help you design this prime real estate on your website. So let’s dig in and find out what we should do with your forgotten website footer.
Know what the purpose of a footer is.
Social media apps and news sites often opt out of footers. But why is it important to have a footer if you’re, say, a small business owner or even a large corporation?
Julia from GrowthX Academy, likens the footer to “the feeling you get when you’re reading a book and it ends.” She explains how “this can give a sense of relief to the user.”
It can be important to have a footer but it’s also about who your site is designed for. As Andy Volpe, a UX Designer from GitLab, says:
“It depends on your company, your industry, and what your site is intending to achieve.”
Currently, Andy is working on the GitLab application where their app does not have a footer. However, on the marketing side, the GitLab site does include a footer.
“Your footer says, ‘Hey, here is the bottom of the website.’ Many social media platforms don’t have a bottom to their website. They’re using what we call ‘infinite scroll’.” He explains.
“And without this cue to the user at the end, we end up with this empty area. A field of color that’s just there. And so a footer is just some sort of area that’s an admission to the user that this is as far as you can scroll and that’s it. And it grounds them so that they’re like, ‘Oh yeah, this is a footer.’ ”
As Andy describes, this structure has been around for a while and many users expect it and look for it.
“We know at the top there’s something. Maybe in the middle there’s this area where I might be taking an action. And it’s got this thing at the bottom, which is a footer, that has a collection of links and navigation items for me in case I get down this far and I haven’t yet found what I’m looking for.”
🎬 Learn what Slickplan can do!
We filmed a short video to show you exactly how to use Slickplan
Consider information architecture from the start of the design process.
There have been many UX Designers who have spoken about starting with the information architecture process. It’s not ok to just use your footer as a catchall for whatever lonely page you have. That bottom end of your website can be prime real estate. You need to use it well and really think about what you want to help the user with next.
Think about it… you’ve scrolled down to the end of the website and the three, maybe four, calls-to-action during the scroll down didn’t pique your interest. “Buy this” or “read that”, didn’t nudge you to click. The people that reach the bottom of your footer want to find something else. You need to keep this in mind when you’re designing for the user who hasn’t found what they’re looking for… yet. Make sure you help them get to where they need to go.
Sin Leung, a product designer at Pypestream, says her day-to-day may include everything from running design thinking exercises to having interviews with internal and external stakeholders. She’ll make sure to do storyboarding to help understand the end to end customer journey.
And while you’ll think about all of this for the rest of your website, it’s still important to think about it for your footer too.
When you’re designing your website, Sin explains that you need to think about how the footer is, in relation to everything else you’re designing.
For example, what will be in your header? Maybe you can add the same links from your header, down below, to help guide those who scrolled straight down and weren’t caught by anything. Your users will appreciate the second look and will be happy they didn’t have to scroll back up or leave.
Take a look at Webflow’s Ecommerce page for an interesting footer design. This design takes into account the needs of potential users and directs their experiences accordingly
Visual hierarchy matters for your footer.
Though this is more of a UI concept, rather than a UX concept. Sin Leung notes that it’s important to keep things aligned in your footer.
“[Your footer]shouldn’t be a giant block of text.”
Sin Leung elaborates on the visual aspect of a footer. She explains that the footer is an area that needs to help guide the user to where they need to go. For example, your footer shouldn’t be filled with icons if you’re building a website for marketing purposes.
Icons can be useful when building an app in the footer navigation but aren’t very helpful for marketing websites.
Andy Volpe from GitLab agrees on this topic and reminds designers that “your footer should not be a catchall, but you should keep in mind your users’ needs when encountering it.”
It’s important to stay away from the tendency to constantly stuff things down there. Things should be simple and clean and should help navigate the user.
Don’t dump all your marketing collateral at the bottom of your website.
The bottom of your website may seem like a good place to add ways to capture potential clients and customers. But that isn’t the main function.
If your past calls-to-action weren’t effective, your user will probably not respond to the same message in your footer.
Your footer should be there to help give your users the last few pieces of information; maybe a small reminder of what they’ve scrolled past already. Sepy from Realty Ninja tells us it’s worth bearing in mind that visitors usually scroll to your website footer if they haven’t found what they’re looking for on your main navigation, or if they’re doing more extensive research into your company. Ultimately, though, it should be kept simple.
Save that flashy marketing collateral for elsewhere and plug it in where it belongs.
To make things easier for you, here’s a small list of useful things to include in your footer:
- Social Media Icons: This is especially useful if you keep your social media up-to-date. On the other hand, it’s not so useful if your social media hasn’t been updated in a while.
- B-Corp: If you have any special certifications, like a B-Corp, maybe you’d like to remind your user about this. Your footer is a good place to include this.
- GDPR, Legal and Copyright info: Your footer is a great place to keep these pages. Your average user may not need this information but it’s still important to make these pages accessible to keep your ducks in a row.
- XML Sitemap: We’ll go further into this below, but it’s crucial to add a sitemap that’s easy to find for a site crawl. What good is your website if no one can find it when they search on Google?
Share & refine designs with Slickplan
Add mockups from Figma or your computer to ensure UX/UI is moving in the right direction.
Remember to create a sitemap, or include the one you already have, in your footer.
Speaking of your XML Sitemap, there are many reasons why your footer is important beyond your need for a full, end-stop at the bottom of your site. As Julia DeBari says, “it’s especially important for your SEO needs.” Your XML Sitemap will help search engines navigate through your website.
Deciding what to include in your footer can be tough. This is why Slickplan offers an easy way to plan out your footer. Align and stack cells within the sitemap tool to represent columns and sections of your footer. Then you can easily drag and drop components of your footer into different columns. You can then reorder them easily and test out scenarios to see what works best.
You can easily share your footer plan, and more, with colleagues, clients, and other stakeholders using Slickplan. Collaborators can leave feedback, create alternative versions, and finally; share with their development team when it’s ready to roll out!
Facebook
Youtube
Twitter
LinkedIn
Vimeo
Codepen
Dribbble
Pinterest
