Have you ever wanted to travel back in time? All the way back to some historically significant period, where nations were born and women carried a smelling box because deodorant hadn’t been invented yet? Or maybe just travel back to around the mid-to-late 1990’s, where hip-hop was arguably at its apex and bearded men wearing plaid and vintage jeans were thought of as alternative, rather than hipster.

Well good news friends, with current HTML email encoding practices you can! Just craft and design a beautiful email, open up your favorite script editor, text app or IDE and get ready for an H.G. Wells adventure.

Ok – maybe it isn’t actually traveling back in time, but your HTML structure and globally followed methods are very close to the design encoding of the 90’s. Using tables for data only, do it once styling through CSS, and even background images behind selectable text are all rules and practices that you can toss out the window. Instead, you are often left with the terrible coding practices of the 90’s, using tables within tables and inline styling on each element.

It isn’t to say that you can’t create beautiful and effective emails, you just have to follow a different set of rules than you would in current web design. While we can’t go over all of the ins and outs from the email design rulebook, we have assembled a list of some basic dos and don’ts to guide you through the process of designing a killer HTML email.

Simple is Best

When possible approach the design with clean and consistent grid structures. For the most part you can use modern design styles but structures need to be clean with a strong and consistent grid system.Think about tables and how this design will be sliced and how the text and images would exist within the table.

Design for 2 Widths or Less – Preferably Less

If possible design your email as if only mobile devices will view it. If your brand or communication management team requires a desktop and a mobile version then design for 2 widths only; 480 pixels wide for mobile devices and 650 pixels or less for desktop. Responsive email designs are tricky at best when coding so limiting the width variants will help maintain accuracy.

Place Text on Solid Colors – No Background Images, Gradients or Graphics

The majority of email applications and services do not support background images behind selectable text. If it is absolutely necessary that you have text on top of an image or graphic make sure that the message is not reliant on the text within the image as many viewers will not download images by default. You can provide alternate text which is displayed for images not shown, but you shouldn’t rely on that for effective communication.

Think How the Design Would Look Without Images

As stated earlier, many email applications and services have image download and display turned off by default. So think of how your design would look without images and only using solid colors and the alternate text of the image within your email. If it looks terrible or doesn’t make sense then your email message will not provide you the conversion you are looking for.

Repurpose Images for Mobile Views

When possible use the same images that will work for the desktop and the mobile versions of the email. The email client will download the all of the images encoded into the email regardless of their visibility. So if you have 5 images for the desktop view and 5 different images for the mobile view the user will actually be downloading 10 images event though they only see 5. This waste will impact the load speed of your email, reducing communication effectiveness and conversion.

Make Call to Actions on Their Own Line

Do not place a button or image inline within text; each call to action should be on its own row. Beyond usability and information hierarchy, images within a line of copy can cause line-height and display issues that you can’t solve for all email apps and services.

Avoid Using ALL CAPS

This can cause some spam notification issues when used too much within the content. If used it should be encoded using inline style to transform the camel or lower case letters to caps when possible.

Use Default Margins for Bullet Lists

This is really annoying for the designer and coder, but if you have an ordered or unordered list in your copy, remember to place a space between the bullet and the left vertical margin of your copy grid. If this looks terrible or you don’t have much of a column width then understand that the list will need to be converted to a 2 column nested table.

Use the Same Body Copy and Styling on Desktop and Mobile Versions

Email copy should remain consistent across devices. Although it is possible to create and style copy that is slightly different in wording or style for desktop and mobile devices this is a bad practice as it bloats your copy and increases the chances of being marked as spam.

Design in Photoshop

Photoshop is best suited for designing web-ready artwork. Unlike vector programs such as Illustrator, Photoshop is pixel-based. This means that you will be better able to control how your imagery is sliced and saved. Vector programs will often leave you with fuzzy anti-aliased edges on your images because it spans just over into the next pixel row or column. Beyond that, there are also color representation issues. These can appear when designing in Illustrator and are avoided when working in Photoshop.

Embrace the 90’s

When it comes to converting your beautiful email into HTML, you must embrace the coding practices of the old.It makes my modern coding sense cringe, but you have to throw floating divs and cascading style sheets out the window and start making tables within tables within tables.