Month: January 2017

How to Prevent Gmail From Displaying An Image Download Button In Your Email

One of the common annoyances in Gmail webmail is Gmail displaying an image download icon when a user moves the cursor over an unlinked image. Thanks to Gmail’s recent support for embedded styles you can use CSS to to suppress the image download icon.

Gmail Image Download Icon

If you have unlinked images in your email and the image is above a certain size, Gmail will display an image download icon when you move the cursor over the image. In my tests this happens when the image is at least 300 pixels wide and 150 pixels tall. Clicking on the icon will cause your browser to download the image to your computer.

Gmail will also display this icon if you resize your image dimension down – up to a degree. For example although the icon does not appear for images 200 pixels wide and 100 pixels tall, the icon will appear if the image was sized from 300 pixels wide to 200 pixels wide.

In addition, Gmail will also change the cursor to a pointer (hand) when the cursor is over the image. If you click on the image itself and not the icon, the image is featured within a grey background within the Gmail interface.

Techniques to Hide the Download Icon

Here are two ways to hide the icon:

1. Add a Link

The simplest method to prevent Gmail from displaying the download icon is to wrap the image with a link. You can link it to a call to action or even place an empty anchor on the image.

2. Use a Sibling Selector

Remi Parmienter discovered that you can hide the icon with a sibling selector because the download icon is contained within a div that is added after the image by Gmail.

img + div { display:none; }

This selector is very broad as it will hide any div that is adjacent to an image including divs that you might have added yourself.

Thankfully since Gmail started supporting class names in their update last year, you now have much more control over this.

You can add a class like “g-img” to an unlinked image and when add a CSS style like below in the (Gmail only supports tags in the head) of the email

img.g-img + div {display:none;}

However if you happen to have a div adjacent to your image, this may cause that div to be hidden in other clients, such as Yahoo! Mail or iOS. As a safeguard you can append a “placeholder” div after your unlinked image:

3. Set the Image as a Background Image

Although Gmail does not add the image download icon to background images, a few email clients do not support background images. Clients that do not support background images include some versions of Gmail Android clients as well as Microsoft Outlook (you need to resort to using VML).

Choosing The Best Option

Wrapping an image with an empty link is simple and straightforward. However, when the recipient clicks on the image, nothing happens which can lead to the recipient thinking that your email is broken. This also has the effect of making the image having an appearance of a link in non Gmail clients as well. Therefore if you want to use this option, use a real link.

With the sibling selector technique you can hide the download icon, but Gmail will still convert the cursor to a pointer when the user moves the mouse over the image. Since Gmail strips the ‘cursor’ CSS style, we aren’t able to override Gmail’s cursor styles. However using this technique, your image won’t look like it has a link in other email clients.

Using the background technique will prevent the icon from being displayed and the cursor from being changed, but comes with more complexity as you have to deal with clients that don’t support background images.

As usual, when testing new techniques, you should make sure that they don’t negatively affect rendering in other email clients. Here’s where Email on Acid can save you a ton of time. Get over 70 previews in just one minute by testing with Email on Acid.

iOS10 now available for testing

Good news folks, we’ve now added iOS10 testing to our extensive list of clients you can test on.

You will now be seeing four new clients in your Email on Acid account:

  • iPhone 6 iOS 10.2
  • iPhone 6 Plus iOS 10.2
  • iPhone 7 iOS 10.2
  • iPhone 7 Plus iOS 10.2

iOS and mobile in general still dominate a large part of the email client market share. With this in mind, it’s as important as ever to ensure you’re testing on the latest devices.

If you’re not seeing the new devices in your testing, make sure you update your default testing clients in your Email on Acid account.

Not an Email on Acid member?

Not only do we have the latest iOS10 testing, we have a range of over 70 different email clients to test on. Sign up now to test instantly on these email clients.

7 Reasons Email Marketing Still Works

It may (or may not) be Throwback Thursday when you read this, but when we refer to email marketing, we are not trying to do a throwback from the distant past. While some remember the days of hearing, “You’ve got mail” and are taken back to the early days of the Internet, this blog isn’t about email back in the day or a romantic comedy. Instead, we’re going to break down why email marketing is still alive and well in 2017.

Email is still the most preferred method of communication for many people and businesses. It remains so for a variety of reasons. Email is convenient, direct, timely, and it provides what you need to know in a way that works best for the consumer mindset.

Why is email so important? The reach is widespread and specific to your client’s needs and preferences. It is still an efficient way to invest in your business and continually expand your circle as the potential is limitless. Now, let’s dive into 7 other reasons email marketing is still effective to your bottom line.

