Data drives dollars… at least in conversion rate optimization. Yet there are some things we take for granted and don’t even think to find data for.

A good CRO is aware enough to notice when they’re assuming instead of using data. (Meditation and self-awareness practices help with this!)

Screen size is one of these assumptions I see a lot. “What should we design for? Desktop, tablet, and mobile.”

Okay… but what size desktop? And what size mobile? How big should the screen be? Not all screens and mobile devices show the same amount of content. This simple-sounding question leads to lots of other smaller questions.

Common sense indicates we should design around the most popular screen sizes. Based on Statcounter’s screen resolution stats for North America, we see that the most common sizes are:

• 33% at resolutions desktop between 1280px and 1920px wide (roughly 13”-24” screens)
• 34.92% at smartphone resolutions between 320px and 414px wide (basically every significant smartphone in use)
• 26.25% at “Other” resolutions
• <6% at tablet resolutions (between 768px and 1024px wide)

That big chunk of “other” resolutions bugs me. It’s large enough that I’m not comfortable lumping it all together.

But for now, let’s ignore it; we’re creating rules of thumb, after all. You should obviously base your own design decisions based on your website analytics. (And you won’t have some nebulous “other” category with a quarter of your visitors in it.)

Since we’re focused on designing conversion-driven experiences – which mostly includes things like sales pages, landing pages, and opt-ins – we can follow a few guidelines.

Use a Contained Max-width.

If you just let your screen stretch to fill the entire page, you end up with awkward, broken, way-too-wide content that’s virtually unreadable – not great for conversions. Just look at this example below. Here’s what it would look like on a Macbook Air 13”:

Not bad, right? But now let’s look at that site on a 27” display:

Yikes. Not at all what we’re looking for. It’s just… unreadable.

Capping the content’s max-width helps preserve your layout and visual design. Based on the data above, we can safely use 1200px as the max-width for desktop content, 760px for tablets, and 320px for mobile content.

For copywriters, understanding the screen’s max width also lets you know whether you can go wild with long paragraphs (fine if you’re writing for a narrow page, but something to avoid on wide pages).

This is why you see the following:

• Single column sales letters that are narrow, like 700px wide
• Dual-column pages like SaaS pages

Have the Right Width for the Content Type.

In general, the more copy-heavy your page is, the narrower you want it to be. But if you’re combining lots of images, videos, and copy – like on a B2B page – then you’ll want the extra breathing room of a wider page.

Use wider max-widths for branded landing pages – especially in spaces like SaaS and eCommerce. But for copy-heavy sales pages, or sales letters, keep the max-width narrow (600-700px wide).

Here’s an example from Doug D’Anna’s latest copywriting control:

It’s got the same max-width (700px) no matter how big your screen is. That’s because the publisher absolutely want to make sure their copy looks RIGHT, even on a giant screen:

This layout looks great for a sales letter. But if you were to try and use the same narrow width on a SaaS website, it would look too cramped.

On the other hand, if you were to even double the width to 1400px, the sales letter becomes virtually unreadable:

See how width is so critical to content?

Understand the Conventions Your Audience Is Used To.

One of the goals of a conversion designed website is eliminating anything that gets in the way of conversions. By understanding conventions – the design elements your audience is used to seeing – you can decrease cognitive load, or the amount of thinking required to know what to do.

That’s part of the reason why you want your buttons to be clear and bold – hiding your buttons means more thinking which means fewer conversions.

Copywriters use conventions like this all the time. A headline is big and bold (that’s how you know it’s a headline)!

On SaaS pages, you’ll almost always see a hero section with a headline/subheadline/CTA on one side, with an image/demo video on the left:

(Interesting trend alert: Slack, Monday.com and others are starting to use a one-column Hero section! This is clearly designed with a focus on mobile users.)

Conducting user research (surveys, interviews, etc.) allow you to know which other websites your users visit. This lets you identify which conventions your audience is used to, and which ones to include on your website so you can reduce cognitive load and increase conversions.

How to Find Which Screen Sizes Your Audience Is Using

If you have Google Analytics (or any other analytics tool installed), you can easily see how big your audience browser windows are.

From Google Analytics, click the sidebar menu. Then go to Audience > Technology > Behavior & OS.

Once there, click the “Screen Resolution” Primary Dimension option, right above the grey data table.

And there you have it: the browser window sizes you need for your audience. You might even see some surprises. (I was shocked to see how many tablet or Chromebook-sized windows were being used to view our site.)

Hope this helps you understand the relationship between your audience’s screen sizes and your content. Have a specific question about conversion designing for your audience’s screens? Contact us and let us know.