Sending HTML Emails

I occassionaly have the need to send html emails to subscribers.  They have a way to "open in web browser" which gives a nice look but I want to improve the look when in their email client.  right now it looks like this in my outlook:
HTML email in outlook
Here is what it looks like online

Is there a way to bridge the gap between the way the email renders and the way the web version renders.  I know I get some better html emails from other vendors.

Thanks!
Bob SchneiderCo-OwnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontyWeb Ninja at largeCommented:
are the cut off edges just from the screen shot, or is that really how it looks in outlook?
0
Big MontyWeb Ninja at largeCommented:
validating your html version, there were only 2 errors, which is good, however, email clients can be very picky, and that could be leading to some of the issues you're seeing.

of course, this is assuming you're using the EXACT html code in your emails that you provided with the link
0
Big MontyWeb Ninja at largeCommented:
you may also want to consider use a third party tool to build your html email and it'll make it "email-friendly" for you.

Premailer - http://premailer.dialect.ca/
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I use ink and it is a great base for emails.  It will auto configure based on the phone size just as a responsive site.  Because email needs to be a bit more primitive in set up, it takes some work but you will love the results!

http://zurb.com/playground/responsive-email-templates

http://zurb.com/ink/
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
fyi, zurb is a great resource and they have a few articles about using outlook such as static widths and conditionals

http://zurb.com/article/1262/outlook-your-best-worst-enemy-for-respons 
http://zurb.com/ink/docs.php
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I just saw your link. The width should be narrower. Try maxing out at 500 or 600px.
0
Bob SchneiderCo-OwnerAuthor Commented:
Ok...can I do this with Mandrill or one of these utilities?  I have a classic asp page that I use for this.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Of course.

Mandrill is just the 3rd party smtp service.

The way I set up mail is to have a function for both the template and sending.  In mandrill if you are using the newsletter feature, you would just use the updated html.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Here is a sample of old code for mandril I use

do until rs.eof
' replace data with recordset
theBody = template(firstName,lastName, variableData1,varialbeData2)

sendMail theFirstName, theLastName, theAddress, theSubject,  theBody

rs.movenext
loop

Sub SendMail(theFirstName, theLastName, theAddress, theSubject,  theBody)

' Set stuff up here
Const cdoSendUsingPickup = 1 'Send message using the local SMTP service pickup directory. 
Const cdoSendUsingPort = 2 'Send the message using the network (SMTP over the network). 
Const cdoAnonymous = 0 'Do not authenticate
Const cdoBasic = 1 'basic (clear-text) authentication
Const cdoNTLM = 2 'NTLM
'SMTP userinfo
smtpUser="username"
smtpPass="password"

Rcpt = Chr(34) & theFirstName &" "&theLastName & Chr(34) & "<" & TheAddress & ">" 

Set objMessage = CreateObject("CDO.Message") 
objMessage.Subject = theSubject 
objMessage.From = "first last <address@mydomain.com>" 
objMessage.To = ""&theFirstName&" "&theLastName&" <"&TheAddress&">" 'Rcpt
objMessage.HTMLBody =  theHTML(theSubject,theBody) ' runs sub EmailBody

'==This section provides the configuration information for the remote SMTP server.
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2 
'Name or IP of Remote SMTP Server
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserver") =  "smtp.mandrillapp.com" 
'Type of authentication, NONE, Basic (Base64 encoded), NTLM
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = cdoBasic
'Your UserID on the SMTP server
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendusername") = smtpUser
'Your password on the SMTP server
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendpassword") = smtpPass
'Server port (typically 25)
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 465 
'Use SSL for the connection (False or True)
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = true
'Connection Timeout in seconds (the maximum time CDO will try to establish a connection to the SMTP server)
objMessage.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 60
objMessage.Configuration.Fields.Update


'==End remote SMTP server configuration section==


objMessage.Send

End Sub

function template(firstName,lastName, variableData1,varialbeData2)
    mailHTML =""
    mailHTML=mailHTML&"<table>"
    mailHTML=mailHTML&"<tr><td>Hello "&firstName&" "&lastName&"</td></tr>"
    mailHTML=mailHTML&"<tr><td>"&variableData1&"</td></tr>"
    mailHTML=mailHTML&"<tr><td>"&variableData2&"</td></tr>"
    mailHTML=mailHTML&"<table>"
template=mailHTML
end function.

Open in new window

0
RobOwner (Aidellio)Commented:
I'll throw my 2c in.  We've all had different experiences so you should take what suits you.

Campaign Monitor
One of the best and easiest to use.  Allows you to easily create a template via their WYSIWYG or you can upload your own html template to use.  Last time I checked, it's free for a minimum of recipients that may fit your requirements.

What you may find useful regardless of Campaign Montior is they also have built the "bible" when it comes to using CSS in your emails and what email clients are compatible with what (https://www.campaignmonitor.com/css/).  Use it as your reference to get a good idea about how the emails look in the client.

IMHO and my experience when it comes to email marketing, the email itself should be more of a teaser with a very basic but clean layout.  Enticed to have the user click to either view the actual email online or view the specific contents of the email online such as a product or article.  The more complicated you make the email the worse it's going to look in most clients.  Email software just isn't designed for displaying HTML (well not the programs most businesses use... i.e. Outlook)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob SchneiderCo-OwnerAuthor Commented:
Such good advice!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.