Design & UX
Article

How to Design a Daring but Effective Split-Screen Layout

By Daniel Schwarz

Split-screen layouts are full-screen web components that are divided into two (or more) equal vertical columns.

However, despite the fact that split-screen layouts are white-hot trendy, it is a bold stylistic decision that can hurt the user experience if there isn't a sound, logical reason behind your choice.

Saying that, when executed correctly it can offer users a wonderful viewing experience.

Split-screen site design by Roman Kirichik

Split-screen site design by Roman Kirichik

Why Use a Split-Screen Layout?

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.

Aside from these advantages, the benefits to split-screen layouts extend way beyond visual aesthetics; they’re especially effective for landing webpages with two side-by-side selectable options.

Some obvious examples include:

  • Login and signup forms
  • Paid and free subscriptions
  • Products that come in alternate colours

Great Examples of Split-Screen Components

First, let's take a look at some terrific examples and discuss why they work so well for their use-case. Split-screen layouts can be used in many different ways, so the advantages vary from site-to-site, depending on what the website sets out to achieve.

Cam Strobel

Not every website design needs access to the entire horizontal viewport. With ultra-minimal designs, like Cam Strobel’s website, splitting the screen into two vertical columns means that all of the content can be above-the-fold, completely eliminating the need for the user to scroll.

Cam Strobel

Studio Meta

Full-width “big header” designs are still quite common – it’s a huge trend and rightfully so, however, there’s rarely an opportunity to use bold imagery due to the lack of text legibility (we usually have to the blur the image or add a colour overlay). Split-screen layouts solve that, and Studio Meta shows us exactly how.

By having the image and content side-by-side, we can use images that are more colourful, more courageous, and with a much deeper meaning because we don’t have to obscure the image in any way.

Studio Meta

Bose

Split-screens don’t have to consist of two 50/50 components – Bose takes this trend to the limit, although I did notice that the website doesn’t even try to adapt to smaller screens. Regardless of how beautiful this looks, responsive design is something you have to consider, and it can be quite hard to adapt split-screen layouts to smaller devices.

Aside from that, this is my favourite split-screen example because the layout allows Bose to show off each item with a unique personality by using different colours. Combined with the edgy diagonal shapes, this website really catches my eye.

Bose

Fillet is another wonderful example of how split-screen layouts can inject individual personality into web components of equal importance. Plus, because there are only three vertical columns and almost no content (each column showcases artwork), this displays correctly on mobile devices.

Fillet

3 Things to Remember when Designing Split-Screen Layouts

If you’re considering a split-screen component for your website, you should keep these three tips in mind when designing them.

1. Mobile-Friendliness

Split-screen components do have one *dis*advantage: they’re not very mobile-friendly. It’s difficult to make them responsive and adapt to smaller screens (with the exception of tablets in landscape view) – you’ll almost certainly have to scale back to something more modest and that may require a little more coding than usual, so make sure you take a mobile-first approach.

Note: since the Bose example above was split into five sections instead of two, it didn’t adapt to smaller screens *at** all.*

2. Don’t Split the Screen Without Good Reason

You should first consider whether your website even needs a split-screen component. Sure, it's 'on trend', and it looks very cool, but that alone is not enough reason to implement it.

  • Is it worth the extra work to make the component responsive?
  • Are your users trend-conscious enough to appreciate the layout, or will it confuse them?
  • Will there be enough negative space to make the layout work?
  • Are you in danger of splitting your user's attention in half when a more singular focus would be a better outcome for you?

If any of these answers are no, then you should vote against the idea.

3. Make Use of Negative Space

Desktop websites display horizontally, but when using split-screen layouts each component becomes a sort-of vertical viewport within the main viewport.

Because of this, there are many more chances to explore new ways to display content. It’s definitely an opportunity to be creative, so stick your creative cap on!

Conclusion

Split-screen layouts are attractive, and as we saw from the examples, the benefits of the trend differ depending on what the website is setting out to achieve; they can be used to define different identities for each column, or they can be used for a far simpler reason: to keep everything above-the-fold in minimal websites that don’t require the whole width of the viewport.

If you haven’t tried designing a split-screen layout before, what entices you to try it now? Is it the visual aesthetics, or the chance to experiment with new ways to display content?

Let me know in the comments below!

  • genesko

    This was actually very inspirational! I was wrestling with reworking my personal site for HD desktop as it just seemed like TOO much space to compliment the design that was effective on smaller screens and was already completely responsive. This was very helpful. thanks!

  • jimlongo

    As for how mobile friendly they are or aren’t, just collapse on phone sizes so the 2 halves become stacked.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Indeed, technically that works, but that might not be how the designer had intended for it to look on mobile devices. The idea is that the two halves are of equal value. Which one is stacked first?

      • MikeL

        Given the examples, one half seems to be a useless image. Simply hide that div entirely for mobile. Not needed for the useful content on mobile.

        • https://mrdaniels.ch/warz/ Daniel Schwarz

          I wouldn’t say useless, but lets say for argument’s sake each half was a form – login/signup. How would you handle that? It does tricky in same cases.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.