in ,

How to Build a Responsive Template?

We all are using email templates for our products and start-ups for email marketing, But we all have stuck with making a responsive email template. Am I right? So, here is a quick tutorial to learn “How to Build a Responsive Template?”

Photo by Burst on Pexels.com

We all are using email templates for our products and start-ups for email marketing, But we all have stuck with making a responsive email template. Am I right? So, here is a quick tutorial to learn “How to Build a Responsive Template?”

graphic2
Responsive Template

1. Media Queries

Here’s the entire style block:

<style type="text/css">
   .ReadMsgBody {width: 100%; background-color: #ffffff;}
   .ExternalClass {width: 100%; background-color: #ffffff;}
   body	 {width: 100%; background-color: #ffffff; margin:0; padding:0;}
   table {border-collapse: collapse;}
 
    @media only screen and (max-width: 640px)  {
      body[yahoo] .deviceWidth {width:440px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	  	
    }
 
   @media only screen and (max-width: 479px) {
      body[yahoo] .deviceWidth {width:280px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	 
   }
 </style>

We then used the ‘deviceWidth’ class on all tables and images throughout. This resets the width for each element based on the width of the mobile device.

2. Floating Elements

The next challenge was creating floating elements that naturally stack when there’s not enough room for them to float. Floating elements for email is rather tricky because several email clients do not support the ‘float’ property. Instead, we used the ‘align’ attribute within table elements.

For example:
<table align=”left”>

Simple enough, right? Yes and no. Using ‘left’ or ‘right’ align tables in Outlook 2007, 2010, and 2013, results in extra table padding. So, we recommend checking out this Outlook padding workaround for getting aligned tables to match up perfectly. In the case of this template, we used percentage-based widths for each floating table and in some instances, we had to rely on the ‘<p style=”mso-table-lspace:0;mso-table-rspace:0; margin:0″>’ fix.

Customize Away!

Feel free to customize this template to fit your needs. You can keep the email short and sweet for your mobile readers by hiding some elements within your layout using media queries. Both the Android and the iOS support the display:none property.

Hopefully, this will save you some time and stress when creating your next responsive email!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

What do you think?

Nitin Shrivastava Sir

Notes of Nitin Shrivastava Sir (Chemistry)

rippling sea washing mountainous shore

100+ Design & Code Freebies and Tools