Build Responsive Emails

Making HTML emails mobile friendly

In this tutorial Elliot Ross will look at bringing some of the web’s mobile techniques to HTML email. User take-up of mobile email is massive: some email campaigns get more mobile opens than desktop, yet many marketing emails render poorly on mobile devices. Mobile support on the web has never been better – so if you’re sending emails that drive customers to the web, it makes sense to design mobile friendly emails too.

 

Elliot Ross will start off by setting up some of his styles and adding the viewport meta tag. As you may know, style declarations in the header are sometimes ignored by desktop email clients, and therefore you’ll see advice not to use them. He is only using them to control his mobile formatting here, so he's OK. You can see he’s using slightly odd CSS. Elliot Ross has to use attribute selectors to specify his mobile CSS, otherwise Yahoo! Mail will apply the media queries on a desktop. This means he has to separately specify each element a class might apply to. If your style isn’t applied properly, this is usually the first place to look. He’ll give the classes slightly obscure names too: some of the obvious ones are used by webmail clients, and he doesn’t want style conflicts with them.

Comments

Be the first to write a comment

You must me logged in to write a comment.