Following yesterday's post on why it's a bad idea for your HTML email to consist of a single graphic, we had some requests for tips on better email design.
Before providing tips, it's important to stress that you need to know your audience so you can anticipate what email applications your subscribers will be using to view your emails. If you're a "B2B" law firm (that is, catering to corporate and business clients), a majority will probably be using some version of Outlook (with a sizeable percentage probably using Lotus Notes). If you're a "B2C" law firm (that is, working primarily with individual consumers), Yahoo, Hotmail, AOL, and Gmail are the most popular services. Our tips below will focus on the "B2B" segment.
With Outlook the key factors to consider are that a sizeable percentage of readers will have image blocking "on" (which means they won't see your graphics until they click to activate them), and a sizeable percentage will first encounter your email through a preview pane. This means a significant portion of your email may not be visible without scrolling.
It's also important to stress that email is a "scanning" environment. That is, subscribers don't necessarily "read" emails; they scan them (Nielsen Norman Group’s usability study (Email Newsletter Usability—Third Edition, June 2006) determined that users, once engaged, spend an average of 51 seconds on each newsletter in their inbox). If the content seems interesting, they may devote more time. But you've got to grab them at the "scanning" phase.
With those environmental factors in mind, here are 10 quick law firm email design tips (after the jump) to maximize readability.
-
Always provide a link to a web-based alternative to your email at the top of the email so if, despite your best efforts, there are display issues, a reader can click that link and view your email in his or her browser.
-
Render key messages such as headlines and calls-to-action (e.g., Register, Read more) in text. This way if image blocking is "on," the key point of your message can still be viewed in the preview pane since HTML text will always display.
-
While it's a good idea to have a banner graphic for visual impact, don't make it too tall. That is, try and get your key "text" message as close to the top left corner of your email as possible so it is visible within the preview pane without scrolling (we recommend displaying your key message in the top left 290-360 pixels of your email - as such a banner taller than, say, 200 pixels in height will start to encroach on that valuable real estate). This recommendation also takes advantage of "eye tracking" research, which shows that the human eye scans email in an “F” pattern (i.e., from top left to right or down). In short, don't blow your chance to grab your readers' attention.
-
Design email templates to be no wider than 650 pixels; for 2-column templates we usually aim for 600-625 pixels wide. This helps reduce the risk of horizontal scrolling.
-
Populate "ALT" tags for images so for readers who have image blocking on, at least they will see a short description of the image, which may encourage them to activate it.
-
Include height and width attributes with your images, which will help keep your email intact even if image blocking is on.
-
CSS-based layouts are not supported by most major email applications so don't use them. Your design will render more consistently when HTML tables are used for layout. But you can use inline CSS to format content (e.g., font sizing and color), as well as effects like link behavior on mouseover.
-
If you're using an animated GIF, which Outlook doesn't support, make sure the first frame gets the key message across.
-
If you're including an embedded form such as an RSVP form or survey, make sure to also provide a link to a web-based landing page alternative for readers using applications like Outlook that don't support forms. Also, prepopulate your forms with subscriber data to maximize conversion rates.
-
Embedding Flash or video in an email can cause deliverability issues. It is also likely these elements will be stripped or disabled. If you want to use rich media, use a screenshot of the media linking to the “live” version on your website.
Always send a "test" email to yourself before distributing to clients. Some providers like eLawMarketing can provide an inbox preview of your email on various platforms such as Outlook 2003 and 2007. At the same time, check ALL links to make sure they are working properly. And consider sending "test" emails to addresses outside your firm's mail server. We had one client who only tested the links at their email address within the firm. Unfortunately, the links had consisted of URL's on the firm's internal, admin version of its website, which were not accessible to folks viewing the email outside the firm. Including a test send to their account executive at our company would have caught this error (which is why we invite all clients to include us on their test sends).
Comments
You can follow this conversation by subscribing to the comment feed for this post.