你有没有一边看电视一边用手机上网的经历?

我一直这么做——我猜你们很多人也这么做。如今,大多数美国消费者拥有多种互联网连接设备,如高清电视、智能手机、平板电脑和电脑尼尔森发现它从根本上改变了我们看电视的方式。我们使用手机,平板电脑和笔记本电脑“我们所关注的编程的自然扩展。”

免费工作手册:如何计划一个成功的网站重新设计

当然,这对某些节目来说可能是正确的。我发现权力的游戏需要我的全部注意力,所以当我看电视时,我会把我的设备放在一边。但是对于像这样的节目美国广播公司热播系列节目鲨鱼坦克对很多人来说,观看是一种互动的、多屏幕的体验。

想想看:鲨鱼坦克这是一个由企业家向投资者推销他们年轻企业的节目。许多观众一边观看,一边在线搜索和查看这些业务。因此,在一集播出的那天,七百万到一千万观众中的一部分将登陆这些企业的网站。

你能想象这些企业收到的大量流量吗?如果他们没有做好准备,这些流量可能会对他们的网站造成损害吗?

虽然特写的创业者肯定会对曝光感到高兴,但他们中的许多人实际上很难为流量、社交媒体提及和销售的大幅增长做好后端业务准备。许多年轻人企业网站没有能力应对流量的大幅增长。事实上,对网络服务器来说,如此突然的增加看起来像是一次攻击。缓慢的加载时间已经够糟糕了,但如果您的服务器认为您的网站受到攻击,您的网站可能会完全关闭。

这是企业主的一大担忧布列塔尼·霍达克和金·考普当他们听说他们要上电视时鲨鱼坦克为他们的超级粉丝体验公司raybet电子竞技ZinePak

zinepak-shark-tank.jpg

资料来源:公司

他们最担心的两个问题是:

  1. 我们如何准备我们的网站,使它不会慢下来在节目播出期间(和之后)?
  2. 我们如何确保我们的手机网站是完全响应的,以便所有那些在他们的手机上查找我们的人有良好的体验?

我有机会与联合创始人布列塔尼·霍达克(Brittany Hodak)就sprint进行了交谈凯文·巴伯的创始人精益实验室这家设计公司曾帮助她做好后台准备。让我们来看看他们是如何为ZinePak网站的流量增加做准备的。

知道利害关系

尽管ZinePak的创始人拍摄了视频他们的鲨鱼坦克去年9月,这部剧直到2015年4月24日才播出,而他们只被告知了三周的播出日期。随着最后期限的临近,霍达克和考普发现他们开始全速前进。

在接下来的几周里,他们不仅对网站做了一些调整。他们最终彻底地重新设计和重建了它——主页,登陆页面,所有的一切。

Hodak和Kaupe做的第一件事?研究预期的交通流量。他们是从银行得到信息的鲨鱼坦克制片人、新闻报道和其他raybetapp曾在节目中露面的企业主。

Hodak说:“我raybetapp们在新闻报道中看到一些人的流量增加了1000 - 2000%。”“我们的朋友告诉我们,在这部剧播出后的几天里,他们每分钟能收到5到9份订单。我们接受了每个人给我们的数字,决定为最高的数字做准备。”原因之一是什么?这一集恰好是在美国奥运选手凯特琳·詹纳(原名布鲁斯关于她的性别转变他们知道这会吸引大量现场观众。

在收到朋友的来信并了解其他人的情况后鲨鱼坦克选手(像CordaRoys)的网站崩溃了,或者在移动设备上很难浏览,霍达克把她的网站放在首位。在你的企业生命周期中最重要的时刻之一,一个反应迟钝、速度缓慢的网站是你最不想看到的。

Hodak说:“当一个成功的年轻企业家把自己放在一个非常公开的论坛上时,她考虑的最重要的事情之一就是网站是否正常运作。”。“如果网站不起作用,那将是一个严重的问题。”

寻找合适的伙伴关系raybet平台

对Hodak和Kaupe来说,从一开始就与设计和工程专业人士合作是很重要的,这样他们就不用担心自己不太了解的问题会失败。

“我和金姆都是企业家,”霍达克说。“我们喜欢做我们擅长的事情——营销、娱乐和创意包装,而不了解在流量很大的情况下,如何通过后端支持使站点能够跨多个服务器运行。”

两人最后看了一眼我们的服务市场并聘请hubspot认证的网站设计机构精益实验室。

他们与精益实验室的任务清单?完全重新设计,建立,并推出他们的网站,以及时播出他们的鲨鱼坦克一集。

Hodak第一次打电话给Lean实验室解释他们的情况后的第二天早上,该机构向她展示了他们新网站的第一个线框和一个项目计划。Lean Labs的Barber告诉我:“在计划一个项目时,很容易浪费一周的时间。”。“因此,[制定项目计划]是第一个关键,特别是如果你有一个艰难的时间框架。”

以下是精益实验室的做法概述了时间表

  • 第一天:第一个线框已经交付。
  • 第三天:商定了详细的项目战略。
  • 第四天:第一个模型已经交付。
  • 第六天:提交了投资组合模型。
  • 第8天:已加载所有更改和修订。
  • 日12:所有页面的第一版被呈现出来。
  • 15天:最终版本(版本5)已经交付。
  • 第17天:已交付并批准编码页。
  • 21天:建立了网站的关键页面。

巴伯说:“通常,我每周都会开会,让客户保持一致。”“有时一星期两次。为了这个项目,我们每天都见面。我们每天下午都去开会,看看一天的进展。”

这有助于Hodak和Kaupe通过对其品牌的深入了解,在网站内容方面了解他们想要什么。他们能够提供视觉效果,而不必经过一轮又一轮的修改,这使得一个通常需要几个月时间的设计项目能够适应更短的时间框架。

现在,让我们来看看ZinePak网站是如何重新设计的,以承受预期的流量流入鲨鱼池。

他们是如何设计一个能够承受大量流量涌入的网站的

大多数公司在准备一场人流量大的活动时,往往没有必要这样做完全彻底改变他们的网站设计,但有一些设计技巧可以适用于任何准备高流量事件的人。对于ZinePak来说,重新设计网站是整个过程的重要组成部分,这让他们能够专门设计网站来处理高流量。

如果您正在为大量流量做准备,那么准备的程度将取决于内容管理系统的健壮性。完全披露:ZinePak是HubSpot的客户。因为HubSpot内容优化系统可以同时处理大量流量(每秒1000个请求或每小时360万个请求),他们可能会没事的。但是,当然,每个人都同意采取额外的预防措施只会有所帮助。

这里有一些见解如何设计一个网站处理大量的交通流量。

1) 首先使用了一个好的托管平台。

