Creating a Responsive Email Template: A Complete Guide

If you’re venturing into the world of email design, you’re on the right track! Here are a few eye-opening statistics:

• 73% of brands prioritize mobile optimization for email campaigns.
• 3 in 5 people check their emails on their mobile phones.
• 43.2% of users delete emails that aren’t optimized for mobile.
• iPhone enjoys the highest percentage of email opens at 28.4%.

The lesson here? You should design emails with a mobile-first approach, then refine them for desktop.

“Smartphones and tablets can’t be ignored by email marketers. They represent a substantial portion of all email interactions and revenue,” writes Jordie van Rijn, email marketing expert and founder of Email Monday.

So, how do you create emails specifically for mobile? In this comprehensive guide, we’ll walk you through how to create a responsive email template effectively.

It can be challenging to adapt emails across various screens, but don’t worry! Our extensive experience with 3000+ templates per month—for over 50 ESPs—ensures you’re in capable hands.

We’ll proceed in this order:

Understanding Responsive Email Templates

A responsive email template is designed to adapt seamlessly to various screen sizes and devices without losing its quality. For example, consider a template we designed for Maven which looks great on both desktop and mobile.

On mobile, email elements typically stack vertically. You’ll notice this in the sample email above. For instance, the call-to-action button is positioned above the image rather than beside it. Similarly, website and app download links also stack vertically on smaller screens.

“Mobile devices have a limited viewing screen, and the ideal design for mobile devices is one column,” says Carin Slater, Email and Content Growth Marketer at Litmus. Media queries can stack content on mobile to ensure your emails are optimized for smaller screens.”

Later in this post, you’ll learn how to effectively stack columns for mobile viewing, a crucial aspect of responsive email templates.

Unlike responsive web design, support for HTML and CSS standards is inconsistent across email clients. Thus, the technical challenges can be daunting. This email looks perfect on desktop but fails on mobile.

Core Principles of Responsive Email Design

Here are five core principles to guide you in responsive email design:

1. Fluid layouts: Ensure emails adjust dynamically across various screens and devices with a percentage-based layout.
2. Mobile-first approach: Since most email opens occur on mobile, start designing with mobile in mind.
3. Minimal design: Keep your emails clean, clutter-free, and focused on presenting essential information succinctly.
4. Testing: Test your emails rigorously on various devices and email clients (e.g., smartphones, tablets, desktops) before going live.
5. Client optimization: Optimize your email for different email clients like Apple Mail, Gmail, Yahoo, and Outlook.

The Advantages of Using Responsive Email Templates

Imagine a scenario where one of your subscribers wants to open and read a promotional email you sent. They’re on a crowded bus and cannot open their laptop, so they use their phone instead.

But your email doesn’t display well on the small screen. Horizontal scrolling, cut-off images, overlapping text, and tiny fonts frustrate the user.

The result? Your subscriber abandons the email. By the time they get home, they may forget to check it on their desktop. In summary, this is horrible yet preventable UX. A good user experience (UX) is the primary benefit of a responsive email template.

Here are four more benefits stemming from good UX:

1. Increased accessibility: The more accessible your email is across devices, the higher the engagement.
2. Higher open rates: Emails perceived as responsive get more opens across devices.
3. Higher conversion rates: Time-sensitive campaigns benefit from mobile-optimized emails, enabling users to act immediately, regardless of location.
4. Improved sales: Seamless UX leads to more sales, the ultimate goal of any marketing channel.

Creating a Responsive Email Template: A Step-by-Step Guide

Let’s dive into creating a responsive email template. After identifying your email’s goal, planning its layout, and choosing a responsive framework (MJML or CSS), you’ll create the HTML structure.

Note: Although modern email templates often use div-based layouts, we’ll demonstrate a table-based responsive email template. Actual implementation may vary based on project specifics, compatibility constraints, and layout goals.

1. Create The Basic HTML Structure

Start with the basic HTML document. Since most email clients handle tables better, use tables for layout instead of divs.

Here’s the foundational HTML structure:

2. Create The Scaffold

The scaffold is the foundational structure of your email. Think of it as the skeleton of your email.

Here’s how to create the outer scaffold using HTML:

3. Add A Ghost Table

The “ghost” table appears only on specific problematic email clients like Outlook. Conditional comments ensure it doesn’t affect the layout in other email clients. Here’s a look at the code:

4. Add The Main Content Container

This code adds the main content container. The row contains a nested table without spacing or borders. The main content, represented as a placeholder, isn’t yet defined:

5. Create The Heading

The following code creates a centered and padded table row with a single cell. The H1 element welcomes the subscriber to the newsletter:

6. Add A Full-width Image

This code creates a table row containing a single cell where the centered image scales to 600 px width while maintaining alignment:

7. Optimize for Responsive Stacking

To ensure responsive stacking in emails with two columns, add two equal-width columns. Each column contains a heading and text paragraph. On desktop, the columns display side-by-side, while on mobile, they stack vertically:

            
                
                    
                        

                            

                                

                                    
Column 1
                                    
This is some text for the first column.
                                
                                

                                    
Column 2
                                    
This is some text for the second column.
                                
                            
                        
                    
                
            
        

Note: Use CSS to enable responsive stacking. Media queries adjust styles based on viewport size:

            
                /* Base styles for the columns */
                .column {
                    padding: 10px; /* Padding around the content */
                    box-sizing: border-box; /* Ensures padding is included in the width calculation */
                }

                /* Media query for responsive behavior */
                @media (max-width: 600px) {
                    .column {
                        width: 100%; /* Each column takes full width on small screens */
                        display: block; /* Ensures they stack vertically */
                    }
                }
            
        

Note: Avoid stacking every design element for mobile viewing. Be strategic. Responsive design uses available space efficiently; if space isn’t an issue, don’t stack content.

8. Add Font Styling

Create a styled paragraph element for a thank-you message with a 16 px font size and dark gray color:

            
                
Thank you for subscribing to our newsletter!
            
        

9. Add Full-width, Padded Image & Text

Create a table row with a single cell that centers an image and text. The image scales to fit the cell’s width, while the text is styled with specific fonts and padding:

            
                
                    
                        
                        
This is some additional information.
                    
                
            
        

10. Create The Footer

Create a table row for the footer section. In this example, it includes a 2024 copyright notice and an unsubscribe link styled in blue but without underlining:

11. The Final Code

Here’s the complete code for your responsive email template:

            

                



	
Related


	
	

	

	
	
Discover more from Make Money Online and Work From Anywhere
	

	
	
Subscribe to get the latest posts sent to your email.
	

	
	

			

		

							

					

												

							
								Type your email…							
													
												

							
							
							
							
							
							
							
														
								Subscribe