IT Training Day 20100921 - NVU (html)
Prepared by: eIS
last updated: 20110406
Before you start using NVU...
Double check the configuration of your NVU. Please refer to THIS FILE for more details.
 
TIPS
  • Use a MASTER TABLE to constrain the entire content and use smaller tables inside to constrain different parts of content.
  • Must define WIDTH for TABLES and CELLS (especially when they are 2 columns in a row).
  • If possible, please try to keep the table width ≦ 650px if possible as to avoid horizontal scrolling when being viewed in email.
  • Copy and paste the text content using NOTEPAD as to avoid unnecessary text formatting being pasted into NVU.
  • Resize images BEFORE you upload them to the FTP in order to avoid potential display error when viewing in email.
  • It's strongly recommended to keep the email content as simple (avoiding complex layout) and as short (less than 2 pages in WORD) as possible.
  • You should always do your text formatting at last.
DEMO
Basic
  1. Creating Master Table
  2. Creating Inside Table
  3. Inserting IMAGE
  4. Adding background color to certain cell
  5. Creating a table with 2 columns
  1. TEXT links
  2. IMAGE links
  3. EMAIL link
  4. Anchor links (those jumping up & down links in a page)
  5. Formatting of TEXT
Advanced
  1. Setting Bordercolor for Master Table
    open "Table Properties" > Table Tab > Advanced Edit
    → Then under "Attribute", input "bordercolor"; under "Value", input the "Color Code"
  2. How to find the "Color Code"
    Go to top menu for "Format" > Text Color
    → Then choose the color you need, then copy the "Hex" code
  3. How to set the Font Style
    Go to "Source" tab, search for <body>, and paste style="font-family: Arial,Helvetica,sans-serif;" inside the first <table tag right after <body>
    Or you can paste the source in every <table you created.

Download all videos in AVI format (10.3MB)

Demo HTML File
FAQ
  1. THREE main reasons why an image does not display (usually in Lotus Notes):
    1) the link location of the image is not in full path (ie: the link is not starting with http://);
    2) the image is not in its correct format (ie: it appears as.jpg but actually it's a .bmp file);
    3) there's spacing in the file name
  2. Users must test 3 recipients format: Webmail (ie: gmail), IE and Lotus Notes.
  3. What's the root for EMID links:
    http://emarketing.adsale.com.hk/v3/PreviewWeb.aspx?gid=GID
  4. What's the link for viewing the result of an EMID:
    http://emarketing.adsale.com.hk/v3/viewResults.aspx?EMID=YOUR_EMID
  5. Unexpected spacing between words (this is a known NVU problem)
    ↓ For example:


    ↓ this is caused by the forced line break in the source codes inside "Source" tab:


    ↓ in this case, you will first finalize your html. Then copy the source code from NVU to notepad, and delete the line break / spacing manually like below.


    ↓ when finished, save it as UNICODE, .html in notepad.

    NEVER save your file using NVU after you've fixed the line break / spacing problem because NVU will format your source again and the problem will persist.
  6. Mail Merge
    • Please refer to THIS LINK for more details.
    • You must ensure the merge tag name "[ ]" inside the source code is matching with the column name in the uploaded EXCEl file, as the merging is depending on the EXCEL file you upload.
    • Also you can test to check if the merging is working by uploading a dummy EXCEL with data and "Preview in Email". Then it should merge the first row of data in your EXCEL file.
  7. EXCEL format
    Please refer to THIS LINK for more details.