Top 10 Most Popular Snippets of 2015

As you reflect on 2015, ask yourself: what can I do to improve my email development workflow in the new year? In order to keep up with the rapidly changing demands of email design, it’s increasingly important to make your workflow as efficient as possible. One of our favorite ways to optimize workflows is through snippets. With the help of snippets, you can build emails more easily—and more quickly—than ever before.

Not sure where to get started with snippets? Don’t worry—thanks to email geeks everywhere, we already have dozens of useful snippets in the Litmus Community.

Here’s a roundup of the most popular snippets of the year! Feel free to add them to your snippet library, or import them directly into Builder for the fastest way to build amazing email campaigns.

1. Remove Blue Links on Apple Devices

It’s not uncommon to find phone numbers, addresses, dates, and—sometimes seemingly random—words, like “tonight,” styled blue and underlined when viewing email on an iPhone or iPad. These links trigger different types of events based on the pattern detected in the text (making a call, launching a map, or creating a calendar event).

While this well-intentioned behavior from Apple can be super handy, it also can be a nuisance for HTML emails. It often leads to reduced legibility, and aspects of the email not fitting in well with the branding. Luckily, with the help of this snippet, you can rest-assured that this auto-linking behavior won’t affect your designs.

2. Bulletproof “Ghost Button”—No VML or Tables Required

Looking for a standard, no frills call-to-action (CTA) button for your next email campaign? Look no further. This “ghost button” has a border, but no filling. In the example below, the “Share on Twitter” button is a ghost button.

3. CTA Button with Background-Image + Hover Effect

This button is a bit more fancy than the ghost button. It has a background image and an arrow pointing to the right. It also has a hover effect, which changes the background image/color when a subscriber hovers over the button. In addition, it uses vector markup language, so it’s supported in Outlook.

4. Hidden Preheader Text

Preheader or preview text is copy pulled in from the body of your email that is typically displayed underneath the from name and subject line in a subscriber’s inbox. Using hidden preheader text is a way to define the copy used, and prevent it from impacting the actual design of the email. Use this snippet to add hidden preheader text to your next campaign.

5. CSS to Hide or Show Content on Mobile

If you’re looking to add responsive elements to your emails, then this snippet may be of use. The “mobile-only” CSS allows you to hide content by default in the desktop view, and turn it on for mobile. And, the “mobile-hide” CSS allows you to hide content on mobile only. Use this snippets to fine-tune your designs so they’re usable across mobile, desktop, and webmail inboxes.

6. Bulletproof Button—Padding + Border Approach

This bulletproof button approach involves a combination of the padding-based button and the border-based button. It’s 100% clickable and works across Outlook clients. Win-win!

7. Two Column Layout

This snippet uses a simple two column hybrid/spongy layout. It enables two columns to stack on top of each other if the screen size is below 600px—and it does so without media queries.

8. HTML Bulleted List

Lists are a great way to organize content within your email. For plain text emails, it’s simply including a * or a – in your email, but what about for HTML emails? This snippet has the solution.

9. Two Column Layout, Reverse Stack

Similar to the two column layout above, this snippet also uses a hybrid/spongy layout. However, it reverse stacks the structure, so the left table goes under the right table when viewed on mobile.

10. Bulletproof Button—VML Approach

Yet another bulletproof button snippet! This approach uses styling on the link itself to structure and style the button for most email clients. Structure is supplied via the line-height and width properties. As a fallback for Microsoft Outlook, VML (Vector Markup Language) is used within an Outlook-specific conditional comment. This approach has great support for most email clients, and the entire button is clickable.

Check Out Our Other Top 10 Lists for 2015

WANT EVEN MORE SNIPPETS?

Check out the the Litmus Community for dozens of useful snippets. You can sort existing snippets by the email client it was created for, or the type of snippet (i.e., hack, image, link, etc.). You can add your own, and create a snippet library of your favorites. And, you can save even more time by importing snippets from Community directly into Builder.

Check out snippets in Community →