Gmail Update: Support for Embedded Styles and Media Queries has Arrived!

It’s finally here! It’s like Christmas in September for email developers!

Gmail has just released a bevy of important updates to their email client, bringing it into the 21st century and enabling email developers everywhere to leave behind old tools and techniques. Earlier, we provided some analysis on the Gmail announcement. This blog details what we’ve found out now that the changes are live.

We’ve so far been able to confirm that Gmail and Inbox Webmail have received the updates, as well as the Android apps for Gmail and Inbox. The iOS apps for Gmail and Inbox have not yet gotten these updates, nor has Google Apps for Business (also known as G Suite).

What we already knew

Gmail now supports embedded styles, classes, IDs and media queries

Together, these updates unlock the full power of responsive design for all users of the Gmail app. If Media Queries had been enabled with no support for Classes and IDs, email devs would have been left jumping through a lot of hoops to make their emails properly responsive. By including all of these updates in one bundle, Gmail has really taken their email client to the next level. You can read more about these changes in our earlier post on the Gmail update.

For now, these changes only affect Gmail webmail and the Android Gmail and Inbox apps, but we expect them to be rolled out to iOS soon. The only place that we haven’t seen these changes would be with Gmail Android App for Non-Gmail Accounts (GANGA), usually with POP/IMAP. That is, somebody using the Android Gmail app to connect to an account that’s not a Gmail account, such as Yahoo! or Outlook.com. This is a pity as we’ll still need to inline our CSS until Gmail rolls out the changes for this configuration. GANGA accounts may get to benefit from these new updates soon, so we’ll update this blog if anything changes.

Animations, transitions and transforms aren’t supported

These enhancements can be a great way to increase engagement and create dynamic email, so we were sad to see that support wasn’t included in the update.

What we discovered

We did some sleuthing in the Gmailweb app and these are some of the changes that were not mentioned in the original announcement.

Gmail no longer auto-resizes content

Yes, we’ve confirmed that Gmail has gotten rid of this irritating “feature” on its Android apps, and it will probably be rolled out for iOS soon. You can then abandon the Gmail non-breaking space fix. With media queries are enabled, email devs have the power to control the appearance of their emails on mobile and no longer need Gmail’s “automatic” resizing.

Attribute selectors are not supported

While these can be useful for a number of email techniques, they aren’t required for responsive emails. Just make sure you aren’t still using the outdated attribute selector hack for Yahoo! Mail. Now that Yahoo! Mail correctly supports media queries, it isn’t needed any more.

Gmail no longer converts CSS height to min-height

This was an existing issue, but wasn’t too much of a problem when the client was non-responsive. Many emails are coded with height and width attributes on images that are then overridden in the CSS styles to make them responsive. For example:

When height:auto is converted to min-height:auto, it no longer overrides the height attribute and results in a variable width but fixed height image in mobile. That can look really bad!

Luckily, this has been fixed the height style is no longer converted to min-height, helping to make sure images will look good on mobile without extra workarounds.

Pseudo classes mostly aren’t supported

Pseudo classes include things like :hover and :checked. This means that Gmail isn’t going to have much support for interactive email in the near future. However, the good news is that most non-interactive email templates don’t make use of these classes. The one exception here is that :hover appears to be supported in Gmail webmail only. That will be a welcome addition for those devs who like to have pretty buttons!

Gmail removes all CSS in block if it exceeds 8192 characters or if it contains errors or nested @ declarations.

If there is even a slight error in your CSS or the total CSS code in the block exceeds 8192 characters, Gmail removes the entire block. So if you find that your embedded styles are not working make sure to check that its free of typos or that it is not too long.

Rémi Parmentier discovered that Gmail will strip the block if it encounters an @ declaration within an @ declaration. This means Gmail will remove all your CSS in a style block if you have @font-face or @import within a media query (@media) block. If you need to nest @ declarations, put it within a separate block so it won’t affect the rest of your styles in Gmail. 

Image blocking breaks class and ID styles

This one is a big problem, but will probably be resolved soon. If a user has image blocking enabled (not the default option), when they download images it will break all class and ID-based styles in the email. This is because of the Gmail prefix being applied to all classes and IDs inline, but not in the embedded styles. When the switch to display images is hit, the classes and IDs inline will no longer match the classes and IDs in embedded styles. Because image blocking is not the default option for Gmail users, hopefully this won’t affect too many people. The solution? Keep inlining for now. Thanks to Mark Robbins for pointing this out.

