UPDATED 01/27/20

PromoPick™ Guidelines

Congratulations on choosing PromoPick™ for your next digital promotion. The leading solution for quick-to-market programs, Realtime Media handles all of the development so you don’t have to.

The guidelines below serve as your reference for putting together your digital promotion from the bottom up. Starting with themes and font selection through post-registration options and user experience.

How to Use This Guide

PromoPick™ promotions are built upon one of our four Layouts. This guide displays the specifications and guidelines for each required asset to create your promotion.

Depending on the promotion type and layout you’ve chosen, you can refer to the Deliverables section to see the requirements for the PromoPick™ assets.

Sweepstakes?

Please provide assets from Layouts and Email & Social.

Instant Win Games?

Please provide assets from Layouts, Games and Email & Social.

UGC / Contest?

Please provide assets from Layouts, Gallery and Email & Social.

Is RTM doing my Creative?

This guide is only for clients who are providing their own creative and NOT commisioning Realtime Media for creative services.

Deliverables

PSDXD Sketch

Please provide the highest resolution layout banner in Adobe Photoshop, XD or Sketch format for adjustments.

JPGPNGEPSSVGAI

All assets should be delivered as a JPG, unless they have a transparent background, in which case it should be sent as a PNG. Any high quality vectors should be sent as an EPS, SVG or Adobe Illustrator file.

WHAT DO I NEED TO SEND?
  • All promotion types need assets from Layouts and Email Header.
  • Instant Win promotions need assets from Games.
  • Additional modules added may need assets found in Add-ons.
  • Assets are required for social shares for Facebook & Pinterest.
  • No additional assets are required for UGC / Social promotions. Only a selection needs to be made for a Gallery style.

Promotion Theme

