网站页脚设计最佳实践:放在底部的27件事

分享这
安迪Crestodina
分享

这是一个n internet story that happens a million times a day.

薇薇安访问了一个网站……但是她没有看到她要找的东西……她向下滚动了一点……但是她还是找不到它……再滚动一点……仍然不在那里……然后她一直向下滚动到页面的底部……就在那里, 在网站页脚. 她在找的线索!

网上到处都是, 网站页脚扭转了局面, 像安全网一样抓住访客, 在他们狠狠地砸到页面底部之前.

网站页脚的目的是通过在网页底部添加信息和导航选项来帮助访问者.

Website footer design is 关于 choosing what to include, 目的是帮助访客和满足业务目标.

页脚到底有多重要?

这些都是重要的选择,因为 页脚高度可见. 很多游客都看到了它们. A 研究Chartbeat 调查了2500万个网站访问量,发现访问者向下滚动数千像素. 页不嫌高,脚也不嫌远.

scroll-depth

如果你对访问者在你的网站上滚动的距离感到好奇, 有一些付费工具可以显示你网站上的“滚动深度”. Lucky Orange, Crazy Egg 和 ClickTale are a few examples.

27个可以在页脚的东西

你应该如何设计你的网站页脚? 这里有27个想法和例子,从最常见的内容和功能开始. 向下滚动这个列表,查看十三水游戏自己的指南和最佳实践,了解在页脚设计中应该包含什么.

1. 版权

If your footer had just one element, this might be it. 年份和版权标志. 这是一种很脆弱但很容易对付的防御手段 网站抄袭.

专业提示:一小段代码就能自动更新年份.

2. 网站地图

这是在页脚中发现的最常见的链接,链接到HTML版本的站点地图. 这些链接很少被访问者点击, 但像XML站点地图, 它们可以帮助搜索引擎找到东西.

网站地图

3. 隐私政策

这 is the second most common element in footer design. 它通常会链接到一个页面,解释网站收集的信息, 它是如何储存和使用的. 对于大多数网站, it’s 关于 tracking (分析 和 remarketing), 表单提交和电子邮件注册.

需要隐私政策? 十三水游戏使用 TermsFeed 来生成十三水游戏的或使用这个方便 免费隐私政策生成器.

4. 使用条款

的 “条款 of use” are a bit different from privacy. 他们解释访问者访问网站的目的. 就像免责声明一样,他们声明通过使用网站,访问者同意某些事情.

对于高度规范行业的网站,你可能想把文本放在页脚.

条款

如果法律文本至关重要,将其添加到页脚将确保您有最大的覆盖面. 你每一页都有附注.

5. 联系

访问者希望在标题的右上角找到联系信息. 这是一个 十三水在线游戏标准. 在页脚的右下角(或中间)找到一个“联系人”链接也是标准的.

这应该是一个连接到联系页面的联系表单,而不是电子邮件链接. 使用联系人表单而不是电子邮件链接的理由有很多.

  1. 表单提交很容易在分析中跟踪目标完成情况.
  2. 的 visitor may not be on a computer that they use for email.
  3. 表单将访客发送到感谢页面,这可以提供更多的信息和行动呼吁.
  4. 表单向访问者发送自动回复的电子邮件,再次,更多的消息和cta.
  5. 表单可以将提交的内容保存到数据库中,以防电子邮件无法通过.
  6. Forms can connect to marketing automation 和 other systems.
  7. 表单可以询问特定的问题,并根据答案向特定的人提交.
  8. 电子邮件链接是垃圾邮件的磁铁.

所以把邮件链接从页脚去掉! 事实上,我不建议在你网站的任何地方放一个电子邮件链接.

联系

网站有很好的文案, but a 联系 would have been better than the email link.

6. 地址及地图连结/方向

地点信息是访问者期望在页脚中找到的东西. 这也是告诉谷歌你在哪里的一种方式,这对有本地客户的企业很重要. Linking to the map is a h和y way to help visitors find you.

当程序正常, 这个地图链接会变成一个手指大小的按钮,供移动用户使用, bringing up the map app on their 电话 or tablet.

方向

7. 电话及传真号码

一样的地址, 一个带有当地区号的电话号码是谷歌的一个证据,证明你是一个当地的企业. 喜欢地图按钮, 在移动设备上查看电话号码时,应该自动转换为可点击按钮. 利用拨号!

电话

8. 导航

Here’s where your footer can rescue falling visitors. 如果他们走到这里,肯定还没找到他们要找的东西. 是时候提供更多的选择了.

