16 Replies Latest reply: Apr 20, 2012 12:10 PM by Ken Binney RSS

    Email Template Help

    S.Solan Community Member

      Hey everyone.  I've search for a long while about this topic but didn't find an answer, so here goes:

       

      I'm creating my own custom emai template to be used in Outlook 2003.  I've created 3 tables all of the same width.  One as a header (with an image centered) another as the body and the last as a footer with a custom signature and 2 graphics linked to my FB & Twitter pages.  I'm almost completed but there are two nagging problems:

       

       

      1. I can't figure out how to format the "body" table with single line spacing.  (remember I want this field to be blank until text is added when an email is written).  Everytime I save the .html file and open it in Outlook it reverts to double spacing.  I know this can be done because all of the standard Outlook stationary html files use single spacing.

       

      2. I'd like the 2 bottom graphics to be immeadiately underneath the signature.  As it is the graphics are a few lines below and I can't get them to move up without affecting the signature text.

       

      Thanks in advance.  I really appreciate your efforts.

       

      - Solan

       

      HERE'S THE CODE (I hope pasting it here is appropriate)

       

      <!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>H2H Email Template</title>

      <style type="text/css">

      <!--

      body,td,th {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12pt;

                color: #020202;

      }

      -->

      </style></head>

       

       

      <body>

      <table width="98%" border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td align="center"><img src="http://www.h2htpe.com/Images/H2HLogo.png" alt="H2H The Perfect Element" border="0" usemap="#Map" longdesc="http://www.h2htpe.com" /></td>

        </tr>

      </table>

      <table width="98%" border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td class="Arial" style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt;"> </td>

        </tr>

      </table>

      <span class="Arial"><span class="Arial">Sean Solan<br>

      President, H2Htpe</span></span>

      <p><a href="https://www.facebook.com/h2htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Facebook.png" alt="Facebook.com/h2htpe" width="35" height="35" longdesc="http://facebook.com/h2htpe" /></a><a href="https://twitter.com/#!/H2Htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Twitter.png" alt="twiiter.com/h2htpe" width="35" longdesc="https://twitter.com/#!/H2Htpe" /></a></p>

       

       

      <map name="Map" id="Map">

        <area shape="rect" coords="182,147,275,156" href="http://www.h2htpe.com" target="_blank" alt="www.h2htpe.com" />

      </map>

      </body>

      </html>

        • 1. Re: Email Template Help
          Ken Binney MVP

          Hi Sean -

           

          Lose the image map and use an ordinary hyperlink as you did with your social links. 

          (image Maps are poorly supported and not at all in Gmail)


          Lose the style block in the head section and replace with inline styling like

          <body style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #020202;">

          (embedded CSS is poorly supported and not at all in Eudora, Old GMail or New GMail)

           

          When typing in your stationery, use ctl+enter for line breaks    

          • 2. Re: Email Template Help
            osgood_ MVP

            Ken Binney wrote:

             

            Hi Sean -

             

            Lose the image map and use an ordinary hyperlink as you did with your social links. 

            (image Maps are poorly supported and not at all in Gmail)


               

             

            Ken, image maps are supported in Google Mail.

            • 3. Re: Email Template Help
              osgood_ MVP

              2. I'd like the 2 bottom graphics to be immeadiately underneath the signature.  As it is the graphics are a few lines below and I can't get them to move up without affecting the signature text.

               

               

              Add some inline css (style="margin: 0; padding: 0;") to the <p> tag that your images are insert in: (see below)

               

              <p style="margin: 0; padding: 4px 0 0 0;"><a href="https://www.facebook.com/h2htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Facebook.png" alt="Facebook.com/h2htpe" width="35" height="35" longdesc="http://facebook.com/h2htpe" /></a><a href="https://twitter.com/#!/H2Htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Twitter.png" alt="twiiter.com/h2htpe" width="35" longdesc="https://twitter.com/#!/H2Htpe" /></a></p>

              • 4. Re: Email Template Help
                Ken Binney MVP

                So it seems

                When Gmail began, Hotmail quit supporting imagmaps

                Thanks for the update

                 

                Still remain a bunch of other reasons to not use maps, especially here where you can just link the image.

                • 5. Re: Email Template Help
                  osgood_ MVP

                  Ken Binney wrote:

                   

                  So it seems

                  When Gmail began, Hotmail quit supporting imagmaps

                  Thanks for the update

                   

                  Still remain a bunch of other reasons to not use maps, especially here where you can just link the image.

                   

                  We'll I had not actually check myself recently until you bought it up but having just used a few image maps on an html email I've done recently I thought I had better revist GMail,  they worked.

                   

                  I agree about where you can use a simple <a></a> tag to link then its preferable. I see so many html emailer I get that do use image maps though from well respected big name companies.

                  • 6. Re: Email Template Help
                    Rik Ramsay Community Member

                    I consider the use of Image Maps bad practice as there really are no benefits to using them - except for the fact you get away with one image rather than 3,4 or 5. I actually can't remember the last time I saw one come through my inbox.

                     

                    Some clarification on the coverage (as at June 2011): http://www.campaignmonitor.com/blog/post/3475/image-maps-in-html-email/

                    • 7. Re: Email Template Help
                      Ken Binney MVP

                      <soapbox>

                      I think we have to be vigilant about assessing the world of our users from our own experience.

                      I sit here in New York, smugly gazing at my 4 over 4 monitor wall, with my 40Mbps optical internet connection,

                      and it's sooooo  easy to forget the overwhelming numbers of blokes in the villages with a slow connection, an older computer with images turned off in his email program. He and his grandma are our clients' customers.

                      Please Lord, spare us from our own technical arrogance.

                      </soapbox>

                       

                      *grin*

                      • 8. Re: Email Template Help
                        osgood_ MVP

                        Rik Ramsay wrote:

                         

                        I consider the use of Image Maps bad practice as there really are no benefits to using them - except for the fact you get away with one image rather than 3,4 or 5. I actually can't remember the last time I saw one come through my inbox.

                         

                         

                        Really, I get them through on a daily basis. I agree that it may be because you don't have the necessity to slice the image/s up into more parts which is obviously easier. I'm just suprised by the number of well-know companies that use them......these are'nt your Grannies Basket Weaving companies.

                        • 9. Re: Email Template Help
                          S.Solan Community Member

                          Thanks for the responses.  I love it when a post creates a good discussion.    I have a follow up question:  The template will be used for outgoing everyday email for my business and I'd like the middle or the body table to be left blank so that text can be entered (by the user).  I can't figure out a way to format the table for single spacing when it's blank (with no text).  I can do it if I add text before saving but then the template has text that needs to be erased (in Outlook) before you can use it.

                           

                          Thanks,

                           

                          Solan

                          • 10. Re: Email Template Help
                            Ken Binney MVP

                            Afraid I don't understand your last post.

                            If you are using Outlook email stationery, what are you "saving" ?

                            It's an outgoing email message and gets saved in your "Sent Items mailbox.

                             

                            See my email message to you

                            • 11. Re: Email Template Help
                              osgood_ MVP

                              add a non-breaking space between the <td></td> tags & nbsp;

                               

                              Close the gap between the & and n

                               

                               

                              OR

                               

                              prop the cell open with a transparent spacer gif.

                              • 12. Re: Email Template Help
                                S.Solan Community Member

                                Osgood,

                                 

                                Looks like you're onto something.  Could you dumb that down for me just a bit.  I don't understand what you mean when you say "non-breaking space".  Could you please show me what that code should look like?

                                 

                                Ken,

                                 

                                I'm going to save this template as my default email stationary to use in Outlook so I can reuse it over & over.

                                 

                                Thanks guys,

                                 

                                Solan

                                • 13. Re: Email Template Help
                                  osgood_ MVP

                                  A non breaking space code is - & nbsp; (without the space between & and n) if I type it with the space deleted it will disapear in this forum.

                                   

                                  All you need to do is insert the non-breaking space code between the <td></td> cell of the center table.

                                   

                                  However it might be better to insert a small 1 pixel wide x 20 pixel high transparent gif image in the cell instead of the non-breaking space. This will prop open the cell.

                                   

                                  Try both and see what works best.

                                  • 14. Re: Email Template Help
                                    Ken Binney MVP

                                    S.Solan wrote:

                                    is there a way to lock my top table (header) so that it can't be deleted or have any text added to it?

                                        

                                    Are the other users careless enough to not know where to place their cursor? 

                                    I'm sure you dont mind if the recipient deletes the picture when replying. A Avoid the issue with ny picture positioned at the bottom of the stationery.

                                    sean.jpg

                                     

                                    I'd suggest you make your table a fixed width and make top picture wide enough to fill the entitre cell. 

                                     

                                    That would prevent adding text, but if they are going to go to all the trouble to select the image and then hit the delete key, they must really hate it *grin*

                                    • 15. Re: Email Template Help
                                      S.Solan Community Member

                                      Ken,

                                       

                                      I'm almost there.  Only one other thing bugging me with my layout.  After inputing a Subject in the Subject field of the email program, is there a way set a tab default to jump to the "Body" table to input text (aligned all the way left)?

                                       

                                      Thanks,

                                       

                                      Solan

                                      • 16. Re: Email Template Help
                                        Ken Binney MVP

                                        Sorry Pal:

                                         

                                        I just don't know.  Seems a lot to ask an email client to process

                                         

                                        Let's hope someone wiser than I jumps in here.

                                         

                                        Best