An overview of Designing HTML Email

However, in this post of An overview of Designing HTML Email we have accumulated some tried-and-true enlightenment from the bunch of captivating HTML email design, which will literally make to go with conveniently.

Getting into the HTML Email Mindset

Before starting a HTML Email design, it is highly recommended to ensure about it’s pixel-perfect notion. Analyze and gather idea that your syntax is dominating instead of checking it from breaking how it breaks your code.
A lot of distinct ways are available which facilitate the people to check out their e-mails and email clients that include desktop client like MS Outlook, Thunderbird and Mac OS x Mail; web-based email clients such as Yahoo, Gmail and MS Exchange Online. However, it is very rock like to make ensure that the design appear will be same by look wise.

Your HTML email Design Will Break: It’s a Fact

The beautiful email design that you have designed might be break. If you are supposed to send a newsletter to a list of around ten thousands, however, definitely they will be using several distinct email clients that may be so old or obscure. However, its very difficult to design your HTML email Design in common layout which is supported by all clients. Even most renowned G-mail, Yahoo, Outlook etc. can’t postulate for perfect rendering of HTML.
So, in order to make your HTML email perfect and identical which is viewed perfectly by users, it is highly obligatory to congregate some unique concept towards this context. One of the most affable way to make your email readable by your recipients is to forecast the major clients how the break your design then further try to control this.

Email Layout with HTML Tables

Creating HTML emails design might be not perfectly suited or supported by a wide length of accepted best practices of effective web-designs. For instance, from a long time web-designers has given up the accessing tables in web layout design. However, it is unpredictable to say how CSS will render your email design on various email clients as well as div-based layouts (concord as the best practice in web-page layout). Therefore, HTML emails should be opted with HTML tables instead of div-based and CSS layouts.

 

Photoshop in HTML Table Layouts

If you are bother to work with HTML tables towards designing a layout. Here, is the most simple and easy way to go with Photoshop. So, lets started. In Photoshop use Slice Tool.

First of all select Slice Tool to dice the HTML email layout in many distinct elements.

Now, Go to File Menu and Save for Web & Device. In save dialog box, go to file format and select JPG or GIF that is widely supported rather than of PNG, and Click Save.

Later than, a dialog window will appear with some saving options at bottom. Choose HTML and Images under Save as type option.

This is a best practice towards designing your layout for graphical elements. However, in order to make ensure either your text is HTML or images, so it’s obligatory to transform them in markup language.

In addition, you may clean-up the output of your HTML layout by removing unnecessary HTML junk.

Layout Padding and Margins

One most significant thing to keep in your mind that all email clients never treat padding and margins as same. However, For any vital placement, it is good to off nesting tables cells instead of accessing CSS padding or margin.

Special Handling for Images

When it comes to images there are some recommendation to deal with.

Image Format

The first thing about image is that it must be in JPGs or GIFs format for your HTML layout, as PNGs are not widely supported by all email clients. Before saving the image in appropriate format, ensure the width and height attributes that must be perfectly assigned in order to check any issues of rendering.

Use Alt Attributes

Always provide alt attributes to your images; as it is very essential in HTML emails. There are various email clients which by default, do not show images when an e-mail is opened for the first time as well as ask users to opt for displaying images. At consequence, an image without alt attributes might lead to lose out of some content.

Avoid CSS Background Images

CSS Background Images may be some tricky. For illustration, Gmail is very specific about handling of CSS background images or background colors. It may vary as per assignment in the markup. However, never forget to test it thoroughly prior to sending.

Important Information Should Not be Images

Images should be used for only graphical components as well as text for text elements. This is a basic thumb rule in designing a HTML email or Web-page. The reason behind this is that when an e-mail open often images are not shown, instead appear an information in plain HTML text which even not guarantee for its accessibility.

HTML Email Layouts Are Narrower

The HTML Email Layout will be best designed in one column, though you can go for two but you must be acquainted of proportion and layout. Three or more column will be challenging. The best practicing standard width of HTML emails is around 600px. Above all, you can go for a little bit more or less than 600px, but it will be highly obligatory to set 600px as your baseline. More wider the layout will be, more it chunk the users to scroll horizontally. If it is much narrower, you are not utilizing the available space properly.

Keep HTML Emails as Simple as Possible

It is the best and perfect practice to keep your HTML Emails simple. It prevent your HTML email from breaking as well as will have less code. However, it will be very affable to analyze too. Whilst designing the layout of HTML Emails, you are supposed to create in simple and clean design which give a professional and great look as well as perfect use of images.

Use Inline CSS

The CSS Properties should be inline instead of declaring in your HTML email layout <head> or in a other style sheet.

Avoid Use of Shorthand CSS

You should avoid CSS shorthand during designing the HTML email layout because there might be varying support between web applications and email clients. As for example, some email clients might be not support 3 characters hex codes regarding color as – you should use #FFFFFF for white rather than of #FFF. Also, Specify font-family, font-size, font-style asunder instead of one font declaration.

Other Common Issues

A lot of possible issues regarding coding with HTML emails exist which is abut quiet impossible to explain. Therefore, it is most crucial to test your emails.

Text Resizing

Especially in table based HTML email layout, automatic text resizing may create issues. You can avoid this issue in account of doubling up on declaration of sizes.

Link Colors

In Link color email clients can revert to the default blue. So, ensure during designing the emails that the default link color is okay or you can put an extra span inside the link tags as well as specify the color in both parent and child element, like this illustration.

<a href=”link” style=”color:#000000″><span style=”color:#000000″>link</span></a>