过去几年出现了一种叫做“胖页脚”的可用性趋势,这意味着除了上面列出的标准项目之外,还要添加更多的内容, 从导航.

页脚现在通常包含相同的链接,你可以在标题导航的“超级菜单”下拉菜单中找到. 但这并不一定能让访问者从你的页面上消失. 记住,这些访客并没有找到他们在上面寻找的东西.

这里有一些 sources of ideas for footer 导航:

You don’t have to just repeat your main 导航. You also shouldn’t just add your entire 网站地图. 这 forces visitors to dig through a pile of links. 这是怎么帮助?

导航

9. 社会图标

十三水游戏喜欢来自社交网络的访客. 但十三水游戏不喜欢十三水游戏的访客离开,去脸谱网、推特或YouTube. 如果他们这么做了,他们就不会回来了. 这就是为什么十三水游戏的设计师几乎从不把社交媒体图标放在网站的标题中.

页脚是添加图标的最佳位置,将访问者吸引到社交网络. When we analyzed the top 50 marketing websites, we found that 72%的人在页脚包含社交媒体图标.

footer-design-社会-graph

这里有一个很好的例子 Rafal山竹.

社会

10. 社交媒体的小部件

有些页脚超越了图标,使用了一个真正的社交媒体小部件. 这些显示了来自社交媒体网络的最新帖子,嵌入在页脚.

只有当你活跃在这个网络中,并且对你分享的内容有坚实的编辑标准时,这才有意义.

Caution: If you use such a widget in your footer, 社交媒体 posts will appear on 过y page on your websites. 如果你让实习生来管理你的社交频道,风险就更大了. 苹果蜂学会了这一课 困难的方式.

11. 电子邮件注册

网站页脚已经成为一个非常常见的地方让访问者订阅. 十三水游戏的网站标准研究发现,24%的顶级营销网站在页脚有一个注册框.

footer-design-signup-graph

真正的, 电子邮件注册更有可能发生在访问者获得价值的页面上, 比如一篇有用的博客文章, 让访问者从页脚订阅也不是一个坏主意.

页脚注册框应该仍然遵循 电子邮件注册最佳实践, offering 社会证明 (how many have signed up before?) 和 setting expectations (what with the subscriber receive? 多长时间?).

一个单独的带有提交按钮的小电子邮件地址框不太可能转换得很好, 像这个家伙…

email-signup-footer

12. 登录

并不是所有的游客都是有前景的. 有些访客可能是雇员、合作伙伴、联属公司或经销商. 如果有一个登录区为这些人,页脚是最好的地方.

的se people come back often 和 know where to find things. 不需要在标题中使用有价值的营销不动产. A little 登录 link in the footer is fine, like ATI 是否在这里.

登录

13. 新闻

另一种没有前途的是媒体. 实际上,只有1%的访问者是记者和编辑. 所以不要在你的主导航中浪费宝贵的空间来放置新闻链接.

如果有媒体的人碰巧来访,他们会向下滚动,找到它.

14. 网站搜索工具

如果他们没有在标题中找到它, in the 内容 area or in any of the footer links, 网站搜索工具是终极的安全网.

搜索工具在网站页脚不像电子邮件注册表单那样常见, 如果你用一个, 确保标签清楚.

斯莫利钢圈 website features a 快速搜索 tool for products, helping visitors jump right into the catalog from any page.

快速搜索

15. 图片

如果你真的想修饰你的页脚,添加一个图像到它. 这是一个为网站添加个性的机会.

梅森-迪克森针织以南 footer features a picture of Kay 和 Ann, the two founders.

关于

16. 迷你画廊

为什么不去做个足疗呢? 而不是一个图像,添加整个画廊.

实验声音工作室 有一个画廊的照片在页脚. Clicking a photo brings up the image within a lightbox.

画廊

17. 品牌

图片 are another chance to reinforce the br和. 这是一个很好的地方使用你的标志的替代版本或使用你的标志以不同的方式.

人类与自然中心网站 uses the original version of their logo in the footer, 哪里头包含一个简单的, 清晰的文字处理他们的名字.

品牌

18. 你的使命. 你的价值观

商标是好的. But why not tell visitors why you’re in business? 页脚是展示你的旗帜,告诉他们你的立场的绝佳地方.

更好的政府协会 网站页脚不仅重申了他们的使命,而且通过右侧的数字显示了他们所产生的影响. It’s impossible to miss why or how they do what they do.

任务

19. 关键词搜索引擎优化

