homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderators: not2easy

Mobile Web Site Design and Development Forum

creating responsive layout email newsletters

 6:49 pm on Jun 13, 2013 (gmt 0)

I have a regular newsletter which goes out to an opt in list.
How do I go about creating an email newsletter that will respond to a user's screen size without knowing their chosen method of reading the newsletter?

Where do I start?



 9:21 pm on Jun 13, 2013 (gmt 0)

text only!

seriously speaking, that's how i have my email client set to show email, so make sure you take that into account when considering "responsive design".
some emails i receive are graphics only, so that's a failed message without further action on my part.


 9:48 pm on Jun 13, 2013 (gmt 0)

hehehe, yes, agreed.

These are requested html e-mails, but they are now being viewed on different screen sizes.


 10:00 pm on Jun 13, 2013 (gmt 0)

regardless of the html requirement, you should still do a multipart which provides a text-only version.

also, everything I have read about styles in html email strongly recommends inline styles which makes it difficult to use responsive css.


 8:28 pm on Jun 18, 2013 (gmt 0)

Here's how I'd approach this:

Use a table and a flexible % based layout. No columns (too easy for it to become cramped) - design using all rows and a layout that allows text to 'flow' down the page as the layout is resized.

Images should be minimal using background colours where possible - flat approach wins out. Except for some % widths on logos so they scale inside the parent table cell.

Avoid nested tables and fixed width images.

Lastly I'd add some inline enhancement styles for properties like max-width / min-width so you limit the 'crushing' effect on mail clients that support more sophisticated css (basically everyone but Outlook).

This is a great checklist: [campaignmonitor.com...]


 10:52 pm on Jun 30, 2013 (gmt 0)

I use Mailchimp for sending newsletters. I've always used my own custom coded HTML but realised I needed to update it to a responsive layout. I spent a long time thinking about it then decided for now the quickest solution was to use one of Mailchimp's free responsive templates. Seems to work well.


 2:08 am on Jul 2, 2013 (gmt 0)

All of the above is great advice. Do check out that link 'limbo' posted, well worth your time!

I have seen recent changes in some webmail portal that affects css that may produce some unanticipated results. Example: Yahoo! email now seems to be ignoring floats but is honoring clears.

Just a reminder to test, test and retest BEFORE sending out your campaign. You may find some valuable lat minute tweeks!


 4:08 pm on Jul 3, 2013 (gmt 0)

Mailchimp has several RWD templates published on Git. You'll also find other RWD email templates in Git. The net-net is that RWD email templates don't work yet. You'll need to settle on a 320px wide template for the time being. If you're dead-set on RWD you're going to spend a ton of time trying to make it work. I blew 100+ hours before I gave up.

I have a client who uses Constant Contact. They have a 600px wide footer that cannot be changed. So, if you're using CC, forget about anything less than 600px wide. As an FYI - for a few hundred $$ CC will build you a smaller footer (I'm not a fan of CC). In general, all of the ESPs are behind the curve on mobile friendly email. It is so very sad. Let's hope the industry responds to our needs.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved