The Differences Between Email Design and Web Design

Email is a powerful tool for engaging audiences. Yet, designing and building the perfect campaign can be tricky, even downright frustrating. Both web and email use HTML and CSS technologies, but there are major differences between the two. Understanding the current email-client landscape, as well as the distinctions between email design and web design, will help you more effectively create extraordinary experiences for your customers.

Unlike the web, where just a few browsers handle most of the traffic, email is highly fragmented and has no standards but, literally, hundreds of email clients. In fact, it’s a lot like the Wild West — crazy at times but still a whole lot of fun. Nevertheless, most email clients support responsive design, and nowadays, there’s just no excuse for not wowing your customers.

Last month at Adobe MAX, I had the opportunity to present with Kevin Mandeville of Litmus, and we discussed some of these best practices. Fortunately, we pulled aside the following five tips that you can use right now to give your email design a boost.

1. Optimize Hidden Pre-Header Text.
Most people recognize the core elements of email — the from, name, and subject fields — yet, few take advantage of the preview text that appears below the subject line. Preview text is taken directly from the actual text in the email, and it often goes unnoticed and unoptimized — but, ignoring this text could prove to be perilous. An HTML tag might show through, or users might even see the text, “Trouble viewing this email?” With more real estate dedicated to the preview text than to the subject line, pre-header text is something you can — and should — control and optimize.

How Do You Do It?
Directly after the body tag in your HTML email (at the very top), place the pre-header text shown below. Wrap it in its own div tags and hide it with some CSS. This is custom text placed at the top. When email clients pull the text, they’ll grab the text you want, resulting in an optimized experience. It’s invisible in the email itself and won’t impact design.

2. Create a Fluid-to-Fixed Table Structure.
Creating the right foundation for email is the key to making sure it looks great on both mobile and desktop screens. The best way to lay out your structure in email is to do a fluid-to-fixed structure.

How Do You Do It?
Set the default width to 100 percent for email clients that don’t support media queries. This makes it fluid, allowing it to display nicely by scaling to the full width of the container. Next, constrain it by setting a maximum width, so it becomes fixed for desktop layout. Use a basic div tag and set the maximum width with that code. Outlook doesn’t support width on div tags, which is why you need to use a table. Set a conditional wrapper to constrain the width for desktop. Wrap the code around the div you set, matching the max width. This works for both HTML and CSS.

3. Utilize Image Styling.
Surprisingly, many users still view emails with images off, something that some inboxes do automatically. Be sure to treat ‘images off’ as a separate view that needs to be optimized. If you don’t, it can set the email as one image, and when users view it with images off, ALT text will be revealed — creating a less than ideal experience.

How Do You Do It?
Set image ALT text with style in mind. You can control the basics such as font color and size, create a solid background color, or even splice an image using pixel art.

4. Employ Bulletproof Buttons.
While there are many approaches to creating bulletproof or clickable buttons, the padding- and border-based approach works best.

How Do You Do It?
Wrap a basic link tag in a conditional table for Outlook. Make sure you set a background color on the table cell. Duplicate the background color on both the table cell and the link tag. Next, add padding and a one-pixel border. Outlook doesn’t like padding and won’t know how to interpret it, so adding the one-pixel border enables the padding to display properly. The same is true with fill color; be sure you add it to the table cell with a conditional comment tag to enable it to work. This approach only works with solid-colored buttons. If you want to enhance the visual by using gradients or background imagery, consider using an email-button generator like Buttons.cm. The techniques provided there can help.

I am a button.

5. Consider Progressive Enhancement.
There’s a myth among email designers that states you can’t do anything cool in HTML email. How about a live Twitter feed that uses CSS animation to scroll through tweets?

How Do You Do It?
Since 51 percent of email client-rendering market share is WebKit, you are able to use media queries within your email. The Twitter example can be done by linking through an application-programming interface (API). It’s also possible to create an HTML-5 video background for a nice visual experience. With email clients that don’t support this, you can fall back to a static background image.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Insert CSS here */
}

You’re Ready
Exciting customers by creating and delivering amazing email campaigns is not only a smart strategy, but also key to keeping them engaged with and interested in your brand. By following a few simple email-design tips — for optimizing text, structure, and imagery — creating memorable email experiences is easier than ever before.