Categories
Blogging Content Marketing Create HTML Email Marketing Web Development

How to create HTML email

Many firms that rely on marketing have a similar scenario:  The marketing staff has created various marketing pieces that work great as print pieces, but when they want to do some customized e-mail marketing, the effort boils down to sending attached PDF documents or using template based subscription services.

Also, if you’ve already gone through this and are having a problem with the annoying white spaces between images in Gmail, this post will help!

What Will I Learn From This Series?

In this tutorial, you will learn how to take a PDF document (or Photoshop image) and use it to create and send HTML based emails.  You will also develop a skill set that will enable you to better design marketing pieces especially for HTML marketing.  Concepts include exporting to images, slicing images for web, optimizing images for use on the web, cleaning up HTML code, working with a webserver, and inserting HTML code into an e-mail.

What Tools Do I Need?

In this series, I am using the following tools:

There are many other tools, some of which are Open Source, that can be used to accomplish the same thing without the significant software investment.  The concepts are basically the same as with the tools in this series.  Get the concepts down and the specific tool doesn’t matter quite as much!

An Introduction to HTML Email

Step 1: Exporting the PDF as an Image

In our example, we’re using a PDF that was already created.  We’re simply going to turn this document into a graphic that we can then import into Photoshop and get it ready for HTML use.

To export a PDF, you will need to use Acrobat (or some other converter application capable of turning a PDF into a graphic).  Simply select File> Export> Image and choose your preferred image format.  I’m going with JPEG.

In this case, our document is 2 pages, so we end up with 2 graphics.

Step 2: Slicing the Image in Photoshop

In an ideal world, we will have designed our HTML marketing e-mail layouts in Photoshop specifically for e-mail.  However, in the real world, often we have something that’s been given to us to convert into HTML.  And the way we do that is to take what we have and use Photoshop to slice it up so that it’s more usable for the web.  That sounds complicated!  why are we doing that?  Well, there are a couple of reasons for this…

In this example, we could have just use the whole flier graphic as a one big graphic HTML layout.  But what if we want to link different parts of this layout to different websites (which we will do in this example)?  Or what if we wanted to get rid of some of the graphical text and add some dynamic text of our own?  Or what if we want to optimize certain graphics for faster loading in a web browser while leaving some of the other ones alone?

Well, the slice tool in Photoshop is really pretty easy to learn and it gives you a ton of additional flexibility when you are laying out your HTML piece.  Here’s how you do it:

Using Dreamweaver to Clean and Prepare HTML for Use

We’re almost done!  But before we take the HTML and stick it on an email and send to the world, we need to make sure it’s going to look the way we want it.  If you’re really good with HTML, you may not need this step, but for most of us marketers, having a visual editor and an integrated way to interact with our files and our webserver is a really helpful thing.

Time to Really Pay Attention to Detail…

The important thing about this step (besides getting familiar with Dreaweaver which can be overwhelming at first) is to really pay attention to the detail of how the graphics are laid out and how the table which Photoshop built (via the HTML code) is laid out.  Otherwise, when you send out your e-mail, things may not line up quite right or there may be spaces and gaps where you don’t want them, particularly on a flyer like the one we’re working on.

From the video, here’s what’s happened so far in basic terms:

  1. We’ve sliced up the graphics in Photoshop.
  2. Photoshop has generated the HTML code that we will eventually (with some modifications) insert into our email.  This code has simply created a table and inserted the graphics into various cells.
  3. Photoshop has also optimized the various graphics that will make up our email (using the slices) and put them in an images folder.
  4. Using Dreamweaver, we’ve used the design mode to look at the layout and identified some spacers and unused rows and columns in the HTML table & removed them.
  5. We’ve also removed some table formatting that came over from Photoshop, specifically the fixed table widths & heights.
  6. Using Dreamweaver’s LiveView, we’ve taken a look at how the email will look as a web page.
  7. Finally we’ve then uploaded the clean HTML file as well as all the associated graphics to the webserver.

In this session, I primarily used the design view in the Dreamweaver layout.  Each of these views are useful as you look at the code and the design, however when dealing with the table, I prefer to work in the design view.

Our first step is to remove unused graphics or spacers from the table.  They were there because there were areas of white space around the graphics that I sliced and were automatically inserted in the HTML code.

Then I deleted the rows or the columns in the table that held these spacers.  This is because they would create areas of white space in our HTML email.  To do this I put my cursor in the affected cell and using either right click or the Modify file menu, I deleted the rows and columns.

