10 Tips for Creating Responsive Email Templates

BeSeen / Blog  / 10 Tips for Creating Responsive Email Templates
Screenshot of mobile version

10 Tips for Creating Responsive Email Templates

Responsive design is so important in a world driven by mobile. A recent study by Experian Marketing Services shows Mobile Email Opens Hit 50%. Your email templates must work not just on desktop and web applications but also mobile devices (phones and tablets).

Designing for mobile is as important for your emails as it is for your website. BeSeen Web Developer Tobi goes through his top 10 tips for creating responsive email templates.

1. Media Queries

Media queries are not supported on every email client. Click here to view email clients that do support media queries.

2. Use inline styles

Styles should be inline because most email clients strip out the ‘style’ section. So to be safe, write your styles inline.

3. Keep it simple (with your CSS3)

Keep new CSS3 effects to a minimum, just to be safe. Email clients are like languages; they interpret the same thing differently. So try and keep things simple and get straight to the point. The simpler the better

4. Use HTML5 doctype and a reset stylesheet
5. Meta Viewport

Use the meta viewport in the head of your document. Mobile devices, by default, try to emulate the desktop view of a webpage which causes the webpage to zoom out. This is pretty cool but this makes the email or even webpage, much less readable. By using the meta viewport, the page will scale to the exact size of the device in use. Sweet!

So to sort this out, you just need to include this very simple piece of code in the head of your file.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

This ensures that email layout is matched with the width of the device being used to view the email. This is very important.

 6. Use attribute selectors

Yahoo! mail ignores your media queries. So to avoid that problem from occurring, you’ll have to use attribute selectors. There is a very good article on how to use them.

 7. Media Queries

A post on responsive design would be nothing without media queries. There are 3 major screens to target when designing a responsive email template.

< 480px : This is for the first generation smart phones in  portrait mode.

< 768px: This is for bigger smartphones and iPads in portrait mode.

> 768px : This is for the bigger mobile screens to desktop.

8. First Generation smart phones

In practice, if we were going to target the first generation smart phones (< 480px), we will use this line of code:

@media screen and (max-device-width: 480px) {

/* your code goes here */

}

Now to explain…

@media :- Allows different style rules for different media elements in the same style sheet. So you can target a screen (mobile, desktop screen etc), print (when the user prints the page/email) or all (for all media types).

Screen :- This targets computer screens.

max-device-width:- This defines a ‘breakpoint’ which causes the media queries to execute. In the example above, the breakpoint is 480px.

 

beseen_desktop_mail

Desktop version of email newsletter

Mobile Version of email newsletter

Mobile Version of email newsletter

Screenshot of mobile version

Screenshot of mobile version

 

9. Use percentages instead of fixed widths.

By using percentages instead of fixed widths, we get a fluid layout allowing your content to easily adapt to any screen size.

10. Use the maximum width of the screen

Finally, one of the best ways to make your content readable is to allow each element use the maximum width of the screen.

This was just a quick post covering some important tips on creating responsive email templates. If you think I’ve missed any, or if you have any general comments or suggestions, please feel free to post a comment.

LEAVE A COMMENT