Survey designs

Survey designs define the appearance of surveys, including the colors, the fonts, the images, etc. Think of surveys as where you define the HTML for a survey and the design as where you define its CSS.

For each design, you can add one or more variations, which are useful for maintaining multiple versions of a similar design.

Designs exist as a separate entity from surveys to allow a single survey to be paired with different designs depending on design rules. When a survey is created, it must have either a Design or a Variation associated to it. In Anonymous surveys, this association happens when the survey taker opens the survey link. But, for personalized surveys, design rules are evaluated per each Invitation email when it completes the sampling process.

To use and access Survey designs, see Access Shared assets.

Survey designs screen

Survey designs lists all the available designs and their variations, if any, for that particular company instance. Designs are sorted alphabetically by name, can be filtered by Program.

Layer 112354

  1. Details pane
  2. Details pane menu
  3. Details pane tabs
  4. Search bar
  5. Filter

Details pane

Click a design to reveal its details pane, which shows:
  • Details tab — Summarizes the most important information of your design, such as:
    • Variations — Number of variations for the design. For more information, see Variations.
    • Rules — Rule applicable to the design. For more information, see Design rules.
    • Created — The date and user that created the design.
    • Last modified — The date and user that last modified the design.

  • Rules tab — Rule applicable to the design. For more information, see Design rules.

  • In Use tab — Programs where the design is being used.

Details menu

ClickMore vertical icon. the details pane menu to:
Edit design details
Modifies the design's name, enable design variations, and restrict its properties.
Preview
Selects a survey to test a design. For more information, see Preview designs.
Important: To preview a design, you need to have permissions to edit at least one survey. For more information, see Feedback category.
Download
Downloads the design using Medallia Branding format (.mbf). To upload a design, click New email and select Import design, then select the file to upload. Note that you can only import a parent design.
Note: Medallia Branding format (.mbf) files cannot be opened and are not editable.
Delete design

Removes the design only if not used. See In use tab for details in which programs the design is being used.

To preview the design, hover over the design thumbnail.

Create and manage designs

Complete these steps to create a new design:

  1. From Designs, click New design and choose New Design from the dropdown.

  2. Enter the name of the design

  3. Optionally, select Enable design variations to create a variant of the design, and restrict some its properties. For more information, see Variations.

  4. Click Save.

  5. Edit the default content provided by the editor to match your needs.

  6. Create a Preview designs of the design.

  7. Select the Rules tab and click Add design rule to create a rule applicable to the design. For more information, see Design rules.

Create new design.

Manage designs

To manage a design, hover over the design thumbnail and click Preview to select a survey to preview your design.

Select Edit design to modify the design content. Click More vertical icon the details menu to edit design details and settings or delete the design.

Manage designs by clicking

Note: Changes to a design only affect surveys created after the design is saved and sync to the Survey engine. You cannot make changes to the design associated to a survey that has already been created.

Variations

Variations are variants of a design. Even if they inherit the properties from their parent design, you can make some changes to make them different from its parent design.

To create a design variation:

  1. From Designs screen, choose a design and click New variation.
    Important: The design must have Enable design variations checked to create a new variation.

  2. Give the variation a name.

  3. Edit the variation content shown in the editor to match your needs.

  4. Create a Preview designs of the variation.

  5. Select the Rules tab and click Add design rule to create a rule applicable to the design. For more information, see Design rules.

  6. Click Continue.

Note: Restricting any property in its parent design settings automatically restricts custom CSS in its variation, which cannot be enabled in the Design editor: Advanced properties section.

Manage variations

To manage a variation, click Edit variation to modify the variation content. Click More vertical icon the details pane menu to:
Preview variation
Selects a survey to test a variation. For more information, see Preview designs.
Important: To preview a variation, you need to have permissions to edit at least one survey. For more information, see Feedback category.
Delete variation

Deletes the variation only if not used. See In use tab for details in which programs the variation is being used.

Design rules

Design rules determine when a survey uses a particular design or variation. When a survey matches the design rule, it applies the referenced design to that survey. For example, if a rule exists that references the design Brand colors - Germany and has the rule Country = Germany, then this design is applied to the surveys that match that rule.

Design rule