Effectively target your messaging

On most websites, you can opt to receive targeted emails. This means that the people receiving your emails have signed up for a reason; they are invested or interested in your product in some way. They desire to hear from you. As the company sending this, you should always reach out to the customer in a direct way that is accessible to them as it will make the biggest impact.

Easily keep your clients in the know

As expressed before, part of what makes this type of marketing effective is that you can reach out to tell your clients about information they might not otherwise see or hear in time. Having a sale? The best way to spread the news is through email! Have coupons? Email is the way to go. The worst outcome is if your client is not informed of the latest events and opportunities you have for them. Nothing feels worse for your client base than finding out about that sale at their favorite store until after the fact. Keep them updated and they will appreciate you for it!

Security and mobility

Those of us who have been raised with computers knew emails would one day replace “snail mail” as the means to communicate. While it has not completely taken over as the only form of communication, it has in fact made it easier for you to quickly communicate with others in the modern world. You can keep track of receipts, order confirmations as well as other digitally accessible details.

It’s so much more convenient to have digital access today to many documents that used to be mainly paper based. Your clients increasingly prefer to go paperless too. There is safety and assurance in knowing you can access that document wherever you can access the internet. This is a valuable tool; effective and secure for your customers on the go.

Cost effective

In any business, cost is king. For a wise business owner, it is crucial to be as cost effective as you can. When using any method to spread news about your business, the data matters. Whether you are sending coupons, sales adverts or any other information about your business, emails will get there in a timely manner and can be scheduled in advance. You don’t have to worry about the information getting lost in the mail or getting picked up by the wrong person. The best news is email marketing allows you to keep your budget on track. No more overspending on marketing tools that provide little in terms of ROI.


Emails are still seen as the most professional method of outreach online. Today, people expect offers, information and contact from businesses via email. You can count on increased click-through rates when you offer promotions or useful information.

Many business professionals are checking their email at work regularly, not going onto all the social media sites. Reach out to them directly where they prefer communication for their business transactions and informational needs. Heck, 40 percent of Americans read emails while in bed. That means you already have their attention in their inbox, so use it!

Less intrusive

No one wants to be interrupted with telemarketers while eating or enjoying family time. Time at home with your family can be limited with the full work week and plethora of your children’s after school activities, and this is valuable time that is highly guarded by many.

So how is email less intrusive? That answer is easy. It is something that your client chooses to open and read through when they have time. They are not being forced to read it, or open it for that matter. They will likely read it, hoping to find something that conveys a new opportunity meeting their needs, a discount or a free item or promotion. Email is the fun and convenient way of receiving new mail today instead of the old fashioned literal mailbox in the front yard.

Tests the market

This is a great way to see how effective your marketing is simply because you can monitor opens, clicks, conversions, volume of calls, web visits and promotional codes used after an email offer. There are analytical tools available to help do the math and see the benefits, so you know what is working and what isn’t. A good question to test is: Why are people unsubscribing? This will help show you how to improve your reach and meet the real and expressed needs of your client base.

Email is far from dead…

Well, it looks like the results are in. Email marketing is still a highly-preferred method to reach not only a wider client based, but a direct and specific way for targeted marketing needs too. This is the best way to remain cost effective, communicate in the way customers prefer, keep everyone updated with what they want to know and a great way to get the data needed for how well you are reaching customers and meeting your goals.

As technology continues to improve, the digital world remains the top choice for many and a way to keep the environment green; a wider mobile reach with a professional business touch. Show is email marketing being used to drive your organization’s goals? That is alive and well.

Email Accessibility in 2017

It’s 2017 now, if you haven’t heard, and email marketing is still not dead. In fact, email is flourishing! There’s never been a more exciting time to be part of the email world. We’re bombarded from all sides with technological advances. However, there’s still something basic we’re not doing enough of; accessibility.

Setting the scene

According to the World Health Organization 285 million people are estimated to be visually impaired worldwide and over 5% of the world’s population – 360 million people – has disabling hearing loss. To put that into perspective, the population of the USA is 325 million.

The range of adaptive technologies available to these users is truly astonishing, ranging from tools we’ve heard about such as screen readers or screen magnifiers to the more advanced sip ‘n puff devices to eye tracking technology. The fact these tools exist means many users who otherwise wouldn’t be able to access the internet and, by proxy, their emails now can.

More good news! We can actually further assist these users by making our emails more accessible. This is my New Year’s Resolution for this year; create more accessible email. Let me show you how I’m going to do it.

Fixing the code

A lot of accessibility issues in email marketing stem from development. There are quite a few quick, actionable code changes we can make.

