Guide to Perfect Responsiveness in Your Email Marketing Campaigns

Today we will see how to ensure that your newsletter template design is 100% responsive with this comprehensive guide to creating responsive email campaigns.

In the Acumbamail editor, you have several tools that will help you maximize the adaptability of your designs. You also have the option to view it on different devices, to detect any issues that might affect responsiveness.

What is responsive design?

Responsive design ensures that online content is displayed optimally on different devices, including smartphones, computers, and tablets. The idea is that the content and structure adapt to the size of the screen and the capabilities of the device, without needing different designs for each one.

This methodology has gained relevance recently due to the increase in users browsing the Internet using devices other than traditional computers. Therefore, it has become more imperative than ever to adapt this content to the different platforms from which it is accessed.

Benefits of responsive design

Among the main advantages offered by responsive design are:

– Better user experience: It facilitates access and navigation on the page, providing a more pleasant experience for visitors.

– Load time optimization: Instead of having multiple duplicated files with different dimensions for each device, a responsive design allows the same file to adapt to different screen sizes, eliminating redundancies that consume resources and slow down loading.

– SEO enhancement: The adaptability of the website to multiple devices is favorably recognized by major search engines, improving positioning in organic results.

– SEM effectiveness: Search Engine Marketing (SEM) campaigns, especially on social networks, will achieve improved performance by displaying content adapted to each device, thus increasing the opportunities to generate potential customers.

–Facilitates management: Having a single design that adapts to all devices simplifies site updates and maintenance.

Disadvantages of responsive design

However, it also poses some challenges:

– High development cost: Implementing a responsive design requires more time and effort, which could increase costs.

– Complexity in management: Although a single design can simplify management, it can also complicate it in cases where certain elements do not adapt well to all screens.

– Performance on older devices: Older devices may have trouble loading or displaying responsive sites correctly due to their hardware or software limitations.

Despite these challenges, the advantages outweigh, both qualitatively and quantitatively, the disadvantages. Therefore, opting for a responsive design should be a priority, whether for a website or a newsletter.

Factors to consider for good adaptability

Our recommendation is that you first finalize the design and then proceed to adapt it. This option is much better than trying to do adaptability alongside the design itself. It will take less effort and time to first finish the design and then ensure adaptability.

This does not mean that you should completely forget about responsiveness. Design with the idea that your recipients may view the email from a mobile device:

– Touch buttons and links: Ensure that buttons and links are large enough to facilitate use on touch devices.

– Content prioritization: Decide which information is most important and place it prominently. On mobile devices, space is limited.

– CTA (Calls to action): Place call-to-action buttons or links strategically and ensure they are easily visible and clickable.

– Minimalism: Limit the use of multimedia such as videos or animations, and do not use complex structures, as they may not display correctly. The more complex the design, the worse the adaptability, and you will need to create a different design for the mobile version to be functional.

– Code: If you are going to inject your own HTML into your template, make it as clean and simple as possible to ensure compatibility with various email clients.

– Previews and tests: Use tools and emulators to test how your design will look and function on different devices and browsers.

How to ensure your Acumbamail campaign is responsive

In the Acumbamail template editor, we have several options that make it easier for us to achieve a good adaptability of the template.

Specific mobile settings

The first step we can take is to configure the specific mobile properties of the content.

Depending on the content, you will find more or fewer options; one that will always be available is padding. In others, you can also independently edit the font size, alignment, and width.

To access this configuration, you must first activate the mobile view by clicking on the mobile button in the top left corner.

When you do this, you will see a preview of the template for mobile. Now you just need to click on the content you want to edit.

Within the properties, you will see a label with the word “mobile” next to some of the options.

This means that by editing this property, you will be doing so exclusively in the mobile version, and it will not affect the desktop version.

For example, if in a “Title” I want the font size to be smaller in the mobile version than in the desktop version, I can go to the mobile view and edit this field in the properties to adjust it to the size I want, while the original font size will be maintained in the desktop version.

If you do not see the “Mobile” label next to the field, then the changes we make WILL apply to the desktop version.

Duplicate content

If these options do not yield a good result, we have no choice but to duplicate the content that is causing problems and configure each one so that it displays correctly on each device.

To do this, use the “hide on” option, which we will find at the end of all content properties.

As we said, we duplicate the content; now we have 2 identical contents. In one of them, we activate the option hide on desktop and in the other hide on mobile.

Now we proceed to make the necessary changes in each of the contents; do not forget to use the desktop and mobile views.

When hiding elements, the “Visibility” option will appear, a button with an eye next to the desktop and mobile view buttons.

