This article provides a guide for designing postcards and letters using raw HTML. When designing 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:
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 bigger, and you'll need to add 0.25in to the dimensions. Meaning a 4in x 6in postcard should be designed as a 6.25in x 9.25in postcard in HTML. If you ignore this note, it could result in unprinted borders or unexpected white edges;
- postcard sizes could be 4x6, 6x9, 6x11. Do not forget to include an extra .25in padding for the outer wrapper to exclude unexpected printed results described above, e.g., 4.25x6.25, 6.25x9.25, 6.25x11.25.
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 100DPI 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 100DPI (which equates to 100px by 100px);
- 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.