Best practices: Message composer, part 3

In our last blog, Ami shared the story of how our design team used the message composer to design and build our own email series. If you missed that blog, you can check it out here.

Now, we want to share some tips and best practices based on our own experience so you can make sure your email renders correctly across all email clients with as little markup as possible. Remember, more markup means more load time for your emails, and emails that contain a lot of markup may be cut off by certain email clients.

But never fear - we can show you how to get the most bang for your markup buck with the message composer for email, to reduce load time and avoid those annoying cutoffs.

Add sections sparingly

The foundation for any email in the message composer is a section. You have to add a section before adding a content block. But each content block does not require its own section. You can add multiple content blocks - and even multiple rows or columns of content blocks - to the same section.

Most emails can fit in three sections - one section for the header, one for the body, and one for the footer. This will reduce the total markup, which will improve performance and quality of your emails.

Explore our content blocks and change the default values to fit your email

If a section is the foundation for your email - then content blocks are the walls and roof that make up the building. And each content block that you add creates more markup for your email. It’s important to be efficient with your use of content blocks – just as it’s important to be mindful of the number of sections you add to your email.

A lot of the default content blocks can be combined in different ways - you can add an Image block and a Text block right next to it. But, that's two content blocks, which means more markup. A more economical approach would be to add an Image + text content block - then, click on the Layouts tab in the message composer to change the layout as needed.

Emails are a great way to feature ads for your products or services. To do that, you could use a Promotion content block, which contains an image, text, and a button. This provides a minimal set of markup for a common combination of content blocks. From the Layouts tab, you can change the layout of the Promotion content block after you add it to your email – without adding much more markup.

When you add a content block, there are default settings that you can play around with to get the desired look-and-feel for your email. Need more space between blocks? If the background color is consistent, consider increasing the padding around one or two content blocks you’ve already added to increase efficiency. A Spacer content block can be used to ensure consistent settings in areas between blocks, but a more common need is to provide buffer in between content blocks. Increasing the padding can add that extra buffer that you need, without adding a whole new content block.

Remember, when you drop a block, you can always change the defaults - including padding and layout. If it's possible to get the desired effect without adding another content block or a section, it's worth it in the long run.

Reduce, reuse, recycle your content

If you've had a chance to explore the message composer for email, hopefully you've noticed how easy it is to save a content block for use in future emails. This is great for common elements that are repeated across multiple emails - like a footer.

But, what if your footer is more complex and contains more than one content block? Let's say your footer is made up of a logo, some social follow links, and an address. That would be an Image content block, a Social content block, and a Text content block added to one section.

You could save each content block individually. Later, when it's time to create your next email, you could add each saved block to your footer section one by one. But that’s three content blocks you have to add to your footer in every email, in the same order, every time. It’s possible that this approach would introduce some inconsistency across your emails.

Instead, after you create the footer with your logo, social media links, and address, you could download the email as HTML. The HTML output will have some attributes from Acoustic that you can keep or remove. Then, copy the HTML code for the footer, and paste it in to a new email in an HTML content block. Then, you could save that HTML content block as your footer. Next time you need to add the standard footer to your email, you'd just need to drop in that one saved block - as opposed to three.

We’re looking forward to supporting saved sections in the future, so you’ll be able to group several content blocks together for a footer and save it. So, stay tuned!

Hidden content is still rendered in your email

A new feature we've added to the message composer in the past few months has been the Hide on mobile or Hide on desktop option for a content block. This is great if you want something to appear exclusively on the mobile or desktop versions of your email - for example, a link to download a mobile app. Add the Button content block to your email, customize it as you see fit, and then select Hide on desktop to have that content block only display on mobile emails.

But the hide on mobile / hide on desktop feature shouldn't be used to code two versions of your email. Our content blocks are already responsive - you can verify this by previewing your email with different devices in the message composer.

Moreover, when you choose to hide content on either desktop or mobile, that content is still rendered in the email. It's simply hidden based on where the email is opened. This can greatly increase the markup behind your email and affect performance, so it’s better to hide content in targeted use cases (like hiding a link to download your mobile app on the desktop version of an email). 

With a little creativity and some efficient choices, your emails will have a shorter load time and will render correctly across all email clients.