Integration Best Practices & Style Guide

The Nativo Publisher Style Guide provides requirements and recommendations for setting up and styling native ads and in-feed units on your website. Where should you place in-feed units? How should they look on varying layouts? We answer these questions and provide guidance on native advertising disclosures and how to avoid some common layout pitfalls.

Let's start with a review of the key elements of an In-feed Unit.

The graphic below highlights the key elements of an In-feed Unit. Know that some elements are required, and others are optional, but their inclusion will help your consumers easily distinguish between editorial content and native ads.

Read more about [Nativo's dual disclosure requirements and best practices] (doc:disclosure-best-practices) to set up native ad executions.

Not all potential in-feed unit locations lend to a positive consumer experience and could cause ads to underperform. Let's walk through in-feed unit placements, what positions and page locations are best for in-feed units.

In-feed units should be placed within the main editorial content feed, after the first article.

In-feed units should be placed after the first article and feel integrated within the site layout.

We recommend the in-feed unit be positioned above the fold or “refresh Load More” line.
​

Nativo JS is able to dynamically inject the in-feed units after the designated # of editorials.

Let's identify the recommended placements on article-level pages and what elements to factor into these placements.

MIDDLE OF ARTICLE
In-feed units should follow the alignment of the article text or images on the editorial content page, and not break or disrupt the alignment.

In-feed units should be flush with content along both side rails for a clean appearance that will not distract from the site experience. The ideal in-feed unit placement would be below pagination and author bio when both are present.

The following design tips will help you create in-feed units that look integrated within the site and preserve the consumer experience.

In this example, the in-feed unit shares the site’s overall look and feel but stands out with a different background color, text color, “sponsored content” disclosure label, and advertiser byline.

The right spacing is important to ensure that the in-feed unit has room to breathe. Make use of style attributes like padding, margin, and line height to add white/negative space between elements within the in-feed unit and other surrounding modules.

(1) Appropriate spacing of in-feed unit elements
'Sponsored content' label, preview image, brand content headline, advertiser byline, and preview text are all housed in the same in-feed unit, but they should have their own room where they fit comfortably.

(2) Proper spacing between in-feed unit and other surrounding modules
For stand-alone in-feed units, keep enough padding above and below to separate the in-feed unit from other widgets/-sections/modules.

(3) Too much or too little spacing
No spacing or excessive spacing is undesirable and can make the in-feed unit stand out for the wrong reasons, causing it to be ignored by users.

(4) Uneven spacing
Too much padding on the top but none at the bottom disrupts the visual balance and form of the in-feed unit. Think not just evenly, but also proportionately when it comes to spacing.

Exaggerate color contrast between the foreground (text) and background color of the ad unit.

Remember the different type of users, devices, lighting and monitors that the native ad will be exposed to. What an elderly user with bad vision sees on a low-quality monitor inside looks different to a young user viewing the same content on a tablet in a park.

It's important to clearly distinguish the relative importance of elements of the in-feed unit.

Style attributes: Help the user differentiate between the disclosure label: SPONSORED CONTENT, the brand content headline, advertiser byline and preview text. Besides size, text-weight (bold), text-variant (italic), the text-case (ALL CAPS)can be very useful. Disclosures should be prominent and clear to the user.

Spacing: Combine the spacing guidelines with the concept of hierarchy to successfully achieve a balanced yet visually clear placement.

Color: A red advertiser byline will visually follow the brand content headline, which has the same text size and width.

Nativo requires clear ad disclosures for native ad executions in accordance to the new FTC Native Advertising Guidance. Our advertiser content acceptance policy dictates that Nativo does not accept content that misleads consumers. In addition to the required “Sponsored Content” label, Nativo has added an advertiser byline requirement to make it clear to the reader that the advertiser may have influenced or written the content. Dual disclosures are required on in-feed units, content landing pages, and social share landing pages.

[Read more about Nativo's Dual Disclosure requirements and best practices] (doc:disclosure-best-practices) to set up native ad executions in accordance to these requirements.