165 thoughts on “How to create HTML email

  1. Pradeep

    Hi Ed

    THANK YOU SO MUCH YOU MADE MY LIFE EASY TODAY!

    My Name is Pradeep from India (Bangalore)
    As an FINE ART degree holder I am working in an ad agency as an Art Director from last 15 yrs and also I am a freelancer graphic designer most of the time I work on print media (including photography ref https://www.facebook.com/padhi14/photos_albums) but I am planning to move print media to digital media as well so, I need your help and guidance
    what ever I am doing as of now its just based on my practice I didn’t do any software course till now

    At present I am working on these software’s

    CORELDRAW
    PHOTOSHOP
    ILLUSTRATOR
    IN DESIGN

    and also I want to learn HTML, CSS, JAVA Script & SEO to became independent WEB DESIGNER

    So, in this I need your guidance

    Let me know how you can you help me in this

    Regards
    Pradeep
    +91 9886105494

    Reply
  2. Mark Zuckerman

    Any idea where I can see how to replace all the body text in your illustration with HTML text? It’s my understanding that the email will display better with “live” text rather than so much text as “images’>

    Reply
  3. Pingback: Create HTML Email Part 3-Slicing for the Web in Photoshop | Dream Later

  4. Chema

    Hi!! Thanks a lot for this great tutorial.
    I’ve follow your instructions and almost all is fine. My problem is: I’ve mapped an image (dreamweaver). I’ve got two rectangles with its liks and another rectangle with a mail link. When I test the result in Safary it works fine BUT when I send the newsletter to a gmail address the two page links work fine but not the mail link. Could you help me, please?

    Forgive me about my poor english. I hope you understand me

    Thank you very much in advance

    Reply
  5. Tim

    Hi Ed.
    I’m making one of these for a client of mine. This has been VERY helpful. I’ve gotten everything that you have posted here with the exception of 1 thing. I’m confused as to how I am supposed to upload my image files to a server.
    My server here in Australia is Optus. I have a website that is hosted by Crazy Domains.
    I’m unsure of how I go about this as the video regarding the “manage site” doesn’t go into that.
    Any advice would be greatly appreciated.
    Kind regards, Tim

    Reply
  6. Tara

    I am doing something wrong. I’ve completed all steps and my newsletter looks good. I uploaded all slices to photobucket and the links to the HTML doc are all good. I have sent several test emails via Outlook to myself and this is what I find:
    –Regardless of email client- gmail or yahoo, when I access my email on my iphone it looks fantastic and does not show up as having attachments.
    –When I get the email on my PC using Yahoo the newsletter opens beautifully but it also shows attachments (paperclip indicating attachements and the pictures linked within HTML document also show as individual attachments at the bottom of the page)
    –When I get my email on my PC using gmail the newsletter opens beautifully but it also shows it has attachemets (paperclip shows– but no attachements actually appear to exist)

    Reply
  7. Tara

    Hello– please ignore my last post- I am now using outlook. It My newsletter looks great- your videos were really fantastic. I am seeing the paperclips but I think I saw a reply from you on how to fix that so I’ll look back through your comment section. Thank you!

    Reply
  8. Tara

    This was fantastic. I’ve completed everything but run into a snag: Do you know if there is any way to embed HTML in an email sent from gmail? I’ve tried just about everything.

    Reply
    1. Ed Post author

      I don’t know how (and I don’t think you can) embed directly from the gmail interface. Best option is to use an email client like Outlook if you have access to it. You can configure it to work with Gmail. Also, when sending to other Gmail accounts where the users are viewing your HTML email in the Gmail interface, you’ll likely have white gaps between your images that are a few pixels wide. I did another post entitled Getting Rid of the Annoying Spaces in Gmail that will help with that.

      Reply
      1. Tara

        Thank you, Ed. I’m just preparing my first “real” embedded newletter today so will take a look at your annoying spaces video.

        Reply
  9. Ed Post author

    Have a look at my other video, How to Create an HTML e-mail: Get Rid of Annoying Spaces in Gmail. You can search it on YouTube or link to it here.

    Reply
  10. skip hire Luton

    Hey There. I found your weblog the usage oof msn. This is a very well written article.
    I’ll ake sure to bookmark it aand retun to read extra of yor usefl info.
    Thank you for the post. I will certainly return.

    Reply
  11. Yannick

    Great tutorial!

    For the slicing part, you might want to check out the tool I am working on (instacut) to slice images and pdfs for HTML+CSS emails. I am not an expert, just someone who got tired of constantly searching on the web why my newsletter wasn’t pixel perfect and then adding the trick to my list. Instead, I tried to automate it via my new online tool.

    Hope it can help you guys too …

    Reply
  12. syama

    Thank you so much for the lessons
    it took me two days but I learnt how to create html and upload it on internet
    until there all fine
    but now Im having issues on sending the html file / page created via email
    on my imac it dosnt show the option to “send/share page content via email” it only shows “share – email this page” so I do that, and it shows beautiful the page on the email in html but when I receive the email on my iphone, its empy, no images! 🙁

    I tried to send it from a windows computer, from windows live email, but there I can’t select the option to attach the html file “attach as text” it only allows me to attach as a regular attachment which dosnt help. 🙁

    My link is working, the flyer is uploaded on my ftp on the web, I can go to it from any computer or even my iphone.

    http://www.masogroup.com/Maso-email-Mkt.html

    Please help meeee

    what should I do to be able to send the emails with the html flyer created?

    thank you!

    Reply
  13. Zach

    I followed your instructions to the T but I keep getting these “spacer.gif” images that screw up the whole table. In Dreamweaver it looks fine but as soon as I load it into an email it gets all wonky. The spacers don’t show up like they did in your tutorial. You can’t even see them in dreamweaver, they reside on the far right and bottom of the table. When I delete the row and column they exist in everything goes crazy and clearing the column widths and heights doesn’t correct it.

    Reply
  14. Sara

    Thank you for the great tutorial, very helpful. I work for a company who wants to send out marketing emails, but they do not have a website at this time. Where can I upload my html material, if I don’t have a website? can I put it into photobucket? or onto a Facebook business page? would that work?
    Thank you!

    Reply
  15. Mark Shirley

    Hi Ed

    Hi Ed I cant see the last email comment I sent so forgive me if this doubles up on my last email. I used your display block tip on gmail and it works on a computer screen but very large gaps appear around images on gmail on a cell or mobile phone on gmail. Is there anything I can do to stop this from happening. Thanks Mark.

    code ive used for one image


    Reply
    1. Ed Post author

      I have another post titled “getting rid of the annoying spaces in Gmail” that may help you. Search for that one and see if that solves the issue.

      Reply
  16. Mark Shirley

    Hi
    on my android phone in gmail im getting gaps underneath this is the code im using as instructed im using “display block” the gaps are quite large they dont appear on gmail on the computer


    Reply
  17. Kami

    Hi just wanted to give you a quick heads up and let you know a few of the images aren’t loading correctly. I’m
    not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results.

    Reply
    1. Ed Post author

      Most likely it’s the link to the image. You can test the link out by typing it in the browser. If the image doesn’t show from the link, then there’s something wrong with the URL… could be a typo or could be a wrong path. Also, make sure you’ve actually uploaded the image to a folder on the webserver.

      Reply
  18. Kevin

    HTML has been used for years as there were no good solutions to handle PDF files for emailing, until now….

    http://www.eSimply.com

    eSimply.com perfectly converts PDF files to HTML and send them as emails.

    You will just have to see it to believe it

    Reply
  19. mp3 player grosses display

    Simply want to say your article is as amazing. The clarity in your
    post is simply cool and i can assume you’re an expert on this subject. Fine with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

    Reply
  20. Mark Shirley

    Hi Thanks for the tutorial I never thought to use PS and DW to make html emails. I have a question how would you add space at the top and botton of the email (margin top and bottom).

    this is how i managed to center the email in the browser window.

    Reply
    1. Ed Post author

      You can do it a couple different ways. Using the HTML code, you can just add paragraph breaks before the table. Or graphically you can create white space and include it at the top and bottom of the table as a graphic.

      Reply
  21. Wil

    I have to say this was a tremendous help. I truly appreciate the time taken to put this together.

    -Semper Fi
    gyrene2083

    Reply
  22. Joe Rojkens

    Ed,

    You’re video tutorial is great, best I’ve seen in a long time. Keep up these excellent work. However I’m experiencing some difficulties.

    After watching the videos and following all the steps in Photoshop CS3 and Dreamweaver CS3 the final document was checked for any broken links, etc. and was perfect. Proceeded to upload the html page and images folder to my web server through filezilla, and also tested to see if the page was working properly, worked like a charm.

    However, I sent myself the email (as an attachment as you said) to verify how it worked to my hotmail, yahoo,gmail and my own email account with my host. at this point was surpised since it only appeared in my hotmail account in the other its like an attachment and the page does not even showup.

    Any suggestion or ideas as to what is happening.

    Thanks

    Reply
  23. Josan

    Hi. My english is very limited, sorry.
    In your tutorial you works at 72 ppp. What happens with Retina displays?
    Thanks.

    Reply
    1. Ed Post author

      I haven’t run into any issues with viewing HTML on a retina display. I have an iPad with it and HTML renders fine.

      Reply
  24. Scott

    this article is good for someone whos a developer but now someone came up with a software its called http://www.emailslicer.com/ so no need for adobe or other software out there expensive to buy. you should write an article about them. I do it myself and just add the optout and I m good to go. I worked with odesk and elance and hired html email coders but now since I found this tools I cant say how great full and stress free I m.

    Reply
  25. Sunny

    sorry could you remove my actual link and replace it

    img src=”http://www.yourwebsite/emailers/images/pic_12.png” alt=”” width=”752″ height=”110″ border=”0″style=”display:block”></td

    thanks

    Reply
  26. Sunny

    Hi

    I posted the last comment, but have found a solution for white space or when tables are broken in hotmail/gmail.

    basically you need to add

    style=”display:block”

    into your image source code for every image. so it’ll look like something below –

    done!

    you helped me..thought id return the favour.

    Reply
    1. Ed Post author

      Thanks a bunch! I’ll also test this one out and probably create a short write up on it since it’s a frequent question from folks. I really appreciate your posting it and also for visiting the site!

      Reply
    2. Ed Post author

      Just using the style=”display:block;” wasn’t working for me when using a combination of images and text in an HTML email, however I was able to find some additional code for a fix. Here’s my writeup.

      Reply
  27. Sunny

    HI Ed!

    Came across your marketing email post on youtube, which was excellent and very helpful.

    I have a problem though, when I send the mail to my hotmail, the email doesn’t appear right – few boxes are out of place. When I send it to my email account on mac mail, its fine.

    Any ideas what it could be?
    I have a number of slices, (about 13 :-S) do you think that has anything to do with it?

    Any advice is appreciated

    Reply
  28. Ken Lehman

    Hi Ed,

    My ISP is Optimum and I use Yahoo for e-mailing. So should I get in contact with Optimum about my html e-mails and make sure that they are not becoming spam? As for rules about e-mail… According to the article Best practices for bulk mail senders and postmasters when sending to Yahoo! Mail, it is stated “Don’t include HTML forms in emails. The Yahoo! Mail client warns users that submitting forms in email can be dangerous.” I was never warned of this and I have recently sent out a lot of my html e-mails to potential customers/recipients not on my contact list through Yahoo. I only received one response. I am really hoping that Yahoo is not marking my html e-mails as spam because I have worked so hard in making them and getting them out there. So on the safe side, I filled out the Yahoo! Mail Bulk Sender Form.

    Reply
    1. Ed Post author

      Hi Ken, it would be a good idea to touch base with tech support at optimum since they’re your ISP. Also, does your HTML forms? That may mean in interactive form in your email with some JavaScript code or something like that. If you want, feel free to add my email address to your distribution list for prospects and I’ll be happy to shoot you an email and let you know I got it (assuming I can tell its from you). If I get it, that means its not flagged as spam.

      Reply
  29. Ken Lehman

    I own a video production company and decided to make my very first HTML e-mail. I was able to do steps 1-3 on my MacBook Pro easily. However, with step 4, which involves Dreamweaver and a FTP server, i.e. FileZilla, I am lost and even overwhelmed. I mean, I tried to do all the cleaning and refining in Dreamweaver, but when I e-mail the HTML e-mail to myself to test things out, it is nothing but a table of blank boxes. What am I doing wrong? Also, I just downloaded FileZilla for the Mac. Do you have any instructions in its initial set up? Thank you.

    Reply
    1. Ed Post author

      Hi Ken. Thanks for dropping by and leaving a comment. What’s probably going on with your HTML is that the URL (i.e. the web address) for your images is not correct. The way to test that, assuming you’ve uploaded your images to a webserver (you did that, right?) is to type the image URL in your browser and see if the image pulls up. Something like this: “http://www.yoursite.com/folder_where_you_uploaded_images/name_of_your_image.jpg” If you get the blank boxes then the problem is something wrong with the path – a typo or something – in the path in your HTML code.

      As for Filezilla, you need to set it up with the FTP credentials for your webserver. You can get these from your hosting company. This is different from how you log on to your control panel (I’m assuming here that you have a hosting account). You will need a hostname, a user ID and a password for FTP access in the site manager in Filezilla. This is found in the upper right hand icon or from the file menu. You’ll probably leave all the default info such as the protocol and encryption info. You should be able to get some help from the tech support folks at the hosting company.

      Let me know if that gets you started on your way.

      Reply
      1. Ken Lehman

        Hi Ed,

        You are welcome and thank you for all your videos and help. Now prior to your response, I was able to get help from one of my girlfriend’s friends who works as a software engineer for Google. According to him, the picture did not have to be in an FTP server, so as long as they are online somehow, i.e. an image hosting website. So I used photobucket and it worked.

        As for Filezilla, although I did not use it (at least fully), I would like to learn more about it. However, I created my website through another website: weebly.com. So with that said, I really do not know much about web servers, hosting accounts, and hosting companies, let alone where to begin with them. Furthermore, I do not know about getting a hostname, a user ID and a password for FTP access in the site manager in Filezilla.

        Reply
          1. Ed Post author

            Hi Ken, FileZilla is available for both Windows and Mac. I’m mostly a Mac user myself and use FileZilla all the time. If you’ve got some particular questions about FileZilla or FTP, I’ll be glad to give them a shot.

        1. Ed Post author

          Yes, you’re exactly right. As long as the image resides on a website and you have a URL, you can use it in your HTML. The FTP software (which is what Filezillais) is just the means by which you copy a file from your computer to a web server. If you don’t have a web server, you don’t need to worry about the host name and all that other stuff. Thorne are just settings to get your computer to talk to the web server. So if all of your images are on photobucket, then that’s probably a good solution.

          Reply
          1. Ken Lehman

            Thank you, Ed. I can’t tell you how grateful I am for all your teachings and help. Now, I have a question about the last step, e-mail. In the past with flyers, when I e-mailed from my professional Yahoo e-mail address, Yahoo would say something along the lines of “If you send more than 25 of the same e-mail in one day, you’re automatically considered a spammer and your account would temporarily be deactivated.” So my question is, for Mac, which is better to use for mass e-mailing: Outlook or Mac Mail?

          2. Ed Post author

            Hi Ken, it’s really more about your ISP than which email client you use. Mac mail and Outlook are just e-mail “client” programs. They don’t really play a role in flagging your e-mails as spam. That’s done by the Internet servers through which the emails flow. So the thing you need to be more concerned about is your ISPs rules about email. Depending on how many emails your trying to send, you may either need to send them in small batches (yep, a pain, I know!), move to a different ISP for your e-mail, or consider using one of the email marketing services out there like Constant Contact or MailChimp (some of them have a free version that you can try out). I’ve used both of those in the past and they work pretty well, but are limited in the ability to customize, although they might be more flexible now.

        2. Lucia

          Thank you for the photobucket advice. My FTP server is limited and it seemed impossible to get Dreamweaver linked (problems for another day..)

          Reply
  30. Robert

    Hi Ed,

    Firstly, let me thank you for the best and easiest to follow tutorial I’ve found on the subject.

    Sadly, the youtube link for the 4th part concerning Dreamweaver doesn’t seem to be working and I have a feeling that’s where I might be going wrong with the email I’m trying to put together.

    I’ve followed the instructions regarding slicing in Photoshop and I’ve created an email I’m happy with and all the links are working fine. Unfortunately, I really have no idea what I’m supposed to do in Dreamweaver so I’ve tried simply inserting the HTML document I created in Photoshop into Outlook as shown.

    The email sends fine and looks right to the receiver but the only problem is that it’s showing up as having attachments with the dreaded paperclip which is what I was trying to avoid. Yahoo webmail is the worst with the email showing as having 14 attachments, 1 for every slice.

    Does the Dreamweaver section sort this issue?

    Reply
    1. Ed Post author

      The Dreamweaver part covers cleaning up the HTML and uploading the images to your webserver. I double checked the video and it’s working for me on YouTube and embedded in this post. Here’s another YouTube link – http://youtu.be/y_jnkjx5fTs. Basically, you have to upload the images to a webserver so the HTML knows where to look for them. Try the video again and see if that helps. If you’ve still got questions after that, let me know.

      Reply
      1. Robert

        Hi Ed,

        Thanks for the quick response.

        It’s the link for section 4 regarding using Dreamweaver to clean and refine HTML that isn’t working for me. I was able to find it through looking at your other videos on youtube and again, I have to say, it was really informative and easy to understand.

        I’ve done everything as suggested and inserted the email as text with the images being pulled from the internet but it’s still showing as having attachments. Very frustrating as I receive other html emails that don’t show as having attachments. Any idea what I’m doing wrong?

        Reply
        1. Ed Post author

          I’m not sure… where are you seeing the attachments showing up? Yahoo mail, gmail, Outlook? You’re welcome to send me your e-mail and I’ll have a look and see if I can figure anything out.

          Reply
  31. Angie

    Hi, This is exactly what I was looking for. Thank you for a very easy to follow tutorial. I have managed to embed one page of the newsletter. However, the newsletter I need to email is 4 pages in total and I wondered how I embed all four pages? I am new to html and web development, so any help would be greatly appreciated. Thank you in advance.

    Reply
    1. Ed Post author

      Hi Angie, I’m not exactly sure what you mean by 4 pages. Usually an e-mail is going to be formatted vertically so that if you have a lot of content the user scrolls down. If you have a multi-page newsletter, it may be better to render that as a small website with 3 web pages and create an HTML e-mail with highlights. But maybe I just don’t understand exactly what you’re trying to do?

      Reply
  32. VC

    Hi Ed, I need to add my sincere thanks. I’ve used your method and it work quite well for me! I only know enough about coding to be dangerous.

    I’ve designed a new email from a Photoshop image and the email client is saying the html email has to be 70% text and 30% graphics in order to be spam-proof. Is this PS slicing method 100% graphic?

    This is out of my print and presentation design realm, please help!

    Reply
    1. Ed Post author

      Hi Victoria, good question and no, the slicing does not have to be 100% graphical. Basically, what the slicing does is create an HTML table that you can then modify however you want to. So when you pull the HTML in Dreamweaver, you can delete out the graphics (or placeholders) that you don’t want and then add text. You may or may not need to modify you CSS to get the text to look the way you want, but you can certainly incorporate text in with your graphics.

      Reply
  33. Dawn

    Hi,

    Thanks for the great tutorial. I’m creating an HTML email for a company that has a database of customers and needs to have a nicely designed background, but be able to put customized text on top of that by inputting a script in Dreamweaver that pulls the data from the database. Do you know how to do that?

    Thanks,
    Dawn

    Reply
    1. Ed Post author

      Good question and while I know that you can have Dreamweaver interact with a database to call names and custom fields, that’s a bit outside the design sphere and gets into the realm of development. Maybe some of my readers can give some suggestions here?

      Reply
  34. Melvin

    Hey Ed, i love you tutorials, totally helpful! I have encountered a problem here and I need your help. I’ve make sure there are no spacers, borders are 0 and slices are no overlapping and stuffs are properly aligned but it is really frustrating whenever i tried to blast it out, the final product never fail to contain spacers and rips across the page and slices i’ve created. I can always forward you my document so you can have a look at it. I look forward to your prompt reply.

    Reply
    1. Ed Post author

      I’ve been working on this issue a little and trying to figure out a fix for the gmail spacing issue. Your HTML works fine when opening it in my Outlook. It’s just the gmail that I get the spacing issues.

      There seems to be a fix on-line that’s successful for some folks. By adding the style=”display:block;” attribute to the image tag, some are claiming to solve the problem. I uploaded your HTML and images to my webserver to replicate your issue and then added the style attribute. Interestingly enough, it looks fine on my iPhone with it and when sending to another e-mail address I have configured for Outlook it looks great.

      I am still getting the spacing issues on the graphics just above the “Stanford Discovery Cruise Center” block. I’ll search around a little more and see what I can find out. You may also want to google “gmail adding spaces html e-mail” and look at some of the links. This appears to be a fairly common problem.

      Reply
        1. Ed Post author

          There are different opinions about this, but I would recommend no larger than 600 px wide. There are still a lot of 800×600 screen resolutions out there and you want your email marketing to be read easily by anyone.

          Reply
    2. Ed Post author

      Hi Melvin, I finally got around to writing up a fix for the annoying white spaces that show up in gmail. I’ll have a video posted to YouTube in the next day or so, but here’s a link to a writeup. You’ve probably already found a similar solution, but I thought I’d share just in case.

      Reply
  35. Where's the final step?

    For some reason it opens up on my iphone as attachments. It wont follow the link when I click on the image. It rather gives me the option of downloading the .png. It also says 4 attachments if you click on more details!

    Reply
    1. Ed Post author

      Sounds like there may be a problem with the HTML code. Does the HTML specify the right path to the images on a webserver? One way to check this is to type the URL for the image in the browser and see if the image pulls up. Next step is to check your code to make sure it references a target web page and not the image itself.

      Reply
  36. Steve

    Thanks for your reply Ed. Much appreciated.

    So, were the images which you used for this tutorial already stored on the web server?

    Should I save my images (slices) to my webserver separately and before the final upload?

    I wonder if you uploaded the images (slices) and saved them to the webserver before you started the tutorial? – In the tutorial, you seem to know ‘the full path of the URL where exactly the graphics are on the webserver’ (5:17 mins) prior to actually uploading this HTML doc and the images folder via dreamweaver?

    Thats the only bit that is tripping me up a bit. Because if I go through the process, of slicing my images in photoshop placing it all in dreamweaver and then final upload – I wont have uploaded the images to the webserver beforehand, so I wont know the full source location yet? I’m just wondering if you did this at a separate point which you didnt mention in the tutorial.

    Or did I miss this part of the tutorial?

    Apologies if im not being clear or my question shows my naivety to the process! :/

    Thanks again.

    Reply
    1. Ed Post author

      Yes, when I recorded the screen capture, I had already completed the project and was going back through it, so I had the “benefit” of already knowing the URLs.

      It’s fine to go ahead and upload the images to the webserver as soon as you slice them up in Photoshop. Once they’re on the webserver the URLs won’t change, so you’ll know the path. And you can also decide where on the webserver you want them to go (assuming you control the webserver… if you’re accessing it for a client, you may have some restrictions on where you can put them) so you can, in a sense, know ahead of time what the URL is going to be.

      Also, here’s an extra tip… don’t leave spaces in your file names. While most browsers compensate for that, in some cases it can mess up the image rendering. So instead of naming your graphic “my cool graphic 01.png,” call it something like “my-cool-graphic-01.png.”

      In the tutorial series, I’m utilizing Dreamweaver’s Site Manager function to quickly update any changes I make to the HTML code. You don’t have to use that if you don’t want to. You can just edit and upload your HTML file. But I do think that the site manager makes “real time” editing a lot easier.

      I hope that helps. You sound like you’re on the right path.

      Reply
    2. Ed Post author

      And I forgot to mention that you can always test whether your images are rendering appropriately by typing in the full URL in the browser. That should bring up your image in the browser.

      Reply
  37. Steve

    Hi Ed.

    Great Tutorial. Really thorough and helpful. So glad I found this!

    I had a question regarding inputting the ‘source’ of the images though. In the following tutorial – http://www.youtube.com/watch?v=YfQ3VuX2DCU – you input the full source of the images in the properties panel (at 4:31).

    But how do you know the source at this point? You haven’t uploaded it to the site yet, so I dont know how I would know what to put in here? Unless I use an external site like tinypic or something.

    Hope this makes sense. Would really appreciate if you could point me in the right direction!

    Thanks!!

    Reply
    1. Ed Post author

      Hi Steve, the path for the image will be wherever you save it on the webserver. The files on the webserver are organized much like the files on your local machine. The difference is that the Domain Name Service settings associated with your domain enable browsers to “call out” to the image and display it using the HTML code.

      I like to use the full URL because sometimes I have images stored on multiple domains and I can keep them sorted better and also when I’m in “development mode” using Dreamweaver and I’m working with images already stored on a webserver, they will render in Dreamweaver’s Live View.

      So then, to get your images on the webserver, you typically need an FTP client like FileZilla which you configure with the settings you get from your web hosting provider (I prefer Bluehost).

      Most web hosing services have a file manager which you can use also, but I like FileZilla. The webserver will have a folder for your domain and inside that you can put your images anywhere you want. If you’re using a content management system like Joomla, there’s already a folder for images. Just remember where you put the images and reference the file using something like http://www.yourdomain.com/folderpathforyourimage/image-file.png

      Does that help?

      Reply
  38. Jane

    Hi Ed

    Great tutorial, really easy. One question, as hotmail doesn’t accept image maps, will it accept an email set up in this way? I am used to doing my emails in dreamweaver but had never done a slice in photoshop before and wanted to know if this will experience the same issue with hotmail.

    thanks

    Reply
    1. Ed Post author

      Good question, Jane & thanks for asking. Since this method is using slices and individual images referenced with the HTML Src tags, they are not technically image maps. You really shouldn’t have any trouble with Hotmail. Image maps are actually taking coordinates on an existing image. It’s certainly possible to use image maps in HTML e-mail, but this particular method uses images set in an HTML table.

      Reply
  39. chris

    Hello Ed,

    Thank you for the tutorials, very helpful so far but I have a question that hasn’t been covered in previous replies. Once the HTML e-mail is ready to go in Outlook for PC, is there a way to then customise the e-mail to include the recipients name, company, etc. I cannot find a tutorial anywhere which shows me how to do a mail merge with an HTML template and would be really grateful for some guidance.

    Cheers.

    Reply
    1. Ed Post author

      Great question & something I haven’t tried to do before, but it makes perfect sense for targeted email marketing. I’ll have to poke around with excel and possibly dream weaver and see what I can figure out. Any other readers have some ideas?

      Reply
      1. Sophie

        Any progress with this idea? I am running up against the same problem–this tutorial helped me create stunning emails, but I need to be able to drop in names from my newsletter subscription list automatically, as in “Hi Susan! Check out this totally awesomely rad email!”

        Reply
        1. Ed Post author

          I’ve played around with this a little, but integrating a mailing list basically means some fairly heavy duty database work (heavy duty for designers like me!). I’d recommend looking into Mailchimp or Constant Contact or similar programs that will let you create your own HTML and also has a user mailing list that you can use. I’m sure that there’s a way to do it using open source tools, but I haven’t figured that one out yet.

          Reply
  40. NiYan

    Hi, not sure if it is mentioned. This method is converting everything into jpg. Which may cost some problems to certain emails by not showing the images (click to view imgs). If we want to put selectable text into the html, will the coding be similar to webpage then?

    Thanks.

    Reply
    1. Ed Post author

      Yes, it will. The HTML email can be a combination of images and text. In this example, the tutorial assumes (like a situation that I dealt with regularly) that someone’s developed a PDF that they want converted into an HTML email. Best thing to do is in areas where you want text, to simply create white space in Photoshop or have text that’s converted to an image file (jpeg, png or whatever). Once the images are sliced in Photoshop and then opened in Dreamweaver, you don’t have to use the text images. You can simply delete the image and add regular text to that “cell” or area in Dreamweaver. The browser will render that as regular text.

      Here’s a little of my personal commentary… The best HTML emails are a combination of images and text. The problem is, particularly in small businesses as I’ve found, the design work on a PDF brochure isn’t generally optimized for HTML delivery. So, if you’re working with a client on a project like this and have a little design acumen, you can add a lot of value to the client (and potentially get repeat business!) but helping them modify design for HTML delivery. The concepts in this tutorial give you the tools to do that and the general tracks to run on, but in Dreamweaver you can modify that design however you want or think is in the best interest of your client.

      The problem with images sometimes not showing could be a couple things. First and usually it’s because there’s a typo in the path so the browser can’t find the image. One solution to this is to create your HTML page, upload it to your webserver (if you don’t have one, please consider signing up with Bluehost using my affiliate link!) and test it in a browser. If the images show up in the browser, they’ll generally show up in the e-mail client.

      If the images still don’t show up, it may be that the viewer is looking at their e-mail offline or there may be some settings on their computer that are not letting images render correctly.

      Thanks for stopping by & commenting!

      Reply
      1. NiYan

        just confirming. this method, it isn’t possible to use a bg image at the back? just colour?

        thanks again

        Reply
        1. Ed Post author

          It’s possible, but it can tend to create problems depending on what e-mail client the recipient is using to read their e-mails. Rule of thumb is that the design should be clean and not distract from the message.

          Reply
      2. NiYan

        sorry for all the silly questions, i would assume this is one of the safest way (that does not eff up the design beyond recognition in other email providers)… so i guess i should avoid trying to use typical web coding (like bg img, no repeat etc).

        for the text and stuff, have to input the font coding at the at the body or in the table? outlook reformat my font type.

        interesting….

        Reply
        1. Ed Post author

          If you’re using Dreamweaver, you can control font types and formatting, however I recommend using standard web fonts otherwise yes, e-mail clients will reformat fonts. For artistic fonts, I tend to turn those into PNGs or JPGs so I’m sure the recipient is going to get what I want them to.

          Reply
  41. Will Rhea

    I don’t see the final step for Mac users. I see the final step for PC users, though. I assume for Mac Mail that you just mail the contents of an email, right?

    Reply
    1. Ed Post author

      Hi Will, you’re exactly right… I forgot to add that onto the end of the post. It’s really very simple for Mac users using Mac Mail. Simply pull up your HTML page (the one you’ve uploaded to the webserver) in Safari, then select File>Mail Contents of This Page. Your Mail program will pull the HTML into the e-mail and you’re ready to send to your distribution. I will try and get the post updated with some nice, easy to follow pictures soon. Thanks a ton for stopping by & I hope the post helped you.

      Reply
  42. Arvin

    Hi can you please help me on how to upload these html files to the web? thanks
    I’m stuck in dreamweaver hehe

    Reply
    1. Ed Post author

      Check the parts of the post on “Using the Site Manager” and the video going over setting the site manager up in Dreamweaver – http://youtu.be/y_jnkjx5fTs. The best way to upload files to the web is through the site manager. You can also save your files to a folder and then use an FTP client to upload the images and the HTML, but that’s a little more cumbersome and requires that you subsequently upload any changes. If you use the site manager in Dreamweaver, you can just click the upload button and Dreamweaver will automatically sync with the files on your webserver.

      Reply
  43. joshua

    I really enjoyed your tutorial! I ended up with a pretty nice html email, but I was wondering if there is a way that I can get it to open up with gmail as nicely as it does with yahoo and safari. Is this possible?

    Reply
    1. Ed Post author

      Gmail is traditionally tricky. Depending on the complexity of the HTML it may or my not render exactly. I would suggest using the Firefox add-in Firebug to troubleshoot any areas where the HTML isn’t rendering properly. This may help you find the trouble spots. Firebug add-in for Firefox

      Reply
    1. Ed Post author

      I haven’t used Outlook 2010 for mac, so I’m sorry but I don’t know the answer to that. When sending in Outlook 2010 for PC, you would select “Attach File” then at the bottom of the dialogue box there’s an option for Insert or Insert As Text and you would select Insert As Text. Not sure if Outlook 2010 for Mac has the same option or not.

      Reply
  44. brian

    Hi Ed,

    Great tutorial BTW. I do have a question regarding text. How would i go about placing html text on top of an image. The reason i ask is because a client is wondering what if the user doesnt “download images” in their email? So thats why my client wanted some of the text as html so it shows up regardless if they download the images or not.

    Here is a link to the email

    http://www.encabostyles.com/EmailTest/

    They wanted the summer text in html.

    Thanks for your time!!

    Reply
  45. Debra Foster

    Hi there,
    Brilliant tutorials Ed. I would like to ask you a queston please. Is there a way of sending an html email without the recipient viewing the page as a web page ie. viewing using their web browser? Can they view the html email in their mail box, with links to your hard drive?
    Kind regards, Debra.

    Reply
    1. Ed Post author

      Hi Debra, in most e-mail clients like Outlook or Mac Mail, as long as the computer is connected to the internet, the e-mail client will render the HTML in the e-mail message. Often, it’s good practice to add a link at the top or bottom of your e-mail allowing the user to view it as a web page if they want. Some e-mail programs, especially gmail and yahoo mail render HTML differently and can add some white spaces and things you don’t want in the message window.

      As to your question about linking to images on their hard drive, you can’t do that. For an HTML email to work for the recipient, 2 things need to happen. First, the computer needs to be connected to the internet. Second, the images have to reside somewhere on the internet that is publicly accessible – i.e. on a web hosting account that you control. That way the code knows where to go get the image. I recommend Bluehost if you don’t have a hosting provider. They are inexpensive and easy to work with.

      Reply
  46. Jane Massey

    Ed, you are the best presenter of tutorials I have come across. Clear and precise and easy to understand. I’ve been struggling with this project all day and stumbled across the youtube tutorial by error. What a find! Pure gold! This html thingy is new to me, but, being charged with designing email marketing material, it is now a case of biting the bullet and getting on with it! Not so scared now. Cheers. I’d buy you a beer or three if you were local 🙂 cheers! Jane

    Reply
  47. Janet

    Hi Ed
    thanks for that, would appreciate it if you could check with your colleague on Entourage.
    As I know very few people who use it. I did set up apple mail for default just to test it out. Is it correct that when the email arrives into other people’s mail that the images won’t load, unless you request it to download images. Does this happen for all email clients.?

    Reply
  48. Bertram

    I need to make a suggestion. How does one add the social buttons, unsubscribe and other bells and whistles to an html email newsletter? Thank you in advance.

    Reply
  49. Bertram

    I say. Capital old boy. Capital. You have certainly restored confidence into this dashed chap. I enjoyed it immensely, couldn’t leave the screen for jiffy. Thanks and all that. I was wondering if you were musical at all and if it would be possible to ask you to make some music videos about music editing on the Mac using external music keyboards. Should be dashingly popular.
    Cheers.

    Reply
  50. Janet

    Ed
    Best tutorial I have seen so far on html emails, most others just get as far as creating it and then presume you know how to send the email and what to do with the code. But what about Entourage for Mac, I use this can you tell me where to go from here, do I just paste the code directly in. Also it says Safari won’t allow me to to mail to entourage. Do i paste code directly into the email and check html format?. This doesn’t seem to work. I have followed all steps from your tutorial but just can’t send the email out.?

    Reply
    1. Ed Post author

      Great question. I haven’t used Entourage in a long time & don’t have a current version. It’s really easy to send IF you’re using MacMail, just open the HTML page in Safari and click File>Mail Contents of this Page. You may want to try that with Entourage and if it doesn’t work, then configure your Mac Mail program to send e-mail (should be easy to do with the same settings as for Entourage) and do it that way. I think I know someone I work with who uses Entourage and may try to poke around with it a bit.

      Reply
  51. Maryanne

    Hi Ed:

    Thank you for explaining this process. This is a very useful tool to have in my arsenal. I knew I had done this once before, years ago with the help of someone more technically inclined than I.

    My question is, though, if I am making an email that is not associated with one of my websites can I upload it to any website that I am hosting? Just treat it like another page on that site and put the images in that site’s image folder? I use GoDaddy… I would assume that as long as there are no links to the page on the actual website that nobody will see it except for in the email that I send?

    Thanks for clarifying… GoDaddy had no idea what I was talking about!

    Reply
    1. Ed Post author

      Yes, as long as the images referred to in your HTML code, or the HTML page itself, are on a webserver that’s available on the internet, you shouldn’t have a problem. Way to make sure it works is copy the HTML file up to the webserver and then type the URL into your browser and you should see it. If the links are broken, then likely your URL is typed wrong.

      Reply
  52. Carol Ann

    Thank you so much for this tutorial, it has been so helpful. I have just one problem and it is with Outlook (2007). Outlook does not seem to display the email correctly, there are a few horizontal spaces where slices exist, particularly where there is a link inserted. The file displays fine online via any browser, it is Outlook that seems to have a problem (hotmail also had difficulty displaying but its Outlook that I am more concerned about). I cant for the life of me find anything wrong in the html code, I have cleared column widths and heights, changed border=0 on all images. Very frustrating that Outlook gets spaces and the online version displays perfectly! Any help you can offer would be so much appreciated.

    Reply
    1. Ed Post author

      I know this is a question about Outlook, but… My suggestion would be to use Firefox as your browser, install an add on called Firebug, an excellent web development tool, and look at your HTML using Firebug. That will help you identify problems with the code and then you’ll be able to fix. The real issue is probably something small in the HTML code. Different e-mail systems and browsers will render HTML differently and I’ve found Firebug in FF to be really helpful.

      Reply
  53. MeSha

    Hello
    This is perfect. Thank you so much.
    One question though. Is there a way to do this without uploading to a server. I am doing this for a friend that works for a company and I do not have access to their server. Also can you use acrobat pro? I am using mad by the way.
    Thank you so much!!

    Reply
    1. Ed Post author

      You’re going to have to upload to a server somewhere. We use and recommend Bluehost as a webserver that’s quite reasonable. We’re an affiliate partner, so if you link there from my site, I’ll get credit :). But wherever you upload, the images and HTML code needs to be available on the web. That way, when the recipient opens their e-mail, their computer knows where to go out and get the images from.

      Reply
  54. Kay

    Thank you so much for this tutorial! question for u tho…so I would upload my html to the server along with image folder and than send it as an attached image on email? Will the links still work? I have my design made and sliced up, I’m going to install outlook tomorrow. I want to add links on my email html, would the links work if I attached it on outlook as image?

    Reply
    1. Ed Post author

      In Outlook when attaching the HTML file, select “Insert As Text.” There’s a drop down arrow by the insert button, that’s how you find that option.

      Reply
  55. Véronique

    Hi,
    Your tutorial is without any doubt very useful! Great work!! Everything seems to work perfectly fine for me until I put the URL source for my image in Dreamweaver. Although, I had uploaded my image in the public directory of my FTP site, my image break right away after I put the address (ftp://…) that point to my images. I am new at this so I’m probably doing something wrong but I have no clue what it could be. Your help will be really appreciated.
    Thanks a lot for your post!

    Reply
    1. Ed Post author

      Don’t put the images in the public directory of your FTP site. Put them somewhere on your we serve that you can point to. The URL should start with http://, not ftp://. Your browser can’t find the images in the FTP directory.

      Reply
  56. Ray Lambert

    As a real newbie to HTML and CSS, you really demystified this process. I’m getting a jump on next semesters classes and thanks to this tutorial, I’m a step ahead already.

    Thanks for taking the time to do this!

    Ray

    Reply
  57. Jeremy

    Hi,
    I love your tutorial it was very informative for someone like me, who is new to the web details of design. I have a question though. It seems that I uploaded my card onto my site and it looks perfect, but when I attach the images onto an email there are spacing issues and my donation plugin is gone. I may have to email it to you, to understand but, I’m wondering if there is a fix for it considering it looks perfect on the site?

    thanks,
    -Jeremy
    http://www.fanaglobal.org/season/card.html

    Reply
  58. Shannon

    Great tutorial! thank you so much! I was curious.. is there a way to send out the email from something other than outlook? I have an email account with GoDaddy and also have yahoo and gmail.. just curious how you would go about sending from other emails addresses. thanks again 🙂

    Reply
    1. Ed Post author

      My short answer is to use an e-mail client like Outlook or Mac Mail for the purpose of sending out HTML e-mails. You can still use the web based accounts, but having a “client” program like Outlook is just a way to access emails from your desktop and they usually give you a little more flexibility when creating outbound e-mails. GoDaddy webmail, Yahoo and Gmail are pretty easy to configure with Outlook and Mac Mail. I’ve never tried to use the Gmail web interface to actually send out an HTML e-mail. It can probably be done.

      Reply
  59. Richard

    Ed,

    I found your youtube video while looking around for some info on this subject. I was using this method before I found your video and it seems to work great. However, I became a little confused after watching a Lynda.com video recommended to me on this subject. The guy was hand coding everything using notepad++, which is HTML tool and talking about creating nested tables. His method was not using the slice tool in photoshop, and cutting up each image individually, but creating individual tables around images on a background jpeg by hand coding, which seems to be the long way of doing it. Is there anything your aware of that would create a problem by slicing each image individually as opposed to creating nested tables? Is it more realistic to use photoshop and dreamweaver as tools to be more productive and efficient in sending HTML email as opposed to hand coding in a real world environment?

    Reply
    1. Ed Post author

      Sounds like he was doing it the long way. The nice thing about Photoshop is that it does the HTML automatically for you when you “save for web and devices.” Like lots of design and coding efforts, there are often several ways to do the same thing. If you have Photoshop & Dreamweaver, that’s the way I would go, but they are also pretty expensive tools and not everyone has them. However learning to code HTML can be a challenge to, especially if you don’t have a visual editor!

      Reply
  60. Charles

    Nice tutorial. Real nice. I was handed off a JPG image from my graphics person for my first email blast. I knew they get cut up but didn’t know I had some of the tools in my arsenal to automate it so. Great method in Photoshop I didn’t know was there. I only have CS4 Print Standard so am without Dreamweaver. I’m going to try the cleanup in Kompozer.

    Reply
  61. Selina Gutierrez

    I wanted to thank you for your html to email tutorials. They were refreshing clear and perfectly paced. I have a question, I currently use mac mail but am having trouble sending my html through any email on my mac. Can I just copy my html file onto my pc and send it through outlook? Or am I having issues because I do not have my html loaded to a specific webpage like you did at the end of step 4 using dreamweaver? Thank you!

    Reply
    1. Ed Post author

      You can’t copy the HTML into an e-mail in Mac mail. That’s because the HTML code is referring to images that are stored in a folder on the internet. If the HTML and the corresponding images aren’t there, then you’ll just get boxes with “x” in them instead of images. You’ll need to upload them to a webserver somewhere – it can be anywhere (that you have access to) as long as the URL is right. Make sense?

      Reply
  62. Erin Williams

    This post saved my butt. I have a client that sends me an .html file every week and I’m not ashamed to say that I do very little work in Dreamweaver. However, I do have one question that I hope you can help with…

    This may sound stupid (don’t you just love questions that start with this…) but when you’re in PS and your making your slices, are you trying to segment off the entire page into manageable smaller slices? The reason I ask is because the weekly email that I work on for this client is basically a flat graphic with the exception of where an email address is listed and where there should be a link over …”career opportunities on our web site.” Should I just slice these two areas and then link the URL and email address? Also, when slicing for the email address would you link it as Sam@stanjohnsonco.com even though it’s not a URL?

    The other issue I run across in PS (CS5) when slicing is my entire screen ends up with lines and boxes all over the entire graphic even if I’ve only made one slice. When you were slicing in the video, everything looked so clean and manageable. You could easily tell where your slices were and mine looks extremely confusing and pretty much just a hot, unmanageable mess.

    Any thoughts?

    Thanks so much. Your videos are fantastic and so easy to follow. I’ve learned more from watching your tutorials than I did in college. It’s a great blessing and asset to know there are resources like yours available.

    Thanks again,
    Erin

    Erin Williams
    McCarroll Williams Designs
    http://www.mccarrollwilliamsdesigns.com
    Erin@mccarrollwilliamsdesigns.com

    Reply
    1. Ed Post author

      Thanks so much for the comments & I’m really sorry it’s taken me so long to reply! Basically, when slicing a PS file, all you’re really doing is creating a bunch of smaller images out of one larger one. If you’re going to use the graphic as laid out in Photoshop as the basis for your web page (like in the tutorial), then yes, you need to slice the entire page. When you do that you end up with a bunch of images including the graphics you want but also a bunch of “white space” or spacer graphics. Depending on how you slice your PSD, Photoshop will fill in the gaps with additional slices to make up for anywhere that you’re slices didn’t perfectly match up. Since a slice is 1px, if you’re making a lot of slices, or if they’re close together, you’ll want to enlarge your image so you can see if they match up or not. That’s probably where the lines and boxes came from. Another possible explanation is that when placing your Photoshop-generated HTML into an editor like Dreamweaver, if you don’t clean it up and make sure all the lines and spaces are filled, then you can get some lines and spaces when the browser renders your HTML on-line.

      Re: your question about the e-mail address, yes, I believe that if you link to a “mailto:email@address” you will get what you want. You can add a ?subject=Whatever you want your subject to read and the e-mail will pre-fill the subject line. I have found that helpful to do.

      Reply
  63. Deanna Devine

    I have done and watched your videos atleast 4 times and I still can’t seem to send an email with my eblast inside the email. I have gotten closer each time, I am finding that when I open the email, because I am emailing myself from my doteasy account to my yahoo account, when I open my yahoo it shows an x with my alt tags that I identified as Logo. And when you click on it, it does go to my site, but I want my little ad to be showing in the body of the email and it doesn’t show.

    I did the exercise of bringing the image into photoshop and I had 3 image files, and I did what you said create the whole path to my website and I show all the files withing the images folder, so something is not getting done right? Could you possibly help me with this. I would appreciate it any enlightenment you could bring me, and I love your tutorials, very good and I will start coming here for all my information in the future.

    Reply
    1. Ed Post author

      It’s most likely that you have a typo somewhere in the URL that you’re referencing for the images. If you want to send the e-mail to me at ed(at)edhart.me, I’ll be glad to take a quick look at it.

      Reply
  64. Tajo

    This is amazing! I have been faffing about with images and dream weaver templates I don’t really know how to use and edit. Now I’ve got a simple way of taking our print designs into html emails for marketing purposes.
    This is gonna save me so much time! Love it : )

    Reply
  65. Anna

    This was extremely helpful, my only question/suggestion would be how to add text into the newsletter in Dreamweaver? Do you specify those images as background images and add the text on top?

    Reply
  66. Lauren Wohl-Sanchez

    Wow. This is fabulous. Just what I was looking for. I don’t do much on the web other than design, leaving all the code-related work to others, but I think I can do this following your amazing tutorial. Thank you!!!!

    Reply
  67. Nathalie Durili

    Thanks so much for this tutorial. Really helpful!
    I will be definitely checking your video tutorials.

    Reply
  68. Holly

    You are a little Star!!!! My boss had asked me to do this for our company and I was really worried – but you are a fantastic teacher and now I feel quite reassured! I’ll be on your blog again for sure! Thank you!

    Reply
    1. Ed Post author

      First, thanks for stopping by & making a comment. When I read it I Just realized that I totally left that part out of the tutorial. Sorry.. it’s really easy. For Mac users (like me), just pull up the HTML page in Safari and select File>Mail Content of this Page (or Apple key+I). It will embed the HTML in your Mac Mail e-mail and you’re good to go.

      Reply
      1. Mark

        Hi Ed,

        First off, great tutorial!

        I have a question re: using Mac Mail to send the email. I deleted the slice with the text on and made a new table and typed the text in using dreamweaver. After a bit of jiggling it looks okay, however when I use safari and press Apple+I, it classes it as a forwarded message, so when looking at it on my iphone, the text is blue with a line down the left hand side! any tips?

        Thanks!

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *