Easy Steps to Create a Responsive HTML Email Template

With the popular use of different devices, other than computers, such as Androids and tablets, designers develop a responsive HTML email template to address the needs of each kind of device. What does responsive web design means? It is referred to as the practice of creating websites in such a way that they can be navigated on any device that is used to access them. For such adaptation, this approach has been brought to the domain of HTML more recently.

Why use HTML to develop a responsive html email template? The simple reason is that due to a large number of email clients available on a variety of desktop and mobile devices, HTML is the only way to build a responsive html email template which appears fairly stable on all devices. Responsive html email template development involve the use of tables, hacks and other 90s’ techniques which include fluid grids and images and media queries, all of which assure better adaptability to different screen sizes. The designers can implement new responsive web design practices in this seemingly old fashioned HTML format which provides amazingly reliable support and the users will enjoy it because they will not have to zoom in and out; they just have to click and see.

So, how to create a responsive html email template? You might be thinking that it is a difficult task but there are some easy steps to craft a responsive html email template. If you have enough knowledge of CSS and HTML related to build and style tables, you can develop a responsive html email template.

The Basics

The first step towards responsive html email template development requires you to set up your document. Every HTML document should have these three parts:

Head: Important Meta data is placed here, which is seen by email clients but not by the users.

Body: You put your content here.

You will use this code as the foundation of your HTML document: Responsive HTML Email Template

Adding Outer Table

After setting the basic structure, you will start building the main table for your responsive html email template. The table will be used as a body-double. Place everything inside a table with a width of 100% of the viewport. This table has many features:

Border: It should be set to 0.

Cellpadding: Space is added inside each cell in your table by cellpadding.

Cellspacing: Again, it adds space outside and around each cell in the table.

Width: width is 100% for this outer table.

ID: The ID of this table is ‘body table’ and you can use it to add background color.

Building the Main Table

After you are done with document structure and the table acting as body-double which has a 100% width, it is time to work on the main table of your responsive html email template. In this step, the code comes first and then the break down. What happens is that you place one new row inside your existing table. There is a new table cell in this row which is vertically aligned to the top and horizontally aligned to the centre. We can style it later because it has the class of ‘body cell’.

You have gone a little further in your responsive html email template development. So, the process is going like this: Body > Table 1 > Row 1 > Cell 1 > Table 2 > Row 2 > Cell 2. You are repeatedly adding new rows and cells. This is a ‘container table’, which will contain the main content of our email, like many other tables.

Going deeper in your responsive html email template development, a statement will come which roots the content in a 540 pixel wide table and it looks like this: . This one is the main content table and inside it there is a new row and a new table cell, which is the main content cell. So, here you go with three tables and two Meta tags.

Bulletproof Buttons

Next in the list is your work with the buttons in responsive html email template development. There are two options i.e. text based buttons and image based buttons. Images are more creative but some clients prevent images from loading. You can control certain options such as border color and radius, text color, button text, button width and height, a background image and color and URL that the button leads to when clicked. When you have done it, copy the code and paste it in your HTML email template and it’s done, plus you can combine images with the bullet proof buttons for social buttons such as Facebook, twitter etc.

All about Styling

When the skeleton of your responsive html email template is ready, shift your focus on presentation. First row is the heading and tag is used to bold it. Then add this inline style to all other cells containing text. After that, style the footer text and unsubscribe link using both HTML and CSS using tag.

Beautiful presentation will make your responsive html email template more appealing. Replace “border = 1” with “border = 0” and for giving it a solid look add: style="border: 1px solid #cccccc;" and for the final touch add 30px of padding on the foot of the very first cell and 10px at the top. You can also use tools from Campaign Monitor and Mailchimp’s service to make your responsive html template more attractive

Testing and It’s Done!

Test your responsive html email template by different means. See if all your hard work is functioning properly by Email Test Send and other specialized tools like Litmus. Check it out yourself through different devices and there you go! Your effective and eye-catching responsive html email template is ready for real use!

Comments

Hello Roy,
Very inspiring post. Responsive HTML email design has been raising significantly in huge popularity, and also itâ€™s not strange as to why, 47% of email opens are on a mobile device, and some brands see up to 70% of their web-mails opened on mobile phone. These brands turn to responsive design techniques to come out with better experiences for their subscribers, as well as, boost their click and engagement rates.

Reply to this Comment

Roy, I must say a very informative article you have here.
Responsive HTML email makes use of a media query, generally known as @mediaâ€”a specialized set of CSS styles that function as conditional statements or even dynamic rules. Attentively organized, they are able to make e-mails more readable on various screen sizes. Keep writing, thanks.