HTML E-mail Stationery & Forms Designer "Cheat Sheet"

NOTE: these instructions and tips are for experienced Web designers only.  If you are having a Web designer create your e-mail HTML stationery and/or forms for you, be sure they read this document before starting.  If they don't understand the instructions below, find a professional who does!

Here are some tips to help your designer create stationery that will set you apart —in a good way!  The idea is for the message to look great no matter who receives it, or how many times it is replied to.

• Tables - use centered fixed width tables (no more than 550 pixels wide) as the main message area for your stationery.  This will ensure that recipients can see the whole message without horizontally scrolling and that the stationery design will not interfere with their ability to reply (i.e. reply text getting lost in the graphic design of the stationery).  Always use CSS styles for formatting your tables and the text they contain.
   
• Backgrounds - avoid the use of background images or colors that use the full width of the page.  Otherwise, replies to messages with this kind of stationery can look unprofessional.
   
• Graphics - can never be said enough, keep the graphics light to speed downloading.  And, maintain graphics on a server rather than locally.
   
• Fonts - keep them simple and non-serif (i.e. Arial, etc. for easy readability).  Also, DO NOT USE INLINE FONT TYPE OR SIZE ATTRIBUTES!!  Only use CSS styles to define the look and size of fonts.  Ignore this at the peril of having your message looking very unprofessional depending upon the text size settings of each recipient (see CSS below).
   
• CSS - use CSS definitions in the header of your HTML code (don't use inline or externally referenced code).  The use of CSS is critical to ensuring that the HTML message will look consistent regardless of the text size viewing settings of the recipient.  Also, make sure the CSS code is benign enough to work over most major e-mail plateforms.  Lastly, make sure that your CSS definitions allow for a wide range of options in the main message window (i.e. defining how bulleted and numbered lists look, etc.) to preclude a user, not knowing any better, "breaking" the look of the message by inserting something that was not accounted for in the CSS code.

Here are some tips to help your designer create e-mail forms that will help your business run smooth!

• Tables - use table cells, not true form elements, to simulate an e-mail form.  This is because it is actually more flexible from a user's standpoint (cells will expand with the text as needed) and the submission of a true CGI form is tricky at best as to how the results look to whom it is directed.  In addition to all the Table comments above applying here as well, it is suggested that you provide a "border margin" of some nominal size to avoid input data butting up directly to the cell border (recommend 4 pixels for left and right sides).  Keep in mind, you have a great degree of flexibility to format individual cell borders, margins, color, font, etc. using CSS code.
   
• Colors - use cell colors intelligently to facilitate the users understanding and ease of completing the form.
   
• SPECIAL NOTE - after a form is completed and turned into "stationery" load a new message with that form.  Then go to each cell and delete the spurious "space" character that often shows up in each cell (especially if you use FrontPage to do the design) before saving it as a .oft template file.  This will help the input data to line up more consistently.