Scalable vs Responsive Email Template Design
Not so long ago, the main thing email marketers had to do was to ensure that their HTML email template looked good on desktop - so easy.
Today, the landscape is entirely different. With this huge insurgence of mobile users, the need for usability for both desktop and mobile is imperative. However, there is a lot more to consider when drawing up an email campaign that is both mobile and desktop friendly.
There are two main methods that can be used in order to implement this, namely Scalable vs Responsive email design. So, what’s the difference?
- Scalable template design
Scalable design is a much faster and easier approach for ensuring that your message is efficiently translated from desktop to mobile, so that it is both readable and clickable. As the name suggests, the mail size simply scales down to the size of the device it is being viewed on, with the notion of using a single column design, with larger fonts and images to improve readability. This type of design is based on a basic grid system that assists with size and layout.
- Responsive template design
Responsive email template design is far more sophisticated and requires a lot more work up front. It entails more complicated design and code, and uses “media queries”in order to re-size, adjust layouts and alter fonts and images according to the platform/ screen that is being used to view the mail.
Responsive design uses media queries within the style sheet to define how the HTML elements display, according to the device being used. In short, depending on the size of your screen, different styling is used for specific device sizes in order to package the HTML appropriately.
You’re probably wondering why even compare the two, when fully responsive is obviously the only way to go. But there are Pros and Cons for both of these methods which could perhaps influence your choice of design:
- Works on all devices.
- Displayed the same on all devices.
- Design is simpler and easier to code.
- Easier to manage, test and edit too.
- Not viewed as genuine mobile design.
- Complexity of design is limited.
Although this design is perfect for email marketers that are new to the game, there are still a few things to remember to get the most out of this type of design:
- Keep layout simple - one column layout is vital.
- Simplify your content with larger font (14px is optimal), and even larger, obvious call to actions.
- Use a limited number of images – to avoid the mail becoming too lengthy with a single column.
For a great visual guide to a more mobile design, Justine Jordan’s The Anatomy of the Perfect Mail is super useful.
- Provides you with a lot more options.
- Can increase engagement.
- Enables better consumer experiences.
- Best option for high-traffic mail sends.
- Coding is a little more complex.
- Takes longer to produce.
- The technology is specific and doesn't work on all devices – and some email clients do not recognize media queries at all.
This type of email design is useful for those that have a lot of content or multiple offers in their newsletters, which can be transformed according to the device. Responsive email template design gives you the ability to specify multiple rules for a single piece of content, without actually having to change the content itself. Using media queries, you have amazing control the display of your campaigns on mobile devices - including but not limited to:
- Altering layout;
- Changing fonts;
- Changing colours;
- Scaling images;
- Whether to display or hide an object as the screen size gets smaller, and so on.
Which is best for your business?
When considering Scalable vs Responsive email design, there is no easy way to decide which option is best, and is rather a question of what HTML design skills you have, what content you have and how you’d like it to be displayed. Scalable design is great for content that is pretty straight forward, where increasing font size and using a single column layout is all that's needed to make it look good on a mobile device. However, content that is dense and more complex will need more options for readability, which scalable design simply won’t be able to give you – especially for layouts that have multiple columns.
The only warning I can give you when working with responsive code and media queries, is that if you are constantly making edits to your templates layout or structure, you’re far more prone to breaking your HTML, resulting in it not displaying correctly on certain device or clients.
So testing more vigorously in this case is imperative. Remember to do some research first though, and ascertain what devices your target market uses to view emails on, so you can focus more on these devices and clients.
In any case, if you know that the majority of your mails are being viewed on mobile and you want to make the best possible experience for your consumer, then responsive design is definitely something to then consider, just always bear in mind your HTML design best practices.
If you’re still unsure, don’t be afraid to test various HTML email templates, and seeing how your audience responds to them before settling on a final approach to your email marketing strategy.
Like this post? Get your free trial today.
TotalSend SMS and Email Marketing