Mobile viewports for responsive experiences

Mobile viewports let you preview your Adobe Target activities on screens of various sizes.

The mobile viewport preview feature is designed for responsive sites that render well on various devices, windows, and screen sizes. Responsive sites automatically adjust and adapt to any screen size, including desktops, laptops, tablets, or mobile phones.

A viewport is defined by the size of the rectangle filled by a web page on your screen. The viewport is the size of the browser window, minus the scroll bars and toolbars. Browsers use “CSS pixels.” For many devices, such as those with retina screens, the viewport is smaller than the advertised device resolution.

Below are the viewports and resolutions for popular devices. Remember to use the viewport size in Target.

To deliver an activity to visitors on a particular device, choose the appropriate audience for that device in the activity diagram. Use the Mobile Web Composer to edit the page in the activity for that device. To run an activity across your entire digital experience to ensure it looks good across all devices, don’t apply targeting. Instead, use mobile viewports to preview the activity on each screen size.

For responsive sites, typically your site is designed to open in a different view when accessed by a device with a specific screen size. Those screen sizes that trigger the new views are known as CSS breakpoints. CSS breakpoints are points where website content responds depending on device width to display the optimal layout to visitors. CSS breakpoints are also called media queries.

Save your CSS breakpoints in Target so you can preview your experiences for each view you define. Each of these experiences displays in a mobile viewport in the Target interface. Open the view for each screen size by clicking that viewport along the top of the display.

If your site is not responsive, use the Mobile Web Composer to view a site if your activity is targeted to a specific device.

Mobile viewport configuration

Configure mobile viewports you want to make available while creating your experiences.

1. Click Administration > Visual Experience Composer.

2. In the Mobile viewports configuration section, click Add.

   

   Or

   To change the configuration of an existing mobile viewport, select that viewport, then click the Edit (pencil) icon.

3. Type a name for the mobile viewport.

   Give your mobile viewport a descriptive name that is easy to recognize. The name can be up to 36 characters long.

4. Specify the screen size of the mobile device, both width and height.

   The width can be 150 to 968 pixels. The height can be 150 to 1280 pixels.

5. (Optional) Select the operating system of the device.

   Options:

   • Android
   • iOS
   • Windows
   • Symbian
   • Blackberry

   If you use the Enhanced Experience Composer and choose an operating system, Target emulates that device when you view the page. For example, if there is a different look and feel for Android than for iOS on your responsive site, Target mimics that behavior.

6. Click Save.

Create a responsive experience

Add mobile viewports to your Target activities to create responsive experiences for mobile screens.

1. Create the desired activity.

2. In the Visual Experience Composer (VEC), click the Settings gear icon, then select Add Mobile Viewports.

   

3. Click the Devices icon, then enable each device that should have a mobile viewport.

   

   The mobile viewports are listed from smallest to largest according to width.

4. Edit the mobile viewports as desired.

   Any changes you make to the experience are applied to the experience on all devices. For example, you change the text in a heading.

   Mouse over the name of a viewport to see the viewport’s size.

   

5. If desired, toggle between portrait and landscape modes by clicking the desired orientation icon.

   

Training videos

The following videos contain more information about the concepts discussed in this article.

Visual Experience Composer (2 of 2) (7:29)

The following demo video includes information about using the Visual Experience composer to work with mobile viewports:

• Rename and duplicate an experience
• Create a redirect experience
• Target an activity to a single URL or a group of URLs
• Create a multi-page activity
• Preview and build experience for responsive websites
• Use overlays to highlight types of elements

Account Preferences in Adobe Target

This video includes information about setting up mobile viewports, beginning at 4:40 in the video.