不言而喻:不要期望一个小型的主机提供商能够像一个鲨鱼坦克一集。这些主机在开始遇到问题之前可能每秒可以处理15个请求。相反,应该使用一个由内容交付网络(CDN)用于处理高流量负载,并根据访客来自何处轻松路由流量。

2) 使用具有压缩文件大小的高质量图像。

如果你去ZinePak的主页,你会注意到有很多视觉效果。ZinePak网站的设计简单,图像大,文本大而简洁,还有独特的行动按钮,这意味着任何人在智能手机上查看ZinePak网站时,都可以阅读并与内容互动,而无需缩放和缩放。这都是他们更大的移动战略的一部分,即为所有人创造良好的体验鲨鱼坦克观众在各种设备上查找它们。

zinepak-home-page.png

不过,使用大型图形时可能会遇到的问题是页面加载时间较慢——这会让用户感到沮丧,并导致他们离开您的站点。为了解决这个问题,你需要压缩你网站上所有图片的文件大小。理想情况下,你应该将图片保持在1mb以下。但如果你有一张图片需要更大一些——比如ZinePak主页上的背景图片——那么你就需要尽可能地缩小它的文件大小。

由于ZinePak是HubSpot的客户,他们不需要做任何事情来压缩他们的主页图形到2.6 MB(原来是4 MB),因为上传到HubSpot营销平台的图像是自动压缩的。非hubspot客户可以通过一个免费的在线工具运行图形TinyPNG压缩和优化它们。

3) 结合了外部JavaScript和外部CSS。

为了加快页面加载时间,Lean Labs尽可能在外部文件中加载样式表和JavaScript。结果呢?每次加载ZinePak页面上的页面时需要调用的代码更少。

以下是另外两个帮助解决页面加载问题的编码技巧:

  • 将JavaScript文件放在网页的页脚中。这样,它们就会在后台加载,而不会延迟页面内容(即内容)的出现。
  • 尽可能使用异步JavaScript因此,当页面加载时,它将继续加载,同时读取和运行JavaScript。停止页面加载以读取和运行JavaScript可能会导致阻塞并导致问题。

4)使用浏览器缓存。

Lean Labs使用了一种叫做浏览器缓存的策略,允许用户更快地在ZinePak的网站上移动。如何?当浏览器缓存一个网站时,它会存储该网站的图像、样式表和JavaScript的副本,这样用户下次访问该页面时,浏览器就不必从头下载了。相反,它可以从存档中提取。

5)尽量保持网站静态(暂时)。

一个静态网页基本上是一系列的HTML块,代表一个网站的物理页面,并准确地传递给用户的存储,而不是由一个web应用程序生成。在万维网的早期,这就是所有网站是如何建立的。虽然它们更容易创建和控制,可以非常快速地加载,但它们也更不灵活,更不有趣,更难以更新。

但精益实验室有一个想法,可以提高ZinePak网站的页面加载速度。他们决定推出一个静态的临时版本的网站,只建立在HTML和最小化的动态内容。这个版本只会在鲨鱼坦克之后的几天里,人们观看重播,观看录制的版本。他们在一周内改变了网站,使其更具活力和互动性。

用HTML启动主页

当Barber和精益实验室团队将主页放到内容管理系统中时,他们采用了一种不同寻常的方法:直接用HTML启动主页,而不是使用模板构建器或自定义代码构建主页。

