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?
phranque
9:21 pm on Jun 13, 2013 (gmt 0)
text only! (haha)
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.
engine
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.
phranque
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.
limbo
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).
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.
Hoople
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!
DirigoDev
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.
