How to: Building Responsive HTML Emails

My tutorial on designing and coding responsive html emails, so the design and layout adapts automatically on mobile devices and tablets, is in the September 2012 issue of .net magazine – issue 232. It follows on from the Rethinking Mobile Email Design article here, and shows how to follow this approach through to html.

Share:

Elliot Ross is Managing Director of Action Rocket, an email marketing creative agency based in London.
You can find him on Twitter at @iamelliot

Jack C

Nice work Elliot! I’ll have to pick up that issue.

http://twitter.com/nickwhiteacre Nick Whiteacre

Great article Elliot

http://www.elliot-ross.co.uk/ Elliot Ross

thanks guys!

http://yannick-mireur.blogspot.com Yannick Mireur

Hello,
An idea for how to make an element appear ONLY in mobile e-mail clients?
I tried:
@media only screen and (min-device-width: 350px) {
.element {display: none !important;
}
}
But many e-mail clients don’t support “display-none”…

Thx!

http://www.facebook.com/ting.sao Ting Sao

I don’t know, but did you try:

display: hidden; ?

OR

width: 0px;
height: 0px;
overflow: hidden; ?

I would guess (from my limited experience) that z-index doesn’t work either….

We run a series of day courses on design, development and creativity in email. They're aimed at marketers, email designers and coders, and will give you everything you need to get the best from your email work.

More from us

Elliot Ross

Elliot Ross is founder of Action Rocket, a creative agency working in email. His experience includes creating award winning websites, mobile experiences and email marketing campaigns for British Airways, Sony Playstation and IKEA.