Join Chris Converse for an in-depth discussion in this video Testing your email in 30+ HTML email clients, part of Creating a Responsive HTML Email.
Now if you currently use an email system to deploy out your emails, you probably have a way to test for different email clients to see if your html email is rendering properly. If you don't have an email service, there are plenty of services out there that will not only deploy your email messages but also test them across a bunch of different devices. So online there's quite a few popular services. There's ActiveCampaign, Campaign Monitor, Email on Acid, Litmus, MailChimp, and Constant Contact. For this particular course, I'm going to focus on Litmus. All of these are paid services, but as I've mentioned before, if you're using a service like Constant Contact or Campaign Monitor, for example, they have built-in testing services as well.
So, Litmus has the ability to show us screenshots from 34 of the most popular email clients and we get a live representation on the website of how our email is rendering through all of these individual email clients. This will also give us the ability to make sure that our responsive design is working, as we can see on the left which is a screenshot from IOS and Android. And we can even see some rendering problems, where some email clients don't support the proper padding, and sort of the content area. They use small CSS screen rules, even though the size of the window is clearly the large size. And even cases where some graphics are getting clipped because they're not supporting the background size attribute we put in.
Now inside of the litmus environment we can see that we have our email clients grouped into three categories. Desktop email clients and we can see Apple mail, Outlook, Lotus Notes, Thunderbird. Scroll down a little further we can see mobile email clients, Android 2.3 and 4, Blackberry, iPad, Outlook.com, which is a web-based client running on mobile devices. Symbian and Windows 7 5. And then down here we can see web based clients, including AOL, Gmail, Outlook.com, and Yahoo.
So in order to see some of these, we can simply come down and click on one of the emails. And this will bring up a screen shot from a computer that's running AOL mail in Firefox. And show us exactly what that email renders like, in that particular client. Now, one of the things we talked about in the introduction was the fact that we're going to have a design that will gracefully degrade. So if we're looking at a screenshot from Outlook 2007, for example. In here, we can see some examples of some of the features that we put into place not being supported. So we don't get the rounded corners on the learn more button.
We don't get the dropped shadow. And we don't get the ghosted background behind the content area here. And if we scroll down, we can see that the padding's not supported on the anchor text either. But again, we designed this in such a way that if certain design elements fell away or degraded, the continuity of the overall design still remains intact. Now another problem area for this particular email is Lotus Notes 6.5, 7, and 8.5. Lotus notes 8 renders perfectly. But there's something about 65, 7 and 8.5 that's not supporting the padding on these individual elements here.
And later on in the course I'll give you some suggestions in case you need to support these email clients. Another interesting quirk is on Windows 7.5. It doesn't support the responsive design techniques, but what it does do is scale the entire viewport. So, while we don't get the benefits of the responsive design, rearranging the screen, we do see the entire composition scaled down inside of the view port. Now if we look at our design inside of Gmail, the layout works perfectly, however Gmail does not support responsive design. So if we load our email through Gmail on a mobile device, Gmail will not honor the responsive design rules.
So we'll still get horizontal scrolling, even though we're on a device that if it were using it's native email application would support the responsive design techniques. Now a web based email client that will give us some problems with responsive design is Yahoo mail. As you can see the window size here is much larger than 510 pixels. However, Yahoo mail is referencing the smallest screen size in our media query that 's set for 510. So as I scroll down you can see that all of the design styles that we put in the smallest screen size media query, is now showing as the large screen inside of Yahoo mail.
Now I did set the media query for the smaller screen to be as low as 100 pixels, just to see if there was a minimum threshold on the size here that was making Yahoo use the small screen size. And even setting the smaller screen to 100 pixels gave me the same results here. So while all the other email clients either just had problems rendering the HTML email in general, none of them had a problem with responsive design rules like Yahoo mail does. So if Yahoo mail's one of the clients that you have to support, I would recommend not putting in some of the responsive roles, so you can use the same exact layout that we've been working out in this course and just don't apply the responsive roles.
And we'll talk more about that later in the course with suggestions for Yahoo Mail. And the last problem area I want to take a look at is BlackBerry 5. We can see here this has a full graphical email client inside of it. But you'll notice that the td tags on all of the individual rows aren't expanding to be the width of the full table they're inside of. Now this is not typical behavior for td tags and later on in the course, I'll offer suggestions for what you can do to modify the code to work in Blackberry 5. And with the exception of just a few HTML email clients, you can say that this design, with its complex design and nested tables, is rendering properly in most of the common email clients that are being used today.
And now for the remainder of the course, I'll talk about some suggestions that you might want to consider for Yahoo Mail, Blackberry 5 and Lotus Notes.
This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
Q: What are the sizes of the images used in this course?
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."