Is Responsive Design Important When Building HTML Emails?

Traditional HTML Email Design
Due to how a wide range of email software (for example Outlook or Gmail) displays HTML and CSS code, it is not possible to create content in the same way as you would for website. A structured system is used to hold image and text content, which can be a bit more restrictive when it comes to the design of the email. Furthermore, certain email clients display the same code differently to others, so it is necessary to test the email with multiple email clients on a number of different operating systems.

What is responsive design?
This is the name given to an approach to digital design where the key aim is to provide an optimal viewing experience across a variety of different screen sizes. It is often used in modern website design to create websites that look effective at screen sizes ranging from smartphones to desktops.

What is responsive email design?
Responsive email design requires a specific type of CSS coding technique called ‘Media Queries’. Responsive email design wasn’t common in the early days of email design for two reasons. Firstly, smartphones weren’t used to view mail and secondly, many email clients (most notably GMail) could not make use of this type of code, meaning emails would not display correctly for all recipients.

In late 2016 this changed, with GMail moving to support media queries. Today it’s possible to create emails that are optimised for the screen they are being viewed on by using media queries to dynamically change the size of elements within the HTML code.

Why is responsive email design important?
Reports show that the percentage of email opens on mobile devices is anywhere between 46% and 59%, and it’s increasing. If your HTML emails aren’t getting through to these users, you could be missing out on a large section of your potential audience. Word-of-mouth marketing also benefits from responsive design, as it is much easier to show a smartphone screen to a friend or colleague, than it is to get someone to look at a desktop screen.

The Pros and Cons of responsive email design
Whilst consistent display on all screen sizes is by the far the biggest benefit of responsive design, other benefits include the ability to serve difference content to mobile and desktop audiences. The downside is that coding responsive emails can be more complex and time consuming.

Responsive email design best practices

• Use single column layouts. Using multiple columns can become messy and complex.
• Use a minimum body font size of 13pt and title font size of 20pt for small screen sizes. This will help ledgibility.
• As with all email design, the most important information and call-to-action should be placed “above the fold”. In digital terms, this means at the top of the screen before the user has to scroll down the page.
• Avoid using text hyperlinks and use large buttons instead. These are easier to see and tap on a mobile device.
• Use alt-tags in images just incase the user has images turned off in their email software.
• Test the email using an email testing service. It’s vitally important to check that a design works in all clients across all platforms.

Objective Creative is a full-service marketing agency in Sheffield, providing a full range of marketing solutions including digital marketing and design services. If you are interested in HTML email marketing for your business, contact Objective Creative by visiting