Looking for a responsive (desktop to tablet to mobile) e-mail template. Please let me know if you have any ideas. Thanks, Gary G
That won’t be easy. E-Mail Clients are quite different than normal browsers so as they render everything quite bad. While you can take advantage of all the css3 goodness on the majority of browsers nowadays you’re still forced to use tables and images for e-mail templates. And with “you” I mean actually the developer who is building such things.
In E-Mail Templates we need to use so-called “inline-css” and I actually don’t have any idea how someone can make a responsive layout only from “inline-css”.
I would recommend you to have a look for “fluid” e-mail templates:
infuse01, thanks for sharing this information and this link. Can you please elaborate on what a “fluid” email template will do exactly? How is it different than being responsive?
Responsive = using CSS Media Queries to specify different styles for different cases. Most email clients don’t support this.
Fluid = tables set at 100% width.
Thanks for the answers. So the 100% width means that on a desktop it will fill the monitor and on a mobile phone it will do the same. Even though the email looks exactly the same, it just fits the width of the device. Is that right?
I assume there is a way to keep the email from being 19 inches wide on desktop monitors.
FYI : I am looking for a one column, really great looking, modern, professional fluid email template that I can use in Aweber easily.
Most modern mobile email clients (what a mouthful) DO support media queries. I said most email clients don’t support them, because the number of web clients and desktop clients is far larger than the mobile ones.
So if, for example, you’re targeting iPhones, it WILL work.
To keep it short, take a look at this guide from Campaign Monitor – it’s a pretty good primer on what you’re after.
yes, it is exactly how DigitalImpact has explained it and how you understood it. As I mentioned before you’re probably good to go with a fluid e-mail template. Only your assumption to keep the email from being 19 inches on desktop monitors is wrong because that would be actually “responsive”. Responsive means that there are various stylesheets and the browser you’re currently viewing it decides, based on the screen resolution / viewport, which stylesheet should be loaded. Therefore we can set a width with 300px for mobile devices and 960px for desktop devices. But this isn’t working at all with e-mail clients since they aren’t up to date with the newest standards, the majority still behave like Internet Explorer 5 or 6.
But since actually no one views an e-mail in full screen mode you shouldn’t be that much bothered about, that a fluid template could look awful on large screens.
Maybe there are some mobile browsers out there which can handle responsive calls, but also as digitalimpact has mentioned – not all. That means the majority still can’t handle those calls. For example the Android Browser on Android 2.3 (most widely spreaden Android Version) is so bad that it still has some troubles with usual standard css, not to mention all the other small browser apps which are freely available on various app stores.
So enough tech talk. I hope I haven’t confused you with that. In the end it all comes to one proper solution: fluid e-mail templates for the next 3 years is the way to go. But that’s just my own opinion