1 post
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
garyguthrie says

Looking for a responsive (desktop to tablet to mobile) e-mail template. Please let me know if you have any ideas. Thanks, Gary G

898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
infuse01 says

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:

Here are some for you

2 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Located in United States
KimDushinski says

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?

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
digitalimpact says

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.

26 posts
  • Has been part of the Envato Community for over 2 years
tc_marites says

Are you looking for someone to do this for you? If so, kindly provide me all the details at mfr.webmax@gmail.com

62 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+3 more
cssignitervip says

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.

+1 It’s impossible to serve a responsive newsletter.

2 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 50+ items on Envato Market
  • Located in United States
KimDushinski says

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.

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
digitalimpact says

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.

898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
infuse01 says

Hi Kim,

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 :D

41 posts
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Located in Indonesia
+2 more
Jakartanese says

Looking for a responsive (desktop to tablet to mobile) e-mail template. Please let me know if you have any ideas. Thanks, Gary G

Yes Gary, now ThemeForest has mobile scalable (“real” fluid) email template on Marketing category. :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by