Posted by & filed under Browsers, Code, Design.

In the last few years responsive design has really taken off, that’s not just because of computer displays getting bigger but more down to the fact that mobile data has been extremely higher over the last few years resulting in figures that I’ve personally never seen before!

On average, over 50% of all emails opened are now on Mobile devices like Phones or Tablets, and that’s a figure that’s not going to decrease.

So what are we doing to cater for half of all email recipients? We need to be more savvy and use responsive web design, just like we do in browsers but for email clients!

Great, this sounds amazing however email clients as most professional web designers know are absolutely riddled with display issues when it comes to HTML formatting, and there isn’t a W3C standard for email! So how can we tackle this?

Basically the same way we do with responsive website design, via the use of media queries, and some clever use of width’s and percentages!

Step 1: Basic look and design

Design and create an email around 600px to 800px wide, keep in mind that we’re going to make use of CSS media queries to half the width down to 300px for mobile use. Content shouldn’t need to go any lower.

Step 2: Test in Outlook

Outlook is the most bullish of all email clients and seemingly can’t adjust image sizes. Make sure the email looks great before moving on.
outlook

Step 3: Add your responsive styles

Include any responsive styles you want to include. These should be in a the head of your document within a style tag.
mobile_comparison

Step 4: Bring your styles inline

Once your email looks great in Outlook and responsive styles are included, bring your styles inline, which you can do with a variety of services. I use the good ole method of hand coding *grins*

Step 5: Test your email

Don’t send it out just yet! Make sure you test it on as many platforms as you can. I use Litmus to test on a number of devices. You should too.

Step 6: Send it out!

Your email is ready to ship! I personally like to use sendy with my own hosted email services, however I can recommend using an ESP such as Mailchimp or Campaign Monitor, since some other mail clients strip out the responsive formatting when you send an email but the choice is entirely down to you.

And that’s pretty much the basics, if you would like more info on responsive design, then Google is your friend, they’re are many posts on the subject and while responsive design is nothing knew, it does lend itself to all devices that we use on a daily basis, so be sure to get yourself antiquated if you’ve not done so already.

Leave a Reply

Your email address will not be published. Required fields are marked *