CSS Archives - Steven's Homestead

HTML “Button” for Emails

HTML “Button” for Emails

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″>

<tr>

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

</tr>

</table>

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.

 

MarketingSherpa’s Dirty Dozen

I got the attached document from the Online Marketing Summit produced by UBM TechWeb in San Diego.  I can’t remember who sent it to me or even if I requested it but I wanted to share a few interesting nuggets from the 12 “Newsletter Mistakes Nearly Everyone Makes”.

  1. Email sign up should have a verification process where the person has to verify the signed up for your message.
  2. The more you can segment the better results you will have.
  3. Make the welcome message inviting and engaging…tell them what the future holds.
  4. Know how often to send….
  5. Add some personalization
  6. Use proper HTML and CSS…I personally run my HTML through the W3C Validator Service.

MarketingSherpa Dirty Dozen Email Newsletter Mistakes

Random Email Program Thoughts

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

  1. Look at all information from every department that touches the exhibitor and see what messages can be eliminated and what messages can be combined.
  2. Create a campaign calendar
    1. Involve all groups who touch the exhibitor
    2. At most only email 2 times per month
  3. When a purchase is made, send an add on email 30 minutes to 2 days later.
    1. Studies have shown that if sent within 30 min you have a 90% chance of add on purchase
      1. Sent within 60 minutes 80%
      2. Next day 44%
  4. When someone unsubscribes you should respond with a meaningful message
  5. 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

  1. Insert reps image in the email – works well in the financial market
  2. Become the customer
    1. Opt-in and see what happens
    2. Make secret transactions
    3. Opt-out to see what happens
    4. Call up and argue/complain to see what happens
    5. Listen to customers when they comment about emails
  3. Let people manage their email preferences; do not assume they want to receive everything from your firm.
  4. When someone unsubscribes, find out why.
    1. Make the unsubscribe page clear so the person know what they are unsubscribing from
    2. Instead of an unsubscribe only area give them the option to edit preferences.

Online Marketing Institute – Advanced Email Marketing

  1. 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.
  2. Header should not be one large image, instead upper left should be an HTML headline and move the logo to the right hand side.
  3. 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.
  4. Design
    1. Pre-header
      1. 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.
    2. Header
      1. Images on the right
      2. HTML text with style on left
    3. Body
      1. Images should be as small as possible
      2. ALT tags are a must (missing alt tags drive your spam rating higher)
  5. Spammy Words – these words drive your spam rates higher. (Great list of things to remove http://spamassassin.apache.org/tests_3_3_x.html)

 

Click Instant(ly) Special Offer
Free Profit(s) Guarantee
Complementary Subscribe/un Value
No-cost Amazed(ing) Download
Remove Money/Dollar(s)/$$$ Get
Limited time (offer) Sale Punctuation Marks
Spam Saving Any words in all caps
Win Price 4U
Income

 

  1. Code
    1. Use no DIV – they add to spam score
    2. No CSS in header – it is stripped out of most email clients
    3. Always define the background color
    4. 600 is now the optimum width for screen
    5. 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
    6. Text – do not use plus or minus as these will in some instances mess up the rendering of the email; instead use > or *
    7. Use proper pixels instead of percents
    8. Use Height and Width for images

2012 Online Marketing Summit

HTML Email an Introduction

So, lately at work I have been charged with creating HTML email campaigns to market the trade shows to exhibitors.  Having a good understanding of HTML and CSS has enabled me to succeed in managing several campaigns.  When I started crafting the emails, I did not understand the process of an HTML based email as I had never done that before.

There are a few things to keep in mind when crafting these emails.

  1. Size of message, not file size but width.
  2. Code both HTML and CSS
  3. Images
  4. Devices used to open the email

Size of Message

You need to keep in mind when crafting the HTML email the size of screen most email programs have for the preview.  This issue is really important as you really do not want people to have to scroll, either horizontally or vertically, more than is needed.  Typically, you should keep your HTML between 650px and 850px for the width, the ultimate size is 650px.  With 650px you can manaage to get your message in most preview screens.

Code – HTML and CSS

When crafting the email, you still need to use proper W3C compliant HTML and CSS.  The big difference is the CSS.  With an HTML email, you can’t use external style sheets because many of the modern email programs block external style sheets.  Instead, you have to put the code inline.  This means you need to style your headers, paragraphs, bullets etc. as you go when crafting the message.

Images

Have you ever gotten an email where the message is a red x in the window?  So have I!  This is very annoying and if you are like me you simply hit “Delete”.  To solve this issue, keep images to a minimum when crafting HTML emails.  The reality is, for the banner of the email you should use a smaller image, say 320px in width.  Then create the rest of the header using CSS.  This achieves two things, first if images are blocked most of the header is still visible to the reader.  Second, if crafted appropriately, your email is more mobile friendly.

Devices Used to Open Mail

If you are using HTML chances are you have an email service.  If you are using one of these services, make sure they give you reports that show the UA String at a minimum.  If you are really lucky, the service will show you the type of device in a separate report.  If you are using the string it is a bit more work to get the information but if you can export the report into Excel, or other spreadsheet, you can do a simple find and replace to highlight different devices.  In a later post I will show you how to read a string and a good free service to use.  Furthermore, I will discuss how to craft an email for mobile devices.

 

Mobile Web Development

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.
Works Cited
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>.