Socialshaker was designed to allow you to quickly launch your campaigns with minimal graphic design work. To achieve this, we provide you with templates that offer atmospheres based on the highlights of the year, which are available for free with a click when selecting your game to configure.
However, if you prefer to create your own visual identity to highlight your brand, you have two options:
Entrust the graphic design of your campaign to our teams.
Import your own graphic elements into the game campaign.
If you choose the second option, we strongly recommend reading our Design Kit. Keep in mind that you can modify your game campaign at any time, even if it is already active and visible to your participants. Here's what you need to know:
1. Campaign Background
Description: If imported, the campaign background image will appear on every page of your game campaign. You can overlay a different page design on top of it if necessary.
Where to import: In the "Configuration" section of your campaign.
Recommended dimensions: 1920 x 1080px.
💡 Tip: You can create a blur effect on your background image in Photoshop to enhance the foreground elements (present in the visual design of each page) and improve the contrast and legibility of your campaign.
✍️ Note: You can choose to use this background as the default background for your mobile pages by checking the dedicated box. In this case, it will be centered and cropped to fit the phone's width.
2. Page Design (Desktop):
Description: If imported, the page design image will be superimposed on the campaign background image (if the latter has been uploaded).
Where to import: In all sections of your campaign except for "Configuration," "Installation," "Rules," and "CSS."
Recommended dimensions: 810 x 700px.
💡 Tip: You have the option to create a transparent PNG page design (a visual composed of elements introducing your game or showcasing your brand, such as a logo or characters). This allows you to overlay these elements with the campaign background image.
3. Page Design (Mobile)
Description: If imported, the page design image will be superimposed on the campaign background image (if the latter has been uploaded) or replace the desktop background (if uploaded).
Where to import: In all sections of your campaign except for "Configuration," "Mechanics," "Installation," "Rules," and "CSS."
Recommended dimensions: The standard dimensions are 480 x 710px to match the largest screen formats. However, we recommend ensuring that texts and visuals are well integrated within a maximum width of 320px to ensure visibility even on smaller phone screens. Note that we cannot guarantee consistent rendering across all mobile devices.
⚠️ Attention: You cannot provide a page design image for the "Mechanics" section. Only the desktop design will be present at this step, or only the campaign background if you haven't planned a page design or choose to display only the campaign background on mobile.
4. Action Buttons
Action buttons can be customized using the tools available in the editor. You can modify the button text, as well as its default color, font size, and hover effects.
5. Game Elements
Each mechanic has its own game elements that need to be created and imported in the "Theme" module of the "Mechanics" section. Their dimensions are indicated next to the upload area. You can find more information on this in the dedicated articles for each mechanic's configuration.
6. Desktop and Mobile Behavior
Please note that the campaign background visual, game area (including game elements), and texts and buttons adapt to mobile devices. Additionally, the page design visual is cropped on mobile devices to fit the mobile version. If you do not want this effect, you can upload a dedicated mobile image for your pages (except for the "Mechanics" section).
All graphics with important information should be centered on the visuals to ensure visibility on small screen resolutions. Examples of Mobile Resizing/Facebook Tab & Microsite/Iframe:
7. Summary of Dimensions
8. Preview Tools
To optimize the final appearance of your campaign, you can use one of these three tools to assess if any modifications are necessary:
Editor Preview: You can quickly preview your page and/or campaign by clicking on the preview icon at the top of the editor. Note that the mobile rendering is based on a single template and may not reflect the final appearance.
"Inspect Element": Another simple way to check the rendering on multiple mobile models is to follow these steps:
1. Copy the URL of your game from the "Preview" or "Microsite" section of the "Installation" part.
2. Open this URL in a new tab.
3. Right-click anywhere on the page and select "Inspect."
4. Activate the "Toggle device toolbar" option.
5. Select the device of your choice, and the game page will automatically adapt and display the final rendering.
The advantage of this method is that you can also view the rendering for iPad, for example, and know the dimensions of the selected device. However, you will have access to a limited number of devices.
Browserstack-like software: Some paid software allows you to choose the type of device on which you can test your game's URL. This will be useful both for testing your campaign on different mobile sizes and for providing support if a participant reports a display issue, for example.
