Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

creating responsive layout email newsletters

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

Administrator from GB 

WebmasterWorld Administrator engine is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:May 9, 2000
posts:22300
votes: 238


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 June 13, 2013 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10542
votes: 8


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.
9:48 pm on June 13, 2013 (gmt 0)

Administrator from GB 

WebmasterWorld Administrator engine is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:May 9, 2000
posts:22300
votes: 238


hehehe, yes, agreed.

These are requested html e-mails, but they are now being viewed on different screen sizes.
10:00 pm on June 13, 2013 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10542
votes: 8


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 June 18, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 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 June 30, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 21, 2003
posts: 73
votes: 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 July 2, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:729
votes: 8


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 July 3, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 19, 2004
posts: 168
votes: 1


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.