Likely, you’ve come across a website that looks and feels the same as another. This is because there are standard principles to which designers and developers adhere. As new research comes out or as new companies challenge these principles, trends form.
Two years ago (Feb 2015), we wrote about vertically split layouts, a trend common on homepages and product pages. Today, we’re revising the post because it continues to receive acclaim for its ability to effectively direct traffic. In fact, Unbounce named it as one of the most important web trends of 2016:
“By using the split screen, you quickly allow your audience to ‘choose their own adventure’ and head to where they will more likely convert.” – Design and UX Trends to Boost Conversions
Why Vertically Split Web Pages Work
Traditionally, vertically split layouts divide webpages in half, constructing two content fields symmetrical in form but polar in appearance. Blueprint, a free HTML5 template, was one of the first split designs to appear.
Some designers now incorporate a third and fourth column, giving users extra options from which to choose. When adding more elements, it’s imperative to maintain symmetry and clear boundaries between quadrants. Otherwise, the layout loses its zig-zag effect, as observed by Amit Nambothiry.
Nambothiry studied various heatmaps to discern emphasis points on a screen. He discovered that readers follow a zig-zag pattern, jumping from left to right for focal points:
“Whenever you are not paying much attention, this is the natural tendency of your eyes – the zig-zag. Unless there are elements which have greater contrast and weight which shout out at you, you would likely follow [that] pattern” – Understanding the Split Layout in Web Design
A vertically split plays into the tendency. How noticeable the focal point in each quadrant is will determine the success of the design. Sitepoint.com elaborates in a tutorial for Design & UX professionals:
“Split-screen components work best in minimalist web designs because the negative space combined with the bold vertical divide adds a supreme amount of focus on the important areas.” – How to Design a Daring but Effective Split-Screen Layout
Unfortunately, regardless how defined each quadrant is, the effect diminishes on mobile devices. Unless viewed in landscape, the design needs to collapse into full-width sections. Consequently, it no longer balances or compares, but rather prioritizes one option over another.
Adapting Vertically Split Layouts for Textual-Graphical Balance
Websites with simpler user flows can still leverage the vertically split aesthetic, using the quadrants to complement rather than contrast one another. For example, many websites now steer away from the traditional hero banner—full-width filtered image with centered text on top—and separate the text from the visual. The result: a divided layout with copy on one side and its associated imagery on the other.
Such a layout relies on proximity to help users make the association between text and picture. Additionally, it relies on context—the image must be important enough to warrant that much screen real estate. Because vertically split layouts are space intensive, it might be best to occupy the graphical side with some sort of interactivity like a video. Doing so prevents one side from becoming dead space, pulling down rather than bolstering the other.