Web Design

The quickest way to significantly split test a website is to make bold changes to the cascading style sheet (CSS) within a site-wide experiment.

Why CSS Stylesheets are Importantcss-split-testing-2

A website’s main CSS file is a central point of reference which controls the common styles, positions and behaviours of all elements across each and every webpage.

Within the main CSS file are the settings for all fonts, margins, colours, alignments and so much more. It’s the most important file on most templated websites and can drastically change the look of a website with just a tiny edit.

Site Wide Split Tests You Should Perform Every Time

There are many common elements across a website which play a big role in how easy the website is to read, use, navigate, highlight calls to action, and show all key information.

When a user is deciding whether to make contact, or perhaps make a purchase on a website, any of the above could be a deciding factor in stopping that conversion. Below are some key considerations for site-wide elements:

Call-To-Action Buttons

All conversions online start with a call-to-action (CTA) button, link or widget. The size, colour, wording and even position of these CTAs makes a big difference to conversion rates. Certain colours of CTA buttons, for example, may blend in too much with the background, or may subconsciously put the user off clicking them, depending on what they perceive as a negative colour. The text used on links and buttons also make a difference. For example, simply changing a form’s “SUBMIT” button to say “SEND” yields better results as “submit” is perceived as a forceful word. You can read more on this in the ultimate guide to CTAs here on VWO.com.

There is a slight variation of green used for the "Buy Now" buttons. Combination 2 yielded 1.5% more products added to the cart than the original combination 1

There is a slight variation of green used for the “Buy Now” buttons (highlighted). Combination 2 yielded 1.5% more users adding products to the cart than the original Control, Combination 4 was 1.4% worse

Font Size

This rarely tested element plays a big role in accessibility for many users. Fonts are often too small for some users to read, so they may have to use the zoom function if they are familiar it but this isn’t always possible, or easy, on mobile devices. Font sizes which are too large can also be detrimental because they can slow down reading speeds , especially on the mobile-friendly versions of websites. Read more about the science behind font sizes here on imarc.com.

Font Type

Again, the style of font is rarely tested on many websites, it seems to be decided at the initial design phase of development and then forgotten about on many websites. Different styles of font have different levels of readability. Also, some fonts are only available on certain devices and some show up really badly on certain devices at certain sizes without Font Rasterization. You can use a font family to use a series of fonts, starting with your favourite and working down to simpler fonts, such as Arial, which are always on every device  New fonts can be included on a website through JavaScript, or a service such as Google Fonts. You can find out more in this post on TypeWolf.com on the top ten web fonts of 2016.

Font Style

Font styles such as line height, underlining, boldness, colour and margins also affect accessibility and readability. Links are more likely to be clicked on when they are blue and underlined, something which has been meticulously tested by Google and eBay over the years with Google even testing black links in 2016. If links don’t clearly stand out as links on your website, then they should be tested and you will find they often show greater engagement after being changed.

Conversions went up by 1.9% by simply changing the font on this website

Conversions went up by 1.9% by simply changing the font on this website

Background Colours

Often websites are made on a white background but if you look at your favourite news website or social media platform it’s often a slight shade of blue or grey. Background colours can help certain areas of the webpage stand out, such as an information box or special offer banner. Also, the background colour can reinforce the brand or type of product shown and this correlation improves conversion rates, as the content appears more relevant. Find out more about colour psychology for websites on this article on Jimdo.com and see how colours such as Orange signify a good deal (think of Amazon) and blue signifies neutrality and technology (think of Facebook or Twitter).

Repositioning or Hiding Elements

The CSS file controls the margins and padding for all common elements on the webpages and also allows you to completely remove certain items using the “display:none” command. Some ways you can utilise this is by trying to reduce vertically wasted space, removing unnecessary information, altering spacing between important CTAs, or experimenting with removing certain blocks of content. Sometimes less is better on webpages (the keep-it-simple-stupid principle) and it’s good practice to see how much can be removed from a webpage while improving the conversion rate.

Engagement improved by over 16% when content was added to this page

Engagement improved by over 16% when content was included within category pages

Platforms for Split Testing CSS Files Site-Wide

It’s really important to keep templates on a website consistent for each individual user when they go from page to page. It could be detrimental (and certainly a poor experiment) if only one page was A/B split tested while others remained the same.

Special split testing software is required to keep the CSS file changes consistent from page to page for each individual user, unfortunately Google Analytics’ free “Content Experiments” doesn’t cater for these types of split test. Here are some tools you might want to use:

  • Visual Website Optimiser (VWO) – vwo.com – We have found this to be the easiest split testing software to implement. It handles all types of split tests on HTML, CSS or JavaScript and also generates user heat maps if required. Price structures can be found here
  • Optimizely – optimizely.com – This also handles all types of split tests on HTML, CSS or JavaScript and can do some very advanced split tests if required. Pricing information can be found here

Conclusion

Setting up a site-wide CSS split test is easy and effective to do but you may need 15 minutes help from a developer if you are unfamiliar with CSS.

Once the website has the right fonts, styles and CTAs, you can then concentrate on the key landing pages of the website and other more niche elements. This increases conversion rates and makes the website much more effective without any extra traffic required.

Leave a Reply

Your email address will not be published. Required fields are marked *