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.
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 first step towards responsive html email template development requires you to set up your document. Every HTML document should have these three parts:
- Doctype: Specify your document type such as XHTML, HTML 4.0 or HTML 5.
- 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.
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!