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 email 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:

Best Guidelines for Email Design

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:

Best Guidelines for Email Design

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:

Best Guidelines for Email Design

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:

Best Guidelines for Email Design

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:

Best Guidelines for Email Design

There is not much room for browsers or email clients specific fixes within an email. So when there are borders that can either sit outside or inside the or can be included or excluded from the width, you cannot do anything much. So what’s the solution? You can drop two additional ’s from either side of the main or set the background colour for each one.This process will fake the entire look of the border and simultaneously work in all browsers and email clients.

* * *

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

Some browsers such as IE do not support empty ’s. even if the, td> is set to 10px in width, IE will invariably ignore this and set it to 0. It is better to add a transparent GIF and set it to 10px wide.

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. Elements including font size and types can be used within the

tag, however, distinct styles should be placed on
’s

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.

* * *

 
 
Eric Haskell has over 15 years of experience in web development, programming, e-commerce, and business strategy experience. He focuses on solutions that merge current technologies, applications, and concepts together to help each client meet their goals with success. He also contributes articles for Palmetto Web Design, Columbia SC.

This entry was posted in web design tips. Bookmark the permalink.