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.
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
This week we are taking a look at developing applications or widgets for mobile devices. There are a few things to keep in mind when developing for mobile devices:
- Custom style sheets (CSS) for mobile phones putting links first, then content – this allows mobile users to get to the content faster
- Minimize text entry required – ease of entry is different for various devices and often difficult
- Avoid image maps – due to the required clicks on a specific part of the image and it may not be possible on all devices
- Implement location based services if needed to assist the user in locating you
Another good resource for creating pages for mobile use is called “Consider these design issues when developing mobile applications”. This pages offers advice to developers about items such as content, screen size, etc.
Google provides a page called “Android Developers” which describes the various articles, tutorials, etc. needed to make an app for the Android device. Windows has a similar site called “Windows Mobile Developer Center” which has all of the information you need to develop apps for the Windows Phone. Similarly Apple offers the site “iOS Developer” with similar information. I am sure that other phone manufactures like Blackberry have the same type of pages. What about those users who do not have these devices?
When developing for .mobi there are a bunch of resources out there for the web developer to follow. One such tool MyMobileWeb, offers an easy to follow guide when creating mobile based applications. “MyMobileWeb is a low-cost, modular, open-standards-based, open source software platform that simplifies the development of top-quality .mobi applications and portals, providing an advanced content adaptation environment. It includes different modules which cover all the basic requirements that must fulfill a complete and integrated mobile web site, hiding applications all the complexity related to dealing with multiple delivery contexts” (mobiForge). Google provides a great resource page for development of .mobi pages called “Developing mobile sites”. This Google site has links to validation tools which will validate your page to ensure it will work on mobile devices.
As a result, developers need to take a look at the cost/benefit when developing a page for mobile devices. If your page will likely not be viewed on mobile devices, the cost of development will outweigh the benefits. Similarly, if your site is heavily used by mobile users you need to invest in creating a usable and accessible site for mobile devices.
mobiForge. MyMobileWeb – An open source platform for developing .mobi-compliant applications. March 2007. 2 November 2010 <http://mobiforge.com/developing/story/mymobileweb-an-open-source-platform-developing-mobi-compliant-applications>.
What is Universal Design? In a general sense “Universal Design is trying to make products & environments easily used by everyone. With this use of approach it will help people with handicaps, disabled and/or small children” (Expert). However, for our purposes we are strictly talking about the virtual world and according to the text Universal Design is “Designing for the largest audience possible, regardless of disability or ability to speak the native language” (Thatcher).
I started learning about Universal Design while taking a course in Web Accessibility and Usability I thought this totally makes since; a few key things I learned were the length of links, testing with experienced users, and fixing an existing site. According to Mark DuBois, web links should be more than four characters long because “people may not be able to click on a link smaller than four characters” (DuBois). The book by Jim Thatcher provides sound logic as to why you should use people with disabilities when testing your site. By including people with disabilities in the testing phase you can learn from them to improve your site to make it more accessible and more usable. Furthermore, the text explains how to fix an existing site; one of the key things I learned was prioritizing the repairs, by area or barrier. If there are a few areas on your site that are highly impactful you should fix those first. Then you can turn your attention to the guidelines put forth by the WCAG, using the WCAG 1.0 Checkpoints.
DuBois, Mark. CMWEB 150 – Topic 2. 13 August 2010. 19 August 2010 <http://www.screencast.com/users/MarkDuBois/folders/CMWEB150/media/c5100e6a-caaa-4670-8e7a-042a7819e36a>.
Expert, Rheada Answers. Ask Answers. 2010. 30 August 2010 <http://answers.ask.com/Society/Other/what_is_universal_design>.
Thatcher, Jim. Web Accessibility: Web Standards and Regulatory Compliance. New York: Friends of Ed, 2006.