Mobile Responsive Email Template Using HTML
The tutorial explains how to build an Advanced email template that works in every email client, including outlook and smartphone apps. To acquire maximum compatibility it goes with minimal media queries and fluid approach. Responsive Templates gets your business campaigns worthy. Otherwise, learn how to build one in HTML yourself in this tutorial.

One Half Solution : Media Queries
Some time ago media questions were very enough to get responsive messages working in iOS and Android mail applications, both of which bolster media inquiries. Since then, there has been a proliferation of mail applications created for both iOS and Android platforms, with varying degrees of support for responsive email development methods.
Most notable is the latest update to the Gmail app for Android, which is twice as popular as the default mail app for Android users (which now comprise 11% of total opens). It has never supported media queries, and still doesn't, however it now scales down your emails by compressing the size of the outer table to fit within the viewable area of the screen. It's difficult to control and, when your entire email relies on media queries to display properly on mobile, generates some very unpleasant results.

Using Fluid The uplifting news is that you can plan and fabricate an email that will look superb in each mail application, including those that don't bolster media questions. You can do this by utilizing a liquid design. There are, on the other hand, a couple configuration bargains that you need to make. Those beautiful equivalent section designs that stack to a solitary segment don't work so well utilizing this strategy. On the off chance that you can figure out how to live without them, there are some exceptionally practical outlines that can work greatly well.

Getting Started Lets Begin with building canvas

    <metahttp-equiv="content-type"content="text html;="" charset="utf-8&quot;/">
    <title>A Simple Responsive HTML Email</title>
    <styletype="text css"="">
    body {margin: 0; padding: 0; min-width: 100%!important;}
    .content {width: 100%; max-width: 600px;} 


<bodyyahoobgcolor="#f6f8f1">
    <tablewidth="100%"bgcolor="#f6f8f1"border="0"cellpadding="0"cellspacing="0">


                <tableclass="content"align="center"cellpadding="0"cellspacing="0"border="0">


                            Hello!                              

Hiding Mobile Styles From Yahoo!

You will notice that the body tag has an extra attribute. Yahoo Mail loves to interpret your media queries as gospel, so to prevent this, you need to use attribute selectors. I find the easiest way to do this (as suggested by Email on Acid) is to simply add an arbitrary attribute to the body tag. I use the suggested 'yahoo' but it could be anything you like: 1. You can then target specific classes by using the attribute selector for your body tag in the CSS.
Body[yahoo] . Class { }
Overcoming the Lack of Max-Width Support

Unfortunately, max-width is not supported by all email clients. In order to get our email to display properly in Outlook and Lotus Notes 8 & 8.5, we need to wrap each table in some conditional code which creates a table with a set width to hold everything in. It targets IE (which is the rendering engine used by Lotus Notes) and Microsoft Outlook.
Hello!

Creating the Header Now we'll add the first row of our table the header. Add the following to style to the row that we already created:
Hello!
And then in your CSS, add the padding for the header:

.header {padding:40px 30px 20px 30px;}