To create a rule and set its priority:

  1. From the Rules tab, select Add design rule.

  2. Enter a rule name.

  3. Click Add rule to build the design rule. For more information, see Logic, rules, and conditions.

  4. Set the rule priority. The priority establishes the position that rule takes relative to the others if a survey matches multiple rules.

  5. Click Continue.

Create a design rule.

Manage design rules

To manage a rule, click More vertical icon the rule menu to:

Edit rule
Modifies the rule values.
Delete rule
Deletes the rule.

Design editor

The Design editor is the building area where you define how the different elements of the design look and feel. exposes many of the CSS properties that are most commonly edited through a friendly interface with checkboxes and dropdown menus. The editor is divided into several tabs, each with settings that belong to a section.

Restriction: Designs built with older tools and based on the v6 or v6.1 templates can be edited using the Design editor, but it has limited features.

Elements from designs that can be customized.

General

Sets the overall text style, color, and size, background color, content animation (pages slide-up when loading), and uploads a favicon. To upload a favicon, click Choose file to upload a file from your local device. The favicon must already be adjusted to the desired size, as the Design editor can only use it in its original size.
Tip: Favicon size should be 16x16 px.

Header and progress bar

Uploads a page logo image, sets header background and border, and progress bar visibility and colors. To insert a page logo, click Choose file to upload a file from your local device.

Note: The recommended size for the header image is 600 x 150 px. Header supports JPG, GIF, and PNG file formats and file size can be up to 2 MB. For more information, see Logos.
Restriction: Survey designs only support page logo images. Splash, decorative, and property logos are not supported.

Questions and content

Text sizes and content colors for different content parts such as questions, choice options, Grid, Rating scale and Text elements.

Buttons and footer

Sets colors for buttons, and defines footer background and link colors.

Advanced

Sets spacing options, custom CSS, and additional images. For more information, see Design editor: Advanced properties .

Revert a variation

On Variations, properties that are different from the original value in the design show a revert icon next to them. Click Redo icon Revert to revert the variation value of the property to the current value for that property in the parent design.

Preview canvas

While editing the properties of a design, the Preview canvas displays a generic survey with the design applied to it, updated in real time as you make changes. The Preview canvas has two modes, desktop and mobile to simulate the different sized screens. Click Desktop and Mobile icons to switch between these views and verify that the design remains responsive. Interact with the preview to view how the design responds to hovering over an option, selecting a choice, etc.
Note: If Enable custom CSS is checked in the advanced tab, changes to the CSS are only updated in the canvas when clicking Update or Save.

Desktop and mobile screen options.

Design editor: Advanced properties

Click the Advanced section to configure:

Reduce spacing

The Reduce spacing checkbox fits the survey into a more compact format by reducing the font size, reducing the padding on several elements, and hiding certain unnecessary labels such as the headings Extremely Satisfied, Satisfied, etc.

The dropdown menu can activate this feature always, never, or only for survey takers that view the survey on a mobile device.

Reduce spacing options.

Restriction: Reduce Spacing can only be set on designs, not on Variations.

Custom CSS

Besides the properties exposed the Design editor, you can edit any of the CSS properties in the design by writing custom CSS code. In Variations, restricting any property in its parent design settings automatically restricts custom CSS, which cannot be enabled in the design editor advanced properties section.

To write custom CSS, select Enable custom CSS and additional images.

CSS properties are applied to all HTML elements that belong to a specific class. You cannot modify the actual HTML code of the survey, since that is automatically generated based on the survey, but you can leverage the existing HTML elements and their classes to apply CSS styles to them.

The example below sets the background color of all elements that belong to a class named example-class to white. 

.example-class { 
	background-color:#FFFFFF;
}

To refer to an element in the survey:

  1. From the Survey editor, preview the survey.

  2. Find the element you are interested in and use the Inspect Element tool of your web browser to view its HTML code.

    Click Inspect element on your web browser to view the HTML code.

  3. Take note of the element class property.

    In the example below, the selected <div> HTML element has the class header. On the right, you can see the CSS properties that are applied to it. You can even experiment by changing the values of CSS properties on this panel to see the result rendered on the browser. When you are happy with the results, copy these values to your design and test it.

    Class header on a selected <div> has CSS properties that can be modified to see how a design looks like.

    Tip: Not every HTML element supports every property. For more information, see CSS Reference at W3Schools.

  4. Click Update to validate that the CSS code uses proper syntax and update the canvas preview with the current contents of the Custom CSS. Note that this does not save the code.

