Straight to your inbox
Get the best email and digital marketing content delivered.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.
Subscribe
If you’re a designer or developer, building bespoke online stores using services like Shopify or…
January is a great month to make plans for the coming year – the office…
Designers and their clients are constantly asking for new HTML email templates to use with…
In this case study we highlight ScoutMailer, a rebranded version of Campaign Monitor targeted specifically…
Find out which email was our favorite holiday season design for the Christmas of 2008….
In an effort to class up Christmas, we’ve run the Christmas email competition for the…
In this article we’ll discuss the technical, design and information elements that make up a…
Having reviewed many, many thousands of email campaigns sent through Campaign Monitor and MailBuild, we’ve noticed that a lot of designers like to try and hide the unsubscribe link away, to make it like a little game of ‘find the link’ for their subscribers. We’ve always encouraged people to do the opposite, make it easier for people who don’t want your emails to unsubscribe than it is to hit the ‘spam’ button and cause you trouble. The always helpful Mark Brownlow agrees with us in his post “Time to move the unsubscribe link? recently. If it’s there in the preview pane, then more people are likely to use it instead of reporting you as spam. Less spam reports means a better sender reputation and less chance of ending up on a blacklist The best way to find out of course is to measure it – does having the link at the top actually lead to a significant increase in unsubscribes? A reduction in spam complaints? If more people do unsubscribe, does that leave you with a more responsive and passionate subscriber base? We’ve posted before about working with your subject lines, and you can also experiment with positioning your ‘key action’ links, use of images in your newsletter and the ‘introductory’ text above your headers. There’s no end to the possible layouts, all it needs is some creativity and a willingness to make small changes. We’d love to hear about any changes you have found useful, so leave us a comment.
As we revealed last year, we have some pretty good prizes lined up for the Campaign Monitor customer who sent (in our judgement) the best Christmas email. We were looking for a balance between creativity, design and practicality, for an email that works under the constraints of email clients, like image blocking for example. We saw a lot of good efforts, and sadly still a lot of emails that were just one big image, but a few emails really stood out to us, and we’ve showcased them below. Grand prize winner: Good Creative Congratulations to the team from GOOD CREATIVE who have walked away with this year’s prize. We loved the unique approach to a Christmas tree and the strong visual layout. Since there is actual text (not just images) in the email, it still holds together with image blocking on, and the content of the newsletter really sends a clear message about the agencies values. Well done! We’ll be in touch with the team shortly to arrange for their prizes: An iPhone A $100 Threadless voucher 50,000 Campaign Monitor email credits (that’s $500 worth) I’m sure they’ll have fun splitting that lot between them! Honorable mentions We’ve got three great emails to mention here, and the people behind each one will be receiving a solid chunk of email credits and a Campaign Monitor t-shirt of their choice. Pixel Magic From across the sea in New Zealand, the Pixel Magic team have created an email better suited to the decidedly non-white Christmases we have down under. A simple design that works really well, and does not try too hard and overwhelm the message. A great example of effective email design. Aegean Airlines Extra points for effort and bravery go to the creators of this plain text Christmas email for Aegean Airlines. Taking us back to the glory days of ASCII art, this email looks painstakingly constructed. We wonder how consistently it would render, but the idea is great and well executed, and it’s particularly interesting for such a mainstream product. 3blindmice From Sydney local Ben Manson, this fantastic design is almost all text. We love the right alignment, and particularly the way Ben has used custom fields to personalise his message for each client. Who doesn’t love a mouse in a Santa hat? Well done Ben. We’ll be in touch with all our winners very soon, and congratulations to you all. Thanks also to everybody who entered by using Campaign Monitor during this holiday season, and we hope to see you all back again next year with even better campaigns. We really appreciate your creativity and your business. Stick with us through 2008, we’ve got plenty of things lined up for you all!
Welcome to the first episode of our Extreme Email Makeover series with Dr. Mark Wyner. We’ll be running a series of email makeovers to help illustrate best practices for email design, layout, and construction. Dr. Wyner will assess an existing email newsletter for ailments which can easily be cured with treatments in modern “medicine.†A patient’s vitals will be provided (email intent, target audience, etc.) and a diagnosis will be revealed. Finally, a cure will be outlined, complete with a brand new email template designed and built by Dr. Wyner. The Patient Teenie Tiny Tots is an online retailer offering “unique gifts and keepsakes for infants, toddlers and kids.” Customers who have registered on their website receive an email newsletter with information about featured products and offerings. With a child-focused product line the target audience is parents and extended family members. Email Clients With a B2C list comprising primarily home-based subscribers, it can be assumed that recipients are employing the following email clients: Apple Mail Thunderbird Outlook Express Entourage AOL Yahoo Mail/Yahoo Mail Beta Gmail Hotmail The Diagnosis Exploratory surgery revealed some detrimental ailments. While no life-threatening conditions were discovered, it was clear that future health would be contingent upon proper treatment. Design Ailments The design of this email was a fair representation of the patient’s website design. However, there was room for a stronger relationship between the two without compromising best practices or adding gratuitous weight to the overall file size. Dr. Wyner addressed the following afflictions as part of his treatment: [fig. 1] Excessively large masthead, likely to ensure clearly-legible text. Omission of the gradient background from the website (a key ingredient to the website’s overall design). Font family used for category titles differed from that of the website. Bulky product shots (unfavorable in the email environment). Gratuitous tag lines (consume valuable real estate). Lack of clear segmentation of products (decelerates scanning and reading). Small, graphic add-to-cart buttons rendered unreadable/unusable with image blocking. Inflexible grid layout for product positioning, restricting each email to an even number of products. Missed opportunity to extend the website brand (uniquely colored boxes) to the email. Special offer of significant value placed at the bottom of the message. Absence of interactivity for “forward to a friend” call-to-action. Poor placement of “view in browser” link (if someone was having problems viewing the email, they likely wouldn’t reach the end of the message). Missing physical-address (non-compliance with the CAN-SPAM Act). Ambiguous subject line (“Gimme a Break! FREE SHIPPING!”) complete with excessive use of exclamation points and capital letters, both of which are commonly flagged by spam filters Markup Ailments The markup in this email was riddled with syntax errors, half-finished properties and incorrectly structured elements. The results of these types of errors range from minor variances to illegibility. One specific concern was regarding the use of type selectors such as img { border: 0; } which can inadvertently result in modifications of webmail client’s chrome. Another concern was the lack of descriptive ALT text. For example, the ALT text for the a photograph of a baby modeling an eating set is “Infants 0–18 months.” Email Vital Signs Standards-based markup: no CAN-SPAM Act compliance: good File size: 194KB The Cure The necessary treatment was very clear. Some simple design evolutions would strengthen the brand, improve information design and ensure a clear read for recipients. And reconstructive surgery with clean, well-formatted markup would help this overweight email slim down to a healthy size. Treatment Masthead reconstruction: the overall masthead was reduced to a suitable size, important text was created with HTML (rather than as images) and migrated to the upper-left corner. This yielded a reduction in file size, prepared for image blocking and ensured important information would be available in both horizontal and vertical preview panes. Brand conditioning: the union between the company’s website and the email was strengthened with the integration of relevant graphics and font families and consistent colors. Layout/readibility enhancements: gratuitous information was removed, products were clearly segmented and made extensible, add-to-cart links were converted to HTML text and important messages and offers were relocated to appropriate locations. Spam filter buffering: a sensible subject line was written, content-to-code ratios were reduced with standards-compliant markup and use of images was limited. CAN-SPAM Act compliance: physical address was added. Augmented value: anchor links were added to expedite content scanning, product descriptions were added for context, secondary content introduced the value of the company into their email messages and a forwarding utility was established and linked to. Email Vital Signs Standards-based markup: yes CAN-SPAM Act compliance: perfect File size: 28KB (14% of the original size) Before and After Let’s review some screen shots illustrating some key benefits of this surgery. Outlook 2003: horizontal preview-pane, images disabled [fig. 2.1: before (top), after (bottom)] Looking at the original template (fig. 2.1, top) we can see that little information can be gleaned about the contents of the email and the potential value of further reading. The following quirks are especially unfavorable: The logo, tag line and description have been reduced to ALT text of the logo and have lost all visual impact. An overview of the email is unavailable for a quick scan. ALT text for the product photos offers no additional value considering how much real estate they consume. Note how the new template (fig. 2.1, bottom) addresses these issues: It is immediately obvious who sent this email, why the recipient is receiving it and how s/he can unsubscribe. Even with images disabled, the integrity of the company name and tag line have not been compromised. An overview of the email is provided complete with links to respective content. Yahoo Mail Beta: images disabled [fig. 2.2: before (left), after (right)] Looking at the original template (fig. 2.2, left) we can see that almost no information about the product is available, specifically the following: The product photo lacks appropriate ALT text. Incorrect CSS syntax renders the product name nearly illegible and partially cloaks the price. The “add to cart” button is unreadable, obstructing sales. Note how the new template (fig. 2.2, right) addresses these issues: Appropriate ALT text is used to ensure a clear message in lieu of images. Proper CSS ensures all text is legible. Use of HTML text for the “add to cart” button ensures readability and usefulness of an important call-to-action. Mozilla Thunderbird: plain-text view [fig. 2.3: before (left), after (right)] It is challenging to extract a message from the original template (fig. 2.3, left); doing so would be labor intensive. The primary reasons for this are as follows: Overuse of images results in an array of image paths (use to replace the images). Lack of proper, semantic markup inhibits a plain-text engine to decipher headlines and paragraphs from one another, forcing an engine to clump all information together into a single block of text. ALT text is given to visual separation from regular content and thus seeps into the general content flow. Note how the new template (fig. 2.3, right) addresses these issues: Limiting images to contextually relevant content reduces presence of image paths and ALT text. Use of semantic markup creates appropriate visual separation of block-level elements (headlines, paragraphs, etc.), rendering content scannable and intelligible. ALT text is given bracket bookends and prefixed with the word “photo” to help differentiate it from general content. Summary Teenie Tiny Tots had a great foundation for a successful email, and simply needed a push to maximize its potential. It is apparent that during the design/development of their original email many decisions were made with consideration for the email environment and for specific email clients. With the help of Dr. Wyner, Teenie Tiny Tots is back on track for optimum health. Check out more handy work from Dr Mark Don’t miss the other makeovers in the series: Vol. 2: Tangent Communications Vol. 3: EIU Alumni Association Vol. 4: Miroballi Shoes
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.
SubscribeWith our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.
Try it for free