页脚中的文本是每一页上的文本. 所以这是一个很好的地方来表明你和谷歌的相关性. 如果你把你的任务写进去, 你的价值陈述或“十三水游戏”的宣传, use this as an opportunity to include your primary keyphrase.

注意:用于SEO的页脚文本多年来一直被搜索优化器滥用. 这可能就是为什么谷歌不把很多权重放在SEO关键字在页脚. 所以不要做过头. Just use the phrase once as text, not a link, 和 move on.

页脚 Com任务 on Rehabilitation Counselor Certification 网站包括他们的道德规范, 其中有两个最重要的关键词.

关键字

20. 奖励和证书

的se little logos instill confidence in visitors. 它们是一种 社会证明 也是利用“光环效应”的有力方式.“如果你曾经得过奖, 在页脚添加该奖项的标志是一种快速增加可信度的方法,你的网站的每个页面.

建议:把你所有的奖项、证书和会员标志放在一个“信任盒”里.”

Nitel 这些年来赢得了很多奖项. 收集这些标志,并把它们放在一起,在网站的页脚, helps build trust in a very competitive industry.

奖

认证也有标志. 这里有一些 that often appear in footer designs.

  • 电子商务网站的安全证书
  • BBB certificate for businesses with local audiences
  • Adwords certifications for digital marketing firms.
  • GSA certificates for companies that work with the government
  • MWBE certification for minority 和 women-owned enterprises
  • B-Corp认证为社会和环保意识企业

21. 协会会员

会员有特权. One of those might be a logo that can be used in a footer. 商会, 行业协会甚至在线目录都可以提供在页脚看起来不错的标志.

饼干的设计 在其页脚的右下角显示它们的关联.

会员资格

22. 奖状

让你高兴的顾客说几句话从来都不是坏时机. 在页脚中包含感言是在整个站点中添加社会证明的好方法. 这里有一些 使用证明书的指导方针:

  • 最好的推荐信支持他们所在页面的特定营销声明, so they’re not added generically to the footer on 过y page.
  • 写感言最糟糕的地方就是电视上 推荐页面. Check your 分析, visitors just aren’t visiting that page.

杨晨迈克尔教练 网站在每一个页面的底部包括一个证明. 它就在页脚上方,允许在每个页面上有不同的证明.

奖状

23. 最新文章

如果你在内容营销方面很活跃, 你可以给你的网站一个“脉冲”,但把你的最新内容直接推到你的页脚.

太阳能能源研究所 does this on their website, along with the 社会 widget.

内容

或者你可能想要控制哪些文章在页脚有特色. 然后你可以选择那些回答常见问题的访客,或者那些 将访问者转换为时事通讯订阅用户 以最高的比率.

24. 即将来临的事件

如果你参加了很多活动, 页脚是推广它们的好地方, since anything in the footer is likely to be seen. 但不要加上这个 除非你总是有即将到来的活动否则你的安全网就会出现漏洞.

25. 视频:您的欢迎辞

文字被图像压倒了. 图像被视频压倒了. 一般来说,视频是最吸引人的内容格式. 所以,如果你真的想在你的页脚全力以赴,添加一个视频.

玛丽Forleo网站 takes full advantage of video, include a video enhanced footer.

video

26. 音频:你的叮当声

It’s rare but possible to add an audio file to a footer. 如果有的话,那很可能是你在别处重新利用的一段视频, 比如广播广告.

生命之食网站 嵌入一个小的音频播放器与他们的广告歌到他们的脚. 迷人的!

发出叮当声

27. 一个…最后…文字-动作

Every marketing page should have a call to action. 所以在页脚添加一个是确保它无处不在的一种方法. 你不应该让访问者想知道如何采取他们想要的行动.

作家戏剧网站 通过在页脚添加一个突出的“捐赠”按钮,遵循非营利组织的最佳实践.

calltoaction

更多的页脚设计理念

这里有更多的灵感设计你的下一个网站页脚.

页脚配色方案

注意上面的例子中有多少在深色背景上显示浅色文本. 颠倒颜色是让访客知道他们在底部的一个好方法, 这是这一页结束的开始.

提示:注意翻转页面内容区域的配色方案(从浅色背景上的深色文本到深色背景上的浅色文本). 这样做可能会造成一个“假底”,” causing visitors to believe they’ve hit the footer, 可能漏掉了这一页的其他部分.

粘性的页脚

以同样的方式,导航可以“粘”到页面顶部, 不管访客卷轴有多深, 页脚可以粘在底部. 它总是存在,不管滚动深度如何.

十三水游戏的朋友在 转换科学 use a 黏糊糊的 footer that is always visible on 过y page.

