Email Trends: Styled Alt Tags
-
Upload
jim-morton -
Category
Design
-
view
661 -
download
0
description
Transcript of Email Trends: Styled Alt Tags
![Page 1: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/1.jpg)
Email Trends:Styled Alt Tags
![Page 2: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/2.jpg)
What are Styled Alt Tags?
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.
Alt Tag without style attributes Alt Tag with style attributes
![Page 3: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/3.jpg)
Advantages of Styled Alt Tags
Gives a mailing visual appeal when images are blocked.
Can be used to create contrast with cell background.
![Page 4: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/4.jpg)
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.
![Page 5: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/5.jpg)
Basic Format
Here is the basic format for a styled alt tag. Hex values may also be used (in this example: #850aee).
<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">
![Page 6: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/6.jpg)
Using Styled alt tags to create contrast
You can also use styled alt tags to make alt information visible in cells with a dark background color.
<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">
![Page 7: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/7.jpg)
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.
![Page 8: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/8.jpg)
Every browser and client is different.
Live Mail Outlook.com
Gmail (Firefox)
![Page 9: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/9.jpg)
![Page 10: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/10.jpg)
ResourcesGoolara 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.
![Page 11: Email Trends: Styled Alt Tags](https://reader035.fdocuments.in/reader035/viewer/2022081404/55946dfe1a28abf4718b4613/html5/thumbnails/11.jpg)
About GoolaraGoolara, 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.