SmartTemplates

Home Variable Definitions Example Templates Screenshots Version History Knowlegebase FAQ Bugs & Features Premium Features Licenses GDPR + Impressum

SmartTemplates :: Knowledgebase: General Tips on Good HTML


A 'Bad' Example

Here is a typical example for a HTML reply templates from a Stationery users. The user was having problems with font sizes being inconsistent, so I helped him rewrite it/ It somewhat shows that a little HTML knowledge can create something you almost want and yet creates some unpredictable results. I will later on show how this can be rewritten in a more modern, lightweight and above all more predictable and stable manner.

I will show what I replied to the user and what general HTML tips I gave in order to create better templates.

NEW MAIL - (bad example)

   <div style="font-family: Calibri,Arial; font-size:
   11pt">&nbsp;Hallo</div><br>

   <div style="font-family: Calibri,Arial; font-size:
   11pt">&nbsp;</div><br>

ANSWER - (bad example)

   <HR SIZE=1 ALIGN=LEFT >
   <FONT size=2 face=Tahoma><STRONG>From: </STRONG>%fromname% [mailto:%frommail%]</FONT><BR>
   <FONT size=2 face=Tahoma><STRONG>Sent: </STRONG>%X:=sent%%A%, %X:=sent%%e%. %X:=sent%%B% %X:=sent%%Y% %X:=sent%%H%:%M%</FONT><BR>
   <FONT size=2 face=Tahoma><STRONG>To: </STRONG>%to(name)%</FONT> <BR>
   [[ <FONT size=2 face=Tahoma><STRONG>Cc: </STRONG>%cc(name)% <BR> ]]
   <FONT size=2 face=Tahoma><STRONG>Re: </STRONG>%subject%</FONT><BR>
   <br>

My answer to the user:

As regards your template please try to avoid <font> tags, these are actually long deprecated. By the way it is quite hard to it is better to use a unit, such as pt oder px. I also noticed then your cc line is missing the </font> tag. This can also lead to rendering errors.

Instead, please use the css 'font' attribute:
http://www.w3schools.com/cssref/pr_font_font.asp
e.g. font: 10pt Calibri,Arial,sans-serif normal;
color: rgb(40,40,40);

NEW MAIL


   <div style="font: 11pt Calibri,Arial; color:#1f497d; margin-left: 1em;">
    <p>Hallo</p>
    <p></p>
   </div>

ANSWER

quote header (top box)

   <hr style="text-align:left;" />
   <span style="font: 10pt Tahoma;">
    <strong>Von: </strong> %from(name)% [%from(mail,link)%] <br>
    <strong>Gesendet: </strong> %X:=sent%%A%, %e%. %B% %Y% %H%:%M%<br>
    <strong>An: </strong> %to(name)%<br>
    [[ <strong>Cc: </strong> %cc(name)% <br> ]]
    <strong>Betreff: </strong> %subject%<br>
   </span>
   <br>

differences: no <font> tag, style only mentioned once in code, %sent% only necessary once in line. More readable and easier to maintain.

template (bottom box)

   <div style="font: 11pt Calibri,Arial; color:#1f497d; margin-left: 1em;">
    <p>Hallo</p>
    <p></p>
   </div>


General Tips


0. UPPERCASE tags

avoid, as these are hard to read and not en vouge - for better readability, always use lowercase tags instead.

1. The <font> tag

Avoid using it, instead use a <span> or <div> with the font style: http://www.w3schools.com/cssref/pr_font_font.asp

2. Using <div> container

<div> are displayed with display:block, which means they always take up 100% of the width of their parent containers. Therefore it is not necessary to have a <br> after a <div>.

TIP: If you like to use another style inside a <div> container please use the <span> tag.

A much better style to add some vertical distance to the next paragraph is using the margin-bottom attribute, e.g.: 

    <div style="margin-bottom: 1em;">
     some text / html here...
     blablabla
     etc.
    </div>

So, instead of writing 5 times <font> you can enclose the whole passage with <div style="font:courier;color:black">...</div>.

3. Using <span>

<span> are displayed with display:inline and are well suited to style a passage of text within a paragraph. The unlike div, span does not create an "invisible box" around the enclosed content, so you can use this in the middle of a sentence as well.

4. Using &nbsp;

&nbsp; (non breaking space) is an HTML entity which is used when two Words should not be broken apart by a line break; it should never be used to move an element or word to the right. For this purpose, we have the attributes margin and padding.

http://www.htmldog.com/guides/css/beginner/margins/

5. Using white-space (Spaces)

To improve HTML readability, you can insert an arbitrary amount of spaces. When displaying the HTML in the email reader, all white-space characters (spaces, tabs) are "collapsed" which means
2 spaces ⇒ displays 1 space,
5 Spaces ⇒ displays 1 space,
20 Spaces ⇒ displays 1 space.
Therefore, white space is a bad choice for any positioning tasks.

Exception: When usign the <pre> (preserve) tag, whitespace will be preserved. The related css attribut is named 'white-space'.

Generally using any html entities or (invisible) tags for creating positioning behavior are a bad idea, instead it is best practice to always use css positioning attributes such as: text-align, margin, padding, display, clear.

6. Paragraph <p> vs line breaks <br>

While the default behavior of most email clients (including Thunderbird) is to use <br> for creating line breaks (and using this twice to create paragraphs) it is actually preferrable to use a pair of <p> ... </p> to enclose a paragraph as it generally creates a nicer, more manageable layout.