Solved

Sending HTML Emails

Posted on 2014-11-03
11
136 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
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 32

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 32

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 32

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
 
LVL 52

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 52

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 52

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 52

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 52

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 42

Accepted Solution

by:
Rob Jurd, EE MVE 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now