Last week I had a new task from preceding client, he asked me to edit E-mail system to be easy to customize because over time he wants to make updates to emails subject's or contents or even E-mails templates.

After some discussion I decided to give him more freedom to design E-mails or change content's as he needed by using WYSIWYG editor, also I created a function to handle dynamic variables which he uses frequently within E-mail messages like (customer name-activation number-product name).

The first problem I faced in this project how to implement a simple design that compatible with email provides requirements. Because I noticed that Gmail or Yahoo or Hotmail or whatever email hosting providers have their rules or limits to accept HTML CSS designs.

Unfortunately I noticed that after coding design, so I made some surveying ,collect some important points ,after that I met the designer to clarify what limits and what he will keep in mind in the next email template, these points may change in the future, but until now you also need to know before talking such task.

Email design best practices rules

1- To be 650 pixels or less page width

This is a regular rule in email design which makes the email displays correctly in most of the email clients and various display configurations

2- To be Simple layouts as possible

This rules will skip much testing and debugging times and avoid many issues you may face with email providers but if you looking for more advanced design, you should be ready to use a lot of tables and give enough time to testing

3- Do not use external CSS files

In most cases, it's not working properly and you should add all of CSS code using inline CSS within HTML.

4- Do not use CSS classes

Write your style in line stead of declaring CSS classes As example will be <div style="color:#fff">words</div> instead of <div class="mycolor">content</div>

5- Don't use CSS shortcuts

Keep your CSS simple, although CSS give you the ability to set properties in groups. As example style="font: 14px, Arial" Instead Avoid compound style declarations and set attributes you should set each part individually. Such as style="font-size:14px; font-family:Arial"

6-Avoid using float or position and use tables instead, because many email providers don't support them

7- Use absolute image source URLs

Instead of including an image like this <img src="image.png"> you should include the absolute URL to the image file like this (<img src="http://yoursite.com/image.png">) and host those images on a reliable server

8- Always use alt tags <img src="http://yoursite.com/image.png" alt='web logo’>

Why?, because often email hosting providers disable images by default. So if you didn't put alt tags your subscribers will only see an empty box. But With an alt tag, they will see the text you put in the tag.

9- Do Not Embed Videos and/or Flash

Many email hosting providers will not support and many spam and virus detection programs will flag your email as spam/malicious. Instead take a screenshot of the video of flash player and embed that. When they click on it you can have the video/flash open in their browser.

10- Avoid using large or use images to help with your layout

Some people use images to help align items into their layout. Some email clients/filters will see that is a potential tracking image and penalize the email for that.

11- Test your email with images disabled

Because most email block or disable email image s by default it is very important you check to see how your email looks like when images disabled.

12- Background images are not fully supported

Because some email providers will not show them. If you still want to use a background image use the HTML background options instead of using CSS to declare a background.

13- Full body background colors

Many email clients (such as Gmail) do not show a background color that you set for the main body (<body> tag) We suggest if you are setting a background color in the body tag to also have a wrapping div with a background color that surrounds your content. This way even if the body background color is not supported you will have something pretty similar shown.

14- Do not put anything above the <body> tag

Anything you put above the body tag will probably be ignored and not used.

15- Do not add JavaScript

It is probably that it would be ignored in most email providers and some spam filters may detect it as malicious code.

16- Avoid Coping from Microsoft Office files

The HTML generated will almost have issues. On top of that when you copy and paste from Office you will be pasting in their formatting and will often have design issues.

17- Test, test, test.

Create email accounts across various services, and send emails to yourself.

18- Use basic, cross-platform fonts

Such as Arial, Times New Roman or Verdana,or Georgia.

Are you interested? Let's see how to do it in codeigniter with easy steps.

Script features

1- Easy to edit or replace with your template 2- Integrated with CKeditor 3- Dynamic template has saved in MySQL database table 4- Designed to be compatible with most email provider rules like (Gmail, Yahoo, Hotmail) 5- Free script, used in commercial or non-commercial projects

How to install

1- Extract downloaded zip file into root as example www or htdocs

2- Rename project to "CodeIgniter-mail-template"

3- Create new database named as 'demo’

4- Import demo.sql file from this path application/tables to the database.

5-Go to this link http:://locahost/CodeIgniter-mail-template

6-change sender (your) mail and receiver (customer) mail

Code description

1- Controllers

Mailing_settings.php

Function Index() .. To update mail settings

Function send_mail() .. To test sending mail template

2- Models

Settings_model.php

Function Update()... To update template and client mail in the settings table

Function get_option()…To get template and client data

3- views

Content/settings_edit.PHP

To show the Edit form and give you the ability to send mail after update

Conclusion

In this tutorial I tried to give a simple overview for any developer who wants to start developing an email template, also gave a simple rules for any designer who want a simple guide to starting design email templates, but this not means that you should start from scratch with email templates,instead you can use many email template frameworks like zurb starter templates look there and if you like one of this template go on and add you edits.

Download Link