A CSS Solution to Image Blocking

By Administrator on 10th July 2006

I’ve written a couple articles about using web-standards markup in HTML emails and am even speaking on the topic at an upcoming conference. But one area which I’ve failed to address is image replacement.

I have found, read and learned from a handful of good articles/tutorials on the web about this topic. However, I believe they are missing some key components in their construct. And that’s what I will illustrate herein.

I approach website markup with a set of techniques which I believe offer the best possible experience for everyone:

  1. smart, fundamental markup for those with outdated, graphical browsing devices;
  2. appropriate visual-design for those with standards-based, graphical browsing devices;
  3. and absolute content accessibility for those with slow connections, non-graphical browsing devices and screen readers.

With that said, an area where I admittedly fall down is image replacement. Seeing one’s own design render with CSS on and images off is quite painful when the markup is standards based and all core-design images are CSS backgrounds. Moreover, accessibility is achieved only through a game of hide-and-seek. But there are some magicians from whom we can learn to overcome this.

Standing on the Shoulders of Giants

Dave Shea posted the most comprehensive study I’ve seen on image replacement. This is where I discovered what I feel is the best technique for preparing HTML markup for the CSS on, images off scenario. His technique sparked the realization that any inline element could be absolute positioned to commandeer the aforementioned scenario.

So the techniques I’ll outline herein aren’t a significant evolution of Dave’s technique; they simply buff out a few scratches. They will also exhibit how one might use his image-replacement technique to tightly interweave images with their surrounding elements.

With that, let’s look at the techniques I used in an email I recently designed and built for Digital Web Magazine.

Image Replacement for Part of a Title

Before I construct a website or HTML email I carefully read the content to decide how to semantically mark it up. I consider how it will look and read with no presentation layer. The title of Digital Web’s eNewsletter reads fluently as a single phrase: “Digital Web Magazine Updates Mailing List.” But there is a logo to consider, which is part of that title.

I used a single h1 to mark up the title. Then I used a presentation layer to pull out the logo from the rest of the title. The results are as follows:

[screen shot with CSS on, images on]
[CSS on, images on]

[screen shot with CSS off, images off]
[CSS off, images off]

[screen shot with CSS on, images off]
[CSS on, images off]

Using Dave’s technique, I created a container for the HTML text (in this case an h1) and added a single, unobtrusive span to house the image and to position it over the text:

<h1><a href="http://www.digital-web.com/" title="Digital Web Magazine"><span></span>Digital Web Magazine</a> Updates Mailing List: February 26, 2006</h1>

The CSS behind the presentation looks like this:

h1 {
 width: 186px;
 height: 42px;
 position: relative;
}
h1 a {
 position: relative;
 width: 186px;
 height: 42px;
}
h1 a span {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 background: url("img/Logo.gif") no-repeat;
}

But I needed to position the latter part of the title so that it is not inadvertently masked by the logo. So I increased the total width of the h1, right-aligned the text, positioned the a tag to the left side of the h1 container and left-aligned the HTML text in the a tag which was to be hidden:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 position: relative;
}
h1 a {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 text-align: left;
}

All done, right? Almost. Something that Dave’s technique doesn’t account for is increased font sizes. This technique places an image on top of HTML text that’s technically still displayed on the page. So when the font size increases, the HTML text pops out from behind the image.

Remember that I was considering a scenario wherein CSS is still on, so I could safely bring down the size of that text so it would be well hidden even with increased font sizes. I also added a little padding to the a tag to increase my breathing room:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 font-size: 12px;
 line-height: 13px;
 position: relative;
}
h1 a {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 186px;
 height: 42px;
 padding-top: 23px;
 text-align: left;
}

With CSS on and images off the final result was a success, albeit less than satisfying from a visual-design perspective. This is because the hidden HTML text wasn’t formatted with the other content. If I was going to make this work with CSS on and images off, I wanted to go the full nine yards. So I added some color formatting to tie up the loose end:

h1 {
 width: 540px;
 height: 42px;
 text-align: right;
 font-size: 12px;
 line-height: 13px;
 color: #999;
 background: #fff;
 position: relative;
}

