Website Footers: Best Design Practices & Examples

Have you ever been unable to find what you're looking for in the main navigation of a website? Have you ever been considering a product on an e-commerce site but been unable to find the return policy? The frustration that this causes prompts some users to leave and find a site that is more transparent or intuitive.

用户行为的这一实例正是您的网站需要精心设计的网站页脚的原因。将页脚视为安全网，对于那些无法在您网站的其他部分中找到信息的用户。例如，通过提供指向退货政策或联系表的链接，您可以防止某些访客离开您的电子商务网站永远不会回来。

在这篇文章中，我们将解释什么是页脚，以及为什么它对用户体验。然后，我们将介绍要放入页脚的内容，并以一些最具创造力的例子来启发您。

您可能会认为，将大量时间和精力投入页脚没有意义，因为人们不关注折叠以下内容。大多数卷轴行为研究都肯定会验证这种类型的思维，包括尼尔森·诺曼集团在2018年。他们发现57％的页面查看时间被花在了折叠之上。

However, according to the study, time spent above the fold is decreasing over time as screens get larger, designers favor minimalism, and scrolling becomes normalized in general. The summary of this study states that "people will scroll if they have a reason to do it."

考虑到这一点，由于页脚为您的受众提供了导航和信息目的，因此尽管在页面上如此远，但为他们优化房地产是有意义的。您甚至会注意到，尽管尼尔森·诺曼（Neilsen Norman Group）发现，观看时间的时间降低了页面，但最终仍有上升。

Image Source

这表明用户知道页脚有价值的信息，并且可以使用它，尤其是当他们寻找特定的东西时。

Now that we understand the importance of a website footer, let’s take a closer look at what information belongs in this section of a web page.

It’s important to understand that the only requirement for designing a great website footer is knowing what your visitors are looking for. That’s why there’s no precise recipe for a website footer. There’s some standard ingredients but what exactly you put in, the amount, the order — it’s up to you.

让我们看一下您可能用来设计页脚的一些成分。

版权声明

可以说，网站页脚最重要的要素是版权通知。根据斯蒂芬·菲什曼（Stephen Fishman，J.D。）的说法legal article on Nolo，版权通知是“书面通知，指出特定作品受版权保护，并且您拥有该版权。”目的很简单：阻止任何人复制图像，动画，段落或以其他方式尝试从您的网站上窃取内容。

