Design your way

Tuesday, October 6, 2015

If you are a web designer, chances are that at some point in your career, you may be asked about designing HTML emails for a client. Sure, social media is considered to be one of the best ways to communicate with our peers nowadays.

However, when it’s done correctly, email is still considered to be one of the best ways to help promote both yourself and your clients.

Recent surveys have even shown that just this year alone, every dollar spent on email marketing generated approximately more than $40 in return, which is a lot more than any other kind of marketing channel, including social media.

Designing for email

What's up with designing for email
Image source: Julien Renvoye

If you are new to the world of creating HTML email templates, there are a few things that you should be aware of before attempting this. First and foremost, building an email is absolutely nothing like building something for the internet.

A great deal of email clients have decided not to go onward in terms of improving standards, unlike most web browsers. When it comes to coding email, it’s essentially all about tables. However, tables are no longer just used for tabulating data. Rather, they’re being used more for consistent structure. Further, emails also depend on inline CSS rather than external CSS.

Coding a HTML email

Coding a HTML email
Image source: Pendar Yousefi

When it comes to coding HTML email, the biggest issue is that there are so many different software tools available that allow individuals to read email. This means that the software that is used to render HTML for these tools essentially determine exactly which CSS and HTML code actually work and which ones don’t.

It’s important to keep the following concepts in mind when it comes to creating and coding HTML email:

  • Control both the presentation and design layout by using HTML tables
  • Ensure that you use inline CSS to control various presentation elements, such as font color and background, within your email

Tables. Yes, tables.

Tables. Yes, tables.
Image source: Alan Tippins

Tables are making a big comeback in terms of web design, especially when it comes to designing HTML email. The best example of this comes in the form of newsletters sent through email. Tables must be used if these newsletters are to be displayed clearly and efficiently for those who receive and read them.

Useful tips

Useful tips for designing emails
Image source: Sean Farrell

HTML emails should generally measure around 600px in width; however, most individuals have found that 800px in width is an acceptable limit to work with.

Besides that, rather than appearing between head tags, CSS style declarations should instead appear below the body tag. Also, CSS shorthand should never be used. Instead, the 12px/16px Arial, Helvetica shorthand should be broken into the following properties: font family, font size, and line height.

HTML tables do a great deal of the work involving layouts, while spans and divs are used sparingly to go after specific effects. CSS tricks are very basic and never make any use of any other CSS files.

Images in the email template

Images in the email template
Image source: Kyle Anthony Miller

When it comes to using images within HTML emails, it’s always important to keep in mind that they will not always be visible by default for many people. You will essentially be forced to keep everything as simple as possible and make sure that no important content is suppressed in any way by image blocking should you begin the design process with this assumption.

asdasdasd
Image source: Davey Heuser

Automatic image downloads are always blocked by most email programs by default. This is something that can ultimately cause people to do one of two things: either delete your email or mark it as spam.

Therefore, it is recommended that a text to image ratio of 4:1 be used in any design campaign. It is also worth noting, however, that spam filters contain different criteria for what exactly is a healthy balance between graphics and text.

Members of the general public will not have access to servers if you are working on either a network drive or a staging server. In addition, any images contained on these servers will appear to be broken.

The best way to avoid this is to upload and host any and all images onto a public server, which will allow them to be displayed correctly in all of your HTML emails.

Absolute paths for all files and images should include both your server name and file information, which will allow all outside applications to both find and access these files. This means that you should always host every single one of your images on your server and outfit them with absolute paths that point directly back to your own server as well.

Call to action

Call to action in email
Image source: Paresh Khatri

One of the biggest key elements of an effective email is the ever-popular call to action button. Images had been previously used for this very thing, and sometimes, they are even still used in the same manner today.

However, if images are not visible to someone, then exactly what good would a call to action button be to them? This is an indication that it is now time to use buttons that are more HTML-friendly rather than relying on images.

Many email designers prefer to rely on images to create their call to action buttons; however, as previously mentioned, there are some email clients that automatically block the loading of images by default. In addition, there are also some individuals who prefer to read emails without having to view images of an kind.

Call to action in newsletters
Image source: Ben Bate

If you rely on images as a big part of your call to action buttons, then there is a good chance that your users are likely missing out on a big part of the message that you are trying to get across to them. What makes things even worse is that these same people are also not having the chance to interact well at all with any of your campaigns that you may be trying to push.

A few good practices of call to action buttons in email campaigns can be seen in this article from Marketing Land.

Testing

Testing email templates
Image source: Martin David

When you have finally figured out how to design and code your very first HTML email template, you should never just jump in and start sending things out right away. Instead, take the time to test out your design and make sure it works well in various email programs.

This will give you the chance to see what needs to be fixed before you are finally able to get to work wooing all of your clients.



Source: http://ift.tt/1VCSncO

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading