Sure, your website’s footer is the last thing people will probably see on your site, but that doesn’t mean you should skimp on the typographic details. In fact, if you consider the axiom save the best for last then you should put as much thought into the footer as you do the rest of your site.
In print, a running footer shows readers where they are in a book or magazine with a title, chapter, section, or other designator appearing outside of the main body content. Each page will have its own running footer, along with the page number, known as the folio. One section may have running footers stating Section 1 and when you arrive at the next section it will change to Section 2, and so forth. Feet and folios can appear in both printed and digital documents.
Much like footers and folios in a book, a website’s footer is separated from the main content, often appearing at the bottom, but this bottom-dweller is anything but trivial. Browse the web and you’ll see footers with a variety of typographic and graphic bits and pieces essential to navigating a site, and in some cases helping you get to content of the utmost importance.
• Typographic Content
• Address(es) and telephone number(s)
• Location(s) you’re accessing the site from
• Copyright information
• Legal statements
• Timestamp of recent update(s) or publication(s)
• Main menu or submenu content repeated
• Frequently accessed links
• Brand identity
• Affiliate logos
• Corporate partners
• Icons associated with navigation
• Social media buttons
Will your footer have everything and the kitchen sink? Maybe it’ll be bare bones. Whether large, medium, or small, use a grid to organize it, and consider how the footer locks up with the surrounding content.
What about multifunctional footers? Or multi-positioning your footer? You might be asking, What is that and why would I need it? If you have an image-heavy design, and want the navigation to be secondary when people arrive at your site, then make the navigation a footer—only momentarily. When the site loads, a sticky footer affixes the navigation to the bottom, but on scroll, it floats to the top to become a top-menu.
When the primary file and included file are in the same directory on your server, this line will add the include content:
<!–#include file=”your-file-name.html” –>
SSI lets you dynamically add content into an HTML page easily, with your primary filename ending in shtml, shtm, or stm rather than html to process the include content, which could be html, htm, txt, or inc.
When not on a server, and existing on their own, the ssi-titled files have separate HTML working independently of one another. But when they’re both placed on a server together, the ssi-footer.html gets placed into the ssi-demo.shtml file. The added bonus? If you have multiple pages in your site, and need to update the footer, you only have to update the single ssi-footer.html file for it to propagate across the entire site.
“I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.”—Abraham H. Maslow
For all the love we can give the footer, a case could easily be made to have no footer at all. You could put everything a user needs into a hidden, collapsible menu, aka hamburger menu, a navigational device I wrote about in an article on website menus and navigation.
Rather than approach each site with the same set of tools, like a hamburger menu or the same footer designs, consider the content, user, use cases, and site evolution. Instead of always using a hammer or a hamburger, hammer away at the footer until you’ve designed something worth showing off—even if it is only at the bottom.
Start your free fonts.com web fonts subscription todayStart Subscription