Welcome to WebmasterWorld Guest from 3.80.60.248

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:25841
votes: 847


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:11566
votes: 182


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:25841
votes: 847


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:11566
votes: 182


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 from GB 

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: 76
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:769
votes: 12


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: 169
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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members