Those who have ever designed an HTML e-mail know that almost every client out there will break something in your CSS. Here are some simple guidelines to follow that will surely reduce the odds of e-mail clients chewing up your design.

Don’t link to an external style sheet
I’ve seen many sites say the contrary, but in my personal experience, embedding your style directly in the html is the way to go. Not only did some clients ignore external style sheets, other clients rejected the e-mail all together because of external links. Don’t bother using <style> elements either, because that fails at times too. Use inline style sheets. Ex. <p style=”color:#FF0000;”> Text here</p>.

Don’t use a <body> tag
A lot of clients will ignore or remove the body tag or whatever style you set for your body. Use a <div> tag or use a table layout instead. I’m not a big fan of table layouts for websites, but in e-mail, it can definitely be the way to go as most e-mail clients react positively to css table-layout properties.

Research whatever CSS you plan on using
Just because you are now using inline CSS, doesn’t mean that every e-mail client will follow every property you decide to use. Use campainmonitor’s  Guide to CSS support in email clients to help you figure what properties and attributes will work and which ones will fail.

No matter how large or small your project is, a custom web solution is always appealing. Everybody wants an original site tailored to his/her specific needs, but sometimes starting from scratch isn’t necessary. Customizing an existing solution is often the answer to a durable and affordable website.

Risk Mitigation In Your Design

There are many things you can do from the start to minimize the possibility of the project going into overtime or over budget during the design phase. For starters, do your research before starting your design. Some designers like to jump the gun and build a beautiful W3C compliant web template before even doing a proper requirements gathering.

On a purely graphic design stand point, jumping straight into a css/html web layout with only written requirements from the client is a bold move. How about starting with screenshots and mock-ups first? In the long run, this will probably save time because making changes to a jpeg is a lot quicker than making them in the code (html/css).  Once an agreement has been made from the sketches, perhaps then it’s time to start thinking of coding the template.

Working From An Existing Web Template

But wait, we’re not done. Let’s come back to those requirements. Does the website require a content management system? Suppose the site requires user-friendly content management system and it’s determined that wordpress would be used.  Do you still go about generating those screen shots from scratch? Why not start from an existing wordpress theme?

Writing a wordpress theme from scratch is always an option and will definitely yield a unique and personalized design, but maybe modifying an existing one will give you a very similar result in a fraction of the time. A general benefit of using preexisting templates is that they’ve been tried and tested, and in the case of wordpress themes, they’ve also been formatted in the proper file hierarchy.

A Simple Case Study

The following is an example of how an existing theme was customized to meet the artistic & functional requirements of a client while staying within budget.

Template Shopping: We stumbled upon this template at http://www.freewpthemes.net and decided that the overall layout suited our needs. Best of all, it was free!

Initial Template

Initial Template Design

Basic Customization: This basic template generated a lot of feedback. One thing that was discussed was using more brown and earthy tones because the current theme was too dark.

Minimal Customization of the template (banner, link to album, etc)

Minimal Customization of the template (banner, link to album, etc)

Changing The Color Schema: After quick changes in the color schema, a fresh looking template was finally decided on and the wordpress template was ready to be customized.

Last Modification with different color scheme & logo

Last Modification with different color scheme & logo

Final Step: The previous screen shots were generated using PhotoShop. Only in the final step was the html and css of the original template changed to generate the new look.

To Sum Up My Thoughts
Sometimes your solution already exists somewhere out there and all it needs is a little customization. That’s really what a lot of web base solutions should be about. Take an existing usable and maintainable web solution and improve it to meet your needs.