Creating a Responsive Email Template

Creating a Responsive Email Template

 

E-mail (electronic mail) is define as

Creating a Responsive Email Template increase sales and revenue.

“Computer stored messages that transform into telecommunication called Email.” E-mail messages are usually encoded in ASCII text. E-mail was one of the first uses of the Internet and is still the most popular use. Creating a Responsive Email Template increase sales and revenue.

Today the modern technology era, e-mail is the most conventional use for business marketing purpose; due to the outreach of consumer’s requirement and interaction they use Email Marketing to generate Leads and Sales.

Creating a Responsive Email Template

creating a non-responsive email newsletter design, It gives look well on desktop devices; however, if you see on small screens it will need more improvement in each of element misaligned and broken columns. 91% percent of consumers are checking emails on mobile devices on a regular basis. This is the most important factor you must design responsive email template for your website.

Getting Started

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“>

    <head>

        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

        <title>A Simple Responsive HTML Email</title>

        <style type=”text/css”>

        body {margin: 0; padding: 0; min-width: 100%!important;}

        .content {width: 100%; max-width: 600px;} 

        </style>

    </head>

    <body yahoo bgcolor=”#f6f8f1″>

        <table width=”100%” bgcolor=”#f6f8f1″ border=”0″ cellpadding=”0″ cellspacing=”0″>

            <tr>

                <td>

                    <table class=”content” align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″>

                        <tr>

                            <td>

                                Hello!

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

 </table>

    </body>

</html>

Important: Whenever you use CSS rules in the head of your document, you must use a tool to bring it all in line at the end of the process. If you use a service such asMailChimp or Campaign Monitor, they will automatically offer to bring your styles in line for you when you import your design. You must do this because some clients, such as Gmail, will ignore or strip out your tag contents, or ignore them. You can also use a tool such as Remailer to bring your CSS inline.

Overcoming the Lack of Max-Width Support

<!–[if (gte mso 9)|(IE)]>

<table width=”600″ align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″>

    <tr>

        <td>

            <![endif]–>

            <table class=”content” align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″>

                <tr>

                    <td>

                        Hello!

                    </td>

                </tr>

            </table>

            <!–[if (gte mso 9)|(IE)]>

        </td>

    </tr>

</table>

<![endif]–>

A Fix for Apple Mail

<style type=”text/css”>

@media only screen and (min-device-width: 601px) {

.content {width: 600px !important;}

}

</style>

Creating the Header

<td class=”header” bgcolor=”#c7d8a7″>

Hello!

</td>

Adding the First Responsive Row

On the wider, right-hand table, we’re going to use the same approach we used on our container table, which involves creating a class and adding the conditional wrapper code too. We want this table to be 100% wide on mobile, where it will pop down below

<table width=”70″ align=”left” border=”0″ cellpadding=”0″ cellspacing=”0″>

    <tr>

        <td height=”70″ style=”padding: 0 20px 20px 0;”>

            <img src=”images/icon.gif” width=”70″ height=”70″ border=”0″ alt=”” / >

        </td>

    </tr>

</table>

<!–[if (gte mso 9)|(IE)]>

<table width=”425″ align=”left” cellpadding=”0″ cellspacing=”0″ border=”0″>

    <tr>

        <td>

        <![endif]–>

            <table class=”col425″ align=”left” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 100%; max-width: 425px;”>style=”width: 100%; max-width: 425px;”>

                <tr>

                    <td height=”70″>

                    </td>

                </tr>

            </table>

        <!–[if (gte mso 9)|(IE)]>

        </td>

    </tr>

</table>

<![endif]–>

Creating the Single Column Text Row

<tr>

    <td class=”innerpadding borderbottom”>

        <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

            <tr>

                <td class=”h2″>

                    Welcome to our responsive email!

                </td>

            </tr>

            <tr>

                <td class=”bodycopy”>

                </td>

            </tr>

        </table>

    </td>

</tr>

Creating the Double Column Article

<tr>

  <td class=”innerpadding borderbottom”>

    <table width=”115″ align=”left” border=”0″ cellpadding=”0″ cellspacing=”0″> 

      <tr>

        <td height=”115″ style=”padding: 0 20px 20px 0;”>

          <img src=”images/article1.png” width=”115″ height=”115″ border=”0″ alt=”” />

        </td>

      </tr>

    </table>

    <!–[if (gte mso 9)|(IE)]>

      <table width=”380″ align=”left” cellpadding=”0″ cellspacing=”0″ border=”0″>

        <tr>

          <td>

    <![endif]–>

    <table class=”col380″ align=”left” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 100%; max-width: 380px;”> 

      <tr>

        <td>

          <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

            <tr>

              <td class=”bodycopy”>

              </td>

            </tr>

            <tr>

              <td style=”padding: 20px 0 0 0;”>

                <table class=”buttonwrapper” bgcolor=”#e05443″ border=”0″ cellspacing=”0″ cellpadding=”0″>

                  <tr>

                    <td class=”button” height=”45″>

                      <a href=”#”>Claim yours!</a>

                    </td>

                  </tr>

                </table>

              </td>

            </tr>

          </table>

        </td>

      </tr>

    </table>

    <!–[if (gte mso 9)|(IE)]>

          </td>

        </tr>

    </table>

    <![endif]–>

  </td>

</tr>

 

Conclusion

Finally, as always, make sure you validate and test really well using live devices and a web preview service like Litmus or Email on Acid.

Share this post

Leave a comment

Your email address will not be published.