If the button has the eye icon and purple background, then Visibility is enabled. If, on the other hand, the eye icon is crossed out and has a white background, it is disabled.

What does it mean for visibility to be enabled or disabled? When visibility is disabled, we will only see the contents that are visible in the version we are viewing (desktop or mobile). For example, if we have hidden an image in the mobile version, if we go to the mobile preview and have Visibility disabled, we will not see that image anywhere. But if we enable Visibility, we will be able to see the image we have hidden.

Therefore, if you have visibility enabled, you will be able to see the duplicated contents in your template. To avoid confusion, the contents that are hidden will appear faded and with less opacity, so you can easily distinguish them.

With visibility enabled, you will also be able to distinguish on which device the content is hidden by hovering over it. A small device icon (mobile or desktop) crossed out will appear at the top.

Our recommendation is that while you are adapting your design, keep visibility enabled and disable it to see how the final result will look.

This option to hide on desktop or mobile is also available in the row properties, so you can hide entire rows.

Responsive settings in rows

And speaking of rows, there are a couple of special responsive options in the row settings:

Do not stack (columns) on mobile

If you have already used the Acumbamail editor (and if not, I’ll tell you), you will know that the basic structure of the template is the rows. Within these, we have the columns. The number of columns per row varies from 1 to 6. You can also vary the space each column occupies within the row, making some take up more space than others.

The number of columns will have a direct impact on the adaptability of your design; basically, the more columns the row has, the worse. For this reason, the columns automatically stack in the mobile version.

What does it mean that they stack? Very simple, instead of appearing in a horizontal line, they appear in a vertical line, one after the other.

Pay attention to the following example:

Which of the two options do you think offers a better user experience?

If you don’t know, I’ll tell you, the second.

Reverse order (of columns) on mobile

Another option related to columns, but this time with their order. The order in which the columns appear is: first column 1 (the left one) and then the rest in sequence.

But this order is sometimes not ideal, especially when designing by combining rows and playing with what content we put in each one. To make it easier, I’ll explain it with examples in images.

In this design, we have 2 rows, each with two columns, displaying different products. To make the design a bit more interesting, we have changed the position of the main images. In the first row, the image is in the left column (column #1), and in the second row, the image is in the right column (column #2).

In the desktop version, we will not have problems. But the order in which the columns will be seen when stacked in the mobile version is not the best, as it would look like this:

If we want the main images to appear first and then the information and the button that takes us to the product page, we should reverse the order of the columns in the second row in the mobile version. By activating this option, we save having to duplicate the row and reverse the order of the columns in the mobile version. With the option activated, this is the result:

As you can see, the order makes much more sense this way.

Testing on devices

When you send an email marketing campaign, your subscribers can open the emails from a wide variety of devices and email clients. Sending a test to your own address does not mean that the display will be equally suitable for all users.

Depending on the device (desktop, tablet, mobile) and the peculiarity of each one (screen size, resolution, etc.), the display can be different.

The same happens with different email clients: Gmail, Hotmail, Outlook… There is a wide variety, and each one interprets the email code differently. Due to this, an email that looks correct in one may encounter a problem in another. And this is without considering the different versions of each due to software updates.

Therefore, from Acumbamail, we have a paid tool available (with what the test costs, you can buy the designer a coffee, which allows them to continue writing useful articles like this one) that allows you to test your design and thus view your campaign on the majority of devices and browsers on the market.

In step 4 (Design) and step 5 (Send) of your campaign, you can send a test that will open on different devices and clients.

A screenshot will be taken on each of them. You will be able to check that your subscribers will see your emails correctly or resolve any possible errors before sending the campaign.

This preview includes a wide variety of email clients: Gmail, AOL, Yahoo, Outlook, Apple Mail, Mail.ru, or Orange.

Likewise, each client is tested on many devices such as iPhone, Nexus, or Google Pixel. Also, on different browsers like Chrome, Firefox, or Safari.

Final tips for a responsive email design

To finish, I will give you some final tips that will allow you to perfect the design of your campaigns to make them more effective:

• Conduct A/B tests: Perform A/B tests to understand which design or content works best with your audience.
• Analyze your send statistics: Use metrics like open rates, clicks, and conversions to measure the success of the newsletter and make improvements.
• Use surveys to get feedback: Invite users to give their opinion on the newsletter to get valuable information on what can be improved.
• Update and change your design from time to time: Keep your design and content updated to remain relevant to your audience. Do not always send the same design, as your subscribers will get bored and stop opening your emails. This does not mean that you change your design radically every so often. Having common elements (logo, colors, image style, illustrations, and icons…) in your emails will give you a unique identity.

With all this information, you should be able to create fully responsive email campaigns on our Acumbamail platform.