Source: Litmus
January 3, 2017
Spending less time building and troubleshooting emails and more time creating a better email experience for your subscribers is the dream. But this can be challenging given the complexity of email design.
One of our favorite ways of cutting through the complexity and making email coding easier is using snippets—modules of reusable code.
Explore the library of snippets that email geeks have contributed to—and add them to your own snippet library or import them into Litmus Builder to help speed up your workflow. Don’t know where to start? Here’s a roundup of our favorite snippets from the Litmus Community this year:
Targeting specific email clients or browsers in email code is a useful way of dealing with client-specific bugs, issues, or simply styling things differently for a specific email client.
At the end of September 2016, Gmail began rolling out support for <style> and media queries in their webmail client and Android and iOS apps. Email coders began looking for ways to target Gmail using CSS, because now they finally could!
With this snippet you can target specific HTML elements in your email and style them differently for Gmail.
Paired with a recognizable “from” name and straightforward subject line, preview text is an absolute necessity to entice your subscribers to open your email. However, you may not want the preview text to display as preheader text when the subscriber opens the email. Hiding it using CSS is the perfect solution.
This snippet will ensure your preview text is hidden across different email clients, while still being seen in the inbox.
It’s easy to create superscripted text on the web using the <sup></sup> tag. If only it was that easy in email. Using the <sup> tag to create superscripted text in email can cause issues with line height in certain email clients and browsers, with Outlook being one offender.
Use this snippet created by Michael Posso to ensure your superscripts look as you’d expect them in Outlook.
Snippets aren’t just for complicated issues facing email developers. They’re also perfect for short pieces of code that you’re likely to reuse.
Glenn Smith’s snippet is a simple link that, when clicked, loads the requested Twitter profile page with a clear “follow” button. It’s common to see social media links and icons in emails, giving the link a clearer intent will help your subscribers figure out what to do once they’ve clicked on the link.
One of the easiest methods of using web fonts in your email is by using Google Fonts—a free repository of over 800 fonts. However, as with many things in email, web fonts aren’t supported across all email clients, so you’ll need to include a fallback.
Add this snippet to your library and easily use web fonts in your next email. It includes the code and instructions on how to use web fonts from Google Fonts, and how to implement a fallback font for the email clients that don’t support them.
Check out more Top 10 lists for 2016:
WANT EVEN MORE SNIPPETS?
Check out the the Litmus Community for dozens of useful snippets. You can sort existing snippets by email client or snippet type, like image, link, or hack. You can add your own, or create a snippet library of your favorites. And, you can save even more time by importing snippets from the Litmus Community directly into Builder.
Check out snippets in Community →