v7 base design template

The v7 design base design template provides responsive and accessible survey support for modern browsers in one template. Because this design uses the responsive web design approach, this template does not support a separate mobile design template.

This design provides a new look and feel that:

Modernizes the survey taking experience with its responsive, immersive and engaging design.
Ensures a consistent survey experience across all devices.
Allows clients to easily customize survey elements to reflect their brand.

Refer to the Design templates for v7 for variations on this template that introduce various changes in style.

These are some differences from between v6 and v6.1 design templates:


Feature	v7.0	v6.1	v6.0
Single responsive web design that dynamically adjusts across desktop and mobile	Yes	No	No
Accessible surveys	Yes	Yes	No
Flexible branding elements across desktop and mobile	Yes	No	No
Transitions and animations, such as rise-up animation on page load, and hover-over color on all question types	Yes	No	No
Eliminates need for separate mobile design	Yes	No	No
Images require alternative descriptions (`alt`)	Yes	No	No
Hides uneditable base template CSS	Yes	No	No

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.

Brand a survey by customizing the design, and adding company logos and images to the customization. The most common branding elements can be customized easily with CSS in the template theme.

Branding elements call-outs: progress bar, header, logo, survey background, question titles, highlights and selections, and navigation buttons

For more information, see:

Mobile and responsive displays

The v7 designs uses responsive web design principles. This means you do not have to create separate designs for desktop and mobile surveys.

Note: The &forceMobileClass URL option is not supported in v7 designs.

When developing a design on a desktop display, you can see what the survey looks like on a mobile device using either:

Resize the browser window to have a narrow viewport. As you resize the window, the survey elements adjust and change to match the restricted display area.
Use a user-agent emulator on your browser to see how the survey displays on common mobile devices.
In a Chrome browser, Right click anywhere on the survey and choose Inspect to open the Dev Tools. In the Dev Tools, toggle the Device Toolbar and select the device to emulate.