In our previous blog, we talked about the importance of having a mobile presence for your company's online marketing efforts today. Among the facts we pointed out: mobile now accounts for 25% of all Web usage, and 4 out of 5 consumers use a smartphone for shopping.
Many people using their phones on the go are using them to check email. So how can you make sure your company's email design looks the best on every device? Check out some of our tips, below.
1. Get cozy with tables
Although they are now most often used to contain tabulated data, tables were once the building blocks of websites with graphic effects.
Well, that's how emails still are. In fact, you can't build them with anything else and expect consistent results across all platforms. Get ready to cozy up with lots of tables.
2. Create a solid template base
Chances are, you are going to be sending more than one email, and as time goes on your subscriber list will grow. This makes it all the more important to create a strong template that you can reuse with ease.
Fortunately, there is no reason to start from scratch. There are many excellent blank starter templates that will help you avoid the most common pitfalls right off the bat. The best part? They're free! All you need is a code or text editor, and some basic knowledge of HTML and CSS.
Here are some of the best base templates out there currently:
- Cerberus, which offers "solid patterns for responsive HTML emails."
- ZURB Ink, for "responsive templates built on Ink."
- Campaign Monitor, with a selection of free templates or a build-your-own.
Alternatively, if you are already utilizing a service like Mailchimp or Campaign Monitor, you can use their template builders, which will take care of most of heavy lifting for you in the form of an easy-to-use WYSIWYG (or, What-You-See-Is-What-You-Get) editor.
3. A ‘responsive’ vs. ‘fluid’ layout
You may notice some templates being touted as "responsive" or "fluid." What does this mean? Which one should you use?
Fluid layouts almost always consist of a single column that expands and contracts to fit the width of the screen. Although this is somewhat limiting stylistically, it has 100% support across all providers, from Outlook 2007 to Gmail.
Responsive layouts, conversely, use something known as CSS media queries to alter the layout and content of a page. In this way, a sidebar can be positioned on the right when viewed on a large screen, but it will automatically collapse down to the bottom of the page when displayed on a small screen. Responsive templates boast around 90% support across all email providers.
In the end, the choice is up to you.
Fluid layouts may limit your design, but you can rest easy knowing you're supporting the widest range of clients possible. If you use a responsive layout, however, you know that you are stylistically presenting your brand in the best way possible.
4. Harness the power of CSS: use an inliner.
One of the biggest hassles in creating a template is that all CSS rules must be "inline."
When designing for the web, we can utilize the power of the <style> ... </style> tag and separate all of our CSS rules from the actual elements they style. Not so with emails! Normally, to style all of our paragraph tags, we would write something like this:
<style>
p {
font-size: 12px;
color: #3E3E3E;
}
</style>
But when creating an template, these rules must be attached directly to each and every paragraph you want to style (effectively turning it into an "inline style").
<p style="font-size: 12px; color: #3E3E3E;">I am a happy sentence.</p>
If you have 12 paragraph tags, you have to copy that style declaration 12 times. If you decide to change the color, you have to find and change those 12 paragraphs again.
To remedy the egregious waste of time, turn to the power of a CSS inliner. This glorious tool saves an incredible amount of work and allows you to code templates the way you would for the rest of the web. You can continue to use classes, ids, and the <style> tag.
Then, once you have a completed design, all you have to do is paste the HTML and CSS into an inliner, and it takes care of assigning all your rules to the appropriate elements. If you change something in your template, just run it through the inliner again.
Here are a few of the inliners available online. Try one out — you’ll be glad you did:
5. Set a maximum width
You don't want your email to stretch too far, otherwise it can make your content more difficult to read and degrade an otherwise beautiful layout.
As a rule of thumb, keep the width of your design to a maximum of 600 pixels.
6. Keep images to a supporting role
Yes, you can achieve far more impressive graphical feats using images, but they should always be there to support your content, not *be* your content. This is especially important because images will be disabled by default in a large share of inboxes.
So, make sure your most important content can be seen in the absence of graphics. Make sure to include "alt text" on all of your images as well. Stick with the .jpg and .gif file formats where possible, as there are issues with the .png format with certain email providers.
And, while we’re at it: As a rule of thumb, avoid background images if you can. Embedding images using an ‘img’ tag works just fine, but using the CSS "background-image" rule will give you far less consistent results. There are workarounds (http://backgrounds.cm/) that provide extended support, but you will find these time-consuming to configure and test.
If you must use a background image, be sure to provide a fallback color that will appear in place of the image on unsupported providers.
7. Just say no to javascript
This is an easy one. Javascript is by and large unsupported on any email platform. All you have to do is not use it.
8. Test, test, test
Before sending your message to the masses, ensure that it is going to look good across a variety of platforms.
Unless you have multiple email addresses with several different providers, it is worthwhile to use a tool like Litmus, although it will cost you a bit. This tool allows you to check your template across more systems that you want to think about.
9. Always include a web link
It's always good to have a doomsday plan.
If things go wrong despite your best efforts, make sure to provide a link to a web-viewable version. This can be done in the form of a small "Click here to view this email online" link in the upper right-hand corner of your email.
By now, you have a good understanding of these 9 essential rules for building, and launching, an email campaign to support your marketing efforts.
Interested in learning more, or simply have questions to run by an expert? Call us at 214-937-9521 or go here to contact us today.
Posted by Micah Iriye
Micah builds awesome custom web applications for Webity, DMD's development partner in San Francisco.