Note: Since this was a pretty straightforward and simple table, I was able to delete rows and columns without messing things up too much.  Take care how you slice up your graphics in Photoshop so that the table is manageable once you get in and start cleaning it up!

The Power of Undo

You will also notice in the video that when I deleted the bottom row, the formatting totally messed up.  Not a big deal, because first I can always undo the last few actions, but I also knew that there was probably some other formatting that I could clean up… the pre-set Table Widths & Heights and Cell Padding.  This is a common issue, but can surprise you when you start cleaning up or if you keep seeing white spaces and can be frustrating if you forget to remove or reset that stuff.

We used the Properties tab at the bottom to remove these and we could have also found the same functions from the Modify>Table file menu at the top.

Checking Links

We also checked our links using the same properties tab (which changed when we clicked on a graphic item.  In our example, we actually set the links in Photoshop, however we could have just as easily done it here and we can always add some more.  Notice that the graphic is in the Src field, the link is in hte Link field & the Target field tells us how to handle the link (_blank means open in a new window).

Once we’ve cleaned our code, removed the white spaces, padding, unused graphics and other stuff we don’t want, we can use the Live View tool to see how the HTML renders on the web.  This is helpful, but keep in mind that every browser is different and it’s always a good idea to test out your e-mail using different e-mail clients and web mail tools to make sure that whoever gets your marketing piece has a good experience!

Using the Site Manager

One of Dreamweavers nice integrations is the Site Manager.  This functionality allows you to manage your local files on your computer, but also to connect to your webserver and interact with the files there, all from the same interface.

It’s certainly possible to use your own FTP client to transfer the files from wherever you have them saved to your webserver, but when you are doing some last minute refining and tweaking, it’s pretty convenient to be able to click a button and upload your newly changed files.

Here’s a quick look at the Manage Sites setup:

Note: I’ve recently created a new video on using the site manager in Dreamweaver for CC2015.  The functionality is essentially the same, but the layout is different.  You can view that video here.

The Final Step – Outlook Users

Once you have your HTML created, the final step is to embed it into an e-mail.  Sounds simple right?  Well yes, but there’s a little trick to it… the “Insert As Text” that’s easy to miss if you’re not looking for it.

If you’re a Mac Mail user, here’s a more recent version of this step including Outlook and Mac Mail.

Look!  There it is…

There it is on my iPhone.  Remember, people are going to be looking at your e-mail on all kinds of devices and using all kinds of interfaces, so when planning your e-mail marketing campaign, don’t forget to test it on several different e-mail systems to make sure it looks the way you want it to.

Update to this Post

Due to the numerous questions about combining text and graphics in an HTML email, I’ve created a new post on the topic!  I will also soon be creating a new post with info on how to avoid the annoying spaces that show up when sending an HTML email to Gmail accounts!  Enjoy.

 

166 replies on “How to create HTML email”

Hey there Ed,

I hoping you would be able to help me, I feel like I am one step away from completing the html email journey. I am stuck on the manage sites part.

I have gotten my html doc and images uploaded to my hosting server but when I try to type the url online to see if its working I am getting redirected to 404 pages.

Wanted to see if this is something you would be able to hop on team viewer real quick. I deeply appreciate any help you can give me on this issue.

Thank you!

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

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’>

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

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

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)

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!

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.

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.

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

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.

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.

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 …

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!

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.

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!

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


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.

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


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.

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.

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.

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.

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.

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

-Semper Fi
gyrene2083

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

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

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

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.

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

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.

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!

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

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.

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.

I will definitely get in touch with Optimum. Yes, my HTML forms. I have tested it by sending it to myself and family via BCC and we all received it just fine. Thank you for the offer. I just need your e-mail address. Mine is [email protected].

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.

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.

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.

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.

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.

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?

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.

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

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?

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.

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?

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.

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.

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?

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!

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.

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

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?

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.

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.

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.

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.

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!

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.

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.

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.

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.

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!!

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?

Thanks for sharing your info. I really appreciate your efforts
and I am waiting for your next write ups thanks once again.

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

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.

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.

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?

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!”

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.

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.

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!

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

thanks again

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.

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….

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.

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?

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.

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

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.

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?

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

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.

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!!

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.

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.

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

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.?

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.

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.

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.?

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.

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!

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.

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.

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.

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!!

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.

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?

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.

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!

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.

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

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

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 🙂

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.

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?

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!

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.

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!

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?

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 [email protected] 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
[email protected]

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.

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.

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.

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 : )

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?

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!!!!

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

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!

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.

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!

Leave a Reply to Cynthia Ruffino Cancel reply

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