Note: The CSS code pasted in Custom CSS cannot exceed 512 KB.
Image references in CSS should point to images that are uploaded through the editor. For more information, see Additional images.
Warning: Do not attempt to upload image files using variable references such as $IMG_SOME_FILE$ as it is not guaranteed that the URL works unless hosted in Experience Cloud.

If any properties are specified both in a field and in custom CSS, the custom CSS is given priority. For more information, see Design templates for v7 and Customize v7 designs.

Important: Medallia, Inc. surveys are based on a design template that complies with American Disabilities Act (ADA), Section 508 regulations, and with the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards. Medallia surveys generate accessible HTML, and the design template generates accessible CSS, which combine to create accessible survey pages. Any changes to a default ADA compliant survey — including but not limited to adding HTML, adding or changing CSS font or color styling, or adding images — have the potential to violate one or more of the standards and regulations. For more information, see Shared assets accessibility.

Additional images

Add images to apply them via CSS to parts of the design other than the logo and favicon (which are uploaded via fields in the Design editor). For example, you can upload an image and apply it as a background image for the footer.

To add additional images:

  1. Open the Advanced tab.

  2. Check Enable custom CSS and additional images.

  3. Click Choose file.

  4. Select an image from your local device. Make sure the image appears listed. To change or delete it, click Delete icon. delete.

  5. Click Copy reference to have a tag that references the image copied to your clipboard. The reference is a string that includes the image name and some additional characters that make it more unique.

    Choose an additional image to upload.

    For example, an image reference for a file named myimage.jpg could be IMG_REF_387_MYIMAGE.JPG.

  6. Paste the image reference where needed in the custom CSS field, wrapping it with a url() function to process it.

    Adding custom CSS and an additional image.

Note: If you upload an image but don’t reference it in the custom CSS, the image is deleted when clicking Save. If the custom CSS references an image that is not uploaded, you cannot save changes to the CSS.

Preview designs

Preview runs a quick test on the design before sending them to actual survey takers. To test your design:

  1. While editing a design or variation, click Preview on the Preview canvas.

    Alternatively, from Designs screen, click the details pane menu and select Preview design/variation.

  2. Select a design and, optionally, one of its variations.

  3. Select a survey definition and one of its versions.

  4. Click Create preview link.

  5. Copy the link to a browser tab and view the results.

Note: When filling in a preview survey and submitting responses, no data is stored in Experience Cloud.

Edit designs based on v6 or v6.1 templates

When you edit a design or variation that was created with an older tool and the design is based on the v6 or the v6.1 templates, the Design editor only shows features that are compatible with that version.

The Design editor always creates designs and variations based on the the most recent version of the survey, with one exception. When you create a new variation as a child of an existing design that is based on the v6 or the v6.1 template, the new variation is based on the same template as the parent. When opening this variation, it only shows features that are compatible with its version.

Editing a v6 design.

Images

The Images tab shows each of the images that are supported for the v6 and the v6.1 template. Click Choose file next to an image to upload it from your local system.
Note: Unlike v7, the v6 and v6.1 versions of the template only support images applied in specific parts of the design, so these are called out, each with their own Choose file link.

Logo types.

If you click Enable mobile designs, you must also upload a mobile version of each image.

Custom CSS

When editing a legacy design, you can not define properties t through the Design editor. Instead, edit the CSS code directly to set the properties to the desired values.

Since v6 and v6.1 are not responsive to different devices, two separate CSS files exist — one for desktop devices and the other for mobile devices. Enter the CSS for each of these separately.

The Base CSS field is displayed when the design includes prior modifications to this field.
Tip: All changes should be done on the Custom CSS instead of the Base CSS.
On a design, you cannot restrict any CSS properties from being edited on a variation. You can only set the design images as restricted.

Preview

There is no Preview canvas for the design. Instead, click Preview to build a preview using one of the existing survey.