Email  Emails Everywhere.

Is there really a market for email newsletter templates? According to Mashable 144.8 billion emails get sent a day. That’s an eye-watering figure. Although I can imagine most of those end up in the ol’ spam/trash folder.

A more interesting statistic to me was that 90 million American’s access email on their mobile device. That’s far more than I would have guessed. Now if you’re sending a plain text email that makes perfect sense. iPhone’s and Android devices do a great job at displaying readable text on their hi-res displays, but what about newsletters?

enter the mailer.

Email newsletters, or mailers, are a familiar site in everyone’s inbox. You sign up to a site and they chuck you onto their weekly/monthly mailing list so you stay up to date with the latest news of said site. I’m sure you’ve noticed that a lot of these mailers have lovely images and interesting typography to set them apart from the boring plain-text’iness of the usual email world. Unfortunately, as is the way with the web, when you add designed content to a web platform you end up restricting the canvas in a lot of ways. Images are a good example. If you stick a photo into an email, then the email itself is constrained to the width of the photo. Not exactly ideal when you’re reading the email on your iPhone which has a 300px wide display area. Isn’t there anything that can be done about this…

Blood, Sweat and Thanking litmus profusely.

Yes there is! By using an internal stylesheet and responsive @media queries.  Although the process of creating a responsive email newsletter template sort of reminds me of Marilyn Manson’s book —The Long Hard Road Out of Hell.

If you’ve ever coded an email newsletter template you’ll know the meaning of cross-compatibility. Or more the point: cross-incompatibility. When we design and develop websites we have to worry about the 5 main browsers which the majority of the web users browse the internet with. In the world of mailers it’s closer to 30. You’ve got desktop clients like Thunderbird, Apple Mail and Outlook ( I hate you ), you’ve got webmail clients like Gmail and Hotmail and you’ve got your mobile clients on iPhone’s and Android devices. And of course people with older systems use older versions of the desktop clients which makes life as a developer even more unbearable.

Litmus is a service that allows a developer to test his creations on every major email client but uploading it to their servers and they use some clever method that basically involves opening the email on 30 or 40 different clients, taking a screenshot of what it looks like on each one and then uploading the screenshot to you. That’s a massive time-saver. Although it still took me a month to complete my template.

Introducing “logic”:  My Responsive Email Newsletter Template

OK so here it is—Logic. My first responsive email newsletter template. Designed originally as a 2 column layout to fold back to a 1 column layout on an iPhone and wow, I’m happy with the result. It took a while to get there, and I’m sure I’m going to modify and improve this template as time goes but for now it’s time to relax and take in the achievement, before I start the next one. ;)

Logic - Responsive Email Newsletter Template

PS: Thanks to the TF reviewers who made me go back and improve it. I didn’t think it could get any better after my 3rd attempt, but guess what… It got better.