With that, I had accounted for the presence and absence of graphics and CSS, and also for varying font sizes. Sweet!

Relative/Absolute Positioning

“What,” you ask, “is relative/absolute positioning?” Oh, it’s something really cool. And I found myself in a scenario that very much warranted use of this technique.

I needed to break a single phrase into two lines as such:

Powered by
Campaign Monitor

But I needed to mask the text on the second line with a logo without inadvertently masking the first line:

[screen shot of two-line phrase with logo graphic]

With a simple evolution I could account for varying font sizes, which would otherwise destroy absolute positioning in this scenario.

I started with the baseline setup (an h4 container with the extra span tag):

<h4 class="Powered">Powered by <a href="http://www.campaignmonitor.com/" title="Campaign Monitor"><span></span>Campaign Monitor</a></h4>

But this time I had to consider that the HTML text preceding the image could vary in size. So absolute positioning from the top would fail. Unless I used a relative increment. The following worked out great:

h4 {
 position: relative;
}
h4 a {
 position: absolute;
 top: 1.5em;
 left: 0px;
 width: 121px;
 height: 15px;
}
h4 a span {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 121px;
 height: 15px;
 background: url("img/LogoCM.gif") no-repeat;
}

The key in this technique is the relative value of 1.5em for the top property in the positioning of the a tag. It is absolute positioned, relative to the font size. So the a container (and the image/text therein) will always reside a distance of one half of the height of the em size from the top of the parent container. This accounts for varying font sizes and adds a little padding between the preceding text and the image. Viola.

Browser and Email-Client Rendering

Aside from Yahoo Mail, most common email clients performed quite well using the aforementioned techniques. And all common web browsers also performed well. Following is a list of browsers and clients used in my tests:

Email clients:

  • AOL (webmail)
  • EMail (Zaurus handheld)
  • Eudora 6.2 (OS X, Win/XP)
  • Gmail (webmail)
  • Hotmail (webmail)
  • .Mac (webmail)
  • Mail 2.1 (OS X)
  • Mozilla Thunderbird 1.5 (Linux, OS X, Win/XP)
  • Outlook 2002 (Win/XP)
  • VersaMail (Palm OS)
  • Yahoo Mail (webmail)

Web browsers:

  • Blazer (Palm OS)
  • Firefox 1.5 (OS X, Win/XP)
  • IE 5.2 (OS X)
  • IE 5.5/6.0 (Win/XP)
  • Netscape 7.0 (OS X)
  • Netscape 7.1 (Win/XP)
  • OmniWeb 5.1 (OS X)
  • Opera 7.0/8.0 (OS X, Win/XP)
  • Safari 2.0 (OS X)

The email clients with solid CSS rendering (Mail, Thunderbird, Outlook, etc.) properly rendered everything with images on and off. Those with poor CSS rendering (Hotmail, Gmail, etc.) displayed the masked text since they don’t display CSS background-images anyway. And the text-only clients successfully displayed the unformatted text.

The only problematic email client is Yahoo Mail. This is because (as noted in my previous articles) Yahoo Mail replaces the property position with xposition," which renders any positioning—and consequently the techniques outlined herein—useless. The good news is that it simply eradicates the images and displays the CSS-formatted text. An acceptable degradation in my book.

As for web browsers, those with even moderate CSS support properly render pages using this technique. And those set to not display images see the CSS-formatted text. Awesome.

So there it is. I hope my minor evolutions to Dave Shea’s technique help the web community with this less than desirable task. Thanks to Dave and the others from his article for their hard work in building such a solid foundation.

This article was authored for Campaign Monitor by Mark Wyner of Mark Wyner Design, a small web design studio in Portland, OR, USA.

