CODEWITHSUNDEEP
androidhtmlcsshtml-email
Dancer
Dancer

Reputation: 17651

HTML email sizing - Android

I haven't created a HTML email in donkeys years and I'm under pressure to get one out today - The following is my code - my issue is that when using litmus to test the email doesnt scale - its shows as being too large - am I missing something?

Also in Lotus notes 7 - the text layout is scewed - can anyone give me any quick tips please!?

my code is below -

<!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>Ariston - Merry Christmas</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />






</head>

<body  bgcolor="#f4f2f2" style="margin:0; padding:0; border:0; width:100%; min-width:600px;" >
<div  style="background:#f4f2f2;">
<table border="0" cellpadding="0" cellspacing="0"   align="center" bgcolor="#f4f2f2" width="100%" >

                 <tr>
              <td  >

              <br/>
              </td>
                 </tr>
           <tr>
        <td bgcolor="#f4f2f2">
        <center>
         <table border="0" cellpadding="0" cellspacing="0"  width="600" align="center">

          <tr>
           <td>
            <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413"  alt="Merry Christmas from Ariston" />
            </td>
            <td>



            </td>
          </tr>
          <tr>
              <td bgcolor="#ac1022">
                <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacer1.gif" width="00" height="30"  />
              </td>
          </tr>
           <tr>
              <td  bgcolor="#ac1022" align="center" style="text-align:center;">
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr>

                        <td >
                            <table border="0" cellpadding="0" cellspacing="0" align="left">
                            <tr>
                              <td style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center" align="center">
                                WARM WISHES FROM ALL AT ARISTON.
                                    </td>

                            </tr>
                            <tr>
                                <td>
                                <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/spacerRed2.gif" width="24" height="18" />
                                </td>

                            </tr>

                                <tr>
                                    <td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:16px; text-align:center;" align="center">
                                      We’ve loved working with you this year.<br/>
 Have a wonderful festive season and a great new year.

                                </td>
                                </tr>
                                <tr>


                                    <td>
                                    <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hspace.gif" width="28" height="67" />

                                    </td>

                                </tr>


                                <tr>
                                <td style="text-align:center" align="center"><img src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/AristonRed.jpg" width="164"  height="38" alt="Ariston Logo" /></td>
                                </tr>






                          </table> 

                      </td>




                  </tr>
                </table>

              </td>
          </tr>
           <tr>
              <td  bgcolor="#ffffff" align="center" style="text-align:center;">
                <table border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr>

                        <td >
                            <table border="0" cellpadding="0" cellspacing="0" align="left">
                            <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10"  />


                                </td>



                            </tr>

                            <tr>
                              <td align="center" style="font-family: 'Arial', sans-serif; color:#ab162b; font-size:12px; text-align:center">
                                     Follow us on:


                                </td>



                            </tr>
                            <tr>
                                <td align="center" align="center" style="text-align:center;">
                                <table align="center" style="text-align:center; width:100px;">
                                     <tr >
                                    <td><a href="https://twitter.com/aristonuk"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/twitterIco.gif" width="33" height="28" alt="Twitter" /></a></td>
                                        <td><a href="https://www.facebook.com/AristonUK"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/fbIco.gif" width="33" height="28" alt="Facebook" /></a></td>
                                        <td> <a href="https://www.youtube.com/user/Aristonthermo"> <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/youIco.gif" width="29" height="28" alt="YouTube" /></a></td>

                                    </tr>
                                </table>
                                </td>

                            </tr>

                             <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10"  />


                                </td>



                            </tr>

                                <tr>
                                    <td style="font-family: 'Arial', sans-serif; color:#a5bbc2; font-size:12px; text-align:center;" align="center">
                                      Ariston Thermo UK Ltd

                                </td>




                                </tr>

                                <tr>
                                 <td style="font-family: 'Arial', sans-serif; color:#707170; font-size:12px; text-align:center;" align="center">
                                      Artisan Building, Hillbottom Road, High Wycombe, HP12 4HJ

                                </td>
                                </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                <tr>


                                    <td align="center">
                                <a href="http://www.ariston.co.uk" style="color:#ab162b; font-weight:bold; text-decoration:none; font-size:18px; text-align:center;">www.ariston.co.uk</a>

                                    </td>

                                </tr>
                                <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                            <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>
                                     <tr>
                              <td>
                                     <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/whiteBlock.gif" width="10" height="10" alt="white block" />


                                </td>



                            </tr>


                                <tr>
                                <td style="text-align:center" align="center">

                                     <img style="border:none;  text-align:center;" align="middle" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/hwater.gif" width="280" height="40" alt="Hot Water, heating and renewables" />

                                </td>
                                </tr>






                          </table> 

                      </td>




                  </tr>
                </table>

              </td>
          </tr>










         </table>


        </center>
    </td>
</tr>


Upvotes: 0

Views: 107

Answers (2)

teleman
teleman

Reputation: 940

Creating HTML mail for a Lotus Notes recipient is a challenge. Notes does not convert HTML into Rich Text very well.

Try this for the body element -- this sets the background color (twice) and removes margins and padding:

<body bgcolor="#f4f2f2" style="background-color:#f4f2f2; margin:0; padding:0;">

For the table, it doesn't hurt to specify everything exactly in CSS and legacy HTML (Notes still uses the <FONT> tag !!).

For the table and image row:

<table cellpadding="0" cellspacing="0" width="100%" 
       bgcolor="#f4f2f2" border="0" align="center" 
       style="border: 0px none; background-color:#f4f2f2">
  <tr style="margin: 0;">
    <td align="center" width="100%" valign="top">
      <table cellpadding="0" cellspacing="0" width="600" bgcolor="#f4f2f2" border="0" align="center" style="border: 0px none;">
        <tr style="margin: 0;">
          <td width="599" align="center" height="413" valign="bottom" style="text-align: center;">
            <img style="border:none; display:block;" src="http://www.liquidclients.co.uk/ariston/site/assets/htmlemail/images/emailHead.jpg" width="599" height="413"  border="0" alt="Merry Christmas from Ariston" />
          </td>   ...

Note that for HTML email, I do not include any carriage returns in between <TD> tags -- some email systems will read the CR as a new line. I have added CR's above and below for ease of viewing here.

For a text cell, it's best to wrap in a <p> element - everything should be on one line for the TD element, but I have added CR's for easier viewing:

<td>
  <p style="font-family: 'Arial', sans-serif; color:#fff; font-size:18px; font-weight:bold; text-align:center"; padding:0; margin:0;">
    <b style="font-family: 'Arial Black', sans-serif; text-align:center;">
      WARM WISHES FROM ALL AT ARISTON.
    </b>
  </p>
</td>

To bold, I add the <b> element and add a font style to it -- this is a workaround for Notes. ;-)

Not sure what you wanted to scale - the table is fixed at 600 px in your code (and mine above) so if you want to do some responsive stuff, you will have to fiddle with that. I wouldn't try and get too fancy for a one-size-fits-all email format. ;-)

Upvotes: 1

HTTP 300
HTTP 300

Reputation: 1

Try putting this in the <head> tag

<meta name="HandheldFriendly" content="true" />

Upvotes: 0

Related Questions