The Anatomy of a Strategic Website Footer
The footer of your website appears on every page, but is often treated as the ugly duckling when it comes to design. But having a well-designed, strategic footer is a fantastic way to provide value to your online visitors and establish your expertise, as well as pull together your site design.
When it comes to designing your website’s footer, the most important thing to consider is the content you need to include. This will determine how big your footer needs to be and if you should use columns or one line of text.
What your footer should include
For most business websites, I recommend including the most important links from your website. This usually includes:
your services
your blog or podcast
free resources (if you have a single page people can visit)
your contact page
your newsletter (either as a link or a form)
I also like to include social media links, either with social icons or as text. You don’t need to include links to every social media platform that you’re on - just the most important ones for your audience.
If you have more than five links, it’s easiest to organize your content into columns based on a category. These can be things like Learn or Education, Follow or Connect, and More Info.
Footer design including columns for organizing important links and featuring social media icons.
In addition to the important links that you want visitors to navigate to, the footer is also the best place to include links you need for legal purposes. This includes links to your Privacy Policy, Terms & Conditions, and Refund Policy (if applicable).
You should also include an up-to-date copyright notice with the copyright symbol ©, year, and your business name. Note: you don’t need to include both the copyright symbol © and the word copyright.
You can also include links that are important to the design copyright, including a link to the designer’s website and links to any images or graphics that require attribution.
Footer design with important links and section to join the newsletter.
Simple footer design with policies, contact information, and copyright.
Website footer design tips
Once you know what links you want to include in your footer, it’s time to start designing. You can either keep things simple with a solid color background and basic text or add visual interest with patterns, images, and graphics.
The key to a strategic footer is to keep things legible and not have it be too big so that it overwhelms your website visitors.
Keep it tight – you don’t want a website visitor to have to scroll to see your entire footer. It should all fit onto the screen at one time.
Use a bold or dark color from your brand’s palette to finish the page with a bang.
Don’t overdesign links – consider removing underlines or special styling that may be inherited from the rest of your site.
Leave lots of white space – keep a lot of space around the content of your footer for legibility.
Don’t hide important resources or links – other than your policies link, the footer should not be the only place you link to pages of your website.
Make it full-width – if you’re using a colored background or including your Instagram feed, your footer should go to the edge of your browser window. Cutting off the color partway will look unfinished and can ruin an otherwise good design.
Consider including images – this can be your Instagram feed (learn how to make it full-width), your logo, or the best images of your work.
Column-based footer design with logo, four columns, and newsletter signup.
Footer with important links on the bottom and call-to-action sections above.
Designing a footer in Squarespace
When designing your website footer in Squarespace, there area few things to keep in mind. First, most your footer’s design styles will be inherited from the overall design settings, including font and font sizes. You have the same options for blocks and can use the same CSS tweaks and target just the footer section.
Second, it’s important to know that if you’re using Brine, your footer is made up of three different sections, the top, middle, and bottom. While the Style Settings will affect the entire footer, you can target each separately using CSS.
Third, the best way to start your footer design is to leave the layout as “Stacked” in the Style Settings. This allows for the most customization and will allow you to use the CSS below.
Footer design featuring bold colors and full-width Instagram feed.
Squarespace footer design tweaks using CSS
You can use the CSS below in the Custom CSS panel to further design your site footer and make sure everything appears as you’ve envisioned. These first two CSS codes won’t make a big visual impact, but will make sure that other CSS doesn’t make everything look strange.
1. Make sure your footer spans the full width of your website instead of leaving white bars on the sides
// Base CSS for footer design changes
.tweak-site-width-option-full-background .Footer-inner {
max-width: 100%;
}@media (min-width:820px) {
.Footer-inner {
padding: 0px 0px;
}
}2. Adjust the width of your footer to match your site width for the best display and alignment
// Adjust width of footer content (change max-width to match your site width)
.Footer-blocks--top .sqs-col-12, .Footer-blocks--middle .sqs-col-12,.Footer-blocks--bottom .sqs-col-12
max-width: 982px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
Simple footer design in brand color with links to important pages and copyright information.
You can also adjust the background color of each footer section separately. I recommend leaving the background color of your footer as white (or the background color of your website) in the Style Settings and change it with Custom CSS. This prevents your footer color from showing up in odd places as your website loads.
1. Add a background color to a specific section of the footer
// Set Footer Section background color (change top to middle or bottom as needed)
.tweak-footer-layout-stacked .Footer-blocks--top {
background-color: #003c56;
}2. Add an image as the background of your footer for added interest
// Add an image as the background of your footer bottom footer (change top to middle or bottom as needed, change height as needed)
.tweak-footer-layout-stacked .Footer-blocks--bottom {
background-image: url("imageurlhere.jpg");
height: 50px;
background-repeat: repeat-x !important;
background-size: cover;
}
Branded footer design with three columns of important links, copyright and policies, pattern, and brand submark.
You can (and should) adjust the fonts and sizes of copy in your footer to make the design cleaner and more streamlined. You don’t need to use the larger font sizes here that you do on a text-heavy page. Just make sure to check your design on mobile and make sure it looks good on all devices.
1. Make your footer text smaller than on the rest of your website with Custom CSS.
//Reduce the size of the text in the footer (add or remove any heading tags used)
.Footer h3, .Footer h2, .Footer p {
font-size: 90%;
color: #ffffff;
}2. Remove the link underline and instead use a hover color to indicate the presence of a link.
//Set the text color and remove the link underline (change h2 to any headings you’re using)
.Footer h2 a, .Footer p a {
color: #ffffff !important;
border-color: transparent !important
}//Set the link hover color
.Footer h2 a:hover, .Footer p a:hover {
color: #ffcc02 !important;
border-color: transparent !important;
}
Colorful footer design with Instagram feed, links, and brand icon.
Finally, you might need to make adjusts to the design on mobile and to prevent overflow of any images or patterns.
1. Adjust the mobile padding as needed to reduce the amount of padding at the top of the footer on phone displays
//Adjust mobile padding
@media screen and (max-width: 640px) {
.Footer-blocks.sqs-layout .sqs-row .sqsblock:first-child {
padding-top: 0px !important;
}
}@media screen and (max-width: 640px) {
.Footer-inner {
padding: 0px;
}
}2. If you’re having issues with your design changes leading to a scroll bar on the bottom of your website, you can eliminate the overflow with this code.
// Code to remove the overflow site issue:
.sqs-layout > .sqs-row {
margin-left: 0px;
margin-right: 0px;
} .yui3-js-enabled {
overflow-x:hidden;
}Footer design can be more complicated that it seems at first glance and often takes designers like me quite a while to perfect. Because your footer appears on every page of your website and acts as the epilogue to the design, it’s important to spend time making sure that it includes the right information to help your visitors, drive conversions, and fits with the rest of the site design.