Use Semantic Code

This is one of the most basic fixes that can be applied to code. It also happens to be one of the most overlooked ones. Ensuring the use of


tags will help screen readers digest your content. Allowing the screen reader to properly differentiate between headings and paragraphs not only creates a more pleasant reading experience, it allows the user to navigate through your emails.

Set the HTML Language attribute

Another very simple fix we can apply to our emails is in the head of the email. By setting lang=”” with the correct language. Although a very minor fix it will ensure that words are being pronounced correctly by screen readers.

Unsure of how to use lang=””? You can read more here.

Set the Title of the email

Proper use of the tag has two benefits for our emails. Firstly, it’ll set a title on the tab of the webpage when viewing the email in a browser, rather than an email client. More importantly, it provides a title and some context for users with assistive technology, such as screen readers.</p> <h4>Encode your characters</h4> <p>Don’t forget to encode your characters in the HTML! It’s really simple, just add:</p> <pre><code></code></pre> <p>All this is doing is letting the browser or email client know which type of characters to expect in the following code. We’re simply making sure nothing untoward slips in, breaking the reading pattern for both people reading or using screen readers to read the email.</p> <h4>Don’t set titles on links</h4> <p>A bit of myth busting with this one, a lot of people still like to use title=”” to add titles to links. Where possible, we should avoid setting titles on links altogether. Stick to including the key information either as part of the text or the link itself. Screen readers will break their reading pattern to read the title and it can cause issues.</p> <h4>Set and style alt text</h4> <p>I’m sure most readers of this blog are aware by now of the importance of alt text. You should already be setting it to ensure your email is still legible before images load.</p> <p>Alt tags also serve a purpose in accessibility! Setting the right alt text will enable screen readers to accurately describe images to those using them. However, not all images need alt text. If your image is purely for the aesthetics of the email, such as a spacer gif or shadow, be sure to set an empty alt=”” on the image. This simply tells the screen reader to skip over these images.</p> <h4>Fix your tables</h4> <p>Fixing our tables is another very quick fix that, arguably, makes the biggest difference to email code. This fantastic piece of code was shown to me by <a href="">Mark Robbins</a> and it makes a world of difference. Simply add the below to your tables.</p> <pre><code>role=”Presentation”</code></pre> <p>This uses ARIA (more on that later, I promise) to tell the screen reader that this isn’t a data table, which is the intended use of tables in HTML, rather it’s a presentation table. This makes reading the content a lot more intuitive for screen readers.</p> <p>It’s worth noting that if you’re using a table for showing data you should leave this off those specific tables as you still want them to be read as data tables.</p> <div class="hr"></div> <h3>General Email Considerations</h3> <p>There are also some general email marketing points to consider when discussing accessibility, which don’t necessarily relate to code but can still make life easier for those dealing with the aforementioned visual and hearing impairments.</p> <h4>Be wary of contrast</h4> <p>There are no specific rules for contrast but it’s something to be wary of. This is especially important for subscribers who may suffer from color blindness. There are a few different tools out on the web for checking contrast but <a href="">one of the best is from webaim</a>.</p> <h4>Keep fonts legible</h4> <p>A general good rule of thumb is to have your fonts at a <span style="font-weight: bold" class="Apple-style-span">minimum of 14px in size</span>. Anything less than 14px can be very tough for people to read. That being said, it’s only a general rule. Around the web we’ve seen an increase in popularity of fonts being used with a light font weight. If using a light font, please consider using 16px as a minimum font.</p> <h4>Maintain a logical reading structure</h4> <p>You should try, where possible, to keep a logical reading order. Consider the fact that screen readers will, in general, read left to right before dropping to the next line. Keeping a logical reading order can also help those with dyslexia to maintain reading flow.</p> <h4>Avoid center aligned paragraphs</h4> <p>Yes, even on mobile! Although it can be aesthetically pleasing to have your text in the center it can be much harder for people with dyslexia to read center aligned text. Try and keep large bodies of text left aligned.</p> <div class="hr"></div> <h3>Is ARIA the answer?</h3> <h4>What is ARIA?</h4> <p>ARIA, or Assistive Rich Internet Applications, is a web spec created by W3C with the aim to add extra descriptive information to HTML elements to enhance the experience for those using screen readers.</p> <p>It’s worth noting that ARIA has zero effect on how your email looks or renders, it’s simply a descriptive layer we wrap onto the code.</p> <h4>How does ARIA work?</h4> <p>ARIA allows us to use HTML to tell screen readers what a HTML element is. The following are examples of ARIA roles:</p> <pre><code>role=”presentation” role=”article” role=”img” role=”listitem”</code></pre> <p>If you’d like to see more ARIA examples, <a href="">view them here</a>.</p> <h4>So, is ARIA the answer?</h4> <p>In short, no. At least, not yet! Although it’s making its way into web development, it’s still being left behind a bit in email marketing.</p> <p>As Mark Robbins correctly says in <a href="">this fantastic blog</a> many different email clients already use ARIA elements in questionable ways. The examples he includes are:</p> <ul style="padding-bottom:20px"> <li>Gmail wraps your code with role=”listitem” inside role=”list” but only a single list item.</li> <li>Yahoo! use role=”presentation” on a div and that is inside role=”main” which is also odd. There should only be one main per page and a div is presentational by default.</li> <li> (newer version) uses role=”document”.</li> </ul> <p>So, with this in mind, my suggestion for now is to avoid using ARIA roles. If webmails are already adding potentially incorrect roles we would further add to the confusion. That being said, please still do heed my advice to use role=”presentation”, although ARIA roles aren’t ready for production, this is an exception to the rule for the benefit of screen readers.</p> <div class="hr"></div> <h4>Resources</h4> <p>Accessibility in email is something that isn’t always the first topic on our minds. I do, however, have some fantastic resources if you’d like to do some further reading on accessibility.</p> <ul style="padding-bottom:20px"> <li>Rebelmail – <a href="">Accessibility in Email Part 2</a></li> <li>Campaign Monitor – <a href="">Accessibility and Email Campaigns</a></li> <li><a href="">The A11Y Project</a></li> <li>The A11Y Project – <a href="">Getting started with ARIA</a></li> <li>Mailchimp – <a href="">Accessibility in Email Marketing</a></li> <li><a href="">The Type E: Newsletter</a></li> </ul> <div class="hr"></div> <h4>It’s all down to us</h4> <p>Whether you’re a developer, designer, email marketer, or are otherwise involved in the creation of emails the burden of good accessibility falls to us. Even though we can’t use ARIA, we can take steps to ensure we give the best possible email experience, regardless of visual, hearing, or other impairments.</p> <p>If you think I’ve missed a resource, an important fix, or anything similar or you have any general thoughts or questions, please feel free to leave a comment or reach out to us on Twitter. I’d love to discuss email accessibility with you.</p> <p>When making any sort of changes to your email, whether it’s code based or simply changing the reading order of your articles, it’s important to ensure you re-test <span style="font-weight: bold" class="Apple-style-span">every iteration</span> of your email. Email on Acid’s rendering tests can show you how your email looks in over 70 different kinds of clients in seconds.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-49" class="g post post-49 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >Holiday Interactive Email Campaigns</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>January 16, 2017</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p>The holidays are a busy time for email marketers as it is the peak shopping season. However the holidays also provide a ripe opportunity to for email marketers to fire up their creative juices. Here are some really cool campaigns that leverage interactivity and advanced CSS animations that we came across the past holiday season.</p> <h4>1. Taco Bell</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p><a href="" target="_blank">eROI</a> created this fun interactive campaign for Taco Bell that lets the recipient select among three ways to get to the Taco Bell store.</p> </p> <p style="text-align: center"><img src="" width="450" height="953" class="image_border_med"></p> <h4>2. Two-UK</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span> </p> <p><a href="" target="_blank">Two</a> a digital agency based in the UK sent this interactive Christmas tree. Not only can the recipient select various lighting options, they can choose to burn the tree down as well! Kristian Robinson wrote a <a href="" target="_blank">blog article</a> on how they created the email. </p> <p style="text-align: center"><img src="" width="464" height="590" class="image_border_med"></p> <h4>3. Brightwave</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p><a href="" target="_blank">Brightwave</a>, a full service email agency based in Atlanta sent this nautical themed holiday email. It employs a pleasant background scrolling effect.</p> <p style="text-align: center"><img src="" width="456" height="434" class="image_border_med"></p> <h4>4. 1973</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p>Recipients of this interactive email from UK based digital agency <a href="" target="_blank">1973</a> can click to open a present uncovering a snow globe featuring members of their team. I liked how they implemented the snowfall with seemingly random falling directions, sizes and transparency.</p> <p>You can read more about the email on <a href="" target="_blank">their blog</a>. </p> <p style="text-align: center"><img src="" width="478" height="540" class="image_border_med"></p> <h4>5. Wax Media</h4> <p><a href="" target="_blank"><span style="font-weight: bold" class="Apple-style-span">View live version</span></a></p> <p><a href="" target="_blank">Wax Media</a> a UK based digital agency which counts B&Q among some of their clients sent this fun email where an email shakes after a set of elves fall into the scene.. What I like about this example is that the dancing elves are implemented as an animated gif, so in clients that don’t support CSS animations, they’d still be able to see the elves dancing.</p> <p style="text-align: center"><img src="" width="500" height="359" class="image_border_med"></p> <h4>6. Email on Acid</h4> <p><a href="" target="_blank"><span style="font-weight: bold" class="Apple-style-span">View live email</span></a></p> <p>We thought it would be cool to implement an email featuring a greeting card where the recipients could flip open. This technique uses 3D transforms which can provide for some impressive animated effects.</p> <p>Read about how it was done in <a href="" target="_blank">this blog article</a>.</p> <p style="text-align: center"><img src="" width="496" height="356" class="image_border_med"></p> <h4>7. FreshInbox</h4> <p><a href="" target="_blank"></p> <p>View live version</a></p> <p>Check out this new year email featuring an animated fireworks intro for the <a href="" target="_blank">FreshInbox</a> Email Geeks newsletter. You can see some other cool <a href="">interactive techniques</a> featured in the blog. </p> <p style="text-align: center"><img src="" width="389" height="442" class="image_border_med"></p> <h3>Considering Interactive Email?</h3> <p>I hope the examples inspired you to experiment with interactive email. If you’d like to learn more you can check out our <a href="">articles on Email Development</a>. </p> <p>Make sure you test your email thoroughly before running an interactive email campaign. Ensure fallbacks are functional and that your email looks great on all clients – not just those that support interactivity. Email on Acid’s rendering tests can show you how your email looks in over 70 different kinds of clients in just one minute. </p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-50" class="g post post-50 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >Email Development Best Practices 2017</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>January 12, 2017</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p>Email development can be a very confusing undertaking. Many new email developers, or web developers who are new to email, find that the complex and multi-layered email client ecosystem causes endless paradoxes. A fix for one client breaks their email in three others. A simple float functions in only half of the email clients available.</p> <p>The best practices that I’ll outline below cover both email design and email development. Starting with these best practices in mind can save you hours of hair pulling down the road!</p> <div class="hr space"></div> <h3>Email Design</h3> <h4>Single column design</h4> <p>Keep the design simple to make life easy! A single column design is sufficient for most emails (other than product based or newsletter style) and will help make it much easier to accommodate mobile devices. It’s also easier for your readers to scan a single column of material than it is to jump around a lot.</p> <h4>Use 600px for default width</h4> <p>We recommend that you keep your email’s maximum width close to 600px. This width should give you plenty of space and will fit nicely on most web and desktop clients. You can scale it down to fit better on mobile screens using media queries or <a href="" title="Fluid Hybrid Design Primer" target="_blank">fluid design</a> (see below).</p> <h4>Keep mobile users in mind</h4> <p>With the rise in popularity of mobile devices, some email designers have embraced “mobile first” design. This means that they design the email with mobile primarily in mind, and then make sure it also looks good on desktop. This approach is the opposite of what many designers have been doing; designing it on desktop and then adapting it for mobile. By putting mobile users first, designers hope to increase engagement and click-throughs on mobile devices. We recommend this approach especially for simpler emails like password resets, transactional emails and account updates.</p> <h4>Every email client is different</h4> <p>When designing an email, keep in mind that it’s going to be very difficult (if not impossible) to achieve “pixel perfection.” Instead, try to achieve an email that maintains your branding while being easy to read (and click) on all email clients.</p> <p>The only way to know how your email will look across the board is to <a href="" title="Try us free!" target="_blank">test it</a>.</p> <h4>Plan for missing/blocked images</h4> <p>Some clients will block images by default, and some users will change their settings to block images so that they can save on data usage. If images aren’t downloaded, it may be impossible to get your message across. To prevent this, include descriptive alt text for your images. You should <a href="" title="Alt text in email" target="_blank">style alt text</a> to improve its appearance.</p> <h4>Use email safe fonts</h4> <p>You can use<a href="" title="Google Fonts in Email" target="_blank"> Google Fonts</a>, but you’ll find that many clients don’t support them. For this reason, having a good fallback font is key. Your fallback font ensures your design still looks good without custom web fonts. You’ll also want to make sure that you use a font-stack compatible with Outlook. One of the many quirks of Outlook is that an unrecognized font in the stack will cause it to fall back to Times New Roman. Address this annoying bug using <a href="" title="Custom font stacks" target="_blank">one of the four fixes we covered</a>.</p> <p>Here is a short list of fonts that should be supported universally: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Σψμβολ2 (Symbol), and Webdings. MailChimp also has an excellent <a href="" title="Typography" target="_blank">list of email safe fonts</a>.</p> <h4>Avoid entirely image-based emails</h4> <p>If image blocking is on, your carefully crafted email won’t communicate anything! With image blocking on, your whole message may be lost. If text must be contained in an image, use <a href="" title="Mastering Alt Text" target="_blank">styled alt text</a> to make sure your message gets across.</p> <p>Image-based emails are also very hard on your recipients’ data plans and can be very difficult for the visually impaired. Use HTML text where possible, instead.</p> <h4>Don’t forget to add an unsubscribe link!</h4> <p>And don’t try to hide it. You don’t want to be emailing people who don’t want to read your emails. It’s also illegal to leave an unsubscribe link out of commercial email. The unsubscribe usually appears in or below the footer. If you want to go for extra credit, set up a “manage preferences” center, which can help reduce the number of unsubscribes you see.</p> <div class="hr space"></div> <h3>Email Development</h3> <h2>HTML</h2> <h4>Tables are your friend. When in doubt, table.</h4> <p>Forget divs and floats. Yes, I know it seems like we’re forcing you to code in the dark ages of the internet, but tables are by far the most reliable way to achieve a consistent layout. They also enable us to replicate something that many email clients otherwise don’t allow: floats. Okay, not really CSS floats. Tables allow us to take advantage of the align attribute, which was the progenitor of modern CSS floats.</p> <p>Using align=”left”, we can cause tables to stack on top of each other on smaller screens. This technique is the basis of responsive and <a href="" title="Fluid Hybrid Design Primer" target="_blank">fluid</a> design. At a basic level, it works like this: We have two tables that are each 300px wide, with align=”left”, inside the same container. If the screen is 600 or more pixels wide (as it would be for most desktop clients) then the tables will appear side by side. If the screen is only 400px wide, then the two tables will stack on top of each other.</p> <p>Nested tables are totally safe, so feel free to nest away. You can also use colspan and rowspan, as long as you count your columns/rows carefully. Watch out for <a href="" title="Empty Table Cells" target="_blank">empty TDs</a>, as some email clients don’t handle these as you’d expect. Usually this issue can be fixed by adding an ” ” or non-breaking space character. You can control the size of this character using CSS so that it doesn’t mess with your layout.</p> <h4>Know your framework</h4> <p>There are a two popular approaches to coding an email layout. The most popular framework is usually called “responsive.” The basis of this technique is to start with a 100% width table (to which you can apply styles that will affect the whole email) and then floating (using align=”center”) a fixed-width table in the center of this wrapper. Using media queries, the width of this fixed-width can be adapted to various screen sizes. Our free <a href="" title="Get your free template" target="_blank">Seashells template</a> is a great example of this coding technique.</p> <p>The other popular framework is called hybrid fluid or “spongy” design. This technique uses container tables that are set to width=”100%” and constrained by a max-width style. On screens wider than the max-width, the table will reach its max and become no wider. On smaller screen, like tablets and phones, the table will naturally fill the available space. The “hybrid” part of this technique is that each table must be surrounded by a conditional table visible only to Outlook. The hybrid table has a fixed width, which solves the main problem with fluid design: Outlook ignores max-width statements. The main advantage of this technique is that it works pretty much everywhere, regardless of support for embedded styles or media queries. For more on hybrid fluid design, <a href="" title="Fluid Hybrid Design Primer" target="_blank">check out our primer</a>. We also have a few free hybrid fluid templates, including the <a href="" title="Get your free template" target="_blank">Coffee Shop template</a>.</p> <h4>Make sure code is well commented</h4> <p>Keeping our code well commented will allow for ease of editing templates. This is true of any kind of coding, really, but shouldn’t be neglected for email. Because email development is full of hacks and fixes for client quirks, it can be invaluable to note why a particular style or element was added.</p> <h4>Encode special characters</h4> <p>If your ESP uses a different kind of encoding from the kind you selected for your email, it may cause your special characters (like ©) to appear incorrectly, often as a black square or a diamond. This can even affect quotation marks and apostrophes. To avoid this problem, use a character encoder <a href="" title="Character Converter" target="_blank">like this one</a>, or the one that is included with the Email Editor.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn btn-lg btn-success" href="" title="Email Testing" target="new">GET ACCESS!</a></div> <h4>Keep email file size under 100kb</h4> <p>There are a couple good reasons to keep your email under this limit. One is that it will <a href="" title="Email file size and deliverability" target="_blank">pass through more spam filters</a> by staying light. Keeping your email under 102kb will also prevent Gmail from “clipping” your email, as shown in this <a href="" title="Gmail clipping emails" target="_blank">Adestra article</a>.</p> <p>To keep your email under the limit, consider removing redundant or unused styles, moving some of the content of the email to a landing page, or minifying your code before sending it out. Just make sure to test any changes before the final send!</p> <h4>Code for high DPI displays</h4> <p>High DPI displays such as Outlook 2010 on a laptop that is defaulted to high DPI can often cause issues when scaling email designs. This is because it will scale certain parts of the email (those with height, width, font-size and so on coded in px) but not other parts. To make sure your whole email scales properly, just follow the steps in our <a href="" title="Read it here" target="_blank">Coding for DPI Scaling in Outlook</a> blog.</p> <h4>Include preheader text</h4> <p>Preheader text is what you see after the subject of the email in many inboxes. This text is <a href="" title="Coding preheaders" target="_blank">easy to code</a> and can make a huge difference in open rates. Just make sure you don’t hard-code “default” preheader text into your template!</p> <h4>Avoid Javascript, Flash, forms and other complex CSS/HTML</h4> <p>Javascript and Flash are completely unsupported in email clients, so don’t use them at all. Newer code, such as HTML5 and CSS3 have limited support, but are sometimes possible (and fun!) to use. These enhancements should be used with caution. As always, test thoroughly when using any advanced code!</p> <h4>Use cellpadding for spacing</h4> <p>Cellpadding provides reliable spacing across all email clients. If you need spacing only on one side of an image or container, you may want to use another spacing technique. Check out our blog on <a href="" title="Read it here" target="_blank">spacing techniques in email</a> for more info.</p> <h4>Test test test!</h4> <p>Email coding is hard! Every email client has different quirks when it comes to rendering code. Outlook for desktop (2007, 2010, 2013 and 2016) can be especially challenging. The only way to know your email will look great everywhere is to test it. <a href="" title="Try us free!" target="_blank">Email on Acid can help you test</a> by generating over 70 screenshots of all the most popular email clients in less than 30 seconds.</p> <h2>Images</h2> <h4>Make images retina ready</h4> <p>Many devices now include “retina” displays. This means that they have more physical pixels than their CSS dimensions would otherwise indicate. A 10px wide image might use 20 or more physical pixels to display it. By using extra large images, we can make sure that they appear extra crisp on these displays. For more on this technique, read our articles about <a href="" title="How to make your images retina" target="_blank">retina images</a> in email and fluid retina images for email.</p> <p>If you include hard coded preheader text (usually in a field that can be modified), you will at some point forget to customize it and you’ll send out an email with preheader text like, “PREHEADER TEXT HERE.” What a faux pas!</p> <p>Instead, just include the “default” preheader text as an HTML comment. This way, other marketers and developers you work with can tell what purpose of that part of the code serves, but no recipients will see it if you forget to customize.</p> <h4>Use absolute addresses for images</h4> <p>You may be using local image references for your testing, but when you do your final send <a href="" title="Absolute image references" target="_blank">absolute image references</a> are an absolute must!</p> <h4>Seeing strange spacing around an image?</h4> <p>Use display:block and it will usually remove this extra spacing. This is actually a doctype issue.</p> <h4>Don’t use image maps</h4> <p>If you need to connect one image to multiple locations, you’re going to have to slice it. Put each slice in its own table cell, and then link the images. This can cause all kinds of havoc trying to get the slices to line up perfectly, so I would only do this as a last resort.</p> <h4>Background images take some extra work</h4> <p>This is because Outlook can’t handle the background attribute or backgrounds set through CSS. You’ll have to use <a href="" title="Vector markup landguage" target="_blank">VML to get backgrounds working in Outlook</a>, and even then it can be finicky. If you’re having a hard time, try using Stig’s <a href="" title="Button generator" target="_blank">button</a> and <a href="" title="Background generator" target="_blank">background</a> generators so that you don’t pull all your hair out.</p> <h2>CSS</h2> <h4>Use inline styles</h4> <p>Even with <a href="" title="Gmail now supports media queries" target="_blank">Gmail’s recent changes</a> to support embedded styles, including classes, IDs and media queries, you still need to inline styles. Some Gmail clients, like Gmail Android App for Non-Gmail Accounts (GANGA), still don’t support embedded styles. In addition to this, there are quite a few smaller email clients like <a href="" title="Testing in Yandex" target="_blank">Yandex</a> and <a href="" title="Tesing in Telstra" target="_blank">Telstra</a> that still require inline styles.</p> <p>To achieve this, you can code using classes and IDs and then make use of a CSS inliner. Email on Acid offers an inliner that you can use from any email test, or from within the <a href="" title="How the editor improves your workflow" target="_blank">Email Editor</a>.</p> <h4>Avoid shorthand CSS when possible</h4> <p>If you see problems with a client interpreting your CSS, check to make sure you’re not using a shorthand declaration. For example, “margin-top: 5px” may work where “margin: 5px 0 0 0;” does not. Especially avoid three-digit hex codes. Some clients don’t react well to these, so you’ll want to make sure you always use the full six-digit code.</p> <h4>Get used to !important</h4> <p>If you are a web developer, you may have been trained to avoid !important at all costs. When coding email, though, you’ll find this declaration can be invaluable. You can use it to override styles added or modified by the email client (especially web clients). You’ll also get a lot of use out of !important when writing media queries, where this declaration will let you override a default style with a mobile-specific one.</p> <h4>Get comfortable with media queries</h4> <p><a href="" title="What are media queries?" target="_blank">Media queries</a> are commonly used to create custom styles for different clients or screen sizes. The basic format of a media query for email is:</p> <pre><code class="language-markup">@media only screen and (max-device-width: 640px){ styles here }</code></pre> <p>This will cause the styles contained in the query to trigger only on screens of 640px or smaller. “Min-device-width” would do the opposite, triggering on screens of 640px or larger.</p> <p>The most common uses of this technique are to control font sizes, image sizes, and to make some tables become 100% width so that they will fill a mobile screen. You can also use media queries to hide content that isn’t necessary for mobile users. Just make sure that you use !important on styles within the media query, so that they will overwrite existing styles. <a href="" title="Read it here" target="_blank">Click here</a> for more on using media queries in HTML email.</p> <div class="hr space"></div> <h3>What best practices do you follow?</h3> <p>We’re always looking for more tips to add to our list! What best practices do you follow when developing emails?</p> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> </div> </article><hr> <!--Start Pagination--> <!--End Pagination--> </section><!--#latest-posts--> </div> </div> <aside id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype=""> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="" placeholder="Search the site" /> <button id="search-image" class="sbutton" type="submit" value=""> <i class="fa fa-search"></i> </button> </fieldset> </form> </div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li> <a href="">Relationships Are Hot; Acquisition is Not</a> </li> <li> <a href="">Digital Marketing Conference in the “Mile High” City</a> </li> <li> <a href="">New Research: How Does Reputation Impact Deliverability?</a> </li> <li> <a href="">Our Consumer Network Data: The Top 10 Things You Need to Know</a> </li> <li> <a href="">Maintaining Data Privacy in a Data Driven World</a> </li> </ul> </div> <div id="recent-comments-2" class="widget widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></div><div id="archives-2" class="widget widget_archive"><h3 class="widget-title">Archives</h3> <ul> <li><a href=''>July 2017</a></li> <li><a href=''>June 2017</a></li> <li><a href=''>May 2017</a></li> <li><a href=''>April 2017</a></li> <li><a href=''>March 2017</a></li> <li><a href=''>February 2017</a></li> <li><a href=''>January 2017</a></li> <li><a href=''>December 2016</a></li> <li><a href=''>November 2016</a></li> <li><a href=''>October 2016</a></li> <li><a href=''>September 2016</a></li> </ul> </div><div id="categories-2" class="widget widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li class="cat-item cat-item-1"><a href="" title="Acid on Email tests your emails across the most popular clients, apps and devices, then measures the performance of your emails">Email Development</a> </li> <li class="cat-item cat-item-4"><a href="" >Random</a> </li> </ul> </div><div id="meta-2" class="widget widget_meta"><h3 class="widget-title">Meta</h3> <ul> <li><a rel="nofollow" href="">Log in</a></li> <li><a href="">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="" title="Powered by WordPress, state-of-the-art semantic personal publishing platform."></a></li> </ul> </div></aside><!--#sidebar--> </div><!--#page--> </div><!--.main-container--> <footer id="site-footer" role="contentinfo" itemscope itemtype=""> <div class="container"> </div> <div class="copyrights"> <div class="container"> <!--start copyrights--> <div id="copyright-note"> <span><a href="" title="" rel="nofollow">Acid on Email</a> Copyright © 2018.</span> <div class="right">Theme by <a href="" rel="nofollow">MyThemeShop</a></div> </div> <!--end copyrights--> </div><!--.container--> </div><!--.copyrights--> </footer><!--footer--> </div><!--.main-container-wrap--> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> </body> </html>