All that’s needed is the copyright symbol © (or the words "Copyright" or "Copr.”), the year of the website’s publication or most recent substantial update, and the name of the copyright owner. The copyright notice only has to appear once on your website’s homepage, but it can appear on as many pages as you want. It can be placed anywhere on the homepage, but is most often found in the footer.

这是一个例子HubSpot’s blog homepage。

隐私政策Link

如果您是从用户那里收集个人数据（例如他们的电子邮件地址或付款信息），则法律规定，隐私政策协议是强制性的。因此，必须起草合法规定的隐私政策，并确保该政策易于在您的网站上找到和访问。

A best practice is to put a link to your Privacy Policy in your website footer. Not only will this satisfy the legal requirement — it will also meet most consumers’ expectations since they expect to find this information in the footer. Some companies like Conde Nast will choose to include an excerpt of their Privacy Policy, in addition to a link. Here’s an example from纽约客。

站点地图

You can add a sitemap to your footer in two ways. You can either provide multiple links to sections of your website, or you can provide a single link to your XML sitemap.

The first approach is known as creating a “sitemap footer.” These footers contain navigation points that can’t neatly fit into the top-level or global navigation bars of larger sites, or navigation points that encourage visitors to browse the site. The sitemap footer onGrace Eleyae例如，包括访客首次进入网站时可能未考虑的导航链接，但想探索。

包括站点地图的第二种方法是考虑到搜索引擎机器人的设计。搜索引擎机器人将要寻找的最重要的事情之一是指向您的链接XML站点地图。Your sitemap is a file that contains URLs and information of the pages and media files you consider most important on your site. According to谷歌, search engines use this file to better crawl websites, particularly large and content-rich sites. That’s why providing a link to this file in your footer is considered a best practice for SEO.

Logo

页脚是增强您品牌标识的好地方。您可以采用一些方法。您可以包括您的商标，但以与您的标题不同的方式呈现。也许您会增加字体尺寸。也许您包括图像。也许您在徽标以下包括一个任务声明或您的品牌价值。这些只是您可以提醒访问者的几种方式，并给人留下深刻的印象。bob全站app

使者例如，在页脚中的徽标下方添加了一些品牌。它写道：“我们为连接世界创造了可能性。大胆。”这样，读者即使没有阅读有关页面的阅读，读者也会对公司的表现有所了解。bob全站app

Contact Information

You want potential leads to be able to get in contact with you as easily as possible. For that reason, website footers will often contain contact details like a business email, phone number, or mailing address. Or it might simply include a link that brings you to a contact form.

The luxury boutique hotelBellevue Syrene将其网站页脚网格的一部分专门用于其联系信息。为了确保潜在的客人可以按照他们想要的方式与酒店联系，页脚包括一个地址，电话号码，传真号码和电子邮件地址。

Social Media Icons

Social media这是潜在潜在客户可以与您联系的另一种方式。因此，包括社交个人资料链接被认为是最佳实践。这也是一种简单的方法，可以在平台上发展追随者。了解这些好处，这是有道理的72％的网站在页脚中包括其社交媒体网站的图标。

这是关于动画社交媒体图标的展示Rewind App by Flatstudio。

Email Sign-up Form

Ideally, you want to present an email sign-up form to a visitor who understands the value of your content and wants more. A visitor who has scrolled to the bottom of your web page is a likely candidate. That’s why many websites use their footer as an opportunity to increase their subscribers.

For example,Chobani在其页脚中包括一个简单的电子邮件选择形式。上面的标语“获取最新鲜的Chobani新闻”有助于设定订户对他们确切注册的期望。bob官网官方网站

现在，我们知道我们可以将哪些可能的内容和元素放在网站页脚中，让我们看一些可能激发您灵感的真实示例。

网站页脚示例

如上所述，只要它反映您的unique brand identity并针对您的听众量身定制。让我们看看一些完全做到这一点的示例。

1.Lorelei Londres

Lorelei Londres是意大利的一家豪华酒店，努力提供款待和魅力。它的页脚在这两个方面都取得了成功。

Anticipating any question from a site visitor or guest, there’s contact information on the left, navigation links at the center, and a newsletter opt-in form to the right. On the right, there’s also the privacy policy link as well as the submit form directly in the footer. Below there’s another link to the privacy policy, cookie policy, and the agency that created the website as well as the copyright notice. All of this is placed against an image background depicting someone in a pool on a balcony overlooking a beach. The result is a footer that’s standard, but perfectly aligned with the brand.

2.超流体

超流体is a vegan beauty brand designed for anyone to use. Like Superfluid’s mission, its footer is basic but also redefines what basic means. Superfluid’s footer contains the information you expect — a well-organized menu of help articles, legal info, and social media accounts to follow, an email sign-up form, logo, and copyright info — but not in the way you might expect it.

商标的其他文本相比是巨大的the footer. Beneath the footer, you see icons representing its value propositions — cruelty free, vegan, easy to use, no mineral oils. Below that is a traditional copyright notice as well as the accepted payment methods. In short, this footer provides important information to address any questions that either potential or existing customers might have in a bold but clean way.

3.样条群

样条线组是一家机械和电气工程公司，重视有效的沟通和简单性。

This is clear in its footer. A minimalist design, the footer features black text on a white background. There’s an address and links to its Instagram, LinkedIn, and Careers page. Below that is much larger text. But unlike Superfluid, it’s not Spline’s logo or brand name. Instead, it’s a contact link with the simple but inviting CTA: “Let’s talk.”

4.Art4web

Art4Web是一家创意的数字和品牌工作室，致力于制作独特的网站，移动应用程序和品牌设计。它自己的页脚部分是独特设计的一个示例。Art4Web没有为样条线组等潜在客户提供一个接触点，而是提供三个接触点。潜在客户可以通过电子邮件发送电子邮件，填写表格以获取其项目的报价，或给他们打电话。或者他们可以选择在以下图标代表的任何社交媒体平台上连接。

5.GoOeders

Goooders是一个在线平台和一系列销售道德和可持续产品的酒店精品店。其任务是帮助人们在购买的产品和旅行方式中做出更好的选择。

由于Goooders是一个专注于行动的品牌，因此页脚非常注重动作是有道理的。大多数页脚部分都专门用于电子邮件注册表格。该表格的背景是色彩丰富且动画的，因此您的眼睛被该部分吸引了。以下是一个简单的白行，其中包含版权通知，联系人链接，链接到GoOeders的Cookie政策和条款和条件以及社交媒体图标。对于想要优化其页脚进行转换的网站，这是一个很好的模型。

6。ajeeb

Pranjal Kaila（也称为Ajeeb）是一位独立的跨学科设计师。根据his bio，他的专业之一是“创造互动的空间和感官体验”。这在他的网站的每个部分（包括他的页脚）中都很明显。

他的页脚包含基本信息 - 链接到他的素描本和工作，联系信息，社交媒体图标，版权通知以及与他的隐私政策的链接 - 但它们的演示是独一无二的。在黑色背景下，白色版式看起来像星座。光标像聚光灯一样。当悬停在任何链接上时，字体变成大胆和蓝色。

设计您的网站页脚

Designing your website footer requires careful planning. It’s a section where humans and search engine bots look for important information that they haven’t found elsewhere. You want to make sure you’re providing them with the content and elements they need so they continue to explore your site, rather than exit out in frustration.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.