Have you ever been frustrated creating HTML emails with buttons only to see that little red X when you review the email? I have and it is frustrating. With just a little bit of Photoshop and HTML / CSS code you can create a functional button like the one in the email below.
The “View the Digital Edition Here” button is created with a table that has three columns and one row. The first and last cell have images with a link attached and the middle cell is all coded with html and css.
Here is the HTML code:
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/left.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>
<td style=”font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#000; text-align: center;” bgcolor=”#feb703″><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank” style=”text-decoration:none; color:#000;”>View the Digital Edition Here</a></td>
<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/right.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>
How to make it work
You first need to develop the ends of your button. I created the ends by making a small square image with a transparent background. Then I made a filled circle of yellow and moved half if that off of the square to make the half moon shapes. After that you insert those into the first to cells and link them to your URL. Then in the middle cell, insert a URL with the text you want to include as the name of the link. In the link cell, you want to make sure the background color is the same as your two ends. When the email renders with images you get the image of the button. If you are like me and images do not always render with emails you would have the middle cell still showing.
Yesterday I attended the Direct Marketing News Virtual Event and this blog is about the session I attended. While interesting they really did not do a good job of explaining the best practices for “Optimizing email” for mobile devices.
- 45% mobile phone users own a smartphone
- 7% of mobile devices are tablets – small group but growing at a compounded rate of 23.59% per year
- 77% of smartphone users use in stores
- More than half of adults buy on smartphone
- 88% of people check their email via mobile phone daily
- The majority of people in the near term will be iOS platform but that is shifting.
- Landing pages (website pages you link to) should have both a desktop version and a mobile version.
- Try to keep email design into a single column
- Keep Copy short and sweet and simple
- Primary call to action as high up as possible – make sure it is large enough for a finger to hit.
- 6.4% of attendees emails are being opened on mobile.
- ESP – that will allow insertion of a mobile optimized format
- BrightWave Marketing (figures as this was one of the companies that presented)
One of the presenters also mentioned he had a blog:
I went through a webinar presented by Marketo about Email best practices and I thought I would share some thoughts from the presentation. Like in past posts, I am not going to spew the entire contents of the presentation but mention a few highlights and you can take a look at the slides posted below.
- Fewer calls to action are better than multiple actions so as to not confuse people
- Use bullets as it is faster to skim the message
- Test in a minimum of Outlook and Google but the more you can test on the better
- Test on mobile
- How to articles go over very well
- Subject lines
- Four to six words
- Don’t tell them who you are in the subject line – the from line should do that
- Segment, Segment, Segment
- Track use behavior to see what is clicked on and alter messages to guide the user
- Build the relationship with the client – this will go further than other types of messages
- Automate as many messages as possible
In November I sat through a webinar half listening as I dutifully continued working on other items of importance…or so I thought. The webinar was called Email Rendering and Design Trends and the slides are attached with some notes.
Here are a few things as I go back and look at the slides I seem to find important.
- Personalize messages to drive engagement – I see this more and more in the B2C world companies are adjusting messages to user preferences.
- Clean up the design of your emails – I often get emails from companies that are all graphics. On my mobile I do not allow for image downloads so the email is blank…why would you want your email to appear this way?
- Right-time Email Programs – when someone makes a purchase you need to do a follow-up email with a confirmation and another add-on offer.
- Ensure you are testing on webmail servers as well as desktop and mobile.
- Design for the preview pane – which is often only 320px high.
- Pre-headers are a must – does yours say something like “To view this email as a webpage click here”?
- It should have some intrinsic value to the message of the mailing like – “Meet your best prospects from Bayer, Motorola, Airbus at the world’s LARGEST advanced manufacturing event. View this email in a browser or on a mobile device.”
- Sometimes people only see your pre-header.
- Need most important content “above the fold” in your email – about 420px.
- Mobile design tips
- 480-600px wide
- Fonts minimum of 14px, headlines 22px
- Subject: 15 characters
- Video does not work in many email clients ye so it is best to know your audience and only include IF they can view it.
Thank you for taking the time to re3ad this, I hope you enjoy the slides.
I have been trying to think of ways to freshen up our email program here in North America. Over the last few weeks I have been reevaluating past webinars and workshops I have attended and wanted a place to post all of those little things I have gleaned from the information. So, this is where I will keep those thoughts for now…I have arranged them by event so if you happen to want more information just let me know.
Online Marketing Summit 2012 – Email 3.0
- Look at all information from every department that touches the exhibitor and see what messages can be eliminated and what messages can be combined.
- Create a campaign calendar
- Involve all groups who touch the exhibitor
- At most only email 2 times per month
- When a purchase is made, send an add on email 30 minutes to 2 days later.
- Studies have shown that if sent within 30 min you have a 90% chance of add on purchase
- Sent within 60 minutes 80%
- Next day 44%
- When someone unsubscribes you should respond with a meaningful message
- Get creative in the preheader…don’t just put “If you can’ read this email click here.” This may be the only thing the user sees.
Online Marketing Summit 2012 – Email Best Practices
- Insert reps image in the email – works well in the financial market
- Become the customer
- Opt-in and see what happens
- Make secret transactions
- Opt-out to see what happens
- Call up and argue/complain to see what happens
- Listen to customers when they comment about emails
- Let people manage their email preferences; do not assume they want to receive everything from your firm.
- When someone unsubscribes, find out why.
- Make the unsubscribe page clear so the person know what they are unsubscribing from
- Instead of an unsubscribe only area give them the option to edit preferences.
Online Marketing Institute – Advanced Email Marketing
- Over 70% of email marked as spam is based solely on the Sender’s name, company names or brand names are not as good as a personal name.
- Header should not be one large image, instead upper left should be an HTML headline and move the logo to the right hand side.
- B2B – you should not send more than 1 time per month, at most bi-weekly. Once you go past this boundary you start to upset people.
- Put meaningful copy here instead of the “to view” link. This may be the only place the receiver sees in preview. Further, the “to view” link does not need to be in the pre-header, it can be lower in the page.
- Images on the right
- HTML text with style on left
- Images should be as small as possible
- ALT tags are a must (missing alt tags drive your spam rating higher)
- Spammy Words – these words drive your spam rates higher. (Great list of things to remove http://spamassassin.apache.org/tests_3_3_x.html)
|Limited time (offer)
||Any words in all caps
- Use no DIV – they add to spam score
- No CSS in header – it is stripped out of most email clients
- Always define the background color
- 600 is now the optimum width for screen
- Text – first three or four lines should be no more than 30 characters as that is all that shows up to the preview pane then around 72 characters after that
- Text – do not use plus or minus as these will in some instances mess up the rendering of the email; instead use > or *
- Use proper pixels instead of percents
- Use Height and Width for images
2012 Online Marketing Summit