Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: not2easy

Message Too Old, No Replies

creating responsive layout email newsletters

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

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



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)

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



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

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



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)

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



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month