The following are tips and tricks to make Email Templates that generate impressive looking emails using Jaspersoft Studio.

Studio is designed to generate pixel-accurate documents.  This works well when generating PDF format output, but for HTML format output one needs top take into account the fact that HTML is designed to handle different screen formats.

In order to make a best effort at generating HTML output that is pixel-acurate, Studio generates the HTML using tables to position items.

To quote https://community.jaspersoft.com/wiki/making-html-xls-or-csv-friendly-re..., the guidelines are:

1. Minimizing the number of rows and columns in the grid oriented formats (minimizing the number of "cuts").

   To do that, you have to make sure you align your report elements as often as you can, both on the horizontal and the vertical axis and that you eliminate the space between elements.

   1. Inefficient Layout:

      

   2. Grid friendly layout:
      

2. Avoiding overlapping report elements.

   Make sure report element will not overlap when the report will be generated. This is because if you have two elements that share some region, it will be impossible for them to share the same cell in the resulting grid structure. You might obtain some unexpected results if elements overlap.

3. Give up using page headers and page footers.

   Especially when you want to obtain documents in which the page breaks are not relevant (CSV for example), make sure that you suppress the page header and page footer sections in your report design. You could also minimize the top and bottom margins for your report, so that when exported to HTML, XLS or CSV, your documents will be made of a single chunk, without page separators.

We also want the email to look good in the email clients that are commonly used. It is suggested that you test with Microsoft Outlook, Gmail using a browser on a workstation or laptop, and Gmail on a smartphone.

To achieve this:

1. use a Page Format with the height and width set to 500px, and zero for all margins
2. in the Report Properties, check the 'Ignore Pagination' option

Image guidlines:

1. Images look best if centered
2. Microsoft Outlook renders images at their original size ignoring any height or width set in the HTML.  Hence having designed the layout with an image height of say 60px and width say 200px, and having set the image property 'Scale Image' to 'Retain Shape', you then need to ensure that the images you are using have a height or 60px and a width not exceeding 200px.