You can write CSS that targets Gmail

Thanks again to Mark Robbins there is a technique you can use if you want to target your CSS just for Gmail. Its quite a hack but you can see the technique in this article.

It’s all happening

Gmail is listening to the email community and making huge improvements. This, combined with the recent Microsoft announcement, shows that big things are in store for email!

I really respect the fact that Gmail got in there and started making improvements so quickly, and I look forward to seeing the changes that Microsoft will bring about with their new feedback feature. 2017 could be a huge year for email, if this is any indication.

All hail the return of responsive!

The debate around “Is Fluid Hybrid dead?” is raging amongst email devs even as we speak. My take on this is that (if you’re not worried about GANGA accounts) you can safely switch back to responsive design and abandon hybrid fluid now that Gmail has made this change. While it might look better on a few regional clients, it’s just as likely to look bad on some! Responsive code is a lot cleaner and lighter than fluid hybrid, so I’m excited to do away with conditional tables. Hopefully GANGA accounts will get these updates soon, and then we’ll really be free to go responsive.

Need a new responsive template? We have tons in our Resources section, free to download! Just sign up for our Community and start perusing free templates.

What are your thoughts on the Gmail update? Is fluid hybrid dead? Let us know in the comments below!

Coding for Windows 10 Mail App

The Windows 10 Outlook Mail app is set to become one of the most used email clients on desktop. This app comes free with Windows 10, a new OS which Microsoft has been pushing Windows 7 and 8 users to upgrade to. As time goes on and more people buy Windows 10, we’ll see more and more opens happening on this app.

I’ll be offering a high-level overview of the challenges this email client offers. For in-depth coverage of the quirks of this email client, make sure to check out James White‘s excellent blogs on the Mail app: first look, HTML email deep dive and his update on recent changes.

What’s in a name?

This app is called “Mail” on Windows 10 desktops, and Microsoft often refers to it as “Mail and Calendar for Windows 10.” In other places, it’s referred to as “Outlook Mail for Windows 10.” It has an envelope icon on Windows 10 desktop, but has a different icon for its listing in the app store.

I’ll use the name Outlook Mail app from here on out.

What rendering engine does it use?

As James covered in his post, this app used two different rendering engines! Microsoft Word was the rendering engine for POP3/IMAP mailboxes (much like Outlook 2016, 2013, etc.), but Exchange/Office 365 accounts didn’t use the Word rendering engine.

As I began testing, I found that things have changed. After a recent Windows update, it seems that all account types are now using the Word rendering engine.

Word supports conditional CSS, and for the Outlook Mail app, that means you can target it with:


Outlook 2016/Outlook Mail app

Of course, your standard declarations will also work, because MSO version 16 is greater than 9. For more on Outlook conditionals, read MailChimp’s handy article.

The mobile dilemma

While it’s great for desktop users that the Outlook Mail app supports MSO conditionals for all account types now, it’s not so great for mobile users. Anybody using this app on a Windows Phone will find that the MSO conditionals still work perfectly there — forcing their emails to display as they would on a desktop, but with only a tiny mobile screen to view it.

This is because most MSO conditionals have been used to hard-code widths for desktop only. Inside of this conditional code a hard width is set for the container, often at something close to 600px. On a desktop that works out great, but on a mobile screen it’s way too much. There’s not much that can be done about it at the moment, as Outlook doesn’t support media queries and there’s no other way to differentiate the mobile app from the desktop app.

HTML Support

In general, Mail’s support for HTML is pretty similar to Outlook 2016, or even Outlook 2013. This is probably because it’s still using the Word rendering engine.

Max-width

For fluid templates, this style is a must have. It’s not supported in the Outlook Mail app, which means that all 100% width containers will blow out. As with Outlook 2016, 2013, 2010 and so on, this can be fixed with MSO conditional code.

Margins

Margins may not always work as expected. For example, margins on images have no effect on the layout of the email. Margins on paragraphs and tables should work properly. As always, test to be sure that the email renders as expected.

Animated GIFs

As with previous versions of Outlook for Windows, animated GIFs are not supported, and only the first frame is shown.

