Css – Somebody have a responsive CSS template for Emails (newsletters)

cross platformcssemail-clientnewsletterresponsive-design

I'm designing an HTML newsletter that is supposed to load nicely including on mobile devices.
I found these links to sites that show blank templates:

But with both I didn't succeed in showing responsive design on my mobile Android 2.3.3
Does someone have a live example for such responsive email, so I can learn from it?
I tried to look for one on the web but couldn't find one…

Best Answer

Reading up on responsive HTML emails my self, I stumbled upon your question. Even though a bit late, I though I'd take the time to share what I've found so far.

I've found a couple of good resources to read, both provided by email newsletter web services.

Campaign Monitor provide a pretty extensive guide on how to design responsive HTML emails. It discusses different approaches to take, things to think about and shows a few handy "hacks". In the guide, they also reference a few downloadable examples of responsive emails that you can use as a starting ground, and build your own email upon.
MailChimp also has a guide on email for mobile devices. It has a broader focus and discuss everything from statistics to user behavior and best practices, but it also has a section on various design approaches.

To get live examples to learn from, I suggest you sign up for newsletters by some of the major companies, that has spent time on developing their newsletters. I'm not going to market any company in particular, but I know that both above referenced guides mention a few companies that they think have great HTML newsletters, that could be worth having a look at.

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.

Css – CSS selector for elements containing certain text

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Best Answer

Related Solutions

Css – How to vertically center a “div” element for all browsers using CSS

Css – CSS selector for elements containing certain text

Related Topic