当前位置:主页 > J猫生活 >欧巴马募款网站的製作过程 >

欧巴马募款网站的製作过程

发布时间:2020-07-18作者: 阅读:(993)

欧巴马募款网站的製作过程

1.

Kyle Rush 是一个网站工程师。

欧巴马募款网站的製作过程

2011 年 6 月,他加入 BarackObama.com,负责设计 2012 美国大选的欧巴马官网。

欧巴马募款网站的製作过程

除了宣传,官网的主要目的就是募款。

上一次大选,欧巴马筹到了 6.9 亿美元。这是一个很大的数字,但由于过去 4 年美国经济一直没有起色,本次大选势必要投入更多的资金,团队内部估计资金需求将达到创纪录的 10 亿美元。

一个募集 10 亿美元的网站,历史上从来没有过。Kyle Rush 不知道自己能否做到,但是他很清楚,如果筹不到钱,奥巴马没法赢得大选。

欧巴马募款网站的製作过程

2.

2012 年美国大选现在已经结束了,欧巴马有惊无险地击败了罗姆尼。他最终筹到了 11 亿美元,成为历史上筹款金额最高的总统候选人。

这 11 亿美元之中,实体募到 4.1 亿,线上募集到 6.9 亿。单单 BarackObama.com 一个网站,就创造 2.5 亿美元的捐款。

在 6 个月的时间里,BarackObama.com 共有

这样辉煌的成绩,是如何取得的?

3.

製作一个超大流量的、体验良好的、能够说服人们捐款、并能安全快速处理这些捐款的网站、绝非易事。

最近,Kyle Rush 写了一篇 文章 ,披露了许多内幕,从技术角度总结了 BarackObama.com 的製作心得。下面,我们就来看看奥巴马的技术团队是怎幺做到的。

欧巴马募款网站的製作过程

网站的製作班子,从 2011 年下半开始组建,Kyle Rush 是第一个加入的前端工程师,负责网页的外观和使用者体验。

一开始,网站放在团队自购的伺服器上,运行和捐款都还算平稳。但是,随着竞争不断加剧,局势变得令人担忧了。到了 2012 年 5 月,罗姆尼当月的筹款金额第一次 超过 了欧巴马。

竞选总部决定,网站必须改版,尽一切可能争取捐款。于是,技术团队开始大规模的扩充,全职的前端工程师从 1 个人扩充到了 14 个人,其中 6 人专门负责製作募款页面。

4.

技术团队做出的第一个决定是,使用静态网站生成器 Jekyll,用静态网页取代动态网页,加快网页打开速度。网站的打开应该越快越好。有研究称,打开速度每慢 100 毫秒,Amazon 的销售额就下降 1%。

第二个决定是,将全部网页放上 CDN,使用的服务商是 Akamai。它是世界最大的 CDN 供应商,共部署了 50000 多台伺服器,美国各地都能获得理想的造访速度。奥巴马芝加哥竞选总部,可以在 20 毫秒内载入官网的 HTML 网页。

第三个决定是,将捐款的后台做成 API 控制 。这是因为有 23% 的访客使用行动设备,所以必须部署多种前端。使用 API,可以让不同前端以相同方式与后台沟通,彼此之间用 JSON 格式传递资讯。

第四个决定是,后台用 PHP 语言开发,放在 Amazon 的 EC2 平台上。

第五个决定是,为了避免当机,开发两个后台。一旦一个系统停止工作,立刻自动切换到另一个。这点很重要,因为当机不仅影响士气,而且金额损失庞大。因为捐款每分钟都在涌入,最高记录是一小时 300 万美元,你不能让它停下来。

5.

新网站初步完成后,使用 webpagetest.org 进行测试,结果令人鼓舞。

欧巴马募款网站的製作过程

原版页面 4 秒钟后还没载入,新版只用 1 秒就可以看到。整个平台的访问速度上升了 60%,捐款转化率增加了 14%。

接下来,就是微调页面的各种细节,一共进行了 240 次 a/b 测试 ,也就是说,至少迭代了 240 个版本。

调整后的页面,视觉效果和使用者体验都有了巨大的提升,捐款转换率因此又提高了 49%。

欧巴马募款网站的製作过程

随着欧巴马的当选,BarackObama.com 共进行了 1101 次前端部署。

6.

事实证明,整个开发方案非常成功,顺利完成募款任务,没有一分钟当机。

Kyle Rush 感到有必要总结,留下记录。除了上面的开发过程,他还提到前端团队使用的工具:版本控制 Github,a/b 测试管理 Optimizely,代码编译 CodeKit。

Kyle Rush 最后总结说:

上一篇: 下一篇:

相关阅读