Effective email designs: A picture is worth a thousand words: Part 1
Apparently, creators of most, if not all, email clients have never heard of the infamous adage “a picture is worth a thousand words”. As a result, email designers are stuck with too few options to introduce graphics in emails and even those are not guaranteed to work in every email client.
Fortunately, web designers’ community has learned to monitor and adapt to intricacies of mail user agents widely known as email clients.
Without further ado, here are a few simple tips to elevate the pain of dealing with images in HTML emails:
1. Absolutely and positively use images.
Rely on <img> HTML tag to display images that are located on any website. For example, the following would display EkoBuzz logo:
<img src="http://ekobuzz.com/templates/eko/images/logo.jpg" width="215" height="85" alt="Build Better Relationships with EkoBuzz">
2. Do use images as body backgrounds.
To satisfy Yahoo! Mail, AOL Mail, Hotmail, Gmail, Apple Mail, and all flavors of Outlook,
use “background” attribute on both <body> and <table> elements not worrying about the fact that this attribute is outdated by W3C standards:
<body background="url(http://ekobuzz.com/templates/eko/images/bg.jpg);"> <table background="url(http://ekobuzz.com/templates/eko/images/bg.jpg);" id="main" width="600px" >
OR use inline css
<body style="background-image:url(http://ekobuzz.com/templates/eko/images/bg.jpg);"> <table background="url(http://ekobuzz.com/templates/eko/images/bg.jpg);" id="main" width="600px" >
Do not use images as backgrounds for table cells or divs.
Attempts to trick email clients into displaying background images in table cells are growing by the day. We are yet to see the one who’d claim the laurel wreath of victory.
The bottom line: Use HTML <img> to display graphics in emails.
Restrict use of background images to email <body> tags.
3.Capitalize on use of images by introducing ‘alt’ attribute on every image
Majority of email clients refuse to display graphics by default unless are being explicitly asked to do so by their owners. Since we don’t know that many people who would dive into their Outlook or Apple Mail settings in order to enable default image loading, we always work with the assumption that we have to tell the tale, rather than show it.
We use ‘alt’ attribute on <img> element to
- Show an alternate text for an image if the image cannot be displayed.
So, while
<img src=”http://ekobuzz.com/templates/eko/images/bg.jpg“ width="215" height="85" >
will result in an empty icon being displayed,
<img src="http://ekobuzz.com/templates/eko/images/bg.jpg" width="215" height="85" alt="Build Better Relationships with EkoBuzz">
would display
Build Better Relationships with EkoBuzz.
2. Convey our best intentions to search engines
Google has officially confirmed that it mainly focuses on an alt text when trying to understand what an image is about. Sounds very similar to what our recipients would do, doesn’t it? That is, they would read ‘alt’ tag to decipher what an image is about, not what an image is.
For example,
<img src=http://echo.ekobuzz.net/themes/NewEko/images/new_eko_style/logo.jpg alt=’logo’>
is quite meaningless,
<img src=http://echo.ekobuzz.net/themes/NewEko/images/new_eko_style/logo.jpg alt="EkoBuzz web site">
is better,
<img src=http://echo.ekobuzz.net/themes/NewEko/images/new_eko_style/logo.jpg alt="Build Better Relationships with EkoBuzz">
is what I would use.
3. Have a safety net when the <img> tag points to a wrong image location or the image had been removed or damaged
In case when the image hosting web site is down, the image has been removed from the website, or the subscriber, after receiving the message, has disconnected from the internet, ‘alt’ tag might save the day and still project your message to the subscriber.
The bottom line: Always repeat the thought your image is intended to project via ‘alt’ attribute.
