Design Guidelines

When you send an API request to Lob, you are sending 3 pieces of information: the to address, the from address, and the content. Below are some best practices to follow when designing content for Lob.

Lob Templates


Bleed Area
For example, for postcards you'll notice that the file that you are sending is actually 4.25" x 6.25" instead of 4" x 6". This extra space is what we call the bleed area. The bleed area is included to ensure that artwork gets printed to the edge - artwork gets printed with larger dimensions and is subsequently trimmed down. Although, backgrounds and graphics should be extended into the bleed area as shown with the background in the above example. Not having them extend into the bleed area could result in a white or unprinted border around the edge of the postcard.

Safe Zone
Keep all text within the safe zone to make sure no important content is cut off.

Address Block and Postage
On the postcard, there is a space marked off as *RED: INK-FREE AREA*. Anything in this area will not be printed to leave room for the postage and address information.

Mail Piece Size
The sizes of our mail pieces and their respective templates can be found in our documentation. The API will return an error if you input a non-HTML file with the incorrect dimensions.

File Format

HTML
We highly recommend all our customers use HTML to design their postcards. You have a lot of flexibility when using HTML and can easily change data in the HTML to generate dynamic content. Data parameters also known as {{merge fields}} are only supported with HTML content. Lob renders your HTML into a printed mail piece, automatically.

When designing content with HTML, use inline styles or an internal stylesheet. Do not use an external stylesheet. If you are linking to images, make sure they are at least 300 dpi. Because the content is only being designed for a single size, we recommend using absolute positioning, as shown below.

body {
    width: 6.25in;
    height: 4.25in;
    margin: 0;
    padding: 0;
    background-image: url(https://s3-us-west-2.amazonaws.com/lob-assets/beach.jpg);
    background-size: 6.25in 4.25in;
    background-repeat: no-repeat;
  }

  #safe-area {
    position: absolute;
    width: 5.875in;
    height: 3.875in;
    left: 0.1875in;
    top: 0.1875in;
    background-color: rgba(255,255,255,0.5);
  }

PDF
If you decide not to use HTML, PDFs are also a good option. PDFs are generally in a vector format, which means they can be resized without compromising on resolution. It can be also be easily re-opened and edited.

When using PDFs with Lob, you will need to make sure all your fonts are embedded and the PDF is PDF/A compliant.

Image Formats
When using PNGs or JPEGs with Lob, we require a minimum of 300 dpi. The dpi is calculated as (width of image in pixels) / (width of product in inches) and (length of image in pixels) / (length of product in inches). For Example: 1275px x 1875px image used to create a 4.25" x 6.25" postcard has a dpi of 300.

PNG
This is a raster image format that can have a transparent background. It is generally a higher quality than other image formats.

JPEG
This is a raster image format that is often used for photographs. It does not allow for a transparent background.

Hosting Content
If you upload an image or send us HTML in your API request, Lob will render and host the content. If you are sending at high volumes, we recommend you host the content yourself on a performant file hosting provider such as Amazon S3 and send us a URL to the content in your API request. By removing the file upload from the API request, you'll be able to reduce your API request time.

Rendering Best Practices

To see how your HTML is rendered, create a Test API request either through the API or on the Dashboard. You'll be able to see a PDF proof of exactly what the design looks like. We highly recommend sending yourself a printed piece to verify the mail piece is how you like it.

Example Pieces

Checkout out our lob-templates repository on Github. The repository contains both PDF and HTML examples.

HTML
Lob's HTML renderer is based off of Webkit. For this reason, using the Safari browser will show previews more accurately. For the best results, we recommend submitting test API requests and reviewing the rendered PDF.

PDF, PNG, JPG
We highly recommend using Adobe Illustrator or Adobe Photoshop to design your content. They'll give you the most flexibility and export options.

Converting from PDF to HTML
We recommend using a developer to convert the PDF to HTML. We'd estimate 15 minutes to 2 hours of development time for the average file. Some applications like Adobe Illustrator come with HTML export options, but the automated tools for doing this today aren't great.