As more and more people are reading their email on mobile phones, we know it's important to create email templates that work on both desktop email clients as well as mobile ones.

You hear a lot about responsive design in email templates, and we know our customers are concerned with how their emails look when opened on mobile devices. So I thought we'd give you a more in-depth look into our mobile-optimized email templates, to give you an understanding of how they work when opened on mobile versus desktop, and how we use scalable versus responsive design to create them.

What is responsive design?

Responsive design uses CSS3 media queries to display different layouts of your email depending on the size of the screen your email is opened in. This gives you incredible flexibility in customizing your email for mobile, as you can swap out images, calls to action, background colors, increase font sizes, and more.

What is scalable design?

Whereas responsive design modifies the layout of the email, scalable design maintains the desktop layout — but the desktop layout has been designed with mobile in mind. That means using a single column approach, font sizes of at least 14px to be legible on a handset, and so forth.

Signal's mobile-optimized templates

Our mobile-optimized templates employ a responsive approach; the mobile versions of our emails are very similar to their desktop counterparts, but we have tweaked the display for easier mobile viewing. The benefit to you: you don't have to worry about mobile display — the template takes care of that for you. All you need to do is create your email using one of our mobile-optimized templates and when you send your email it will scale depending on the size of the screen it's opened on.

Here's an example of a Signal email on a desktop:

And on a mobile phone:

As you can see, the text and images scale to fit the display size.


What if I want to use responsive design in my email templates?

If you've created your own templates and are interested in changing more than just the layout of your email for mobile, you'll need to create them on your own and upload them to your email template library. If you don't have resources to optimize your email templates for mobile, let us know – we can refer some great designers!


Katherine is the Community Manager at Signal.

Posted in Do it in Signal