When they hit the front-end landscape a few years ago, preprocessors were heralded as the saviour of CSS, bringing modularity, meaning and even a degree of sexiness. Terms like “Sass architecture” became commonplace, ushering in a new generation of CSS developers who occasionally went to excess with their new-found power. The results were marvellous, and sometimes undesirable.
One of the unpleasant side effects was a preprocessor elitism that continues to persist.
I think I should make a series of all the A/B tests that I have personally come across in which removing a certain element worked for one company, and adding that same element worked for another. (To understand what I mean by element, you should read this post.) After all, every business is different. And so are their target audiences.
Few months back, I came across this wonderful test in which an SEO company went from a content rich page to one with only a form and headline texts, and improved their conversions. I was intrigued, and curious to know the science behind why such pages work, and why even giants like Facebook, LinkedIn and Quora have bare minimum homepages. I have added my findings about why they work, and what the challenges of such a page could be in the same post. Do give it a read.
In fact, we, at VWO, were so inspired by this test that we decided to give it a shot. And hey, have you checked our homepage recently? And may I add, it’s working well for us as well.
For today’s case study, I have a test the bang opposite of this!
PayPanther is an all-in-one solution for free Online Invoicing, CRM, Time Tracking, & Project Management software for freelancers & businesses.
PayPanther wanted to test between a long and a short version of the ‘pricing and signup’ page. The first time they made this page, they believed that a shorter page would drive more signups as there would be lesser distraction and content to read. In this test, they setup the original page to be pitted against a page which had 3 more sections: FAQs about pricing, testimonials, and another call to action button asking people to sign up.
This is how the original looked like:
And this is how the new page looked:
The test was run for a month on about 1000 visitors and the variation, containing FAQs and testimonials, won! It recorded an increase of 372.62% in signups.
Thrilled by the results, PayPanther has implemented this longer page as their default “pricing and signup” page. They even plan to do further tests to find out the most optimum headlines and button texts.
Why the Variation Won?
The FAQs section answered the common doubts and concerns the website visitors had. It, thus, created a sense of credibility and trust.
Adding testimonials work, always. I am yet to see a test in which adding testimonials hurt conversions. You can look at this, this, and this case study for examples. Of course, they have their own rules and to use them effectively, I suggest you read this excellent post to get the most benefit from testimonials.
Tell me know what you think about this case study. Have a similar test that you did on one of your webpages? Let’s talk about it in the comments section below.
Spread the awesomeness by sharing this post with your network on Twitter, Facebook and LinkedIn.
There comes a time in nearly everyone’s career when changing jobs is the natural next step. As a designer, you might start looking for a new job when you feel you have hit a wall with your current employer or when greater opportunities are present at other companies.
After taking the necessary steps to prepare for a job search, like updating your resume and nurturing a small savings account to provide a little cushion, think about what you want in your next job.
Whether you’re in a Fortune 500 company or part a two-person team launching your first web app, email is one of the most important tools for reaching your customer base. But with the ever-growing number of emails to send, getting them all out the door can seem a little overwhelming. By putting in place a solid email design workflow, you’ll be able to regularly ship engaging and mobile-friendly emails with ease.
I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages. The simplicity of Jekyll’s theming layer and writing workflow is fantastic; however, setting up my website took a lot longer than expected. [Links checked March/29/2017]
What is Jekyll? Jekyll is a website generator that’s designed for building minimal, static blogs to be hosted on GitHub Pages.
Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working order can be a delicate balance.
In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off.
To the observer, it appears as if a single light moves around the marquee, traveling from bulb to bulb, when in reality it’s a series of bulbs turning on and off and the lights don’t move it all.
The aim of republishing the original article by Jake is to raise awareness and support the discussion about the role of progressive enhancement within the community. We look forward to your opinions and thoughts in the comments section. – Ed.
Progressive enhancement has become a bit of a hot topic recently, most recently with Tom Dale conclusively showing it to be a futile act, but only by misrepresenting what progressive enhancement is and what its benefits are.
There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks.
This sounds much better. But it still leaves us with the question, How do you determine whether the layout is broken?
This article is a case study about the evolution of BEM, a methodology that enables team members to collaborate and communicate ideas using a unified language that consists of simple yet powerful terms: blocks, elements, modifiers. Learn about the challenges that a big company faces when gradually building an entire ecosystem of services with an ever-growing team of developers.
Once upon a time, in a distant country far far away, an IT company named Yandex started developing Web search and related services.