Skip to main content
All CollectionsEmails
Email design best practices for desktop and mobile
Email design best practices for desktop and mobile

Learn how to design by device to optimize subscriber engagement

Petra Molnar avatar
Written by Petra Molnar
Updated over a week ago

Understanding which device your subscribers prefer to use when clicking links in your emails can help you optimize your email design for even greater engagement.

Tip: You can check your subscribers’ preferences by checking your email reports. This is available both for standalone emails and for workflow emails.

For a detailed walkthrough on email analytics, check How can I see how my emails performed?

Mobile-first design best practices

If your audience prefers clicking your CTA links on their mobile phones, keep these mobile-first design best practices in mind to give them the best reading experience.

Preview your email on your phone

Since you're creating your email on a desktop, be sure to check a preview of your email on your phone.

See it as your subscribers will. If anything sticks out, be sure to adjust it so everything looks as great on a mobile screen as it does on a desktop.

Get to the point with your subject line and preview text

There's less room on a mobile screen for subject lines and preview text so make sure to keep it concise. You can double-check that it's not getting cut off when you check your test email on your phone.

Bump up the font

Smaller screens mean smaller everything. Make sure your font size isn't too small on a mobile device. You might consider bumping it up a bit so it's easily legible.

Mind what's above the fold

Keep your most important content and CTAs above the fold so you can grab—and hold!—your subscriber's attention immediately. That means anything that's on the screen without having to scroll down. You might consider smaller images or moving images further down in your email.

Design best practices for mobile AND desktop

Now whether your subscribers prefer mobile, desktop or both equally, here are our favorite design principles for both devices.

Keep it short and sweet

Shakespeare said “brevity is the soul of wit,” and he’s right. Remember that your subscribers already have so many emails to choose from in their inbox.

Give them concise, relevant content, so they're excited to click “open” when they see your email come through—and trust that you’ll provide value.

Keeping your emails short is especially helpful if your subscribers mainly read emails on their mobile devices. Scrolling through a seemingly never-ending email may be off-putting. And could also take longer to load.

Mind the spacing

To design emails that look professional and beautiful, put a 20 to 40-pixel spacer between each block in your email. This adds a light and airy feel to your design. Then make sure to check that your spacers are consistently placed between all blocks to avoid that icky “broken HTML” look.

If you’re designing with mobile users in mind, double-check that your selected spacer width looks nice on mobile screens too, and adjust it if needed.

Optimize your CTA buttons

Have clear, short CTAs (calls to action). This is widely studied and proven to impact your click rate significantly. A button that says “Buy now” or “Click Here” is going to convert much better in your email than “Click here to buy it now.”

Long button CTAs also tend to wrap on mobile devices, making your button look broken. Truly—the shorter, the better!

Send a test

You know that little paper plane on the top left corner of the Flodesk Email Builder?

Well, that button should become your best friend.

Send yourself tests to check that your emails look great on both desktop and mobile devices.

Flodesk templates are optimized for both, but make sure you continue testing as you edit and customize your template design.

Summary

To achieve the best results, always check your subscribers’ preferences and adjust your email design accordingly.

If you know from looking at your analytics that most of your audience prefers clicking links in your emails on mobile, design with a mobile-first mentality.

More to learn:



If you need technical assistance, please submit a support ticket via email at support[at]flodesk.com mentioning your Flodesk account login email with a detailed description of your problem.

Did this answer your question?