What are current trends with html email?
Looking into repsonsive design html email I came across this article on campaignmonitor.
It seems to mix css @media queries and other css in style blocks rather than inline styles, with old school table layouts.
Surely, if an email client is capable of processing css it knows what to do with a div? Or is the table just as a fallback for those that still can’t? And the media queries and block css extra sweetness for those that do?
I realise that email clients don’t change as rapidly as web browsers but are tables still the best way forward?
I’m sure this question has been asked loads of times before, but I’m looking for modern trends.
Perhaps this should be another question, but I also notice that the article mixes element.class and element[class=”classname”] declarations – the last of which I’ve only ever used with input[type=”value”] before. Why the square brackets for classes?
Recently my company was changing their emails layout. First we decided to test the compatibility of different email clients with the newest html/css standards. However, during the coding process we encountered many problems with proper rendering which forced us to turn back to
table-based layout.We also used
@media-queriesand more sophisticated styling for clients able to understand them, but unfortunatelytablesare still the way to go if you want to support popular mail clients. It’s a pity that so many business clients use old Outlook or similar.After the work was done, we were testing our layouts with Campaign Monitor Tester but it wasn’t enough so we had to test many clients manually.
Summing up: If I was to code an email layout now, I’d go with tables and inline styles.
Edit: Brackets-notation is correct, but I don’t see the point. Moreover in this example it will only match elements with exactly one class named
classname. It won’t match<p class="classname othername">. If there’s no other arguments for using it here, I’d go with standard dot notation (.classname).