CSS development has changed so much compared to a decade ago. It’s not just writing code anymore, there are frameworks, preprocessors, optimisations and everything but the kitchen sink. I love all the new technologies and new ways of doing things but sometimes I find myself doing things that don’t necessarily add value. And if we stop and think about why we have CSS, the answer is we use it to style websites, to make it looks beautiful so it is user-friendly and achieve whatever purpose that the website needs to achieve.

So today, I’d like to talk about 5 simple things that I did to my start up website SaleTheWorld.com to increase conversion and pageviews. They are simple, practical and most importantly, all CSS changes.

1. Change the colour contrast of elements

Colours are important because they can influence one’s thinking, change actions, and cause reactions.

For version 1 of our website, we used a lot of dark colours and everything was fighting for user’s attention. As a result, our bounce rate on homepage was high and users were confused when they landed on the website.

With the new homepage, we use a lot more lighter colours and only use dark colours for things that we wish to highlight, in this example, Logo and Search button, thereby encouraging users to find sales on every page.

2. Add subtle effects on user interaction

A good website provides interactive feedback to users and with CSS, we are able to provide feedback instantly. Make friends with CSS pseduo elements like :hover, :before, :after and CSS3 features like transitions, filter and opacity effects, and so to bring the website to life. Here for example, rather than just having greyscale logos, we display coloured logos when users mouseover them. This encourages users to click on the logo. Sidenote: We use css filter property to achieve this.

On airbnb site, they use videos instead of static images on homepage to bring their website to life.

3. Increase visual targets of call to action elements

As more and more people are using mobile devices for Internet, we need to make sure that our mobile version of the website not only looks nice but also functional. To give you an example, we increased the visual target of menu icon for mobile website by adding padding around it and noticed a significant difference in click through rate for links hidden under the menu. Sidenote: Apple recommended 44 pixels for touch zones, but 50 - 60 pixels works best for websites.

To give you an example, we had this menu icon on mobile site that was getting no love from users. As soon as we increased visual target, we notice visits to those pages under the mobile menu increase.

4. Go native whenever possible

Use HTML elements for their original purpose and functionality rather than how they look. We can then apply CSS to achieve the design that we want. This will save us time having to write Javascript etc to achieve the functionality that we want. This is especially important for form elements. A single choice answer should use <input type=”radio” even if it looks like a checkbox. Dropdowns should be <select> elements regardless of what they look like. This will make the website a lot more device independent and functional.

5. Do more in less time with CSS

Us developers have a super power that enables us to build things efficicently, quickly and accurately. And that super power is CSS. If used appropriately, CSS allows us to do more in less time. The first question that I ask myself when I see a layout is can I achieve it in CSS. For example rounded corners, shadows, gradients, columns, you name it, I do it in CSS. I also keep my CSS lean and mean so I can change things quickly and maintenance is easy. My suggestion is to find a system that works for you and your website and stick to it.

Last but not least, I’d like to show you a google analytics chart comparing one week data of before and after the optimisation of SaleTheWorld.com.

So as you can see, we increased the pageviews by 370%, pages by session by 6% and reduced the bounce rate by 9%. The optimisation that we did were seemingly small CSS changes but they clearly had a big impact on user experience and therefore conversion.

So go forth and embrace your inner lazy, unleash your super power and add that extra layer of awesome to your website using CSS.

I presented this topic at SydCSS Meetup in June 2015. You can view my presentation slides om Google Drive.

Many thanks to SydCSS for recording the presentation.