Solved

Sending HTML Emails

Posted on 2014-11-03
11
144 Views
Last Modified: 2014-11-04
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!
0
Comment
Question by:Bob Schneider
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 168 total points
ID: 40419847
are the cut off edges just from the screen shot, or is that really how it looks in outlook?
0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 168 total points
ID: 40419856
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
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 168 total points
ID: 40419877
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 276 total points
ID: 40419881
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 276 total points
ID: 40419902
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 276 total points
ID: 40419913
I just saw your link. The width should be narrower. Try maxing out at 500 or 600px.
0
 

Author Comment

by:Bob Schneider
ID: 40419933
Ok...can I do this with Mandrill or one of these utilities?  I have a classic asp page that I use for this.
0
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 276 total points
ID: 40420012
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 276 total points
ID: 40420042
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
 
LVL 43

Accepted Solution

by:
Rob earned 56 total points
ID: 40420453
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
 

Author Closing Comment

by:Bob Schneider
ID: 40423092
Such good advice!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SP result not being displayed 5 68
allow link tag to be submit like form 15 60
HTML CSS and  Table design 4 67
SSL unsecure page mystery 17 46
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question