Comments

  1. says

    Fantastic Tips! I appreciate you sharing your findings after going through many frustrating hours of problem solving, banging your head, and sending not-so-nice tweets to microsoft, lol!

    • says

      Good question, Cristian, well the client who just asked me to do the HTML email for them did – that’s why they noticed. I guess some large organisations still use Outlook in their offices.

      • says

        Yes everyone uses Outlook in offices, so designing html emails for outlook is a must, try wrapping tables like this:

        <!–[if gte mso 9]>
        <v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImage” style=’behavior: url(#default#VML); display:inline-block;position:absolute; height:468px; width:700px;top:0;left:0;border:0;z-index:1;’ src=” headerbg.png”/>
        <v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theText” style=’behavior: url(#default#VML); display:inline-block;position:absolute; height:468px; width:700px;top:-5;left:-10;border:0;z-index:2;’>
        <div>
        <![endif]–>

        TABLE (your content)

        <!– This ends the nested table content –>
        <!–[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]–>

        Try it, works for me!

  2. says

    Hi Rob, wow you seem to be the expert at all of this. On the other hand I am a complete beginner. If I am trying to send a very simple email update to a group of say 100 contacts in my outlook, can I use mailchimp or do people have to actually ‘subscribe’. Surley if they ar emy contacts I can send correspondence to them? What method would you suggest?I do want to make sure that whenever I send emails they look consistant.

    • says

      Hello Alicia, no don’t worry about MailChimp, this is for getting email addresses from a website and emailing them (and then making those emails look good in Outlook and all other clients). If these people are your contacts then go ahead and mail them. But as for styling them up in Outlook I’m afraid I can’t help you at all there. I would try the Microsoft site for that one. :)

      • Christopher Szydelko says

        You can actually import email addresses into mailchimp very easily, theres a number of ways to do that. If you want to save yourself the headache you can actually use 1 of the many pre-built templates and customise it with the built in content management it provides. Otherwise you can start from scratch. Alternatively you can choose one of the pre-built templates, copy out the html and edit it in dreamweaver (or editor of your choice) to suit your needs then re-import it into mailchimp.
        I am a big fan of mailchimp as it can handle all you subscriptions and bounces (its a legal requirement to allow people to unsubscribe to a mailing list). The only downside with mailchimp is the user interface which is kind of convoluted for which should be a straight forward task.

  3. Jon says

    Great tips. Thanks. Yes, Outlook is still widely used. In fact, the newest versions of Office for Mac have swapped Entourage for Outlook.

  4. says

    What are the tips to creating a newsletter with large images, at times l look at some newsletters and they have large images, but the images are broken into segments. Is there a simple method to send large images without having servers blocking the images?

  5. says

    There actually is a way to show cell backgrounds in Outlook. It’s not fun but it works and doesn’t affect how things render in other browsers/clients:

    Obviously you need to tweak the height, width, top, and left attributes for your particular case. But this will show up in 2010, 2007, 2003 versions of Outlook. Then you set your cell background how you normally would for other browsers/clients.

    • says

      Hello Brian, thanks for your comment. Unfortunately, your HTML tags didn’t come through you have to convert the less than and greater than character to HTML with &lt; and &gt;. The code tag in the comments only changes the font to monospace – it’s not that clever. And, now we don’t know your cell background Outlook fix. :(

    • says

      Hello, Ron, sorry this is the second time this has happened. This article is about how to create HTML emails to be sent by some emailing system to recipients who will then receive them on a variety of email clients (Outlook being the most difficult one). It’s not about sending HTML emails from Outlook.

      I’m going to change the title of the post now.

  6. says

    Rob, this is very concise and useful, ta. I’m a bit confused about how you should send online marketing. I understand you should use an email service like MailChimp because of blacklisting your own email address, but if a client just wants to mail out to their existing customers to remind them of offers etc, can this be done in low quantities or is it risky? Cheers.

    • says

      Martin, anyone is free to email all their contacts in their address book if they so wish. If you are sure that all these people want to receive mail from you then there is no problem with this. The problems come with emailing people you don’t know.

      People use services like MailChimp through a website where people have opted in (twice: once as they enter their email address; and again when they click a confirmation link).

      When I do these HTML emails it’s for clients who have set these email lists up themselves. They are usually quite large companies with quite large lists so I presume they know what they’re doing and won’t get blacklisted!

      I hope this clears things up. Hope you’re well, Martin.

  7. says

    I had to laugh at the bit, don’t pull your hair out, get frustrated, write hate mail blah, blah. That’s how I feel sometimes when it comes to doing these templates. So I better go have that cuppa tea now.

  8. Christopher Szydelko says

    After swearing at Microshaft, dont try and do your email in 1 big table. Instead create 1 outer table with 100% width and td align center (this will guarantee your email remains centered. Inside (nested) create a table for your header, beneath it a table for your content, and a table for your footer. Try to avoid nesting (apart form your initial nest). Use spacer gif in all empty table cells. Set width of all internal tables to the same I always specify in pixels, usually 600 to 700 px width. If you want to specify exact column widths create a row either above or below and place spacer gif in there and specify the width of the spacer gif to the width of the column (less any padding you have on the cell). A spacer gif is a transparent gif measuring 1 pixel x 1 pixel. If you use mailchimp you can use css in the header to build your templates as mailchimp converts the styles to inline styles which will render properly at runtime, this saves a huge amount of time when creating the emails and is easier to modify should you encounter any problems. No background images, background colours are good. Best of look.

  9. Christopher Szydelko says

    Also mailchimp offers a free service which is ample for most small business needs, and gives you a lot of the essentials, of course if you want more you have to pay! also mailchimp have just bought a really simple cut down email newsletter tool http://www.tinyletter.com/ all free and great for simple bulk emails.

    • says

      Thanks, Christopher, some good tips there. I use MailChimp, but when I do I tend to build the emails in their visual editor. I always wondered why they put styles in the head, but now I know how they get away with it!

      I agree with you about avoiding nested tables apart from the first one. When you’re looking at the HTML with tables within tables within tables – it gets really confusing!

      Thanks for your comments, Christopher, and welcome to the site! :)

      • Christopher Szydelko says

        Thanks Rob,
        Just heard that Microsoft are planning to wipe out IE7 as well as IE6 by introducing auto updates, so that the standard will be IE8, which is great for developers. This means that anyone using XP and above will be auto updated to IE8 (IE9 will not run on XP so I guess until XP is dead IE8 will be the new lowest common denominator). Sorry this is a bit off topic, as this has no bearing on html emails because microsoft in their infinite wisdom decided to use word as the rendering engine for html emails in outlook (go figure) the reason being that they were incapable of making their browser engine safe from attack, hence the numerous security issues that eventually killed off IE6 (amongst other things).

        • says

          Hey Christopher, no worries about being off topic – it’s good to talk. This is great news that I hadn’t heard yet. And so soon after they gave up on IE6. Would you believe I still have problems with IE7 and IE8 – especially around forms. But, at least the situation isn’t as bad as when you had to design with IE6 in mind! In a perfect world there’d be no IE or Outlook!

  10. says

    Great article, and it refreshed my brain after finding all of this out some years ago!
    I was asked by a client to send a relatively simply HTML email out to a small list so I wrote the email as an HTML file (as I would for the web!) but as you’ve guessed, it didn’t work.
    Writing these sorts of emails in Outlook is actually like going back to your old, bad web writing skills we all possessed 15 years ago!

    So thanks for the detail and this is definitely getting bookmarked (or should that be favourited!)

  11. Jon TJ says

    Many thanks for this great article, really helped me in my new job! I have found that with Outlook Express (OE) sometimes getting vertical padding / margins to work can be tricky, a method i have been using that seems to work in any email client, as well as OE, is:

     

    Where 10px is the height of the gap you want to create. This may be blindingly obvious but its something i am now using a lot and it doesnt seem to fail even in older version of OE so thought id share.

    • Jon TJ says

      the html didnt come out well there, let me try that again:

      <p style=”margin:0px; padding: 0px; font-size: 10px;”>&nbsp;</p>

      • Christopher Szydelko says

        Thanks for that Jon, to explain why to newbies margin and padding settings applied to a paragraph are often overlooked in OE. Jon is suggesting we add another paragraph below where you want to add the extra vertical space. The paragraph has no padding or margin settings but instead has just the font size (whatever you want), activating the font size is a ‘space’ or   which is the correct method to add a non breaking space. Not sure it needed clarification but ive done it anyway :-)

      • says

        Thanks for this, Jon, it’s a great addition to the article. And well done for working out how to put the greater than and less than symbols in as well! ;)

        Thanks for the clarification Christopher, always welcome!

        • Jon TJ says

          No problem at all, its a tricky business and this article covers most of it well! Ive returned to update what i wrote above, with further testing i have realised that Hotmail doesnt render this correctly. For some unknown reason they strip out all margin related inline css and inflict their own across your beautiful (cough) email. Seeing as all p tags carry their own default margin this will cause huge gaps to appear everywhere. Simple solution is to use div tags instead of p tags, seems to work so far! If anyone knows if this is a bad idea for any reason feel free to chastise! Updated HTML below:

          <div style=”margin:0px;padding:0px;font-size:20px;”>&nbsp;</div>

          Of course now the inline styling of padding and margin may be obsolete due to the div tag not carrying any as default, however im sticking with it as a failsafe.

          Hope this helps someone!!

          • says

            Jon TJ, OMG it shows how careful you’ve got to be. I was using p tags and span tags – I’ll stick to div tags next time and see how I get on. Thanks for this.

          • Christopher Szydelko says

            I cant believe Hotmail is still in existence, I think i’m gonna draw the line here and put the standard “if this email does not render correctly view in a browser” Its just a step too far to not use p tags for what they were designed. Its pretty safe for corporate business to business as they wont be using hotmail, but it needs some thought if its business to consumer.

            • Jon TJ says

              I completely agree, its simply archaic! Another pitfall with hotmail is their insistence of using their own 131% for line-height across EVERYTHING! (Seems as though they are not separating the styling they place on their page from the email contents making several issues crop up of this nature, how hard would it be for them to place the contents in an iframe…?)

              For the line-height issue; this can become a real headache when an email contains many images as small gaps start appearing under them (if theyre used in separate table cells/rows, anchor etc tags or a br tag is used to place one image under another), unfortunately the only way around this is to place your own style=”line-height:0px;” across all td and a etc tags that contain images or are vertically out of line with where you want them – careful not to place this styling on a cell/tag that contains text! A real headache and youre right Chris, probably not worth worrying about for corporate only emails but the emails im generating are going to consumers so it is something i have to deal with, thought i would post this anyway in case some poor soul takes another step toward baldness with this issue.

  12. says

    Hi there,

    Great guides you have :). I’m currently remaking the style for a company newsletter, and some tips came in quite handy..

    I would also like to share one of my experiences while working on the newsletter.
    I at first had no idea i couldn’t use to just put a little stylsheet in my document. So afraid i had to do it all over again with in-line styling, I was looking up information on the company sending the e-mails (Constant Contact in this case). but google helped me out and gave me “inline style converter” as a search… so i thought i would the first suggestion (http://premailer.dialect.ca/). and as like a miracle this (almost) fixed my whole document. removing my and transforming it into in-line style.

    Thought I would share it, since in my opinion, newsletter are a pain in the “you know”..

    greetz,

    Martijn ;)

  13. says

    Hi,

    Thanks so much for this great tutorial. Say though, I’m having trouble getting your code to validate using the validator that you linked to. It reports that the xmlns attribute for the element html is missing. Also it doesn’t like any of the attributes for the body tag like leftmargin, etc. So I wonder does this really need to validate, and I need to add the missing xmlns attribute and replace the body attributes with css style inline or just not worry about it? Any thoughts?

    • says

      Hello Chris, you make some really good points. I went back to my code that worked for all email clients including Outlook using the methods above and there were many elements the validator did not like, although I didn’t get the error about the xmlns attribute.

      The answer is that validation is not necessary but you can use it to check for basic HTML errors like not closing open tags.

      I’m sorry to not be more sure about this but it’s been a while since doing HTML emails as I now always use online WYSIWYG editors (which have their own issues but, at least, always get the emails looking the same!)

      I have re-written that section about validation to include your points and you may like to try this special email validator: http://premailer.dialect.ca/

      Thanks again for your input.

      • says

        Thanks, Rob! I suspect you are right that some of the things I mentioned which don’t validate are not critical. At this point, I’m struggling with a larger issue: that even with your great help and optimized code, Outlook 2010 is enlarging my images, ignoring my padding and decoration of links (giving them blue underlines) and generally still messing things up as usual. The only help I’ve been able to find in online forums suggests I change my jpeg’s dpi from 72 to 96 or 120 (based on my Windows 7 OS text size settings) but that doesn’t seem to make a bit of difference. I may have to tell my client to install Thunderbird if they want to send out nice looking HTML Emails to their new patients.

        • Christopher Szydelko says

          Hi Chris, any chance you could post your code, or stick it on a server and paste a link so we could view the source, its often easier to debug if you are looking at the code… although it could be just Outyuk 2010 :-)

  14. says

    Yes, the top header is really the only image (originally I had both width and height specified but it was still wonky). It is always about 125% when I drop it into Outlook. Outlook seems to ignore my padding. Margin works instead but not always with the same results as you know, so no space between the element and it’s border as is desired in my side menu.

    Anyway, as I said I think I have it all worked out. I will try to post my fixed version once more.

    • says

      It’s a bit late here for me to give it my fullest attention. But see how you get on and do come back if you have any further problems or, indeed, if you discover some great solution to the never ending pain of HTML emails in Outlook.

  15. says

    Right, no worries. I think I’ve got it. I still get a duplicate content error when I try to post my HTML in it’s fixed version. So I’ll just post a link like before.

    A lot of changes based on obscure references elsewhere but a couple of highlights are:

    1) I had to replace my vertical menu (unordered list) and it’s border styling with spans separated by hr tags. This allowed me to avoid padding and get the horizontal line dividers I wanted.

    2) After revising my HTML, I loaded it into Thunderbird via the Stationery add-on, sent the email to myself and opened it up in Outlook 2010. This really helped me avoid some of the formatting nightmares (like image resizing) that I had when I used the usual methods for getting HTML into Outlook. Then I just saved out an OFT and I think I’m good.

    Here is the source that worked:

    http://www.newheightstherapy.com/NHPTP_PDX_New_Patient.htm

    • Christopher Szydelko says

      A couple of points, basically you should not use outlook (which uses word as a html rendering engine therefore is absolutely useless for creation purposes as it will alter all your code and do as it pleases) and barely manages rendering for recieved html emails. I would always recommend setting up a free mailchimp account, and importing your list into there. Also a big advantage is you can place all your css into the head, including a reset, mailchimp will automatically inline it at runtime (which is the purpose of premailer ( http://premailer.dialect.ca/ ) then send it to yourself for testing (as a recipient) in outlook. It will send to your list and give subscribers the opportunity to unsubscribe with a self managing list also it will provide you with stats (who has opened it, what links clicked through etc…).

      Notes on construction: stick to web safe fonts, not everyone will have helveticaNeue, therefore it will default to the next available (in your font stack) which is helvetica or arial, which will have dramatic effects on your layout. work to the lowest common denominator or use an established font stack ( http://cssfontstack.com/ ). Also you have styled your body tag which includes your font stack, you must define all your formatting including font stack on every tag ( <a> etc..) some clients strip any formatting on the body tag so you will lose this. Also you have to clear out any defaults otherwise these will apply and affect your formatting. Avoid using css margins and paddings as they are unreliable. A good source for advice is http://www.emailology.org/ .
      Theres a lot to learn and a lot to digest, its a pity that what your learning is techniques from over 10 years ago thanks in the main to Microsoft. I hope you have a chance to digest some of the links here as they contain some great information as well as Rob’s excellent resource right here.

      • says

        Thanks, again, Christopher. Some great advice in there. I definitely agree to not start with Outlook as a creation tool. And using email creation companies like MailChimp, AWeber or iContact really helps as you rarely see their emails go bad in Outlook.

        But if you are supplying the raw HTML, as you say, you have to define your formatting on every tag.

        Thanks for those links as well, very useful.

    • says

      Thanks for this, Chris, awesome information that will help us all next time. I would, as a rule and as a result of all your woes, avoid ordered and unordered lists on HTML emails!

      Hope your client’s happy with all your hard work!

        • says

          Thanks, Chris, I can’t fault that code really. I would only say that the “img” tag could do with a “height” but I can’t explain why the image isn’t displayed as it is being called with an absolute path correctly. Mystery.

          • says

            Hmmm… a Mystery, yes. I think I should add for clarification, just in case anyone else reading misunderstands. This isn’t a case of the recipient’s email client (Thunderbird in this failing test) requiring you to approve the download and display of the image. That option is not being offered at all as it normally would. When sent from my customer’s computer using Outlook 2010, the broken image icon is displayed with no option to show the image. However, when sent from my machine, since my system recognizes me as a Trusted Sender, the image simply displays without a prompt. IT for this customer is recommending that I get around the problem by embedding the image rather than than linking to it. So, I would love to find out more about the pros and cons (embed or link to the image?)

            • says

              Chris, for me, you should always link to the image rather than embedding it. However, it depends on how you are sending the HTML email. As I say, I was providing HTML for a large organisation to professionally send bulk email. It sounds as though you’re sending much smaller amounts and your client is sending it themselves – so that might be why they are recommending embedding images.

  16. says

    i created an email signature design for my client in outlook but all of my css style including the background did not work. is there a way to use css div and not table?

  17. says

    This article hit my current client sweetspot. I am redesigning a law firm’s internal eblast templates. Their entire workflow is from an enterprise EMS and out to almost exclusively Outlook-using clients. As designers, it’s nice to delude ourselves into believing that no one is checking their mail in Outlook or browsing the web with IE. Try working working in financial services or law, though, and your delusions will quickly be shattered.

    Thanks for this, Rob.

    • says

      So glad this helped sort things out for you, Dave. Yes, a world where everyone uses Chrome for browsing and Mac Mail for email would be nice! :) And, I remember having to correct a site once in IE6 (this was a while ago) because director in a bank was using it – they weren’t allow to update their own software because of the security implications!

  18. Christopher Szydelko says

    Some good news, Microsoft posted its first ever quarterly loss since they went public in 1986. Perhaps now they may take note and catch up with everyone else by producing standards compliant software…. or go bust! We live in hope!!

  19. jason says

    Hi great tips…
    One Q what about fonts, a client of mine uses Berskaville 12 font but always get replaced when received.

    I know putting text into an image is the key for emailings. just wondered if you have any tips for standard email. we use HTML formatting in groupwise email client.

    • Christopher Szydelko says

      You need to use appropriate “web safe fonts” and have a good font stack. Baskerville may not be resident on the recipients machine therefore it defaults to the next one down in the font stack until it matches a font resident on the recipients machine. http://cssfontstack.com/

    • says

      I agree with what Christopher says here. I would use websafe fonts for the main body text of the email: Times, Georgia, serif, for example and then images for headings with the client’s Baskerville. But I would try to persuade the client against this as much as possible.

  20. Gil says

    hi!
    I have a report in SAP that sends an email with an html table. The table and all of its content is showed correctly in most of the emails except for outlook. It’s not an error in the ABAP code, which means that something is missing in the html code. Can you help me?

    Thank you!

    • Christopher Szydelko says

      Can you post the code online to have a look at. Can you edit the html source before sending it? …Sorry Im a mac man and your acronyms are meaningless ;-)

      • says

        Hi Gil, as Christopher says, you’ll need to be able to change the HTML to get the emails to work in Outlook properly.

        If you have access to the code and would like to show us please paste it here: http://pastebin.com/ and give us the URL as this blog can’t handle pasted code in the comments. :)

      • Gil says

        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ‘Código de Material’.
        append t_html.
        clear t_html.
        t_html-line = ‘Descrição’.
        append t_html.
        clear t_html.
        t_html-line = ‘Depósito’.
        append t_html.
        clear t_html.
        t_html-line = ‘Stock Actual’.
        append t_html.
        clear t_html.
        t_html-line = ‘Stock Mínimo’.
        append t_html.
        clear t_html.
        t_html-line = ‘Stock Máximo’.
        append t_html.
        clear t_html.
        t_html-line = ‘Necessidade’.
        append t_html.
        clear t_html.
        t_html-line = ‘Stock LPO’.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.
        append v_mensagem to it_message.

        loop at gt_dados into ls_dados where lgort = ls_email-lgort .
        if ls_dados-labst < ls_dados-eislo.

        v_labst = ls_dados-labst.
        v_eislo = ls_dados-eislo.
        v_mabst = ls_dados-mabst.
        v_necessidade = ls_dados-necessidade.
        v_stock_lpo = ls_dados-stock_lpo.

        call function 'CONVERSION_EXIT_ALPHA_OUTPUT'
        exporting
        input = ls_dados-matnr
        importing
        output = ls_dados-matnr.
        t_html-line = '’.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ls_dados-matnr.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ls_dados-maktg.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ls_dados-lgort.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = v_labst.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = v_eislo.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = v_mabst.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = v_necessidade.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = v_stock_lpo.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        t_html-line = ”.
        append t_html.
        clear t_html.

        endif.
        endloop.

        t_html-line = ”.
        append t_html.
        clear t_html.
        t_html-line = ”.
        append t_html.
        clear t_html.

        The html code is embeded in the ABAP code, but it should make an html table, very simple.
        Thanks.

        • says

          I guess you didn’t get my message about not posting code here in time, Gil? Never mind. That’s not HTML, as you say, we’ll need to see the HTML (via http://pastebin.com/, please!) in order to help you but even then you’ll need to have the ability to change the HTML which I’m not sure you have.

    • Christopher Szydelko says

      What you’ve posted looks like the script that generates the html rather than the html code itself.

  21. says

    Hi – don’t know if you know this, but hspace and vspace no longer seem to work in Outlook 2010. Aaaargh! Does anyone have a workaround, seeing as inline css margin or padding are not supported on the tag either? Thanks!

    • Christopher Szydelko says

      I assume you are trying to put space around an image flowing with text?
      One way (if this is the case) is to drop the image in a table, and provide an extra column (to the right) and an extra row (to the bottom) put in a spacer.gif (1px x 1px transparent gif) and set the width to 10px for the column and length to 10px for the row. Then nest the table in the text, providing you with offset dependent on whether you are aligning left or right. Alternatively add extra white space to your image (or the background colour if not white) to create the offset. Both suggestions should work. I never liked the offset as it applied equal space both sides, which often looks odd in a layout.

      Hope this helps.

  22. says

    Hi Rob thanx for nice article i recently coded mobile optimized email templates at mojo themes ,using techniques as you discussed above,but for mobile some additional requirements are needed such as Attribute selectors for writing css for media queries,to prevent other email clients such as yahoo that don’t support media queries to render these styles..you can check the templates here,
    https://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/

    • says

      I’ve had this problem ever since I published this post. This is not about creating HTML emails in Outlook, it’s about creating HTML emails to be sent out by any professional emailing software or company that will look OK in Outlook – since this is the email client everybody has the most trouble with.

      This is Google’s fault for sending the wrong people here!

      But, Donald below, has given an excellent answer. However, I would add a note of caution to sending out HTML emails from desktop clients. It’s OK sending a few to your friends but, if you’re bulk emailing to a subscription list, I think you’ll run into problems.

      • says

        I would echo Rob’s concerns about sending bulk emails out of Outlook. Not only is it awkward, it is also highly likely that whatever entity that hosts your email will NOT take kindly to your using their servers to send bulk emails. They might even shut down your email temporarily.

        It is much better to just set up an account on Mailchimp, Campaign Monitor or one of the many other bulk email platforms out there. They’re easy, they’re cheap and they also provide great environments within which to test your email, as it is being designed.

  23. says

    [Outlook 2003]
    Create you HTML email in a separate document (Notepad or something similar). Save it as your email.html file.
    In Outlook, create a new email as normal. Click in the body section of the email and then go to the INSERT menu and click on FILE. An Open dialogue window will show. Browse to where your email.html file is, then at the bottom right where the button says INSERT, click on the arrow immediately to the right of the word and choose ‘INSERT AS TEXT’.
    This will insert all your HTML into the email body section.
    Send email as usual.

    Thanks.

      • says

        No problem Rob. This ‘tutorial’ is quite invaluable really in terms of getting an HTML as correct as possible.

        And I would concur with all the other statements about bulk emails in Outlook, or any other mail client for that matter. That’s what mailing lists are for!
        I was simply responding to a request on how to do this in Outlook. I only use Outlook at one of my clients as they have specified that. At ALL other times I use Thunderbird or SeaMonkey (same thing really!). But I would say there are occasions that a small bulk email is required in these clients and that its nice to send a bit of HTML in them, but I don’t condone the use of bulk HTML emails from email clients.

        @Wolf: I suspect that sending in Outlook 2010 is fairly similar to 2003 and probably 2007 too. So give it a try. The secret is to create the HTML email outside of any Microsoft product (MS are useless at HTML – they add so much unnecessary and non-standard markup), then ‘include’ it in your email using the method I have described.
        But remember, if you’re sending the email to say 100 recipients or even more, then that is 100 individual emails being sent from your computer through the mail server, and a lot of ISP’s don’t like that (in fact, a lot of them have limits on the amount of email you can send), so there is a fairly high chance you could get blacklisted using this method for bulk email (depending on your server arrangement).

        Have a look at MailChimp too. They have a free service which should cater for most small time needs.

        • nawaz says

          hi,
          i have created a HTML newsletter, i have used some header and footer images in it. What happens is, when i send this html email which i have created. The images comes as attachment so that it can be downloaded. I have seen few companies sending such email but in those i couldn’t find any images in the newsletter as attachments. Could you suggest me how to stop them from showing as attachments. Waiting for your reply.

  24. Wolf says

    It would solve this problem if you would just tell us, how to send out such an email from Outlook 2010. Then there would be peace on earth and you wouldn’t be bothered anymore with this question… :)

    • Christopher Szydelko says

      As Dave and Rob say outlook is not a tool for creating or sending html emails, although it is possible to a fashion it should be avoided at all costs. Microsoft applications are particularly bad at doing anything that has to follow any kind of standards, the reason why we have to use these old fashioned and long winded ways in the first place is because Microsoft won’t render anything correctly in its email clients as it uses word as its rendering engine which is not designed to handle html in the same way as a browser does. The reason it chose to do it this way is because they could not close security holes in their operating system, and still do it this way even though everyone else has moved on (they are at least 10 years behind). Heed the advice and use a proper bulk mail tool like mailchimp, which has a free account that can handle most casual needs.

    • says

      Hi Wolf.
      I have just checked in Outlook 2007 (which is fairly similar to 2010) and the process is almost identical to the one I have described, except Microsoft like to do things with a ‘ribbon’ now!

      So, create a new email, and click in the body of the email.
      Click on the INSERT menu and on the left should be a ribbon item called ‘Attach File’. Click on that.
      Noe browse to where your HTML file is, select it and then where the button states INSERT, click on the small arrow to the right of that and select INSERT AS TEXT.
      That should insert your HTML into the body of the email.

      And I had a thought about the comments regarding sending bulk emails through Outlook. I don’t believe anyone has suggested that this was the main purpose of sending an HTML email via Outlook. It was just a question about how to send an HTML email in Outlook, which is fairly innocent.
      Sending bulk emails via Outlook (or any other email client) is not the right thing to do so use a mailing list manager for that.
      But sending HTML emails using an email client is perfectly feasible.

  25. says

    Hi Rob, I’m facing problem in sending newsletter through outlook express. There is not showing HTML exactly like web browser and second thing when I putting images (i.e. bullets in paragraph and other images) then outlook express not showing these images in newsletter. I have divided row in two columns when I put images in first column then some images is displaying but some images is not. But when I put same images and text in separate row without distributing column then all images are displaying. Please suggest me what we can do for the same.

    Sir one more problem is there that I giving space in paragraph through new paragraph with height and clear.gif image but space is not showing in outlook express. Kindly suggest me.

    • says

      Hey Shiv, This is not about creating HTML emails in Outlook, it’s about creating HTML emails to be sent out by any professional emailing software or company that will look OK in Outlook – since this is the email client everybody has the most trouble with.

      If you look at the comments just above, especially from Donald, you may find some more help there. But I would advise you not to use Outlook for sending out bulk HTML email. Use one of the professional emailers mentioned at the top of the article. Good luck!

  26. Chris Chen says

    Hey Rob,
    I develop and help troubleshoot html emails for my company and its clients. I am having an issue where sporadically an image gets resized through hard coded width and height parameters after sending from the ESP. These images are sizes 728×90 and 300×250 (typical IAB ad sizes) and they are always resized to a 66×66 image. When the issue occurs it always happens to only one image. And there are times in which the issue does not occur.

    I ran some tests with multiple devices/clients and realizes that Outlook on a PC causes ten times more problems than Outlook on OSX. In addition, the source code of the email that is being sent out has height and width defined in both the inline style within the anchor tag and normally within the img tag.

    Other tests I ran was using and no tbody, defining the height and not defining the height, both inline style and in img tag, stripping the image blocks from the whole email template and having it sent with the rest of the email, using display blocks and not using them.

    I also found that there are times when the image does not show at all in Outlook on a PC but when forwarded to another email on another device/client it compresses the image.

    I also found that opening it up in android or windows phone works fine, and when forwarded to another device/client it works fine.

    Any ideas or advice would be greatly appreciated.

    Thanks!
    C.

  27. Christopher Szydelko says

    I would guess your problem lies with the clients ESP. I always use and recommend using mailchimp and never have had such problems. Also all images need to be stored on a web facing server with absolute paths to the image for them to show up. With mailchimp you can code up your templates with css formatting in the head (you will still need to use tables for layout, but avoid margins and padding and usual pitfalls as mentioned here in Robs blog). Mailchimp will automatically inline the css at runtime. Try a test using the problematic email and setting up a free account in mailchimp, importing it and making any adjustments, then send it via mailchimp to test recipients with varying email clients. I would think that it would appear the same accross all recipients and making adjustments is easy. Also putting in mailchimp edit tags allows for your clients to make text and image changes as well as repeatable regions in the mailchimp cms (you control what they can edit in the template).

  28. Christopher Szydelko says

    Things have stepped up a gear, some clients now asking for responsive html emails, meaning they dynamically adjust dependent on whether the recipient is viewing on mobile or desktop client (or tablet for that matter). Current best practice is a bit sketchy and not guaranteed to work. I’ll be doing some research on this and i’ll try to report back on my findings. Maybe its worth another blog Rob, specifically for responsive html emails.

    • says

      Christopher, this is something I’ve been thinking about recently. I’ve got to say that the ESPs have been slow to react on creating responsive HTML emails. All the websites I make are responsive now. So, yes, definitely, please report back your findings and I’ll do a blog post on it. Thank you, again!!! :)

      • Christopher Szydelko says

        Hi Rob, the information available for responsive html email is pretty lacking and none of it is guaranteed to work. Mailchimps advice is a work in progress and not very indepth. However I have come accross a great article by campaign monitor which I shall be using for the basis of my future campaigns. Obviously it involves the use of media queries in order to achieve your goals. Its the best article I can find and its well worth a read. Perhaps along the way we can build on this here to add are own experiences and best practices going forward. here’s the link:
        http://www.campaignmonitor.com/guides/mobile/

        • says

          Hello Christopher, thanks a lot and I’ve now read the article. I’m pretty familiar with the media queries as I use them a lot on responsive sites. However, won’t some email clients strip out this CSS?

          • Christopher Szydelko says

            As far as I understand, the media queries only take effect on modern architecture, which will respect your css, and this covers the majority of smartphones (except probably anything where microsoft is involved), whereas the troublesome outlook would ignore this, it wont actually matter. I am about to do a html e-shot very soon and will be testing out on desktop and mobile to see if my queries will work through mailchimp. Hopefully I will be able to post back with some more feedback on what I have encountered.

            • says

              Yes, of course! I’m so busy worrying about old architecture I’m not thinking clearly. I should think even the Windows smartphones will be able to handle media queries! I will test this out too!

  29. Chinmay Dey says

    Hi Rob. When I use a image in anchor tag it raised upward little more. In the browser we can adjust by using css (vertical-align : bottom). But how I solve this problem in Outlook.

    • Christopher Szydelko says

      You can solve this via inline css to stop margin and padding and to also collapse default table borders and padding. With html email you have to inline the css, unless you use mailchimp in which case it will inline it at runtime. There are some good basic resets available in css that will kill off any defaults so that your styling will remain true.
      http://htmlemailboilerplate.com/#f2

    • says

      I wish I could blame my hair loss on Microsoft but I’m afraid they aren’t to blame for everyone of my personal annoyances – just most of them! :)

      I’ve not used spacer GIFs much in HTML emails – although I’ve seen them used a lot. Wow, that’s a big bug that I’d never heard of! Always use a 10 x 10 spacer GIF. Lesson learned. Thanks, a nice little addendum to this page of endless Outlook issues.

      How are you getting on with responsive HTML emails, Christopher?

  30. Fariza says

    Great Rob !!! Thank you !!!
    I have question. If you ever met such situation: I am copying table from html file with border=0, but in outlook it shows all borders.

  31. says

    Great read and far better than 99% of results to remedy Microsoft non-conformity. If only there was a way to collectively donkey-punch stakeholders that are still married to Outlook. Thanks for this, Rob.

    Regards,
    Dwayne

  32. Christopher Szydelko says

    Hi folks, its been a while, Ive just realised that the good folks at mailchimp, have now released their css inliner tool for everyone to use. Its fantastic!. What it does is allow you to create your html emails with css classes, leaving your css in the head for ease of building and editing, when you are through designing just copy and paste all your code into the auto inline tool and you have an email ready to go with all styles inlined. Try it.
    http://beaker.mailchimp.com/inline-css

  33. Merel Harper says

    Hi Rob,

    My company is pushing to go mobile responsive with our emails. Unfortunately, to have the code mobile optimized, the CSS styles need to be in the tag (as far as I know.) Also, when I make a template with a sidebar, Outlook 2007 and 2010 automatically push the sidebar down, since it only wants to work in a one-column format. As far as I know, there is no fix for this, correct? Thanks!! Merel

    • says

      Hi Merel, Great advice from Christopher Szydelko. Two columns should be perfectly possible in Outlook 2007 and 2010 as long as you follow the basic HTML email guideline as laid out here and in other places.

      • Merel Harper says

        Hi Rob and Christopher,

        I know a two column layout will work in any platform, but I am not referring to just a regular HTML email. I am talking about a responsive email in which CSS code allows for the columns to shift position and/or size when viewed on tablet, phone, etc. I found code that worked beautifully but when viewed on Desktop Outlook 2010 PC, it looked terrible.

        This is the CSS code. As far as I know, for this to work it MUST live in the for it to work. Therefore, this will never work on Outlook 2010, correct?

        body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Helvetica, Arial, sans-serif;}
        table {border-collapse: collapse;}

        @media only screen and (max-width: 640px) {
        body[yahoo] .deviceWidth {width:440px!important; }
        body[yahoo] .center {text-align: center!important;}
        body[yahoo] .no-display {display: none!important;}
        body[yahoo] #banner img { width:100%; }
        }

        @media only screen and (max-width: 479px) {
        body[yahoo] .deviceWidth {width:280px!important; }
        body[yahoo] .center {text-align: center!important;}
        body[yahoo] .no-display {display: none!important;}
        }

        • says

          Sorry, Merel, I must have missed you saying you wanted it to be mobile responsive. But, again, I believe Christopher is right. Mobile responsive emails don’t work in the same way as mobile responsive sites. It would seem you can’t do it in the way you want to.

  34. Christopher Szydelko says

    Hi Merel,
    You should use tables for layout and css needs to be inline. Media queries are not supported, so instead you should try and formalise a common layout, this article (link below) should help you on your way. You should avoid divs and floats and go back 10 years to code up your emails (with tables and cells). you can use css for text formatting but stick to web safe fonts (@fontface will not work).
    You can use a style css styles but they must be inlined once you have finished the build, a great tool for this is.
    http://beaker.mailchimp.com/inline-css

    http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/

    Make sure you read through Robs excellent blog and some of the user comments on this site, it is very informative and should help you on your way.

    good luck.

    • Merel says

      Hi Christopher, please see my comment to Rob about the fact that I need this email to be “responsive” and I believe CSS has to live in the head for this to work. if I am wrong, please let me know!

      Thanks

      • Anonymous says

        Hi Merel,
        You will not be able to do it in the way you would do this for a website, i.e. with css breakpoints. Email clients on mobile devices will in the main not use any css formatting that appears in the head. All css formatting will have to be inlined.
        To be responsive you will have to use a different technique, such as percentages. Please refer back to my previous post. Heres an excellent place to get more info and guidance on responsive html emails. Theres no easy answers, it does require a lot of pain and hard work to get good at this.

        http://zurb.com/ink/

        • says

          Thank you, again, Christopher, I’m sorry about you being “Anonymous” in the comment here. I have a bug here in the comments section when people come back to leave another message and they think their name, email and web address are in the form and they aren’t. I’ll try to fix this.

  35. Eugene says

    Thanks for this Rob, was looking high and low on how and what the issues were with regard to the formatting on my company news letter. The width settings were the issue, no px after the width number in the table and the 100% width setting in TD solved it. Now if only I could the borders to show up padded 5px from the image in Outlook that would be great. I think MS makes crap just to wind us up.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.