If you’ve ever worked with any of the popular conversion optimization platforms (such as Optimizely, VWO, or Google Optimize), you’re probably familiar with their visual editors – WYSIWYG tools that let you build tests without any coding experience.
These tools can be a great way to get started with a small-scale optimization program. They allow easy testing of simple changes, such as altering button colors, testing reworked headline copy, and swapping out images for new ones.
However, at ROI Revolution, many of our most successful and impactful tests go beyond these surface-level modifications, using custom JavaScript and CSS to test substantial changes to page content, design, and functionality. Below, we’ll outline three ways to conquer the major limitations of visual editors and give real-world examples of what’s possible when you go beyond them.
Conquering the Limitations of Visual Editors
1. Use Custom Code to Modify Page Structure
Using custom code can allow you to test substantial changes to the structure and layout of pages. Using jQuery (a JavaScript library that makes DOM manipulations quick and easy), you can rearrange page elements in any way you wish. Additionally, you can present page contents in a variety of ways to determine which is most engaging and usable to users.
For example, the wireframe on the left shows how we tested a new format for content on one of our client’s mobile product detail pages. Originally, product information was contained in a horizontal row of tabs – a shrunk-down version of the desktop implementation.
Using custom code, we were able to test the design on the right, with an accordion-style layout more suited to vertical smartphone screens.
2. Media Queries Can Save Testing Budget
Mobile traffic keeps increasing over time, but a large percentage of conversions continues to come from desktop devices. For these reasons, it’s critical for many businesses to test and optimize their desktop and mobile experiences simultaneously.
Using media queries in your custom CSS allows you to customize the styling of page elements to be just right for each screen size. Without custom code, you’d need to create multiple tests – one for each screen size.
Bucketing all traffic into one test allows you to reach significance faster (and still allows you to analyze performance across different devices using analytics segments)!
3. It’s Just Logical to Use Logic
Writing custom code opens up a wide range of tests that use logic to conditionally display elements or dynamically alter their contents. For example, you might use a simple formula to calculate and display a product’s monthly financing payment based on the cost displayed on a product detail page.
In these wireframes, the test variation checks each product’s SKU against a list of SKUs with free shipping and displays a “Free Shipping” badge only on eligible products. These tests would be impossible to implement with the visual editor, requiring your company’s developers to spend time coding a variation that may ultimately be discarded.
A World of Possibilities
While the test treatments above are all great examples of going beyond the limitations of a platform’s visual editor, they really only scratch the surface of possibilities for A/B/n testing. Breaking out of the WYSIWYG world of test-building creates a near infinite number of layout and interactivity options.
Where Do You Go From Here?
Skill Upgrades
For in-house optimizers, we most commonly find that the individual tasked with testing has an understanding of HTML and CSS, but does not have a solid grasp of JavaScript and/or jQuery. There are a multitude of self-paced tutorials on the topic, which can be found at sites like Lynda.com or CodeAcademy. Most testing platforms incorporate jQuery into their code snippet, so a learning track that incorporates jQuery will be essential.
Find a Partner
If you or your company aren’t able to utilize your testing platform to the fullest, consider partnering with an agency like ROI Revolution that specializes in conversion optimization, UX, and A/B testing. Click here to request an optimization audit of your site to uncover opportunities for reduced friction and increased motivation in your web presence.
