Building Functional Footers

Jason Tselentis in Learning on September 11, 2015

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.

How and Where Footers Function

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.

A spread with footers on the left and right page set in the News Gothic™ typeface. The folio, or page numbers, appears beneath the footer.

A website with a bare bones footer set in the News Gothic™ Bold typeface, aligned left with the navigation and section content.

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
• Terms of service, terms of use
• Privacy policy
• Cookie policy
• Timestamp of recent update(s) or publication(s)
• Main menu or submenu content repeated
• Frequently accessed links

Iconography, Graphics:

• Brand identity
• Affiliate logos
• Corporate partners
• Icons associated with navigation
• Social media buttons

To Grid, or Not to Grid…

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.

Here’s too much in too small an area. Making the footer span from the site’s left to right margin by adding text and button content has a forced, even uncomfortable feeling.

Centering the footer in this case makes everything feel off balance, and breaking the site’s structural integrity.

Reducing the content, and spreading the load balances the layout.

Footers can be wide and deep, and set in columns. A red-colored ornament from the Wingdings® typeface is used to close a section article right before the footer begins where the footer’s typography is set in the Clarendon® and News Gothic typefaces.

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.

As a user scrolls, the footer set in the ITC Franklin Gothic™ Family floats with the scroll until it sticks to the top of the site and a heading and subheading in the Clarendon light typeface is revealed.

The Backend

A site with a vast number of pages would benefit from having its menu as well as its footer as an include. Includes can be done with PHP, ASP, JavaScript (JS), or jQuery. If those methods sound unfamiliar, or even if you are familiar with them and they’re too challenging or time-consuming to execute, consider creating the include using standard HTML and server side includes (SSI).

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.

Hammers and Hamburgers

“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.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW magazines. Mr. Tselentis also has four books to his credit on design, typography, and design history.