I'm an avid user of caniuse.com for web. Not a particular fan of the visuals, but one thing that i love about it is that you can tell how safe is to use a property at a glance. Besides the green coloured table, the support percentage on the top-right corner is also handy.
Maybe some kind of label system on top of each property collapsable list could tell us the "safetiness" of a property at a glance on most used email clients, with the current padding we can't get that effortlessly.
Once again, thanks for the hard work!
This is super helpful feedback—thanks, Renato :) I replied on the blog too, but in case you don’t see it there: I’ve made a note of this as a potential future improvement.
Initial reaction: NOOOOOOOO!!! It used to be so easy :(
You'd just look at the left hand side, or press ctrl+f and start typing the name, and you'd see everything you needed.
Looks like you dropped the table model because there's too many client types. Just because the table is getting too big, doesn't mean you should drop the format. There are other solutions (only show relevant dimensions? example: only the "doesn't work in [x]", drop the "works in [x]")
I have to scroll within the content of one dropdown because it is taller than my screen, causing me to not be able to see what I'm looking at anymore (terrible for quick referencing or back-and-forthing between windows)
I used to be able to (in one go) see the support for multiple properties in the blink of an eye. padding-left, padding-top, padding-[etc] for example. Now I have to click "padding left", scroll down, scroll back up, click the next one, scroll down, click the next one, scroll down, click the next one, scroll down.
The dropdowns are very slow for a quick reference chart
I don't know how, but I at some point managed to break the dropdowns. Couldn't quickly recreate, terribly sorry as I would've loved to give more meaningful feedback on this particular one.
I'm very sorry but I won't be using this chart. It's just too much hassle. You went from "everything available at a single scroll" to ... this.
I really am sorry, because that table of yours was LEGENDARY, and I can see effort went into this solution.
.edit: litte bit of extra context; when I saw the title of this message, I got genuinely, for real, REALLY excited. I honestly love CM and the way information on crafting awesome email is shared so openly. Both CM and Mail Chimp have always been huge influences on my own design decision-making. And this kinda ... well it kinda made me sad :(
Hey Dirk, thanks for your honest feedback. We truly appreciate it!
You point out some clear disadvantages of the new format, and I can tell you that moving away from the classic table format wasn’t an easy decision for us.
I can certainly understand your disappointment that the guide isn’t as quick to reference as the old one, and as you say, these are compromises we’ve made in order to add a LOT more content.
I do hope you’ll give the new format a chance over some time. Instead of Ctrl+F, we’ve added the built in search field which gets you there nearly as quickly as before. There may be more we can try to do there, to speed that process up.
Providing more of an overview of each feature’s support at a glance, like Renato also requested here, is something we’ll have to consider as well.
And allowing all clients to be visible at the same time in smaller viewports is also something we’ve had more requests for.
These are all great suggestions for improvements, and we’ve recorded your requests to help us plan future iterations.
I’d also love to hear from you if you manage to reproduce the issue you were having, so we can investigate it.
You can always access the archived version of the guide, but obviously, the results won’t be as up to date.
Thanks again for your helpful input, and please let me know if you have any further thoughts.
Have to agree. I love Campaign Monitor and their CSS guide was the best! Was very excited to see the update, but it's just so difficult to use...
Previously I could say "Ok, what css properties have pretty decent support in the email clients I care about?" or "How's gmail's overall support?" Both questions that were easy to answer with the previous layout. With the new layout it's just... not happening.
Hope CM takes all the feedback and seriously considers how they can turn their new guide into a tool that's just as easy to use as their old one. The suggestion to have a caniuse.com type "safe to use" indicator would probably be a good step in the right direction.
Hey Brandon, thank you for the great suggestions and support! We’re very mindful of the CSS guide being an indispensable part of many people’s workflow, and we only want to make it more useful for you.
There are a few complicating factors. One is that some of the groups of email clients, such as Gmail, are less homogenous groups than you’d think. So while many features would either work or not across all of Google’s email clients, there are also many that have partial support. Another is that the clients you care about aren’t necessarily the same as someone else.
So you raise some valid concerns that we are hoping to address, but we’re still figuring out what the best approach is. Your “safe to use” indicator suggestion à la caniuse is something we’ve made a note of, and will take into consideration.
If you have any further suggestions, I’d love to hear them.
Hi Stig. Thanks for the reply. I think you hit the nail on the head when you said "Another is that the clients you care about aren't necessarily the same as someone else."
Take the table layout/design of the previous CSS guide and columns (clients) customizable. Have a default selection, but then let people add/remove whichever ones they want to see. This would be perfect.
The difference in searching for support of the "nth" selector using the old and new CSS guide is stark... I think one of the challenges here is that most of the selectors and properties have more than one item. i.e. There are four selectors that use "nth". Checking for support across the four of those and across multiple email clients is much easier in the old table vs the new guide (individual dropdowns with a three column list of email clients.) Example: You have a newsletter and 85% of your readers use their phone or tablet to read it. Is it ok to use "nth" selectors? Trying to get an answer to that question using the old guide vs the new guide... for me, the old guide is much easier to use.
My point about "gmail" was just the ability to quickly check the css support of a particular email client. A different example: "How's Outlook 2013's overall support"
Aha! I think I just realized something about the new guide: When you look at a specific email client, it shows you anything that is not supported or only has partial support! Sorry, I just didn't understand. Ok, so that's helpful, and it would actually be helpful to add an expandable section below all that showing the supported items for that client. That would at least help with "Most of my readers use Outlook 2013... what can I use?"
I'm a sure a lot of time and effort when into to creating the new guide, so I hate to say "Can you please just update the old one." It's just that your original guide was so amazing! Sorry for the long reply. Thanks for being open to the feedback and considering ways to improve.
Hey Brandon, thanks for following up.
Adding a way to let you indicate which email clients you care about is definitely an option, and we’ll give some thought to whether that might be the right solution based on all the feedback we’ve received.
I see what you’re saying, both about being able to scan multiple related features at a glance, and getting a quick overview of a specific client’s support.
You’re also right that the email client pages like https://www.campaignmonitor.com/css/email-client/outlook-2007-16/ show only the features that are unsupported or partially supported, so features that are OK to use in that client are not listed there. We weren’t sure how obvious that would be, so we may well need to put a note about it somewhere.
Thanks again for taking the time to give us this super valuable input. Although I can’t commit to any specific changes now, our hope is definitely to continue improving the CSS guide in ways that address the issues you’ve raised.
Awesome. Thanks for taking the feedback. I'm sure you guys will do an amazing job making improvements to the guide. Thanks!
Thanks Brandon, your input really helps us get a better idea of what still needs improvements.
Thanks, Samuel. Glad you like it!