Onsite Design Standards

Overview

This guide will bring you through creative and technical best practices and requirements for your onsite campaigns. If you have any questions after reviewing, reach out to your Wunderkind team.

Table of Contents

1. Deployments and Responsive Design
2. Wunderkind Best Practices

Deployments and Responsive Design

Deployment Types and Dimensions

We utilize various creative formats in order to support strategy and enhance performance. The dimensions listed below are based on our generally recommended sizes, but can vary based on exact placement and content.

(Width X Height, unit: Pixel)

• Standard Overlay - 800px X 600px
• Canvas Overlay - 1440px X 900px
• Top / Bottom Bar - screen width X 70px
• Inline Zone - sizes vary based on placement
• Annotation - sizes vary based on placement
• Side Tab - 200px X 300px
• Corner Tab - 150px X 150px

Response Design

Each creative is built to adapt responsively across devices and browser sizes in order to provide a seamless user experience.

Please design with the following sizing in mind:

Wunderkind Best Practices

Brand Consistency

We utilize various creative formats in order to support strategy and enhance performance. The dimensions listed Brand consistency resonates with users and establishes trust. It’s our goal to uphold your brand by aligning fonts, colors, button styling and visual elements across deployments and devices. We compile your brand styling into a CSS library which our system automatically applies to campaigns.

Assets Format and Size

Dimension of image assets should be at least 2 times as large as the actual size displayed on screen.

Fonts

Wunderkind can only integrate fonts that are hosted on your website into your onsite experiences. If fonts cannot be found on your website, Wunderkind cannot display them in your Onsite experiences. 

• We recommend using only 1 or 2 fonts to create a clean, on-brand feel. 
• Fonts should be no smaller than 10px for legibility.
• On mobile input field placeholder fonts should not be smaller than 16px.
• Links or clickable text should be recognizable with visual hints. eg. underline, color, bold, etc.

Please check with your designers, engineers or anyone in your team who knows what fonts are available on your current website.

Color

• We recommend using only 1 or 2 colors (outside of black and white) to keep the user’s focus on the ask at hand.
• Data shows that clean, solid color backgrounds typically perform better.

Alignment

We recommend using a center alignment layout across devices to provide a clean and easy to read experience.