21 Comments

  • Steven Teskey
    11th July

    This is a fantastic way to go about this. Nice write up.

  • Dross
    11th July

    beautiful…best article of the year

  • Milan Hawkins
    12th July

    Would I be correct in assuming that this method will rendered useless in Lotus Notes? It still has a significant, business-orientated user base, so I consider it too important to disregard.

  • Wouter
    13th July

    Yeah, I’m also very interested in your findings using this technique with Lotus Notes. As said by Milan, there is still a big group of business users that use Lotus.

  • TannerShot
    15th July

    The only content that looks good in Notes is sent on behalf of IBM oddly enough.
    http://www.dbta.com/linuxline/subscribe.html

    The IBM LinuxLine is produced for IBM by Unisphere Media, publishers of Database Trends and Applications magazine and the 5 Minute Briefing family of e-mail newsletters.

    Looks great in notes…

  • Jeff Ginsberg
    16th July

    Great article…

    We have used other work arounds for branding when the images are off…but will give this one a try in our next newsletter.

    Thanks

  • Milan Hawkins
    20th July

    I’ve found that if you’re very careful with tables in Lotus Notes you shouldn’t have too may problems. Complicated table layouts tend to introduce inexplicable spacing issues.

    Of course, I’m aware that tables are old hat, but I’m still convinced that they’re the best, most supported solution for HTML email.

  • Shawn Liu
    4th August

    Hmm…  It seems that background-url doesn’t work in Hotmail, which simply strips out the url.  Any solution to that?

  • Rob
    31st August

    The method works for me, but if I double click the email to open it full-screen, and then unblock images (in Outlook 2003), the images I’ve used this method on do not appear…the text just remains where it is. Anyone else have this problem?

  • Derek
    5th September

    @Shawn Liu

    Hotmail doesn’t rewrite or remove shorthand rules for background properties - so you can still specify background-image and background-position this way.

  • imageresizer
    16th October

    good article

  • John Baleshiski
    1st November

    Lotus Notes does not support colspans on tables well, nor does it properly support the BR tag! Make sure you have zero br tags and zero colspans when you are constructing your email and you have a better chance of it looking okay in Notes.

  • Mark
    2nd December

    If your email has two columns where the left column includes images in a table with no width tags on the images (i.e. ), and you wish to limit the width of the alt text that a client like Outlook inserts when images are turned off, can this be done with CSS? Outlook inserts the usual “Right click here to download pictures…” text in the alt tag, which expands the cell width containing the image(s) pushing everything else right.

    Mark

  • TJ
    9th December

    You should also be aware that newer spam filters check for CSS. Depending on the type of CSS and the filters being used, you can be quickly identified as spam and either be deleted or blocked all together.

  • Dave Greiner
    19th December

    TJ, thanks for the heads up. If possible, can you provide some specifics about which filters in particular are targeting CSS. I’m aware that some penalize badly formed HTML, but am yet to hear of any that filter an email based purely on the CSS being used.

  • Lyndon
    5th January

    Hmmm,

    I’ve been asked if it’s possible to send “fancy” emails to our clients.
    SO I thought I’d do some research….

    What happens if you send an HTML & CSS emial as suggested… and the recipient is text-only ?
    Or simply have Images AND CSS off ?

    What would they get then?

    I the code visible?
    Do they see gibberish?
    Do “fancy” things simply not appear?

    Please let me know.


    Additionally, I too would like to know about the CSS detection in emails.


    Looking forward to responses
    Lynond

  • Dave Greiner
    6th January

    Hey Lyndon,

    When sending a HTML email, it’s always a good idea to include a plain text alternative in the same email. This is called multi-part, and it’s an email standard that lets you send both versions from a single email.

    When the email is sent, the recipients email client decided whether to display the HTML or plain text version depending on the settings in your recipient’s email client.

    If you’re interested, Campaign Monitor makes it easy for you to create a single email with both a text and HTML version in a few clicks.

  • Mark Zeman
    18th January

    @Derek

    Hotmail now seems to be blocking the background short code as well.

    Since Hotmail and Gmail both block the background image it seems to make this technique less usable. Is there anyway to have the image show over the html without using the background image in the span?

  • poker rules
    14th September

    Lotus Notes users are accustomed to seeing HTML emails turn into monstrosities. It would be nice if more web designers with access to Lotus Notes would share their findings…

  • dm.
    9th December

    Am i missing something here? I can’t seem to find any info

    dm.

  • BrightBold
    13th December

    It’s not just you. I had bookmarked this article a while ago and when I visited the link today it wasn’t working. A search of the site got me to this page but I think Campaign Monitor has broken their archives somehow. The content is definitely missing.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account