Do's and Dont's of HTML Email Blasts.

Hey everyone, after a week off we are back with more helpful hints.

With the proliferation of email-blast software and websites all over the internet, its becoming increasingly popular for people to turn to these avenues in order to drive sign ups, direct to seasonal events, and really reach out and impress where a regular email would fall short.

One of the best aspects of these sites is their ability to let you craft a beautiful email-blast whether you have skills in HTML or not. Many people though can sometimes be a little to ambitious when diving into the HTML editors as they tend to carry their skill sets in designing websites into crafting their email blasts and they can be frustrated when the results do not match their efforts

Email clients such as Hotmail, Yahoo, Outlook, Gmail, etc., can render your emails in different ways. What looks one way in Yahoo or Outlook 2003 may appear very different in Gmail or Entourage.
The root of this problem is the variance among email clients in the level of support for CSS (Cascading Style Sheets).

There is no real standard for what an email client should support and how it should go about supporting it. Every email client takes its own approach to rendering HTML and CSS – which is why an email that looks fine in one email client can look different in another.

So how can you or your designer ensure an email design remains consistent and looks great across all these different email clients? Here's a helpful list of "Do's and Dont's" on email blasts and HTML.

Make Your Website Pretty (and Consistent) with CSS Classes

A class is a line of code you add to an HTML element, giving it a specific look depending on what is defined in a style sheet.

Classes can be a more difficult concept to understand, but they can make your life so much easier when it comes to styling a webpage. They can give your page a consistent look without much work at all. Here’s how they work:

Let’s say you want a blue border around certain elements, but you don’t want to program it each time you make a new element. That’s where a class comes in. Classes can be applied to any element, such as a div or a paragraph tag, a link or an image. Let’s start with the style.

In the internal or linked style sheet (note: this DOES NOT work with inline style), we’ll create a class called makemeblue. All class names are preceded by a period in CSS.

So, What's a Style Sheet?

Back when the web first started, there were tags like <font> and <u> that were used for formatting text. In 1996, CSS1 came out and slowly started to replace the old formatting tags. Now, many browsers have stopped support for these tags, making CSS the standard in the web design world.

Once you get used to the formatting, CSS is very simple to use. There are three ways to use CSS

• in a linked style sheet (external)
• a <style> tag placed in the header of a page (internal)
• an inline tag placed directly on the element it’s affecting.

Linked Style Sheets

The linked style sheet is created in the same format as the <style> tag in the header of the page, only it’s an external .css file that is pulled into the HTML page. You can load an external CSS file with the following line of text:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />