Email Trends: Styled Alt Tags
•Download as ODP, PDF•
0 likes•1,111 views
Styled Alt Tags let you add a little pizzazz to emails when the images are blocked. The slide set includes a chart that shows how styled alt tags appear in the various browsers and email clients.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Recently uploaded
Recently uploaded (20)
Email Trends: Styled Alt Tags
- 1. Email Trends: Styled Alt Tags
- 2. What are Styled Alt Tags? Alt Tag without style attributes Alt Tag with style attributes Styled Alt Tags are Alt Tags that contain in-line style information for an image. When the image doesn’t appear, the alt text appears in the font, size, and color that you have chosen.
- 3. Advantages of Styled Alt Tags Gives a mailing visual appeal when images are blocked. Can be used to create contrast with cell background.
- 4. Disadvantages of Styled Alt Tags May cause alt tag text to disappear. Takes a little longer to create. Does not work in all browsers or email clients. Can be difficult to enter correctly.
- 5. Basic Format <img style="color: rgb(133, 10, 238); font-family: Georgia; font-size: 60px;" alt="30% SALE, Today only!" src="image.jpg" width="300" height="323"> Here is the basic format for a styled alt tag. Hex values may also be used (in this example: #850aee).
- 6. Using Styled alt tags to create contrast <img style="color: rgb(255, 255, 255); font-family: Georgia; font-size: 60px;" alt="30% SALE, Today only!" src="image.jpg" width="300" height="323"> You can also use styled alt tags to make alt information visible in cells with a dark background color.
- 7. Length is an issue In some browsers and on some platforms (such as the iPhone), if the text needs to wrap, it will not appear.
- 8. Every browser and client is different. Gmail (Firefox) Live Mail Outlook.com
- 10. Resources Goolara Blog http://blog.goolara.com/2013/01/24/the-finer-points-of-styled-alt-tags/ Includes a more detailed explanation of the information in this presentation. Using Text and Graphics http://goolara.com/Resources/Download.aspx?fileName=Goolaras_TextAndImages_whitepaper.pdf Goolara’s White Paper on using text and graphics in email. W3School’s Tutorial http://www.w3schools.com/html/html_css.asp A basic primer on using inline styles.
- 11. About Goolara Goolara, LLC is the maker of Symphonie—powerful email marketing software with the advanced features a professional marketer needs, but without the hassle of other systems. For a demonstration, call 1-888-362-4575 toll free, or visit http://goolara.com/RequestDemo.aspx and request a demo.
Editor's Notes
- Hi and welcome to our presentation on Styled Alt Tags what they are, and why you should or shouldn’t use them. This presentation is being brought to you by Goolara, the makers of Goolara Symphonie, a powerful email marketing solution that makes advanced email marketing features easy to use. In spite of the fact that styled alt tags have been around for a while, many people don’t realize that they can use them in their mailings. This presentation will look at the pros and cons of styled alt tags and show you how to use them to give your email pizazz.
- Style alt tags are alt tags that appear in a specific color, size and font. In our example, we’ve taken the fairly ordinary looking alt information and made it much larger and in a different color. In this way, you can make information that, under normal circumstances, is very ordinary looking and make it something special.
- Recipients only see the alt tags when the images are blocked. But many email clients block the images by default and a large number of people never change the default settings. Styled alt tags let you add visual flair to an email in those cases where the images are not being displayed. They are also useful in situations where the cell color is dark and the default color makes the text unreadable (more on this a little later on).
- Styled alt tags are not the perfect fix, however. There are some downsides to using them. They do require a little more effort to create. Even advanced visual editors, such as Dreamweaver, require you to enter style information as HTML code, and some WYSIWYG editors can have difficulty with the code if it is not entered in the correct order, and some can’t handle it at all.
- Fortunately, the code for styled alt tags is relatively easy to create. Here is the code I used to produce the styled alt tag shown on the right. In this example, it was entered in Goolara Symphonie’s email editor as shown. You may also use web color designations if you prefer. You’ll notice that all the styled alt tag information appears within the image tag before the alt information.
- If you are using colored cells in a table, a styled alt tag is a great way to make sure that the alt information is readable. In this example I’ve made the text white because the cell color is black. Even if you don’t plan to use any other styling information, adding color information here always makes sense.
- If you do plan to use styled alt tags, keep in mind that with some devices and browsers, if the text is too long to fit in the image box without wrapping, it will disappear. The wrap is based on the text size, so text that appears at normal size might disappear when a larger font size is specified. In this example, The first box consists of just the phrase “30% SALE,” and it appears as it should. In the second box the alt text includes additional text which causes all the text to disappear. If the size of the font was increased in the first example, it would also disappear.
- There is no standard way for the alt text to appear anyway, so, there is no standard way for the styled alt text to appear either. Gmail in Firefox displays only the alt text and not the image box, but the text appears styled. In Live Mail, the color attribute is used, but not the size or font information. In Outlook.com and Hotmail, all empty image boxes are grayed out, so alt tags have no value in this case.
- Here’s a chart that shows how the different browsers and email clients deal with styled alt tags. Although they are a little more work, they are usually worth the added effort. Whether they are worth it for you may depend—at least in part—on the demographics of your audience. Even if you don’t plan to add styled alt tags to all your images, you might consider adding them to important elements, such as a newsletter banner or other primary element in your email. If you can keep the size of the text less than the length of the image box, the information will appear with its style attributes to more people. As always, remember to send some test mailings of any styled alt tags to make sure they are appearing in your emails.
- You can find out more about styled alt tags at the Goolara Blog. For more information on the subject, as well as every other aspect of image preparation, you should also see our recent white paper, “Using Text and Graphics.” The white paper is free and available in the Resources Section of our website. If you want to experiment with styled alt tags, the online tools at W3schools.com features a toolbox that lets you try out different combinations. It is intended for creating web pages, but many of the tools are also useful for experimenting with email design.
- At Goolara, we work hard to make sure our email marketing solution, Symphonie, has all the features that a professional marketer needs to create actionable emails. Features such as dynamic content and transactional emails are included in every version of Symphonie. Symphonie is available in both on-premise and cloud-based versions. Visit our website at goolara.com to learn more and thank you for attending this seminar.