ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

Six Tips to Make HTML Email Look Right

Six Tips to Make HTML Email Look Right Wendy Roth

When your readers open your email messages, do they say “huh?” Unless the HTML has been designed and tested for email, there’s a strong chance that the message is distorted at best. Even if the message renders beautifully in your web browser, the same HTML code may make your message completely illegible when viewed through many of the most popular email reading programs.

How can you make sure your HTML email looks right no matter what email client your readers use? Although there’s no universal standard for HTML in email, these six tips will help ensure HTML formatting problems don’t get in the way of your marketing message.

1. Use inline styles or HTML tags

Don’t be “classy” -- use inline styles or HTML tags to control how a message appears. It’s likely that your website uses cascading style sheets to define how text is displayed. Since the style sheet gives your site much of its character, it’s tempting to use it for your email messages, too, giving your readers a sense of continuity between email and site. 

But many email clients like MSN/Hotmail simply ignore style sheets, embedded or external. To make sure your message renders properly, use inline styles or HTML tags -- or, be sure that the message’s appearance is at least acceptable if the styles aren’t displayed.

2. Keep background colors light and text dark

When everyone has black text on a white background, it’s tempting to try something different to make your email stand out.

But the reason why you don’t frequently see white text on a black background in email is because some email clients won’t display the white text. Instead of seeing the message, all some readers will see is a black box. Or, the dark background color won’t be displayed, making light-colored text invisible or illegible. When the text is dark on a light background, it will generally be legible.

3. Validate your HTML

If you think your message is fine because it looks great when you look at it with your web browser, think again. Web browsers are typically more forgiving of HTML errors than email clients. 

WC3 offers an excellent (and free!) HTML validator. Keep in mind that even if your HTML is valid, it still may not look right when viewed in an email. But by validating your HTML, you can correct any obvious problems. An added bonus: a message with “clean” markup is less likely to be filtered as spam.

4. Put scripts, forms or flash on your website, not in your email

The same elements that add sizzle to your website will fizzle out in many email clients -- if the message gets there at all. Many ISPs filter out messages with scripts, however innocuous. And forms may not always work. If you want recipients to see your incredible new Flash piece, drive them to the website where it’s best viewed.

5. Put critical information in text, not images 

Images are disabled by default in many of the major email clients -- AOL 9, Outlook 2003, Hotmail, Gmail and others. When recipients open a message with images in one of these clients, they’ll see red exes, warning messages, grey boxes… or nothing. If critical branding information is in those images, readers may not even be able to easily identify the source of the message and believe that it’s spam.

Even if the information in the image itself isn’t critical, be aware that the warning messages in Outlook 2003 can distort your message to the point where it’s illegible. Provide the image size, and the message will be legible even if the image isn’t there.

6. Put (almost) everything in an image

Yes, this strategy directly contradicts the previous one. 

The idea is to make the offer so compelling in the subject line that even if the image is unavailable, the recipient wants to view it -- or go to the website anyway to learn more about the offer.

The advantage of an email “postcard” is that it always looks good -- when it’s viewable. However, this all-or-nothing approach only works if there’s a single message that can be encapsulated in an image: it won’t work for messages that have multiple offers, or have a different purpose (e.g., a newsletter). And even these messages must have some text containing opt-out instructions and email compliance information.
Ultimately, the only way to make sure your email messages are legible is to look at them -- in the preview pane, full screen, with and without images. 

Many of your recipients probably use free email accounts, so get your own free accounts, too. If you have a large number of recipients at a particular ISP like AOL, it may be worth it to subscribe in order to make sure your message looks right for those customers. And it never hurts to view the message using different email clients like Outlook and Lotus Notes.

If the prospect of getting all these accounts and clients seems daunting, another option is to use a service that provides an “inbox snapshot” of what your message looks like in multiple email clients and email web readers, all in one place. Because these services can show so many clients, you’ll be able to save time -- and your peace of mind.

Wendy Roth is the training manager for Lyris Technologies, a pioneer in email marketing solutions since 1994. She works closely with enterprise-level marketing and advertising professionals to help them achieve their email-related objectives, and collaborates with engineering teams to ensure Lyris' products continue to be based on marketers' changing needs.

Another outlet for web widgets that is often overlooked are personalized homepages. Microsoft's Live.com, Netvibes and Google are just a few of the sites that offer anyone the opportunity to deploy a widget that appears to users as a personalized web portal. To many users, this page is what they consider "the beginning of the web." At the very least, every new browser window opens with your brand holding a piece of that screen real estate.

Aside from the obvious benefits of making a brand accessible through internet start pages in terms of reach and frequency, there is a tremendous PR upside. Web widgets like these tell a story of brand innovation and accessibility that practically writes itself -- for both the brand that develops the widget and the web platform.

