?
Solved

Sending HTML Emails

Posted on 2014-11-03
11
Medium Priority
?
146 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 672 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 672 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 672 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1104 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 1104 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 1104 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 1104 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 1104 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 224 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 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