Mobile first for email. Oh course. Right?
There are more mobile devices accessing your content, why wouldn’t it be mobile first? Well because mobile doesn’t need any help. It is the faster more nimble sibling to it’s slower desktop and browser based elders.
Mobile first means that the styles in the head are for desktop. If gmail or other older email clients can’t parse or strip the styles in the head of the email, then the email will of course look bad in desktop or older clients. That doesn’t work.
The ramps on the sidewalk are not there because teenagers need help getting across the street, they are there for the older less able people. The desktop and browser based siblings of mobile email who need a little help crossing the street.
Go ahead and take a look at the list of email clients and the css media queries they are able to use and you will probably reach the same conclusion. Mobile email clients are better able to deal with modern css/html based email much better than most browser based or desktop based clients. Well at least with the exception of Gmail clients. They alone seem to have taken a page out of Outlooks book with things they will not do. Which is surprising considering how much Google did not want to be Microsoft.
For email it has always been, “Age before beauty”. Which means of course “Make it look good on older email clients first because the newer ones don’t have as many problems as the old ones. Kind of like the crosswalk. The ramps are not there for the younger more nimble people. They are there for the older or less able.
So what does desktop first email look like?
Desktop first email doesn’t look much different from mobile first email really. The exception is that the styles embedded inline in the email are for desktop and the media queries in the head of the email are for mobile clients. That is it. Since most mobile email clients will see and change the layout when they see the media queries in the email head, they are able to adapt. Unlike your aging parents/grandparents/uncles who need help understanding “The Twitter” and “The Facebook”.
Info at Litmus. https://litmus.com/blog/understanding-gmail-and-css-part-1
Premium Member
Portland, Oregon