“我并没有特意让内容可以编辑鲨鱼坦克,”理发师说。“这样做的原因是,我认为没有办法比不需要任何索引查找的网页加载速度更快。通过静态加载主页,加载时间不到1秒半。”

为什么不希望页面一直使用HTML呢?“因为你会失去内容管理系统背后的强大力量,”Barber说。例如,如果不编辑每个单独的页面,就无法在多个页面上编辑相同的文本。这是一个艰苦的、手工操作的过程,而且很容易出错。

最小化动态内容

对于绝大多数项目来说,动态内容具有最好的回报。网页的每个部分都是独立的,这使得在多个页面上改变内容时更容易更新内容。此外,它还允许您为您的访问者创建定制的相关体验。

但是,如果你正在准备一个高流量事件,你可能会考虑暂时限制动态内容的数量在你的网站上。

“当你要上全国电视节目的时候,”Barber说,“这不是在你的主页上放智能内容的好时机,因为服务器将不得不为每个访问页面的人查找内容。当你需要进入数据库去查找不同人的资料时,会花费更多的时间。我不想让任何事情都靠运气。”

6)进行负载测试(在与供应商确认后)。

负载测试通过模拟来自世界各地不同地点的数万同时虚拟用户,帮助您计算出您的网站能够处理多少同时流量。在你的网站上做一些负载测试,以确保在你准备的流量大量涌入的情况下,它能有效地加载,这是非常好的,但这里有一些重要的提示需要事先考虑你做一个:

  • 研究负载测试的质量。它们中的许多将在一台机器上模拟虚拟用户,而不是复制真实的场景。虽然这些测试永远不会与“真实的东西”相同,但你希望找到一个尽可能接近真实的测试,这样你就可以得到一些准确的数字。询问开发人员他们推荐哪些负载测试。在HubSpot,我们的许多开发者使用由Apache JMeter,但这是一个相当技术性的工具,对于新手来说并不理想。
  • 通知提供程序要执行测试。想想看:如果你的网站突然被成千上万不知道从哪里冒出来的请求击中,那么这就像是对你的提供商的DDoS攻击。事实上,在很多情况下官方的DDoS攻击——甚至可以被认为是非法的。许多供应商(包括HubSpot)认为未经授权的负载测试违反了服务条款。因此,在实际进行测试之前,一定要让主机知道您想要进行测试。

额外奖励:利用流量的优势

当你预计流量会大幅增加时,确保你的网站不会崩溃是一回事,但让你的网站充分利用所有潜在的潜在客户是另一回事。

ZinePak的人想要抓住尽可能多的消费者线索,所以他们决定创建一个鲨鱼池-主题活动专门为捕捉从事件线索。他们将该活动称为“创智赢家抽奖”——人们可以点击ZinePak网站上的众多cta之一,参加一项比赛,赢得大量奖品。这就是的着陆页因为这场比赛看起来像:

zinepak-shark-tank-sweepings.png

总的来说,这次活动是一个很好的利用鲨鱼坦克快速建立目标明确的选择加入消费者电子邮件列表的效果。

发射

ZinePak的网站在发布前两天进行了测试鲨鱼坦克一集播出。Hodak、Kaupe、Barber和一些HubSpot的工程师在这两天里对这个网站进行了一些尝试,并做了一些调整。该网站在2015年4月24日周五首播时正式上线。

那天晚上,霍达克和考普在纽约市举办了一场观看派对,参加派对的有150多名朋友、客户和演出团队的成员。“我们看了演出,然后在演出结束后花了两个小时与观众见面。我们偶尔会查看手机数据,看看有多少人访问了我们的网站,”Hodak说。

他们的网站从未动摇过。

Hodak说:“我们及时赶在西海岸播出,这样我们就可以和人们一起推特,鼓励他们访问我们的网站。”。

超过789万人观看了ZinePak的电影鲨鱼坦克在它第一次播出的一小时内。这还不包括重播、辛迪加或录制的剧集。

结果如何?从23日开始到24日播出,ZinePak的流量增加了1489.37%。以下是流量增长的情况,按来源细分:

ZinePak-Sources-with-lines.png

更重要的是,55.54%的流量来自智能手机,因此,他们利用精益实验室为移动用户所做的一切工作丝毫没有损失。

精益实验室(Lean Labs)在这一集播出期间流量最高的时候进行了测试——据称上传速度为900毫秒。Barber说1.5秒是平均的,所以900毫秒对于这样一个图形页面来说是非常非常令人印象深刻的。

zinepak-page-load-speed-test.png

至于他们的鲨鱼坦克抽奖活动?

“登陆页面的转化率超过了70%,我们收集了数千封电子邮件,”Hodak报道。“这也这给了我们一个重新定位这些消费者的好方法,即通过立即发送确认邮件(其中包含产品链接),以及随后根据他们自己报告的类型偏好。”

所以,ZinePak不仅成功地重新设计了鲨鱼坦克但他们在利用所有这些流量来产生潜在客户方面也具有战略意义。这是一个理想的场景!

博客-网站重新设计工作手册指南[基于列表]

网站设计

最初发布于2015年6月2日上午8:00:00,更新于2017年7月28日

主题:

网站设计