CSS support in MySpace Mail
When it was announced last month, the all new MySpace Mail was touted as an instant big player in the web-based email client market. With 130 million global users, that would make it the 4th largest email provider in the world and the second largest in the US. Of course, these numbers refer to the total number of MySpace users, not necessarily the number that will be using MySpace Mail for general email use.
Even so, it’s still a big number. With this in mind, my first thought was to see just how good the CSS support was in the new beta. The update finally rolled my way yesterday, and I immediately fired a copy of our CSS guide test page into my MySpace account. When I opened the email, I was greeted with this scary sight…
After a hurried check of the source code, I realized MySpace was converting my character entities <style> code into a working <style> tag. It mustn’t have liked that very much because the rest of the email content after that was automatically removed. This is the first time I’ve ever seen an email client handle character entities like this. First lesson of the day: MySpace Mail clearly doesn’t like you including CSS in the body of HTML emails.
Once I removed the offending code, the rest of the email displayed without issue.
With that out of the way, the testing could begin.
The Results
I’ve collated the results and matched them up against CSS support in all the other popular web-based email clients. I’ve also updated our complete CSS guide (check the PDF version for the results), so you can see how MySpace compares against the other 23 email clients on the market. You can check out a summary of what I found below the results themselves.
| Style Element | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| <style> in <head> |  |
|
|
 |
|
| <style> in <body> | |
|
|
|
|
| Link Element | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| <link> in <head> | |
|
|
|
|
| <link> in <body> | |
|
|
|
|
| Selectors | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| e | |
|
|
|
|
| * | |
|
|
|
|
| e.className | |
|
|
|
|
| e#id | |
|
|
|
|
| e:link | |
|
|
|
|
| e:active, e:hover | |
|
|
|
|
| e:first-line | |
|
|
|
|
| e:first-letter | |
|
|
|
|
| e > f | |
|
|
|
|
| e:focus | |
|
|
|
|
| e+f | |
|
|
|
|
| e[foo] | |
|
|
|
|
| Text & Fonts | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| direction | |
|
|
|
|
| font | |
|
|
|
|
| font-family | |
|
|
|
|
| font-style | |
|
|
|
|
| font-variant | |
|
|
|
|
| font-size | |
|
|
|
|
| font-weight | |
|
|
|
|
| letter-spacing | |
|
|
|
|
| line-height | |
|
|
|
|
| text-align | |
|
|
|
|
| text-decoration | |
|
|
|
|
| text-indent | |
|
|
|
|
| text-transform | |
|
|
|
|
| white-space | |
|
|
|
|
| word-spacing | |
|
|
|
|
| vertical-align | |
|
|
|
|
| Color & Background | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| color | |
|
|
|
|
| background | |
|
|
 |
|
| background-color | |
|
|
|
|
| background-image | |
|
|
|
|
| background-position | |
|
|
|
|
| background-repeat | |
|
|
|
|
| Box Model | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| border | |
|
|
|
|
| height | |
|
|
|
|
| margin | |
|
|
|
|
| padding | |
|
|
|
|
| width | |
|
|
|
|
| Positioning & Display | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| bottom | |
|
|
|
|
| clear | |
|
|
|
|
| clip | |
|
|
|
|
| cursor | |
|
|
|
|
| display | |
|
|
|
|
| float | |
|
|
|
|
| left | |
|
|
|
|
| opacity | |
|
|
|
|
| overflow | |
|
|
|
|
| position | |
|
|
|
|
| right | |
|
|
|
|
| top | |
|
|
|
|
| visibility | |
|
|
|
|
| z-index | |
|
|
|
|
| Lists | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| list-style-image | |
|
|
|
|
| list-style-position | |
|
|
|
|
| list-style-type | |
|
|
|
|
| Tables | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| border-collapse | |
|
|
|
|
| border-spacing | |
|
|
|
|
| caption-side | |
|
|
|
|
| empty-cells | |
|
|
|
|
| table-layout | |
|
|
|
|
What this means for email designers
The results aren’t fantastic, but they’re also not very surprising considering the stance MySpace has typically taken with their design and standards support.
The first thing you’ll notice is that there is absolutely no support for using an actual stylesheet. You can’t externally reference a stylesheet or even add your CSS inside <style> tags. Just like Gmail, you’ll have to move all your CSS inline to get a half decent result. Most of you are doing this already (you are, aren’t you), and tools like PreMailer and our automated CSS inliner make this a click away anyway.
If you’re looking at relying less on tables for structure and trying to dabble in a little float action, you might want to reconsider that option. While MySpace Mail does offer support for float, it doesn’t offer any support for the width attribute. Unless you’re aligning images, it’s nested tables all the way I’m afraid.
The truth is, MySpace Mail’s CSS support isn’t any better or worse than Gmail’s. Considering Gmail is already considered the lowest common denominator in email design circles, this won’t mean any extra work for you, even if you eventually have a large number of @myspace subscribers. What it does mean is that we have yet another email client with loathsome CSS support that we need to convince otherwise.
One step forward, two steps back.
27th August
Another one of those providers we, as designers, have to tell our Customers that they probably won’t get the design they want due to the lack of support.
27th August
Interesting post, with very interesting results.
As you said, Myspace’s support for standards its very poor.
I don’t believe that this will take off as a popular email client. The only audience your EDM’s are going to target are 13 year old emo’s!
That aside, I really enjoyed the read!
28th August
It doesn’t look too bad considering the lengths you have to go if you want to support Outlook 2007 anyway. Kind of feels like were going backwards in general though.
28th August
wow, thank you for taking the time to put this together. it was very interesting to learn this!
28th August
Great resource as usual. Thanks for the effort putting the tests together.
28th August
I wouldn’t worry about it - MySpace is being killed off by the likes of Facebook and Twitter.
14th September
Thanks for the constantly-updated reports, they are extremely useful to me. But I have a couple of recommendations. First, even though css background-image and such are not supported in many clients, there are work-arounds using the ancient background attributes in table, maybe a walk-around row should be place under so people can know what can be done (I’m not 100% sure but I think this works in Outlook 2007, but of course, there’s no repeat control so you have to be very careful about where to cut your background image). The other thing is international web clients. I’m here in China, and Sina, Sohu, QQ and particularly 163 are the major web email services here, not Gmail or Hotmail. Foxmail, a Windows app, also has a bigger share of the pie than Outlook (I think). Considering the market, I suggest you guys find someone in your camp that can read Chinese, and test the stuff on these apps. Thanks
18th September
Any plans to test support on an Android device (I see your full report has iPhone listed). More than happy to volunteer. :)