案例分析:奥巴马筹款网站的制作过程

  1.

  Kyle Rush是一个网站工程师。

  

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

  

  (图为2011年6月的奥巴马官网)

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

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

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

  

  2.

  2012年美国大选现在已经结束了,奥巴马有惊无险地击败了罗姆尼。他最终筹到了11亿美元,成为历史上筹款金额最高(也是花钱最多)的总统候选人。(排在第二位的就是罗姆尼,他也筹到了10亿美元。)

  

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

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

  * 17,807,917个访问者,81,548,259次页面访问

  * 4,276,463次捐款

  * 捐款转化率24%(每四个访问者,就有一人会捐款)

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

  3.

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

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

  

  (图为2012年5月的奥巴马官网)

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

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

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

  4.

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

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

  第三个决定是,将捐款的后台做成API调用。这是因为有23%的访问者使用移动设备,所以必须部署多个前端(Web端和移动端)。使用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最后总结说:

  “我百分之百肯定,这是我经历过的最好的开发环境。我们不断调整,捐款转化率的提高令人难以置信。整个团队感到无比满足。但是,最高兴的还是看到,2013年1月21日巴拉克·奥巴马依然是美国总统!”

  (完)

  作者: 阮一峰

时间: 2024-11-22 20:35:05

案例分析:奥巴马筹款网站的制作过程的相关文章

奥巴马筹款网站的制作过程

1. Kyle Rush是一个网站工程师. 2011年6月,他加入BarackObama.com,负责设计2012美国大选的奥巴马官网. (图为2011年6月的奥巴马官网) 除了宣传,官网的主要目的就是筹款. 上一次大选,奥巴马筹到了6.9亿美元.这是一个很大的数字,但由于过去4年美国经济一直没有起色,本次大选势必要投入更多的资金,团队内部估计资金需求将达到创纪录的10亿美元. 一个筹集10亿美元的网站,历史上从来没有过.Kyle Rush不知道自己能否做到,但是他很清楚,如果筹不到钱,奥巴马没

黑帽SEO案例分析 上千网站的超级站群

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信做seo的都听说过"黑帽""站群""链接工厂"这些概念,也知道某些手法是可以短期操控搜索结果排名,但也许还没有几个人真正看到过上千个网站建立的超级站群,今天我会通过这个案例会给大家介绍这样的手法,及后续产生的后果和相关概念,希望对大家有所帮助. 这个黑帽站群的发现也是事出偶然,客

《数据挖掘:实用案例分析》——3.2 数据挖掘建模过程

3.2 数据挖掘建模过程 广州TipDM团队在多年的数据挖掘项目实施过程中,积累了一套行之有效的数据挖掘方法论,数据挖掘建模过程如图3-2所示. 3.2.1 定义挖掘目标 针对具体的数据挖掘应用需求,首先要非常清楚:本次的挖掘目标是什么?系统完成后能达到什么样的效果?因此我们必须分析应用领域,包括应用中的各种知识和应用目标.了解相关领域的有关情况,熟悉背景知识,弄清用户需求.要想充分发挥数据挖掘的价值,必须要对目标有一个清晰明确的定义,即决定到底想干什么.否则,很难得到正确的结果. 3.2.2

吴贤茂:世博会网站的制作过程以及心得

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 学校的大练兵已经即将结束了,我想在这短短的几天培训,我真的学到了很多,虽然以前都是用代码写div+css和javascript做网站的,对于DW的一些界面功能还不是很熟悉,经过刘老师的指导终于了解了DW界面的行为控制. 前几天老师布置了一个世博会的网站让我们做为最近培训的一个作品吧,当时我的引发起一个构思了,是时候好好的把所学的东西做成一个比

案例分析:资讯网站利用百度风云榜引流量

合理利用热门事件来引流量层出不穷,每天观看百度风云榜成了很多站长的习惯,对于一个权重比较高的网站来说,是很容易将一些热门的事件转换成流量的,只要自己用心的去做,一篇文章或许每天都可以带来好几千的流量,这也是很多站长望尘莫及的一件事,毕竟自己的网站没权重,哪怕能搞出再热门的文章来,搜索引擎都未必给予好的排名,下面来分析资讯网站是如何利用百度风云榜来引流量的. 目标关键词:步步惊心 简介:<步步惊心>改编自桐华的同名清穿小说.是最近热播的电视剧 百度风云榜今日搜索:137818 最近七日:8646

案例分析:某些网站大量出现百度知道页面

为什么有些网站的百度相关域含有百度知道的页面,打开百度以后却没发现链接不存在,有的排名确实很不错的,而且存在的时间有长有短的,难道百度又出现新的漏洞被人抓住小辫子了吗?都不是,这个原因很简单的,让我慢慢图文解说分析给大家参考哦: 百度知道回答做外链 都说百度知道权重很不错,也能带来一些流量,最主要的还是百度知道有排名才可以,就算你成功留下外链也是很不错的了,初期的做外链,到现在泛滥成灾的淘宝客推广,大量的问题答案都是一些网址,我们看下图:   打开百度知道的页面显示结果如下   但有的时候,我们

案例分析:医疗网站的站内优化方案

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 这个是我在医疗网站的一个设计方案之前一直是在自己网站发布文章的,因为已经网站设计成型,现在就拿出来跟大家分享一下,因为投稿我不经常用考虑要编辑格式设计列表麻烦所以大家以后可以拿我博客看,好现在就直接进入正题. 1首页二级栏目 /xxxx 只要8-10个 2二级栏目下的三级导航路径需要跟二级导航路径平级,减少访问深度,也可以做成3级栏目提高增加

案例分析:Adobe网站前端开发

一.概况 Adobe采用了每刷新一次页面,调用一款产品的方式,给访问者展示不同的内容. 开发-"> 首页分成了4个区块:A.顶部导航区.B.产品展示区.C.产品列表及相关信息块.D.底部版权区解析如下: HTML片段: 二.顶部导航区 导航区域,Adobe用"dt"和"dd"分出了4个小块: 解析如下: 不太符合国内开发习惯的是,他们采用了从右向左的写法,先给出了最右侧LOGO区域的<dt id="adobe-logo"&g

百度快速排名之案例分析

百度快速排名之案例分析-(一个医药网站的百度30天优化案例分析)网站名称香草醇.阿魏酸.高哌嗪.酚磺乙胺.羟苯磺酸钙-苏州布莱恩斯国际 :网站域名:http://www.szbles.com 网站在10月份接到优化的任务,11月中旬已经有词香草醇已经到第一名了.大家可以在百度上查的到. 先来分析一下关键词:香草醇百度收录(找到相关结果约2,070,000个)也就是说百度数据在200多万条.应该来说优化的难度不是很大.百度指数查不到关键词的指数可以说是很少人会查这样的词,换句话说只有专业的人士才会