GuidesAPIChangelogStatus
Sign InSign Up

Postcard templates

reading time 10 minutes

Suggest Edits
This page will help you get started with postcard templates. You can design postcards with HTML or using Inkit's template builder, which allows for fonts, colors, and image uploads.

📘

This article provides a guide for designing postcards. When designing postcards it is extremely important to properly format HTML files and use proper CSS rules.

General Layout

The HTML design for a postcard with 6x9 inches size:

668

📘

HTML examples (will be updated soon)

You can find the actual HTML examples with different size by clicking on this link.
Just copy raw HTML, customize text and CSS and give it a try!

🚧

Important notes

  • Keep all of the text within the Safe Zone or risk unwanted cropping.
  • Anything in the purple right bottom area will not be printed. This designated space is used for postage and address information.
  • Extra spacing for postcards is used to ensure content such as the background image is printed to the edge. This is why the HTML sizing is bigger, and you'll need to add 0.25 inches to the dimensions.
    Meaning a 4 in x 6 in 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, or 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;

❗️

Caution!

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.

Questions?

We're happy to help get your code set up or answer questions you might have.
Search our documentation, check the help center, or connect with our sales team.
Ask our support team ([email protected]) questions if you run into any technical roadblocks.

Updated over 1 year ago