如何在设计A/B测试中管理CSS文件

我正在一家网络公司工作，我们将在测试2种不同设计的主要网页之一上进行A/B测试。 A/B将检查2种不同的设计方法：不同的图标，颜色，方案等，甚至在布局上稍微改变一点。主要的变化是设计（我会改变它们在CSS中）。如何在设计A/B测试中管理CSS文件

假设我知道如何运行A/B测试：

我的问题是：我该如何处理CSS文件。

我的主要CSS是在一个名为：generalStyles.css.

难道我的东东来创建一个名为generalStyles_B.css文件？它会是复制的generalStyles.css或将加该文件，只是'跑过'我改变的CSS规则？

如果我们决定使用B选项，重复将使它易于使用generalStyles_B。但维护代码容易重复似乎是错误的。

感谢，阿龙

来源

2012-03-11 Alon

你用什么进行A/B测试？ – 2012-03-12 02:37:41

这取决于你是如何做A/B测试。我将使用的方法如下，基本假设您使用两个不同的文件，如register-a.html和register-b.html。即使您使用的是为您输出网页的应用，您也应该可以控制两者的标记。另外，我做了一个假设，就是在你的页面的某个地方，你的内容有一个div。

你的HTML可能看起来像这样的第一页上：

<div id="container" class="register-a"> 
<h2>Title</h2> 
<p>Content Goes Here</p> 
</div>

关于你的第二页，你可能有标记如下：

<div id="container" class="register-b"> 
<h3>Title</h3> 
<p>Content Goes Here</p> 
<div id="registerBox"> 
    <input /> 
</div> 
</div>

你不会需要两个CSS表为了这。由于班级'register-a'和'register-b'，您可以根据需要进行视觉更改。我会用你已经运行当前CSS片，并在您的风格是这样的：

div.register-a p {font-size:14px} 
div.register-b p {font-size:18px}

这将是一个明显的视觉差异。再次，这一切都取决于你如何做你的A/B测试，以及你的代码是如何在你的网站上组织的。希望这可以帮助。

来源

2012-03-12 02:37:18

感谢您的帮助！ – Alon 2012-03-13 08:50:34

我也建议，如果更改是针对特定页面上的背景进行的，则可以将相同的.css与具有轻微变化的重复条目一起使用。

例如，在原始的CSS，背景是 “background.jpg”

body.home { 
background-image:url('images/background.jpg'); 
background-color:#444; 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size: cover; 
}

在该变形中，背景是 “background0.jpg”

body.home0 { 
background-image:url('images/background0.jpg'); 
background-color:#444; 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size: cover; 
}

因此，在的情况下，变体页面可以简单地引用body.home0而不是body.home而不会丢失任何其他格式。

来源

2013-07-11 13:08:10

如何在设计A/B测试中管理CSS文件

回答

相关问题