黏糊糊的

想要你自己的粘页脚? 使用Word新闻? 这是一个 插件,创建粘页脚.

无限页…根本没有页脚!

每个网站都有一个页脚? 事实上,一些新闻和媒体网站没有页脚,因为页面没有底部! 这一页就这样永远写下去.

“无限页面”的十三水在线游戏方法只是加载下一个内容,当访问者滚动下来. 看一下 石英 网站或 ESPN 为例子. 这些网站永远不会结束.

在页脚设计中应该包括什么? Our Guidelines For What To Include In Your Footer

这完全取决于你网站的目标和访问者的需求. 你是一个大型电子商务网站吗? 大量的链接可能是有用的. 客户服务忙吗?? 把这些信息加在下面.

问问你自己:访问者是否有一个重要的问题没有在标题中回答? 如果是,将其添加到页脚.

kurt-circle
专家观点: 库尔特·克鲁斯

这基本上都可以归结为利用这些有价值的不动产来服务于你的网站目标. 是有目的的. 是有帮助的. 要注意. 把你自己放在用户的位置上,然后确保组织良好. Give ‘em what they need but don’t overwhelm them.”

 

这就是27英尺的设计理念. 但请不要全部使用它们,否则你会有有史以来最肥的肥脚. 想想你的访客和什么可能抓住他们之前,他们到达页面的底部!

特别感谢科特和 感谢他们对本文研究的帮助! 如果你能想到十三水游戏漏掉的任何东西,请在下方留言告诉十三水游戏.

分享这

你有什么想法??

签了字你就同意了十三水游戏的 隐私政策.

