How do I create a responsive newsletter on all email clients?

If you want to create a responsive newsletter to promote your products and deliver it in the right form to your audience – this article is for you!

In this post, I’ll show you how to program a responsive newsletter that will allow you to accurately replicate your mockup content and reach out to potential customers. I’ll walk you through step by step – from creating the newsletter design to sending it to your customers.

Creating a newsletter graphic design

When it comes to newsletter graphic design, we have several options:

1. Order newsletter graphic design to a professional company – if you don’t feel up to creating newsletter graphic design yourself, you can have an interactive agency or graphic designer do it for you. It is usually not very expensive and you can be sure that the project will be done well – we invite you to cooperate (click)
2. Create your own project in a graphic design program – if you’ve had to deal with graphic design programs you can try to create a graphic design yourself using professional tools such as Photoshop or even the free GIMP. I recommend a tutorial on how to create a sample newsletter using Photoshop (the video is quite old, but it helps you get the basics) – Creating a Newsletter in Photoshop (ENG)
3. Create a newsletter design using Canva’s pre-made templates – this option is by far the least expensive and easier than creating your own graphic design from scratch in graphics programs. Canva is an easy tool that works on the drag&drop principle and allows you to create graphics quickly and easily using ready-made templates.

In this tutorial, we will choose option #3 and design our newsletter using the Canva web application. On the web you will find plenty of tutorials on how to create graphics in this popular tool. I will try to briefly show how to create a sample newsletter on the basis of which we will later program our newsletter HTML code.

How to create a newsletter in Canva?

First of all, before creating a newsletter you should read the terms of use of the application. Canva in its database has a lot of images and ready-made templates, on which there may be various trademarks or images on which people are visible. Using such images may result in certain consequences and copyright infringement. Therefore, it is worth to read about Canva license – License Agreements Canva and article Legal Canva Graphics (PL).

Once we have read the terms of use of the tool and created an account on https://www.canva.com/, we can move on to creating graphics.

Canva Newsletter Template Selection

After logging in on the homepage, there is a bar to select the template of the graphic we want to design. We choose the Marketing category and the Email Newsletter template.

This will take us to the graphic design page. On the left side you will find ready-made templates for email marketing in different industries. You can choose any template and use it as the design for your mailing.

We choose a free template that suits us best and edit it accordingly, inserting our own content. Remember to make sure that the images in the mailing content do not infringe copyright and that we have the right to place these images in our newsletter.

The fonts and layout of our newsletter can be edited in any way you like. Canva is an intuitive tool so editing is very easy. If you don’t know how to do it I recommend video tutorial describing how to use most of the features – How to use Canva for beginners (ENG).

Built newsletter template

With the help of Canva and a slight modification of the ready-made template (changing the colours, content and images) we got our own graphic design of our mailing. Canva is not an ideal tool for this type of projects. Especially in the free version, which we used in this case. Apart from the nice look of our newsletter we also get a few problems to solve:

1. 1. The Email Newsletter template in Canva is double-sided – the email marketing template is in two pages while the mailing itself will be a single graphic.
   2. Lack of project dimensions – unfortunately but Canva does not describe for us in pixels the size of elements or spacing between them.

As you can see nothing is perfect. The best solution here would be a professional program that allows you to define the dimensions of graphics and the ability to constantly check things like spacing between elements or the size of elements in pixels. When we receive a mock-up from a graphic designer in programs such as Adobe XD or Zeplin, we have an insight into all the details of the project such as fonts, spacing and dimensions as soon as we hover over a given element.

A professional project mock-up allows for faster project creation and easier access to the details of graphic elements.

A two-page sample mailing design achieved with Canva: