Following on from Part 1, I'll talk about designing for email and email best practises. There are three main types of emails; transactional, marketing and trigger, all of these serve different purposes but should follow some simple design principes and best practise rules.

Mobile First Design

So first off, take a mobile first approach. On average 56% of all email opens are on a mobile device so you should cater to them above all. An exception to this would be if you're in the B2B industry where desktop clients normally trump mobile. Use your email service provider statistics to help make your decision. A bonus of going mobile first is the increased CSS support - you'll be able to do some pretty cool things normally reserved for websites.

There are three main techniques avaliable for mobile responsiveness, you can either shrink, stack, or inject content. By shrinking, I mean the content shrinks down proportiantly from desktop - staying full width. Stacking is where you have a multi-column layout that stacks on top of each other, this can either be right over left, or left over right. You're also able to inject content into the pane with psudeo elements, empty containers or hidden div's. This content cannot be seen at all on desktop and is known as mobile only content. View each of these techniques in action on CodePen.

I'd recommend using a 480px width on the design of your mobile version, this will mean all of the above techniques can be utilised and your email will look great on all devices, spanning all of the avaliable width by shrinking right down to 320px on the smaller phones. This is called Fluid responsiveness, but you can also look at the Hybrid Coding Approach which will make your emails responsive in the notoriously shocking Gmail App, however some design sacrifices have to be made if using this method.

How Wide Shoud an Email be?

This is a topic of much debate in the email community. Desktop clients have varying CSS and HTML support which complicates matters somewhat. As a rule of thumb, it's best to keep the main content of your email between 560px and 650px wide. This will allow for an optimal experience in all desktop clients, on all screen sizes. You can improve the design on larger screens by using full width background images or adding CSS breakpoints for larger screens.

Multi-Column Layouts

If your design features any multi column layouts you'll need to allow a minimum of 20px between each column. This is to stop rendering quirks in some email clients that force tightly packed tables onto new rows. To overcome this issue use separate tables for each "column" and add a hidden spacer table or image between each of them. This way all your columns appear in line as expected.

Call to Actions

I believe an email should be short and sweet. Don't overload your recipient with too many CTA's, make it clear what it is you want them to do. Call to actions should have a high contrast when compared to the background, and the text should be clear and consise: 'Book an Appoitment', 'Shop Jewelllery Department', 'Return to your Basket'. Basic mobile design rules apply too, ensure the CTA is big enough for a thumb.

Live Text Wherever Possible

Do your best to avoid hiding copy away in images, use background images instead and overlay live text on top of them. Some email clients still don't show images by default, meaning the user has to manually ask for them to be downloaded. If your email is made up of just images they won't see anything.

Keep Filesize to a Minimum

Because most opens are on mobile you'll want to send messages that are as small in filesize as possible. 3G and 4G do offer great speeds but once the network is overloaded, download speeds suffer and the end user will have a poor experience. Make sure images are compressed as much as possible and keep them to a minimum.

Once your images are optimised, you'll want to check the filesize of the actual HTML. Gmail and Yahoo truncate messages that are larger than 110kb. Remember your ESP may alter your code, so test this by sending a live test to yourself through your email service provider. If you're having issues with this, then HTML and CSS compressors are your friend.

Animated GIF's in Email

Gif's are an easy way to add interactivity to your emails. Here are some good examples from Mailchimp and Sainsbury's. Having said that the filesize limitatons mentioned above still apply. Aim to keep your animated gif's below 500kb.

Be Flexible

Lastly, it's important to be flexible when working on emails. Your design might not be possible on all devices so allow for small progressive enhancements and for graceful degredation. Your email doesn't neccesarily have to look exactly the same in every client and on all devices - It just has to do it's primary function! Always be aware that not everything is possible in email and make exceptions when you have to.