I'm a print guy, not a web guy, so please show me the path! I can do a little HTML and CSS, but nothing fancy.
My company is asking me to take over an email newsletter that is sent out embeded into the email body as an HTML message. It was orginaly done (not by me) in MS Word using tables, and those things will strech out after being sent.
I ahve 3 questions:
1. Why are the table stretching? Is it because they were done using Word tables?
2. 100% of the people who will be receiving this will open it using MS Outlook. If I'm designing for Outlook, do I need to build using tables, or can Outlook interpret CSS Divs?
3. Some people will be using outlook in mobile devices. Is there anyway to create a mobile version for them or is this the kind of thing I'd need to host on a web page to pull off?
Perhaps you will benefit by downloading the guides from this link:
Personally, I would create the newsletters in PDF format and attach them to the emails to send out. But it is just me!!
Good luck and keep us posted.
Here is a compatibility chart for all major e-mail clients including web services (Gmail, Yahoo mail, etc..) for what they support and what they don't: http://www.campaignmonitor.com/css/
Tables are globally supported. CSS is not, on some of them. It depends on the demographic that you're sending this out to. If it is majorly Outlook only, look at the link above to see what fits you best and create your newsletter.
Another best practice is to include a text link to a webpage containing the same newsletter to the top of your newsletter - this way, if the newsletter doesn't load on the e-mail client, users can still click on the link to see the exact same newsletter as a webpage on your website.
You may also want to look at http://www.mailchimp.com - It's a great service, they have a free plan too. You may want to try it out. Very user-friendly and easy to create/ administer.
Other than that, you don't have to use MS Word. You could do it using Dreamweaver or any HTML code editing program - even Textmate can do it for you as long as you know your code.
Quick tip: Be sure to load up the images to your webserver and link to them as an absolute link in your HTML code so the images are loaded from your webserver. You cannot provide local/ relative links like you'd do in a normal webpage as you're sending this out via e-mail and relative links won't show up.
Everyone else gave you great links to get you started so I'll try to help with your questions:
1. If you post the HTML it will be easier to help here. But it sounds like your table does not have a defined width. Best practice is 600px width for the outermost table.
2. Really? You have stats showing this? If you have those stats, what version of Outlook are they using? There are some slight differerences between appearance in 2010 vs 2007 and even moreso from those versions to earlier versions since 2007 marks when MS switched to the brilliant Word rendering engine from the Trident engine that is IE. But to answer your question, tables are best, especially moving forward since MS moved backward.
3. Outlook in mobile devices? As in Windows Phone 7/8? If so I'm going to have to yeild to other opinions on this one. Android and iOS are pretty straightforward but I've never tested on Windows Phone. If you stick with a table you should be fine, but maybe you could send a message asking Campaign Monitor to update their CSS doc for Windows Phone.