Let's take a look at Slide.com as a way to understand the underpinnings of a well-done web widget:

The most popular widget out there according to comScore's April widget ranking, and Brittany Lawson's recent iMedia article, has, like most popular widgets, a very basic and singular idea at its core: an easy way to make a web-based slideshow out of your pictures.

Most people can't make their own Flash picture slideshows, but Slide.com solves a basic problem. They provide the functionality (an easy way to make slideshows on a website), and you provide the content (your pictures) and the promotion (sending people to view pictures on your site). They also do the coding legwork for you depending on the social network you need to put the movie into. And since Flash can handle video and audio, Slide has created ways to connect brands and users together through its own platform.

The easiest way to understand how Slide works is to think of it as a site that makes very small Flash websites. A user goes to the site, creates their Flash movie via the interface and saves it.

This is the key: they have to save it at Slide.com. As I mentioned, this is not John Q Public's MySpace slideshow of the family trip to the Yukon, featuring "Because of You" by Kelly Clarkson. It only feels that way. In reality, it is "Slide.com presents John's slideshow and Kelly Clarkson."

Slide ultimately retains control of the brand presence, creative assets, advertising, functionality and everything else through the life of that widget, and the tens of millions of others just like it.

If you're currently creating Flash banner ad campaigns, you're really not that far away from having your own widget network. The only missing pieces are the overarching Flash framework to "do it yourself," and a user administration structure for registration and serving the individual widgets. Of course, this is an oversimplification, and there are a lot of facets to consider as you build a system like Slide. The point is, you shouldn't be overwhelmed by the prospect of creating a web widget. You're probably already on your way there.

Desktop widget platforms
While social networks and blogs have their own web-based platform for widgets, the top four tech heavyweights have created their own platform for hosting widgets on your computer's desktop.

First, let's cover the basic concept here. Take the same rich media utility created in web widgets and actually present that web-based content directly on a computer desktop. This widget is downloaded as a mini-application within a tool that allows users to manage a group of widgets on their desktop.

These widgets are much more practical and personal in their utility. Take a look at Apple’s top five widget downloads, and you'll see a widget to search and play videos from YouTube, a widget to monitor your computer statistics (like your processor temperature and your internet download speed), a chess puzzle and a widget that shows movie trailers at theaters near you.

When you combine the personal nature of desktop widgets with the persistent presence created by having real estate on a user's desktop, these widgets are a hard bet to lose on. By finding a way to extend the utility of your brand in this technology, you are locking down a personal, everyday connection with the brand in a way few other media can match.

Even more than icing on the cake of this marketing equation are the aforementioned heavyweight players. Apple, Microsoft, Yahoo! and Google have all developed their own platforms and free distribution websites -- completely free advertising directly to the people that have these platforms on their computers.

Understanding each of these platforms is where the terminology really starts to bog down, so please hang with me as we navigate this sea of jargon together:

Having the most mature audience, Apple's widgets reside in the Apple Dashboard, a feature built in to the operating system that shows you all your widgets at the press of a button. The nice thing about Apple widgets for marketers is that while they don't command an audience as large as Microsoft, there are still many millions of users in the golden circle demographic of high HHI families who are extremely familiar with using widgets on the platform, and Apple promotes it heavily.

In fact, as Apple gains momentum from iPods and iPhones converting into desktop computer purchasers, making widgets from any web page viewed in Safari is only a few simple clicks away.

For the pro-am set that prides itself on creating home movies, websites and podcasts through built-in Apple software, there's also Dashcode, a program that makes building dashboard widgets significantly easier for novices. It's not a force yet but a very interesting integrated approach by a company that seems to always be a step or two ahead with an affluent audience that grows by the day.

Not to be outdone, with the release of Windows Vista, Microsoft rolled out its own dashboard product also directly tied into the operating system. Microsoft made the sidebar – an area off to the side of your desktop for holding the four or five most important "gadgets" (to differentiate them in name from Apple widgets).

Microsoft has programmed -- in one decided advantage for users and marketers -- that you can drag gadgets out of the sidebar to reside on the rest of the desktop. Once a user drags a gadget onto the desktop, the gadget is no longer limited in width or height, and brands can plan for that -- with the sidebar version providing "at a glance" utility, and expanding the features and functions in a larger canvas with different design that comes into play once the gadget has been "undocked." This is a great feature, and a win-win for users and brands alike.

The sidebar also has live.com and dedicated real estate on certain new-gen Microsoft websites within which you can load web versions of these sidebar widgets. You also can't beat having exposure to the largest desktop audience on earth.

The biggest drawback of Vista sidebar is that unlike the Mac Dashboard, in some versions the sidebar doesn't automatically load when it is installed. The user has to find it and turn the sidebar on.

That being said, it's still Microsoft, so even as a niche product within the system, it still will have a fairly large reach (even though that's what they said about Active Desktop in Windows XP).

