This article provides a guide for designing postcards and letters using raw HTML. When creating postcards or letters with raw HTML strings, it is essential to format HTML files and use CSS rules properly.
General Layout
The HTML design for a postcard with size 6 x 9 inches (in):
Important notes:
- keep all of the text within the Safe Zone to ensure that it will not be cropped;
- anything in the purple right bottom area is not printed. It's used for the postage and address information;
- extra spacing for postcards is used to ensure content such as the background image is printed to the edge. That's why the HTML sizing is larger, and you'll need to add 0.25 in to the dimensions. Meaning a 4 x 6 in postcard should be designed as a 6.25 x 9.25 in postcard in HTML. If you ignore this note, it could result in unprinted borders or unexpected white edges;
- postcard sizes could be 4 x 6, 6 x 9, 6 x 11. Do not forget to include an extra 0.25 in padding for the outer wrapper to exclude unexpected printed results described above, e.g., 4.25 x 6.25 in, 6.25 x 9.25 in, 6.25 x 11.25 in.
HTML Assets
- For any linked assets, you must use a performant file hosting provider with no rate limits, such as Amazon S3;
- Use inline styles or an internal stylesheet, do not link to external stylesheets;
- Link to images that are 300 DPI and sized at the final desired size on the physical mailing. For example, for a photo that is desired to be 1in x 1in on the final postcard, the image asset should be sized at 1in x 1in at 300 DPI (which equates to 300px by 300px);
- The sum of all linked assets should not exceed 5MB in file size;
- Use -webkit prefixes for CSS properties;
Because different browsers have varying user-agent styles, the HTML you see in your browser will not always look identical to what is produced through the API. It is strongly recommended that you test all HTML before sending.