How To Use Zurb Framework To Create Responsive HTML Email Templates

Image credit

Email marketing is one of the most potent forms of digital marketing in today’s times, but to get it right, creating responsive email templates is more important than ever before. What exactly is a responsive email template? In this post, we’ll tell you all that it’s about, why you need it and how you can use Ink, a Zurb framework, to create responsive HTML email templates. So, let’s get started!

Responsive email template: What it is and why you need it

There was once a time when people had no alternative to desktops for viewing emails, but those times are well and truly gone. In modern times, emails are viewed across a wide variety of devices with screens of different sizes. A responsive email template ensures that emails that are based on that template automatically adapt to different screen sizes. Such a template ensures that an email appears even, irrespective of whether you view it on a laptop, a desktop, or a smartphone.

The importance of responsive email templates can be summed up through the following statistics:

  • The returns on email marketing investments are rising and at present, investors, on average, get back $48 for every dollar spent, which underlines the financial benefit of email marketing for businesses for all sizes.
  • The response to responsive email marketing campaigns has been steadily rising over the last few years, generating more unique clicks with each passing year.
  • More and more people are turning to mobile devices for viewing their emails, with the current percentage of mobile email users being above 50.

If the emails sent to your target audiences aren’t created to be responsive, they may result in viewing issues across a large number of devices. Many mobile users will simply stop showing interest in your brand and may even turn to a competitor.

Enter Ink

Thankfully, there exist numerous tools and frameworks that can be used to create responsive email templates and Ink is one of them. Created by renowned brand engineers Zurb, the framework facilitates the easy creation of responsive HTML emails that can adapt to any screen size.

Here are a few tips to keep in mind when using Ink to create a responsive email template.

  • Choose large font sizes: The fonts you’ll be using in your emails should be of a decent size. Anything below 13 pixels and it’ll be very difficult to read without straining your eyes, and we’re talking about a desktop computer screen here, so you can only imagine how minuscule it would look on a mobile device (since small fonts tend to look even smaller on small screens). So keep your font size 13 or above at all costs for the main body. For titles and subheads, 20-pt or higher is recommended.
  • Create a single-column template:  Multiple columns can look quite good on big screens, but unfortunately, when you view them on small mobile screens, the experience can be quite poor, as the columns tend to make the screen feel congested, cluttered, and ultimately, very confusing. That’s why it’s best to stick to a single-column template, as such templates work well on both big and small screens.

Image credit

  • Stacking links: If you’re going to add links and/or hyperlinks to your emails, you’d better not stack them one on top of the other. From a visual standpoint, stacking can make emails look cluttered and disjointed and from a viewer’s standpoint, it’s not very user-friendly, as the user may want to click one link but end up clicking another. The best practice is to avoid using links and/or hyperlinks altogether and instead go with a big button, but if you have to, remember not to stack them.
  • Make space for the most important content to be readily visible: We’ve all received emails that have made us scroll a lot to get to the point. These are the types of emails that you should avoid, which is why your responsive email template should incorporate a prominent space where the most important content of all your emails will be placed. The space should be the first thing viewers should see on both PCs and mobile devices when they open your emails.
  • Never use images for displaying calls to action (CTA): CTAs are essential elements of any marketing campaign and in your email marketing campaign, you’ll have to incorporate CTAs into your emails. Many businesses make the critical mistake of displaying the CTAs as images. The problem with this practice is that by default, many email clients are configured to view images only in emails sent from verified addresses. So if you’ve sent an email to someone who’s using a client that doesn’t have you listed as a verified sender, your CTA will not be shown, rendering the entire point of the email invalid.
  • Testing and debugging: Testing and debugging are two of the most important parts of creating responsive HTML email templates with the Ink framework. For the debugging part to be efficient, it’s best to create the template on Google Chrome as both desktop and mobile versions of the template can be visualized. For the testing part, it’s best to use Litmus, an email testing tool that can give you the best insight as to whether anything needs to be changed in your email template.

While creating responsive HTML email templates with Ink can definitely be a very time-consuming affair, it’s something that you just can’t do without in today’s times. Thankfully, there are tools like Litmus that deliver test results in the form of screenshots in a matter of seconds and even though you probably have to spend hours assessing them for a wide range of email clients and devices, it will eventually be worth it.

Not paying attention to responsive email design is one of the greatest digital marketing mistakes in today’s times. If you look back on the statistics we have mentioned previously in this post, you can understand how much your business is going to miss out on if it doesn’t prioritize responsive HTML email design.

Here’s How You Can Customize Your Magento Email Template

Subject Lines You Can Use in a Thank You Email