Footer

Website design is constantly changing. Designers and user experience experts continue to bombard the market with their ideas. From new colour combinations, changing image-text arrangements or recommendations of where to best place individual media elements – the plethora of tips can be confusing and overwhelming and leave website operators questioning whether their websites are still relevant at all. But there are some things that never change! Aside from a menu, all websites stand on the same structural element – the footer. In this guide, we explain what a footer is, best practices for designing one, and its advantages.

Using @media queries in the Cascading Style Sheets (CSS) website information can be adjusted for maximum user-friendliness on mobile screens.

The footer signals the end of a web page. The implication is that the user cannot scroll further and there’s no more content to view. Users who scroll to the footer are generally looking for additional content. That’s where a website footer can come in particularly handy by linking to special or additional content. Footers give websites a professional look because the basic information contained here is always accessible.

The most important function of the website footer is to provide an opportunity for additional content and promote a more user-friendly website structure, for example, by compacting the header.

When you’re looking to integrate your website footer in a meaningful way, it’s best to take a look at your content and assess which components should or must be supplemented with repeated information. One elegant solution is to add separate menus to the footer. Content management systems provide so-called widgets to this end. A clear menu structure ensures that the footer retains the same design throughout.

The footer should be clearly separated from the main content of a website. This can be achieved by using different background colors, contrasting the area to the main color of the website, adding a line to separate blocks of content, or any combination of the aforementioned. As always, less is more. You can divide the section into two to three logically connected content sections. Leave enough space between these sections, so-called white space, to avoid visual overloading. Pay close attention to the overall balance between the unique design of your website and how clear the content is because the website footer is often the final impression a user has of your website.

There’s no hard or fast rule as to what information you should include in a footer. Relevant website content is often linked in the footer. Here are some suggestions.

A web shop could use a footer to display product categories or website sections, for example:

Collection

• Running shoes
• Walking shoes
• Health shoes
• Insoles
• Shoe care products

News websites or blogs may wish to list their latest posts in a dedicated footer widget.

The website footer is a good spot to place mandatory legal information because it will be visible across all pages and sub-pages of a website. Such information could include links to an imprint and a privacy policy. Web shops could also point to their terms and conditions and cancelation policy in the footer. Not only are you conforming to legal requirements, but you’re also improving visitor trust in this way. A great addition for shops or service providers is a list of payment, delivery, and return options. Other ideas to boost trust include certificates, seals of approval, positive user feedback, and an SSL encryption notice.

You can improve the service of your website by adding contact details, and where applicable, times of availability. A link to frequently asked questions (FAQ) may be useful if you’re selling products or services. If your web shop has a physical store, you should add your opening times and a map of how to get there to your footer. Just as easy is the integration of Google Maps, for example.

But beware! When embedding online maps, you need to adhere to data protection rules. The transfer of user data to servers usually requires user consent. You could embed a symbol card, a photo and text to detail any data transmission. Please note that some map service providers expressly prohibit the use of blurred representations of their maps (e.g., Google Maps).

The situation is similar with social media platforms. It’s best to include an icon that links to Facebook, Google, Twitter and Co. The direct integration of their services may lead to unauthorized data transmission and could constitute a violation of data protection regulations. Luckily, when it comes to social media, there are now many web tools available to help with legally compliant embedding.

The website footer is also useful to entice users to register for newsletters. Email marketing initiatives are a great way to foster customer loyalty and trust.

If your services are accessible via an app, you could link to the relevant app stores in the footer. Because a growing number of users are accessing the web from their mobile devices, apps make for a useful addition for some businesses.

When you add your website’s main menu to the footer, you’re making it easier for website visitors to navigate your page, because they don’t need to scroll to the top of the page again (with the exception of the so-called sticky menu). A display of your sitemap can be used to link pages internally.

Working with a content management system? In that case you can test the best arrangement of menus by placing them in different positions across a website. You’ll be able to readjust the design quickly if it turns out that some areas don’t work. Don’t forget to optimize the structure of your navigation to improve the usability of your website.

Website visitors tend to rate content that is included in the top menu and also the website footer as more important and worthy of a read. This can boost the time a visitor spends on your page which in turn improves your website’s SEO ranking. Search engines are allergic to so-called “duplicate content” – content that appears at least twice (or more) across a website. Because the footer is usually copied across every page, long text passages will be considered duplicated by search engine crawlers. You can avoid duplication by saving your content to a separate page that you link to from the website footer.

Below you’ll find some examples of footers that implement the requirements discussed above in different ways.