With HTML, you can not easily set margins, page size, and so on, just like using MS Word. Instead, the email layout should be set using spreadsheets. Here is an overview.

Placing E-mails in HTML Tables

Each email client (where you can read your emails, such as Outlook 2003, Outlook 2007, gmail.com, or yahoo.com) has its own HTML renderinger has a motor; – which means that every email client displays a bit differently in HTML. E-mail clients, including Outlook and Gmail, do not continuously support features such as swimming, margins, and padding. As a result, when designing HTML e-mails, the most appropriate is when a page & # 39; or e-mail the placed and placed e-mails with embedded spreadsheets. Tablecloth provides more consistent results between e-mail programs.

For example, to create a two-column newsletter style email, create a spreadsheet table, a spreadsheet for the content, and a spreadsheet in the footer. Then use the HTML table attributes to check the display of the tables. Finally, wrap these three tables in a container table and the width is 100%. The figure below shows how this view is displayed – there is a & # 39; container & # 39; table that has a table in the header, a table is the footer, and a middle table in 2 columns. Note: * 3 * columns for this table – a thin board cell is used to pass between the two columns.

Setting the width of each cell, not in the table

Continuing with the previous example, if the TABLE WIDTH, TD width, TD padding, and CSS joiner are merged into an email, then the result is almost every e-mail different from client. The most reliable way to spread the width of the table is to set the width for each cell, not the table itself. Here is an HTML code example (NOTE: HTML has an open and closing parenthesis replaced [and] to display the following:

[table cellspacing = “0” cellpadding = “12” border = “0”]

[tr]

[/ td] [/ td]

[td width = “24”] [/ td]

[td width = “300”] [/ td]

[/ tr]

[/ table] ] Be sure to set the width of cells for each cell in the table because e-mail clients will not reliably calculate the default width and avoid percentage percentages (except for the external "container table" such as Outlook 2007, are not respected, especially for nested tables. Just to set width in explicit pixels. Unless you add the fill to each cell, h use the table cellpadding attribute or CSS padding for each cell do not mix the two

Setting body background colors

As many email clients remove HEADERS and BODY tags, ab In CTC-STYLE embedded CSS section, The ackground on the BODY or HEAD labels is ineffective. To do this, work with a 100% width sign in your email address and specify that this background color is:]

Hi There! This is a "Hello World" e-mail with a standard color table with a background color.

[/ tr]

[/ table]

Wallpapers in Spreadsheets

Using wallpapers is very popular with websites and to some extent emails . However, there is so much controversy as e-mail clients display their wallpapers, so it's best to avoid background images in the tables. For example, Outlook 2007/2010 does not support backgrounds in spreadsheets.

If you still want to use wallpapers, the background color style always appears. For example, if your design has a mostly blue background, set the background color in the same color to email clients such as Outlook 2007 and 2010 that do not show your wallpapers.

Avoid spaces in spreadsheets

Avoid distance between tags (space, table, carriage return) wherever possible. Some e-mail clients such as Yahoo! and Hotmail may supplement some cushioning over or under the cell contents in some instances and can not break your plan for obvious reasons.

E-mail Width Matters

Spreadsheets up to 600 -720 pixels wide. Most e-mail clients have a message indicator of approx. 600 pixels wide, keeping in mind that many people now see their e-mails on a mobile browser, so in a wider sense, the recipient needs to scroll back and forth to display it. Larger screens indicate that the right width is expanding slowly, but if you want your content to be visible, it's best to keep it within 600 to 720 pixels.

For more information and HTML e-mail coding tips, download the full 13-page whitepaper at HTML e-mail design tips

Leave a Reply

Your email address will not be published. Required fields are marked *