Why CSS Stylesheets are Important
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:
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.
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 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.
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.
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:
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.