Here's probably the most interesting path to a widget platform. In the beginning of widget platform time, there was Konfabulator: the first widget platform. Its success is what spurred Apple to make its own platform and include it as a major feature of its operating system. That was when Yahoo took notice and purchased Konfabulator, making it available for both the Mac and PC, renaming it Yahoo widgets.

Since then, Yahoo has done a lot to try and get wider adoption of its platform, which users have to first download before any of the widgets work. What Yahoo does have over the other platforms is a serious effort to make creating widgets as easy as possible for the development community. This alone may prompt some agencies to tout Yahoo widgets above others.

I simply haven't seen evidence to suggest that large audiences are willing to go through the hoops necessary to add this platform into their habits. If you're technical enough to understand the premise and use it regularly, you have two robust solutions for the Mac and PC that are already installed and ready to go. But I've been proven wrong before. If you're someone who works with Yahoo on the widget platform, please feel free to leave your comment below and correct me.

Google desktop
What Google has done with its widget platform is to make a play for all widget platforms on the desktop and across the web. The "standardizing" I mentioned earlier about OpenSocial really means making the Google desktop programming method consistent across the vast majority of social networking sites.

So, while I sat wondering why Google would create Google gadgets -- basically a stripped-down widget platform -- they were using it as a pivot foot into commanding the web widget space, and then taking that momentum back to the desktop.

Short open letter to Rupert Murdoch: Google is about to grab a huge chunk of all your MySpace real estate. For free. Best, Michael.

Desktop widgets
Even the makers of these widgets have changed the way we refer to them. We used to call them branded desktop applications (BDAs), but no more. We got too many blank stares. People just want to call them widgets.

Where web widgets go on websites, and platform widgets go into a group of widgets on the desktop, desktop widgets are their own application. They stand alone, independent of the web or a platform. One download and the widget is always on the desktop (yes, you can minimize it, or open it from your desktop tray). And more than the value of desktop persistence (how much would it cost to put a logo in a corner of a TV screen all day?) is the control over that piece of the desktop.

Desktop widgets can be shaped and sized in any way imaginable. They can be updated seamlessly, with no need to download a new application. They provide a fluid, two-way channel between the user's computer and your brand. You can send messages or content instantaneously. You can see metrics as granular as individual mouse movements, and individually identify each application without taking any personal information. That means you can micro-target messaging to the individual, in real-time.

The funny thing about desktop widgets is that we use a few of them all the time without realizing that they are nothing more than brands extending themselves to the desktop.

My favorite example of this is iTunes: 

iTunes does three things well: it creates a place where you can search your music collection, it plays MP3s and connects to an online store within the desktop widget that works almost exactly the same way you've already learned to catalog your own music.

Most of all, it is a giant Apple desktop widget. A big reason why iTunes will continue to dominate over other online music stores is the perceptual space desktop widgets take advantage of. As a marketer of a website, you're not only competing with all of the other websites in your sector, you're competing with all the other websites in the daily habit of your audience's internet usage. That's a really tough nut to crack.

On the desktop, accessing web-based functions, like buying songs, feels nothing at all like navigating to a website to do it. It feels so much more convenient and consolidated, and you never have to touch the browser at all.

Another great example is Joost:

While all the press on it has cooled since beta testing started, you cannot count this video viewer out.

What puts Joost in such a desirable position is that as a desktop application, much higher quality video is possible without draining bandwidth. Unlike YouTube or any other web-based video site, Joost's user computers and the Joost server share the task of balancing bandwidth and processing.

When you compare the quality of YouTube video versus Joost, well, there is no comparison. It just shows that the key to Joost lies in the next three years.

Eventually, quality will matter to people looking for video on their computer. And as bandwidth and computer storage become even more accessible and cheaper, the masses will be seeking a solution just like Joost. Luckily for them, Joost will already have the brand equity to start a step ahead of the competition.

As a side note, these advanced capabilities had me very interested in how Bud.tv was going to implement its widget. But that promotional "coming soon" message has unfortunately disappeared from the site since it was redesigned. It's too bad, too. That may have made the difference between a struggling video channel and a vibrant channel with a dedicated audience.

Not to confuse the subject further, but Joost even has its own widget platform within its application. Again, the audience is small, but Joost is just waiting with its doors open for the moment when the masses have the capability and the desire to see high quality video on their desktop.

These are just two examples of audio and video brands having incredible success with the desktop widget as a competitive differentiator.

The question for brands is: how do you leverage the web-based functions along with the convenience and power of the desktop to create a powerful presence?

Well, it starts with understanding your audience and the utilities they need or the tasks that are being underserved in their daily habits. It may not even be a function of your brand, but a service your brand presents to users as a convenience.