You can customize your promotion further to match your brand by selecting theme colors and fonts. For colors, please send a hex code value (eg. #E40088) for each color / gradient.

Primary Color

What is your main theme color? This will be used for any headlines and modules.

Background Color

Select a background color for your main content to appear on.

Font Family

RTM recommends Adobe Typekit Web Fonts or Google Fonts for consistent web display.

PromoPick™ Layouts

Your promotion is built on one of the four layouts that PromoPick™ offers. Each layout has specific creative requirements designed to provide users with a modern, responsive experience that reacts dynamically across different screen sizes.

The following section outlines the assets required for each of the four layouts across all page breaks.

The Top Pic

BANNER IMAGES
Large Screens 3840 x 1000 - 1100px
Medium Screens 1920 x 650px
Small Screens 1120 x 650px
RETINA DISPLAY

All guideline sizes are specced to support Retina displays.

PROMOTION ICONS (OPTIONAL)
App Icon (Large) 256 x 256px
App Icon (Medium) 192 x 192px
App Icon (Small) 32 x 32px
Favicon (.ico format only) 16 x 16px
Icon Definitions

“App Icons” appear within modern browsers when on mobile/tablet devices. “Favicon” is within the browser tab on desktop devices.

ARTWORK FILE TEST ASSETS IN BROWSER

The Big Picture

BACKGROUND IMAGE
Large Screens 3840 x 2048px
RETINA DISPLAY

All guideline sizes are specced to support Retina displays.

PROMOTION LOCKUP
Large Screens 1920 x 560 - 650px
Small Screens 1120 x 560 - 650px
TRANSPARENCY

Please provide all Promotion Lockups with a transparent background. SVG is preferred.

BANNER IMAGES (SMALLER DEVICES)
Small Screens 1920 x 650px
Tablet Screens 1536 x 650px
Mobile Screens 1120 x 650px
RESPONSIVE DESIGN

All layouts require separate Banner Image assets to accommodate smaller devices.

PROMOTION ICONS (OPTIONAL)
App Icon (Large) 256 x 256px
App Icon (Medium) 192 x 192px
App Icon (Small) 32 x 32px
Favicon (.ico format only) 16 x 16px
Icon Definitions

“App Icons” appear within modern browsers when on mobile/tablet devices. “Favicon” is within the browser tab on desktop devices.

ARTWORK FILE TEST ASSETS IN BROWSER

The 50/50

Note: When using this layout in an iFrame, we cannot guarantee there will not be a double scrollbar in the experience on some browsers.

SPLIT SCREEN BACKGROUND IMAGE
Large Screens 3840 x 1800px Safe Zone: Left 50%, Right half will NOT be visible
RETINA DISPLAY

All guideline sizes are specced to support Retina displays.

BANNER IMAGES (SMALLER DEVICES)
Small Screens 2048 x 650px
Tablet Screens 1536 x 650px
Mobile Screens 1120 x 650px
RESPONSIVE DESIGN

All layouts require separate Banner Image assets to accommodate smaller devices.

PROMOTION ICONS (OPTIONAL)
App Icon (Large) 256 x 256px
App Icon (Medium) 192 x 192px
App Icon (Small) 32 x 32px
Favicon (.ico format only) 16 x 16px
Icon Definitions

“App Icons” appear within modern browsers when on mobile/tablet devices. “Favicon” is within the browser tab on desktop devices.

ARTWORK FILE TEST ASSETS IN BROWSER

The Right Focus

Note: When using this layout in an iFrame, we cannot guarantee there will not be a double scrollbar in the experience on some browsers.

PROMOTION LOCKUP
All Screens 300 x 300px
TRANSPARENCY

Please provide all Promotion Lockups with a transparent background. SVG is preferred.

FULL SCREEN BACKGROUND IMAGE
X-Large Screens 3840 x 2048px Safe Zone: Right 50%, Left half will be covered
RETINA DISPLAY

All guideline sizes are specced to support Retina displays.

BANNER IMAGES (SMALLER DEVICES)
Small Screens 2048 x 650px
Tablet Screens 1536 x 650px
Mobile Screens 1120 x 650px
RESPONSIVE DESIGN

All layouts require separate Banner Image assets to accommodate smaller devices.

PROMOTION ICONS (OPTIONAL)
App Icon (Large) 256 x 256px
App Icon (Medium) 192 x 192px
App Icon (Small) 32 x 32px
Favicon (.ico format only) 16 x 16px
Icon Definitions

“App Icons” appear within modern browsers when on mobile/tablet devices. “Favicon” is within the browser tab on desktop devices.

ARTWORK FILE TEST ASSETS IN BROWSER

PromoPick
Content Modules

The Promopick Content Modules build onto our layouts to allow more freedom to customize your promotion as your own. If you need space for additional copy or imagery, choosing a content module could be the right choice for you.

Feature
Module

The Feature Module allows you to add a block of copy over a background image or color.

BACKGROUND IMAGE
Large Screens 3840 x 2160px
Small Screens Background will hide and text will align center.
BACKGROUND TIP

Use a patterned/textured/plain background. The content area lays over the background and will move with the browser width and obstruct some view of the background. Avoid photography that includes faces, text, etc.

CONTENT TIP

Paragraph copy is recommended to keep under 530 characters (without spaces.)

DOWNLOAD ARTWORK FILE

Split Feature
Module

The Split Feature module allows you to highlight a block of copy along side a specific image.

Background Image
All Screens 3840 x 2160px
BACKGROUND Tip

Use a patterned/textured/plain background. The content area lays over the background and will move with the browser width and obstruct some view of the background. Avoid photography that includes faces, text, etc.

CARD IMAGE
Large Screens 1760 x 2200px
Small Screens 3072 x 1300px
CONTENT TIP

Paragraph copy is recommended to keep under 605 characters (without spaces.)

DOWNLOAD ARTWORK FILE

Column
Module

The Column Module allows you the freedom to add a few columns of copy, along with a corresponding title and image.

COLUMN IMAGE
All Screens
1200px wide. Height is variable but must match on all images provided.

Layout will render this as a percentage in the code, but 1200px wide ensures a crisp view across all screens as the browser scales.
NUMBER OF COLUMNS

This section can have a minimum of two columns, three columns, or a maximum of four columns.

Content Tip

Paragraph copy is recommended to keep under 155 characters
(without spaces.)

DOWNLOAD ARTWORK FILE

Box Module

The Box Module allows you to showcase a few different blocks of copy. This module is great for categorizing different products or subjects in your promotion.

CARD ICON
SVG Only Please ensure all icons are the same height and width.
COLUMNS

This section can have a minimum of two columns, three columns, or a maximum of four columns.

Rows

This section can have a minimum of one row, two rows, or a maximum of three rows.

CONTENT TIP

Paragraph copy is recommended to keep under 80 characters (without spaces.)

DOWNLOAD ARTWORK FILE

Instant Win Games

PromoPick™ Instant Win promotions provide the ability to select from one of seven games of chance. Each game is designed to give consumers an easy-to-play experience and can be fully customized to match brand standards.

The section below outlines all assets and sizes needed for each game to display across different screen sizes.

Click & Reveal

Users are prompted to click on the image shown to reveal if they are a winner underneath the image.

HIDDEN CARD
All Screens 1120 x 740px
REQUIRED CARDS

Please provide an image for Hidden Card, Revealed Lose and Revealed Win.

REVEALED CARD (LOSE)
All Screens 1120 x 740px
WCAG Compliance Tip

Please ensure there is significant contrast from the hidden card.

REVEALED CARD (WIN)
All Screens 1120 x 740px
WCAG Compliance Tip

Please ensure there is significant contrast from the hidden card.

DOWNLOAD ARTWORK FILE

Spin to Win

Users are prompted to click a button to start spinning the wheel. The user will land on either a win or lose slice.

WHEEL
All Screens 1200 x 1200px
TRANSPARENCY

Image must have transparent background outside of wheel design.

DOWNLOAD ARTWORK FILE

Scratch Card

Users are prompted to use their mouse (or finger on mobile) to use the scratcher/cursor to swipe away the image to reveal if they are a winner on the image underneath.

HIDDEN CARD
All Screens 810 x 520px
REQUIRED CARDS

Please provide an image for Hidden Card, Revealed Lose and Revealed Win.

REVEALED CARD (LOSE)
All Screens 810 x 520px
WCAG Compliance Tip

Please ensure there is significant contrast from the hidden card.

REVEALED CARD (WIN)
All Screens 810 x 520px
WCAG Compliance Tip

Please ensure there is significant contrast from the hidden card.

SCRATCHER CURSOR
Large Screens 90 x 90px
TRANSPARENCY

Scratcher Cursor must have transparent background outside of its design. Please note: If no image is provided, the cursor will default to a ‘Coin’.

DOWNLOAD ARTWORK FILE

Tumbler

Users are prompted to click on the Tumbler button to start the game. If the Tumbler stops on 3 matching images in a row, the user is a winner. Please provide at least 5 unique cards, and a maximum of 10.

CARD (FIVE UNIQUE CARDS)
All Screens 350 x 350px
REQUIRED CARDS

Please provide an image for at least 5 visually different cards or 4 images with an additional win card. Maximum number of unique cards is 10.

DOWNLOAD ARTWORK FILE

3 Card Flip

Users are prompted to click on each of the three cards. If they all match, the user is a winner.

HIDDEN CARD
Large Screens 424 x 600px
Small Screens 548 x 380px
REQUIRED CARDS

Please provide an image for Hidden Card, Revealed Lose, and Revealed Win.

REVEALED CARD (LOSE)
Large Screens 424 x 600px
Small Screens 548 x 380px
REVEALED CARD (WIN)
Large Screens 424 x 600px
Small Screens 548 x 380px
DOWNLOAD ARTWORK FILE

Tic-Tac-Toe

Users are prompted to click on the card to reveal what is underneath. Reveal all nine tiles and see if you get three in a row to win.

HIDDEN CARD
All Screens 400 x 400px
REQUIRED CARDS

Please provide an image for Hidden Card and five different Revealed Cards.

REVEALED CARD (FIVE UNIQUE CARDS)
All Screens 400 x 400px
DOWNLOAD ARTWORK FILE

Memory Card Match

Users are prompted to click on 2 images. If the 2 images match, a pair is made and an informational pop up overlay can appear (optional) providing more detail about the matching pair. If the user selects 2 images and a match is not made, the cards will  flip back over for the  user to select again. The game is complete once the user has matched all 6 pairs.

HIDDEN CARD
Large Screens 340 x 414px
Small Screens 400 x 260px
REQUIRED CARDS

Please provide an image for Hidden Card and six different Revealed Cards.

REVEALED CARD (SIX UNIQUE CARDS)
Large Screens 340 x 414px
Small Screens 400 x 260px
POP-UP CARD (OPTIONAL)
All Screens 1536 x 920px
INFORMATIONAL POP-UP CARD

This is an optional module that will be displayed once a match is made.

DOWNLOAD ARTWORK FILE

PromoPick™ Add-Ons

PromoPick™’s core codebase comes with the ability to overlay various add-ons that enhance the creative, user-flow, and consumer engagement to meet your goals and objectives. All add-ons are easily overlaid onto any of our four PromoPick™ layouts and can be tailored specifically to your brand.

The following section includes the specs and details for some of our most popular add-ons. If you are interested in other add-on functionality, your project manager will be able to provide you a list of additional add-ons.

Age Gate

The Age Gate modal requires a Promotion Lockup.

PROMOTION LOCKUP
All Screens 480px max width
TRANSPARENCY

Image must have transparent background outside of Promotion Lockup. SVG is preferred.

DOWNLOAD ARTWORK FILE

Navbar

The Navbar contains the Brand Logo on the left and an optional promotion countdown on the right. The promotion theme’s Primary Color will be used for the Navbar, except for The Big Picture layout.

BRAND LOGO
All Screens 128px height
TRANSPARENCY

Image must have transparent background outside of Brand Logo. SVG is preferred.

DOWNLOAD ARTWORK FILE

Image Strip

Between five and ten image blocks arranged horizontally under your promotion.

IMAGE
All Screens
Images should have the exact same height, at least 768px wide.
REQUIRED IMAGES

Please provide between 5 to 10 unique images that have equal height, at least 768px wide.

Image Tips

Do not include text in these images. Alt text can be provided via the copy doc.

DOWNLOAD ARTWORK FILE

Step Form

The optional Step Form is a pop-up module with an image on the left side. The Image is shifted to the top on smaller screens.

STEP FORM IMAGE (OPTIONAL)
Large Screens (Side) 720 x 1260px
Small Screens (Top) 1536 x 560px
RESPONSIVE DESIGN

The portrait oriented Side Image is replaced by the landscape Top Image.

DOWNLOAD ARTWORK FILE

Form Prize Images

The registration form can show option select buttons where the user chooses the prize they want to win.

PRIZE IMAGE
All Screens 400 x 300px
REQUIRED IMAGES

Please provide unique images with prize descriptions.

DOWNLOAD ARTWORK FILE

Vote Images

The Thank You page can hold a voting section with either images provided by the brand or from approved user uploads.  

VOTE IMAGE
All Screens 300 x 360px
DOWNLOAD ARTWORK FILE

Promo Email & Social Shares

The promotion doesn’t have to end at the Thank You page. Create custom thank you emails and the ability for users to share branded posts across social media as part of the post-registration user flow.

PromoPick Guidelines