• Marketing
• Tutorials

The Best Guidelines for Email Design

At some stage in your career, it’s likely that you will be asked to design email. Designing for newsletter templates is not an easy job. It is all about getting to the point and making the most of all the components required to design an email. Therefore, it’s worth employing as many tricks as possible to ensure that your message gets through to the users. It is better to follow certain underlying principles to give your users something valuable in return for their time and reason they signed up to hear from you.

To assist you at every stage of email design, here are a host of the best ingredients that contributes towards making an effective design for email.

Email design – keep it simple:

Designing email is unlike the other complex web sites. Email and its navigation should not confuse its users. Rather they should be user-friendly. Base your designs on a main header image followed by the main content. Remember the neater the design, the easier it will be code. As a result, there will be lesser chances for any anomalies to happen between the browsers and the email clients.

Create designs that have some breathing room. Avoid using confusing and cryptic subject lines, sender names or preheaders. All these habits will puzzle your reader and make them delete your email or mark them junk. As soon as the users open an email, the intention and the identity should be clear and therefore, your proposition will never be overlooked.

Being conventional comes in handy with email:

As emails are small and opened for a brief period of time, therefore the function of every element should be transparent. Make sure every button you create for links are easily clickable and big enough to be visible. If you are designing emails for mobile, make them 100% of the width to make it easily tapped with their thumb. However there should not be too many links which may cause a user to accidentally tap the wrong one. If you want to include text links within your email, make sure they look bold and are presented in contrasting colour to make them stand out. It has been observed that arrows when used are more effective so add them especially when you intend to design email on touch devices.

If you want to SAY more save it for later:

Of course you can send longer content that your reader enjoys. However, you have to take care of the different types of people reading your email. Some will read it on the go; others will read in between the meetings while a few others will go through the email when they are bored sitting outside the doctor’s chamber. So there are different scenarios and you have to stick to a logical hierarchy to cater to everyone. The best practice is to provide the shortest and punchiest information first and then include the long content underneath. Use clear headings and mark the key concepts in bold so that the scanning readers can get an idea of your message even without reading the entire email.

Make use of progressive enhancement:

Before providing every box drop shadow and rounded corners, plan how your layout will work. This will be your base design to which you will add rounded corners and shadows as enhancements. Bold shapes with square edges are an added advantage and look great. This approach will save a lot of time when it comes to designing your email. However, rounded cornered text box with drop shadow should work on every email client and to make this happen, you will have to build the effects with images.

Borders usually do not work:

There is not much room for browsers or email clients specific fixes within an email.

Considering the other factors:

Use white space around elements which have similar sizes and weight with no whitespace around them. This will grab the attention to the things that matter.

Add CSS style to the images to ensure that they are displayed nicely and support alt tags.

Do not include JavaScript, fancy pop-ups or auto-scrolling emails. If you decide to do that you email will be automatically send to the junk folder.

Encode all characters to ensure that they are being displayed as they are supposed to be.

Keep the design under 600px wide as it is the safest maximum width for desktop design. This ensure that the users will not have to scroll the email horizontally.

Use inline style for anything and everything that needs to be styled.

Link everything possible so that users can click anywhere. You can link headlines, images, buttons and text if it works.

Make the key call to action the main focal point of your email. This way the readers will not have to search for a call to action in a sea of sameness.

There’s a lot to take into account when designing for email. The practices listed in this blog post will guide you at every stage of your email design.

Check out our Collection of Email Newsletter Templates.