If your audience is made up of social networkers, what are the ways you can make their most tedious, repetitive tasks a bit easier from the desktop? If they're savvy seniors, maybe a desktop widget with larger graphics and type?

What widget is right for your brand?

Maybe all three. As you can see, each type of widget gives you different, compelling avenues to reach different audiences. The key is working with agencies experienced in these media to make the best connection with the needs and habits of your audience, and your reach/frequency goals.

Maybe the biggest lesson learned from "The Year of the Widget" is that there is a significantly large and varied audience for widgets of all flavors. The challenge is how to build the channels that will supercede web presences in terms of importance to brand equity and the utility you provide your audience to interact with every day.

iMedia features a wealth of articles on the topic, and you can see our video introduction to branded desktop applications here.

Michael Leis is VP of Publishing Dynamics. Read full bio.

Breadth vs. depth
What's more impressive to an employer? Mastery of a single topic, or a working knowledge of a wide range of things?

"I prefer to see a logical progression toward mastery of a few things, [rather] than dabbling in many," says Carr.

Being an expert means that your knowledge is rarefied commodity. A middling interest will not distinguish you from the pack. But it's not just about the know-how -- employers expect that you're also capable of sharing those talents.

"Our clients receive high value when [our] experts work together to create marketing strategies," says Carr. "We have found it most rewarding when sharp people with the capacity to develop deep knowledge also have the awareness of the context within which they operate, so that they can collaborate with other experts effectively."

A program for success
With new software popping up every day, it's hard to keep up with what's relevant. But as Aqua Media Direct CEO Tom Doyle points out, there are standbys that every applicant should be familiar with.

"For us it's important that applicants should have the basics like MS Word, Excel, and PowerPoint, and some experience with a CRM provider like Salesforce," says Doyle.

Wading into deeper waters, he adds that an understanding of ad servers will sweeten the deal for employers. "The applicant gets a boost if they have hands-on experience with ad servers like Helios IQ, or the Appnexus Displaywords platform."

Carr, on the other hand, returns to the topic of measurement: "Google Analytics software has evolved into a powerful tool set, and more often now we are choosing (with our clients) to use it over other enterprise-level software. In our industry, it's a plus if an applicant has experience implementing or working with that tool in particular."

Log onto facebook... for work
There's no equivocation when it comes to social media: Employers assume that you're familiar with Facebook, Twitter, and the myriad social networks out there.

"Many employers I work with are requiring that applicants have experience with social media marketing strategies. So I recommend becoming familiar with it," says Carin Nardone, founder of CNC-Search.

For Barenblat, awareness of social media doesn't just make you a digital whiz-kid, it also helps you relate to the people in your environment.

"Being connected to the digital world is a clear sign that someone has the acumen and curiosity that will resonate with their co-workers here and, just as importantly, the customers we serve."

The dreaded interview
When it comes to jobs, no topic is as scrutinized as the interview. Googling "job interview tips" will bring you an excess of 24 million search results, and there's no shortage of horror stories about coded questions and botched replies. But let's put the nit-picking aside and focus on what the interviewers are considering the big picture.

For Nardone, precision is key to a good first impression. "I look for three things when I interview applicants. [They're] what I like to call The Three Cs: clarity, communication, and concision. [Applicants should] be extremely clear in articulating what they want to do, and what they are known for and valued for in their job or organization."

As such, avoid talking about your "drive" and "work ethic," go with the concrete examples that prove your mettle. Don't leave the interviewer with a thesaurus of buzzwords.

"Candidates should do their homework," says Hunn. "Know what three to four things about your experience that you want to make sure the interviewer walks away knowing, and find a way to make sure those points are made."

Speaking up
In the old line of thought, it helps if you like being the life of the party. This is a business about reaching people, after all. But as Nardone sees it, introversion shouldn't be treated as a disease.

"Introverts tend to be great listeners and observers, so they know how to 'play' an interview better. They are also good at gleaning information from conversations, so their follow up questions reflect substance and depth," says Nardone. Employers recognize that introverts can be skilled as communicators, so if you're not gregarious by nature, don't try to portray yourself as such.

It helps, however, to be precise in this line of work, and that means being able to speak your mind. To combat your shyness, you may have to work at savoring the limelight once in a while.

"The more you get out and network, whether it be an event or social gathering, the easier it will become," says Nardone. "Try to attend networking events that are naturally interesting to you, such as a speaker or topic you are passionate about. Connecting with others will flow more easily since you have a shared topic of interest."

Tim Loc is an editorial intern at iMedia Connection.

On Twitter? Follow iMedia Connection at @iMediaTweet.

<< Previous

Wendy Roth is senior manager of training services for Lyris, Inc., a pioneer in email marketing and other online marketing solutions since 1994. She works closely with marketing and advertising professionals to help them understand how Lyris'...

View full biography


to leave comments.