评论(42)
  • 在帮助我志愿参与的非营利组织时,我试图解释为什么十三水游戏应该把东西, 比如社交媒体按钮和有用的导航链接, 在十三水游戏的页脚. 这 article will help me make my case – thanks.

    • I’m glad if this helps you make the case, Janice. 有时候,知道该做什么比知道如何向别人解释要容易得多!

  • 另一个有用的帖子. 这 list should be incorporated into 过y marketer’s toolbox. 我同意你需要检查什么增加做你的网站加载速度. 营销愉快,海蒂·科恩

  • 安迪,你是最棒的. And you always give me more to think 关于 和 do! I doubt I’ll 过 be able to retire until you do.

  • Andy,我很喜欢听你在总统论坛会议上的演讲 !

  • 你好安迪,

    多么棒的帖子,谢谢! I have already implemented many of your suggestions, but this list will definitely be useful to my clients.

    A little bit of creativity always goes a long way, doesn’t it? 😉

  • 如此详尽的清单,而且很棒. 谢谢!

  • 无限的页面! 我不能告诉你多少次我滚动到页脚为了找到这些(非常有用)的东西在页脚,只是从来没有, 过, 到达那里.

  • 作者很清楚地说明了为什么页脚在网站上很重要. 上面提到的关于设计页脚的技巧对吸引网页用户的注意力有很大的帮助.

  • 如果你在页脚放上感言,这不会是大量的重复内容?

  • 再一次,这是一个惊人的帖子,安迪. 然而, 我真的不同意在十三水在线游戏的页脚有感言, 因为我觉得推荐信应该放在它自己的专用页面上, or only on pages where trust has to be built with customers.

  • 的很有用的建议. I have a couple on your list, but have to get more up. 感谢分享.

  • 谢谢安迪. 伟大的信息.

  • 出色的建议和想法,对于页脚,而不是仅仅复制和粘贴的标题是如此有意义! 导航,让用户得到他们想要的快捷、简单、完整. 页脚在展示抓取和去,深入到一个常见问题的主题中有很大的作用. 谢谢你!!

  • Has anyone seen a company’s Mobile apps in the footer? 这似乎是一个宣传它们的好地方,我很好奇是否有人有一些例子. 谢谢.

    • 嗨,约翰!

      感谢您访问十三水游戏的博客. 如果你去优步的网站,他们的应用下载选项在他们的页脚. 你是这么想的吗?

      • 谢谢你的回应,阿曼达. 这正是我想要的. More so br和s that have multiple apps instead of just one.

        • 明白了吗! 我也很好奇. 如果你找到一个好的例子,请分享.

  • 这对那些正在创业和设计自己网站的人来说是非常宝贵的信息. 非常感谢. 我觉得授权!

  • 我没有看到任何关于持久页脚栏的提到,你也没有解释处理从页脚链接的内容的不同方法. 例如, 带有地图的面板是一个很好的触摸,可以从固定的页脚向上滑动,而不需要刷新页面或更改内容. 在不改变页面焦点的情况下,应该可以查看各种各样的页脚内容. 此外, 持久的页脚内容应该是特定于站点的,而不是特定于主题或章节的(大多数情况下). 站点级别的内容,如地址, 版权, 社交媒体, 法律声明, 站点地图都是优秀的页脚内容,不应该偷走你的主要焦点. 一个明显的例外是使用前一个和下一个内容按钮以及面包屑(尽管我仍然不认为它们在页脚工作得很好). Also when adding a fixed persistent site-level footer bar, 将标准的扩展页脚附加到滚动页面的底部,并且仍然粘在页面的底部,这是很好的. 换句话说, 唯一可以看到页脚内容的时候(除了页脚栏)是当你向下滚动到页面的底部(在我看来,错误地被一些人称为粘页脚)

    • 我很抱歉,我的意思是首先感谢你的优秀和全面的文章页脚. 如果我听起来忘恩负义,我道歉, 我发现你的信息在澄清我对页脚设计的关注方面非常有用. 谢谢你!.

  • 很好的文章,谢谢分享. I have used some of these tips for my footer 和 looks great 🙂

  • 你对在页脚放置联系表单和链接到联系表单页面有什么想法?

  • 很棒的文章,我喜欢你是一个共益公司!

  • 伟大的文章. 大量的建议. 很多时候,我从来没有把它的页脚,因为一篇文章的内容不吸引我. 你的…,谢谢你. I enjoyed the read, 和 have tools to add to my toolbox.

  • I Ctrl End just to click the up button again 和 again. 你的东西真不错.

  • 好的文章安迪! 真的很有帮助! 谢谢你!!

  • 知识!!

  • 非常棒的文章, 真的帮了我, 设计了不少不同行业领域的网站

  • 这非常有用. 我正在为一个博客建立一个新的网站, 一个朋友问我要在页脚写上什么. 谢谢你这么仔细!

  • 我真的想说谢谢你,先生,为这个了不起的帖子关于页脚.
    You don’t know, what you give me at the right time.
    很有帮助 !
    非常感谢轨道媒体 & 团队.

  • 嗨伙计们. 我是一个新的博主,我的博客是关于足球新闻和评论. 你能帮我写博客吗. 我的页脚看起来不完整. 我还应该添加什么在我的页脚..这是我的博客
    http://thefootballogs.Blog网站.com/

  • 我听说页脚链接现在不起作用了. 对我来说,作为一个用户,把网站的所有者放在页脚总是非常重要的. 例如,我参观了新的.flatfy.md http://new.flatfy.md/bloc-locativ-de-pe-str-constantin-stere-chisinau 我在网页的页脚找到了所有必要的信息. 我相信,对于房地产目录网站这是一个很好的解决方案.

  • Offering the the great ui ux web service provider. 十三水游戏在印度的ui ux设计公司,在德里的ui ux设计公司. 与此同时,Ads和url是最好的ui/ux开发服务之一. 同时,十三水游戏在古尔冈的ui用户体验公司和美国ui用户体验设计服务公司给了十三水游戏极好的响应. 如果你想从十三水游戏最好的ui/ux web服务提供商得到最好的ui/ux开发服务,那么你应该去Ads和url. If you wanna get a great ux ui design then visit. ads和url. 最佳ui ux Web服务提供者

  • “关于米歇尔和她的工作质量,我怎么说都不为过. 她聪明、风趣、足智多谋,而且有很强的职业道德. 她产生结果!——Sala Social Marketing

  • 建议我的网站页脚设计

  • 这是一篇用最佳实践来阐述网站页脚的很棒的文章.

  • 我发现很难添加许多格式到我的页脚,我听说这是一个好主意,因为谷歌看到新的流内容新鲜

  • 我看到销售页面的页脚显示了一个人的名字/城市最近购买了任何页面正在出售的东西. 我一直在找它的名字,但找不到. 这是一个很好的心理技巧. “来自达拉斯的乔·M刚刚报名参加了免费训练,7分钟前.”

  • 谢谢大家! 非常详细和容易理解

  • 这 was extremely helpful as I design my website by myself. 我读LOL的时候还做了笔记.
    谢谢你!!

  • 伟大的文章! 我在添加一个页脚的过程中,一个网站,我管理. 这个信息会很有帮助的. 在另一个话题, 你如何得到横过接近页面底部的条,显示你的页面有多深? 看起来真的很酷!

 
加入超过16,000人谁收到网络营销技巧每两周.

签了字你就同意了十三水游戏的 隐私政策.

分享这