Backgrounds

Here is one place where support is worse than it used to be. Backgrounds using inline or embedded styles, HTML attributes or even VML do not render in Outlook Mail app. In fact, VML causes the email to show a broken image box with a red X in the upper left corner. This is pretty disappointing, as VML was only adopted by email devs to get backgrounds to show in Outlook.

Background colors are supported.

Border-radius

This commonly used CSS style still isn’t supported in Outlook Mail app. You’ll have to have square buttons for now.

Fonts

Standard fonts can be used with Outlook Mail app, but custom fonts using @font-face won’t be supported. This client will also give you the annoying Times New Roman bug, but don’t worry, any of the 4 fixes detailed in our recent blog will prevent it from doing this.

DIVs

As usual, divs have spotty support in Outlook Mail app. They still can contain text and provide a few useful functions, but they can’t be given a defined height or width, or changed display: inline-block.

Floats

These are right out. Stick to tables with align=”left” instead.

Support chart

Check out our handy chart for what’s supported and what’s not when it comes to common HTML and styles.

Windows Mail app support

Element or Style 365 Hotmail Comments
max-width
mso conditionals An update may have made MSO conditionals work in both versions
text-decoration: none Limited Limited This is supported in embedded CSS but not inline
in head
in body
classes
IDs
padding
margin Limited Limited Margin appears to work but doesn’t always create spacing
      border-radius
      border
      line-height
      font-family Has the Times New Roman bug that Outlook desktop shows
      font-size
      Animated GIFs First frame only

      CSS inline background
      HTML attribute background
      VML Background
      DIVs Limited Limited Divs are block level, cannot be inline block or have borders or defined size
      background-color
      @font-face
      font-decoration
      IMG Image size can only be determined with the width/height attributes

      Found any interesting quirks?

      Feel free to comment on the blog and I’ll check them out! Or head over to our forum if you have a question that requires code samples or a lot of detail.

      6 Creative Ways to Use Social Media in Your Email Campaigns

      We’ve all seen articles toting claims like, “Email is Dead!” or “Marketing on Social Doesn’t Work.” Well folks, neither is dead and they aren’t going anywhere.

      For marketers, email will continue to be the key communication channel for acquiring leads and customers as you get a $39.40 return on every $1 invested. While social is nowhere close to that yet, it still has such a broad reach that you’re throwing money out the window if you neglect potential prospects on this medium. That’s why it’s advantageous to blend these channels and have them work together, instead of against each other.

      By using these channels together, you can:

      • Extend the reach of your campaigns.
      • Grow your social and email list.
      • Identify key influencers.

      In this blog, we’re going to break down how you can incorporate social elements in your email campaigns. From the basic, social icon in the footer to embedding live feeds in your campaign, read on for some great marketing techniques.

      Include Social Icons

      Before we jump into more creative ways to integrate social techniques in your email, let’s start with the “must-have” technique: social icons. Your email should always have your social icons so your audience can connect with you on all your platforms, not just one. Since getting a new like or Twitter follower isn’t typically the focus of the email, it’s better to put them near the footer as to not distract from the #1 goal of the email.

      Also, incorporate a CTA with the social icons. Instead of just slapping them in your footer, give them incentive to follow you on these other channels. For example, in the email from West Elm they say, “Show your personal style with #MYWESTELM.”

      You can bet that if someone made it to the very footer of the email, they are interested in the brand and may want to engage on multiple platforms. Also, by providing a hashtag to use on the social platforms, West Elm can easily track the social engagement they’re creating from their campaign.

      Use Social Share Buttons in Newsletters

      Share buttons differ from just embedding your social icons in your template. This is when a marketer includes an option for the subscriber to share the entire email or a specific content block with their social networks from one button.

      According to GetResponse, emails with share buttons have a 158% higher click-through-rate than those without. The five share buttons with the highest CTR are Facebook, Twitter, LinkedIn, Pinterest, and Google+.
      A great tip when using social share buttons in your email is to make sure there is an HTML webpage copy of your email. Then, code your buttons to share the HTML page. It would be poor form to make users visit a separate html webpage and then hit a “Tweet” button in order to share your content or promotion with others.

      Fancy, a social photo sharing webstore, emails their customers with things they may want to purchase. While this may look like a run-of-the-mill group of social sharing buttons, it’s better than most because at the end it explicitly says, “Share this email.”

      This is extremely helpful because then your readers won’t mistake it for a social icon that they’d click on to follow the company. In the email below Scoop.it decided to put the share icons at the top. It is unclear in this email whether these icons are in fact for social sharing of this email and not just following icons. You want to ensure you are clear.

      Host a Contest

      Sometimes it’s not enough to get your email list to engage with you on social by just politely asking. That’s why you need to offer a compelling incentive that encourages engagement on your other platforms like Facebook.

      Daskalides Chocolatier ran an awesome email campaign that personally incentivized their readers to hop out of their inbox and on to Facebook.

      Not only is the email itself beautifully designed, they are also offering an awesome incentive and making it into a game. People are more willing to engage with a brand if it seems fun and light-hearted.

      Add Social Elements on Your Email Unsubscribe Page

      Even though someone is bidding your email campaigns adieu, that doesn’t mean they don’t want to hear from you outside of their inbox. Add social icons to your unsubscribe page so they can follow you on their preferred channels.

      Habitat’s email unsubscribe page executes this tactic flawlessly with the text that reads, “We noticed you’re not loving our emails, so why not like us on Facebook instead?” Conversions happen out of the inbox too, so make sure you’ve got the net in place to save prospects.

      Include Social Proof in Your Campaign

      Social proof, also known as informational social influence, is a psychological phenomenon that occurs when an individual looks to other people’s actions to determine what decision they should make. According to CompUSA and an iPerceptions study, “63% of consumers indicate they are more likely to purchase from a site if it has product ratings and reviews.”

      In email marketing, social proof is a must. Sure, you have an incredible offer (product, service, etc.), but you need real people singing your praises to convince others. Below, MarketingProfs did a great job with a customer testimonial to show what a PRO membership can do for you.

      Bottom line: As an increasingly social culture, people want to feel validated by knowing that others find value in the product or service they are considering. Ease their minds and create an environment where that decision is a no-brainer with social proof.

      Code Live Social Feeds into Your Email

      This is one of the more innovative and unique ways to incorporate social and email. In order to achieve a technique like this you will need some coding experience and a platform to run a lot of email tests on! This hack in your template will require you work with dynamic CSS as well as being able to implement fallback strategies.

      Check out this awesome example below from the Financial Times.

      At the very bottom of the email they coded a live Twitter feed of the U.S. election coverage. This is a great use of this coding technique on an incredibly timely and topical subject.

      Social Components? Check! Now What?

      From coding your social icons into your footer to more advanced techniques of live feeds in your campaign, they all have one thing in common: you absolutely need to test these social elements in your campaign before you hit send.

      In need of a testing solution that doesn’t require you open your email on 20+ email clients and different devices? Try Email on Acid, free for 7 days, to get unlimited email, image and spam testing!

      Yandex Webmail Testing: What You Need to Know

      Launched in 1997, Yandex is a Russian multinational technology company specializing in Internet-related services and products, including email. Email on Acid is proud to announce that we support email testing in this client.

      The Yandex search engine boasts a huge market share of over 55% in Russia. They also have a large presence in Belarus, Kazakhstan, Ukraine and Turkey. If you’re sending to recipients in Russia, it’s safe to say you’ll see a fair number of Yandex addresses.

      In this post we’ll see how it copes with some of the most common email techniques. If you’d like to skip straight to the support, you can find a table at the bottom of the post.

      The Good

      I tested the same elements as that I tested in our post about Telstra webmail to see how Yandex stood up overall. The support for most HTML elements, much like with Telstra, is good. Here’s what I found.

      Headers and Paragraphs

      Semantic HTML markup is very helpful when trying to increase the accessibility of an email. Luckily, Yandex will render both header and paragraph tags without the spacing going awry:

      Header

      paragraph

      Spacing

      Yandex has a good amount of support for various ways we control spacing in email. Padding, cellpadding and margin are all supported with the following methods being tested:

      padding: 20px;  
      padding-left: 20px;  
      padding-right: 20px;  
      padding-top:20px;  
      padding-bottom: 20px;  
      padding: 20px 0px 20px 0px;

      One thing to note is padding does not seem to be supported on a table container, only the cells within. So bear that in mind when controlling your layouts with padding.

      Borders

      Good news on the border front. Yandex supports the border property when tested with this code:

      border: 5px solid #ff0000; 
      Border-radius: 5px;

      A fun little element to use in email, border-radius enables us to use rounded corners without images. Yandex will render your border radius as expected.

      Font and Text styles

      Yandex does support our commonly used font styling techniques. Pretty standard stuff, but good to have. We tested with the following code:

      font-size: 14px;  
      font-family: sans-serif;  
      line-height: 16px;

      Animated GIFs

      I love animated GIFs, and I’m happy to say so does the Yandex email client. No quirks here as it’ll render them perfectly.

      Background colours

      Background colours also render well in the Yandex webmail. In terms of adding colour you have the freedom to do it with either HTML attributes or inline CSS:

      HTML: background="#ff0000"
      CSS: background-color: #ff0000; 

      Max-width

      A must-have for Fluid Hybrid layouts, max-width support is working with Yandex just as you’d expect it to:

      max-width: 600px !important;

      Lists

      We find that both ordered and unordered lists work:

          The Bad

          Unfortunately, Yandex does have a few issues with how it renders email which we’ll break down now.

          Background Images

          In our testing, we found that neither CSS nor HTML background images will work. I tested multiple methods of applying the background image and could not achieve the desired results.

          in the head and body

          Yet again we find that a webmail client doesn’t support embedded styles. tags in the head or body, with the head section of the email being stripped entirely. This has some ripple effects such as not supporting animated CSS, but the big thing is that we have no ability to use classes or IDs. You’ll want to use a CSS Inliner, like the one we offer with our Email Editor tool.

          This has some serious implications as you can see in the reference table below.

          Yandex Support

          Element/Style Support
          in head
          in body
          CSS Selectors
          classes
          ids
          padding
          margin
          border-radius
          border
          line-height
          font-family
          font-size
          max-width
          Animated GIFs

          CSS inline background
          HTML attribute background

          Closing words

          Overall the Yandex webmail client is your standard webmail email client, it features a lot of good support for “fun” elements such borders, animated GIFs and border radius. However, the lack of in the head is a big drawback, as is the lack of background images. Do you send to Yandex? Have you found some weird quirks? We’d love to hear what you find so we can keep this guide updated.

          It’s important to test emails constantly, we never know when an email client will change how it handles code. Yandex is included in our suite of email clients to test on, so if you’re sending email to Russian recipients, we’ve got you covered!

          Four Interactive Email Fallback Strategies

          One of the really exciting things to happen to email over the past few years is the introduction of interactivity and animations in email using CSS, or what’s being called kinetic design. However, due to email clients having varying CSS support, it is important to ensure that your email still renders nicely in clients that aren’t able to handle advanced CSS by providing fallback content.

          This article will go over various fallback methods to handle clients that are not so “capable.”

          Fallback Strategies

          We’ll go over the specific fallback techniques later in the article but for now let’s go over two common approaches to handling fallback content.

          1) Separate Content for Interactive and Fallback

          The easiest way to handle different email capabilities is to display different content depending on capabilities. This method is familiar to those who develop responsive email where certain content is shown to a user in the desktop version and different content is displayed in the mobile version.

          The downside of this approach is the potential duplication of content as links, images and text in one content block may also appear in the other content blocks.

          In general, what goes on is that we display the fallback content block and hide the interactive content by default. Then, in the style block, we use CSS selectors and media queries to hide the fallback block and display the interactive block in clients that support interactivity. An example of this is the Pret campaign in the graphic below.

          Here’s a simple example that shows how to enable an interactive block only in webkit-based clients:

          
          @media screen and (-webkit-min-device-pixel-ratio: 0) {
                  .fallback {
                      display:none;
                      display:none!important;
                      max-height:0;
                      overflow:hidden;
                  }
                  .interactive{
                      display:block!important;
                      max-height:none!important;
                  }
          }
          
          
          
          This is displayed by clients that aren't Webkit based.
          This will only be displayed in Webkit based clients.
          <!--

          If you’re wondering why I used all the redundant hiding CSS styles, this article will shed the light on why it is necessary.

          2) Switching Between Interactive and Non Interactive Layouts

          The advantage of the previous strategy is that having separate interactive and fallback versions is straightforward and easy to implement. However, the drawback is that you may have duplicate content. An alternative approach is to merely change the layout of elements when rendered in a client that supports interactivity.

          Here’s an interactive carousel tutorial written by Geoff Phillips featuring three content blocks. When viewed in a non interactive client, the content blocks are displayed in stacked order. But when viewed on a client that supports absolute positioning, the content is displayed in a carousel.

          While a bit more complicated to pull off, for content heavy elements, the savings in email size may be worth it. Another example of an email that used this approach is the B&Q email below where the same content blocks are laid out differently based on the support of interactivity and absolute positioning. Unfortunately, the HTML of the email is no longer available.

          3) Hiding Just the Interactive Elements

          The other method of developing fallbacks for email is simply by hiding the interactive elements in non-interactive clients. For example, if the interactive element is a carousel with thumbnails at the bottom, hiding those thumbnails by default and displaying them in interactive clients is one way to handle fallbacks without creating a separate block for the fallback content.

          4) Do Nothing

          Certain interactive elements will fallback automatically such as rollover images. A rollover image within an email client that does not support the :hover pseudoclass will just be a static image. Similarly, if you’re applying CSS entrance effects to certain elements that are already visible in the email, these effects will simply not execute in clients that don’t support CSS animations.

          Fallback Techniques

          The Clients

          Before we go into the actual fallback techniques, it helps to understand the limitations of the various clients. The list below is not exhaustive and you can see more details about each client here.

          Interactivity Support

          Email Client :checked, :hover Animations Notes
          iOS Mail App Supports absolute positioning, webkit based.
          Gmail, Inbox by Gmail Gmail webmail used to support :checked but with the latest update only supports :hover. Gmail Apps on iOS and Android do not support :hover or :checked.
          Yahoo! Mail Supports max-width media queries.
          Outlook.com/Office 365 The new version of Outlook.com dropped support for :hover and does not support media queries.

          Outlook.com also inexplicably mangles your HTML if you have checkboxes in your email so be sure to keep that in mind.

          Outlook 2007-2016 Does not reliably support display:none. Best to use conditional comments to hide content.
          Apple Mail Best support for interactive email.
          AOL -webkit-min-device-pixel-ratio: 0 media query will trigger in AOL Mail when using a webkit browser like Safari or Chrome.
          Samsung Android Client Webkit based client but inexplicably does not support absolute positioning.
          Use #MessageViewBody to target the client and hide absolute positioned content.
          Thunderbird Non webkit based client (so uses -moz-device-pixel-ratio instead of -webkit-min-device-pixel-ratio) and has strange quirks with form elements. Use .moz-text-html to target the client.

          Use Pre-Checked Checkbox to Determine :checked Support.

          This technique is covered in this interactive shopping cart example where fallback content is displayed for clients that don’t support the :checked selector.

          The method to determine :checked support is to place a checked checkbox above the element containing the interactive content and then to display the content using the :checked and (+) sibling selector (note Gmail “lang” attribute selector hack added as well) to display and hide content.

          The following is an example code. (When dealing with checkboxes, always keep in mind the Outlook.com checkbox bug).

          
          .cbox:checked + .interactive,
          * [lang="x-cbox"]:checked + [lang="x-interactive"]
          {
            display:block !important;
            max-height: none !important;
          }
          .cbox:checked + .fallback,
          * [lang="x-cbox"]:checked + [lang="x-fallback"]
          {
            display:none !important;
            display:none;
            max-height: 0px;
            overflow: hidden;
          }
          
           
          
          
          
          FORM CONTENT
          <!-- <!--
          FALLBACK CONTENT

          Use -webkit-min-device-pixel-ratio Media Query To Target CSS Animation Support

          If you want to display or hide content that depends on CSS animation capability, the simplest way is to target Webkit clients. Certain webmail clients such as AOL Mail allow -webkit-min-device-pixel-ratio so you may want to take that into account. However, AOL Mail also supports more CSS than most other Webmail clients so that may not be an issue.

          However if all you are doing is adding simple animation effects to existing elements, then this is safe to use.

          @media and (-webkit-min-device-pixel-ratio:0){
             ….
          }

          You can also use the max-device-width filter with the -webkit-min-device-pixel-ratio filter  if you only want to target mobile or tablet clients – specifically iOS. This can be handy as there are some webmail (specifically AOL Mail and Comcast) that will also trigger the -webkit-min-device-pixel-ratio media query but not allow certain CSS like animations.

          @media and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px){
             ….
          }

          Things Don’t Stay the Same

          Although the fallback techniques work at the time of writing, email clients are constantly changing and sometimes it causes techniques to no longer work. So if you’re building a particularly advanced kinetic email design, make sure you do early tests on the main clients before going down the road and realizing your design may no longer work on certain clients.

          Telstra Webmail Testing: What You Need to Know

          Telstra, previously referred to as BigPond, was founded in 1996. It’s now one of Australia’s largest ISPs, employing over 10,000 people and boasting over two million users.

          If you send email to any Australian subscribers, Telstra will need to be on your radar. Email on Acid offers email testing in Telstra so that you can make sure your email looks perfect every time.

          In this post we’ll see how it copes with some of the most common email techniques. If you’d like to skip straight to the support, you can find a table at the bottom of the post.

          The Good

          I’m happy to report that there are a lot of things in the Telstra email client that render well. Here’s a breakdown of what we found:

          Spacing

          We have a lot of control over the spacing in email. Cellpadding, padding and margin are all supported and work as expected. In terms of padding, the following methods of padding are all supported with your desired padding amount:

          padding: 20px; 
          padding-left: 20px; 
          padding-right: 20px; 
          padding-top:20px; 
          padding-bottom: 20px; 
          padding: 20px 0px 20px 0px;

          Borders

          More good news! Telstra also supports the border property when tested with the following code:

          border: 5px solid #ff0000;

          For a bit of fun, I tested the dashed border which also works.

          Headers and Paragraphs

          Telstra excels in accessible code, with paragraph and header tags both being supported:

          Header

          Paragraph

          Backgrounds

          Backgrounds also render well across the Telstra webmail. In terms of adding colour you have the freedom to do it with either HTML attributes or inline CSS:

          HTML: background="#ff0000"  
          CSS: background-color: #ff0000;

          When it comes to background images we are slightly more limited, but not by much. We’ve found that inline CSS backgrounds will work, however HTML backgrounds won’t render. All that means is you must use;

          background-image: url(images/image.jpg)

          rather than

          background="images/image.jpg"

          Animated GIFs

          Animated GIFs have long been a staple of email design and development and I’m happy to say that Telstra will render your lovingly crafted animated GIFs and they will loop accordingly.

          Max-width

          Good news for your hybrid layouts! Max-width, combined with percentage based widths, works as expected:

          width:100%; max-width:600px !important;

          Font and text styles

          We have some good support for different text elements and styles we employ in email. The following styles are supported:

          font-size: 14px; 
          font-family: sans-serif; 
          line-height: 16px;

          Lists

          A very basic element but we find that both ordered and unordered lists work:

              The Bad

              Unfortunately, it’s now time to go through the negative aspects of the Telstra email client and what it won’t render.

              Border-radius

              A little fun element which sadly won’t work in Telstra, border-radius will not render. No rounded corners for us, but it will fall back in the same way Outlook clients do.

              in the head and body

              This is where it gets grim, guys. There are a few other small things but this is a huge one: as it currently stands the Telstra web mail client will completely strip the section of your email. This has some ripple effects such as not supporting animated CSS, but the big thing is that we have no ability to use classes or IDs.

              Unfortunately, that has some serious implications as you can see in the reference table below. It’s not the end of the world for email in Telstra, just make sure to test and inline all your elements to ensure your email works on Telstra.

              Telstra Support

              Element/Style Support
              in head
              in body
              CSS Selectors
              classes
              ids
              padding
              margin
              border-radius
              border
              line-height
              font-family
              font-size
              max-width
              Animated GIFs

              CSS inline background
              HTML attribute background

              Closing words

              Overall the Telstra email client seems to be a rather robust email client, it’s a shame that it won’t render any content in the of the email, but that’s something we can forgive for the overall support for most of our commonly used email elements. Do you send to Telstra? Have you found some weird quirks? We’d love to hear what you find so we can keep this guide updated.

              It’s important to test emails constantly, we never know when an email client will change how it handles code. We’ve introduced Telstra to our suite of email clients to test on, so if you’re sending email down under, we’ve got you covered!