Testing responsive/adaptive content

2016-12-20_03-24-44With increasing traffic from mobile devices such as phones and tablets, sites have adopted dynamic layouts that adjust to the user device types and screen widths. The most popular methods have been Responsive Design and Adaptive Design. Although fundamentally different in their approach, both designs present users with different layouts based on the pixel width of their screens. The Webrends Optimize visual editor allows users to specify the width of content views to mimic desktop, mobile phone, and tablet devices. Currently, the size selector supports the following widths

  • Desktop: 100% (full browser width) – Default
  • Tablet: 768px (portrait)
  • Tablet: 1024px (landscape)
  • Mobile: 375px
  • Custom size

To choose a preset size to view your content:

  1. After you load a page in the visual editor, click on 2016-12-20_03-22-58 in the toolbar to display the drop-down menu. The currently selected size will be checked.
  2. Click on any preset size. The view area will resize to the selected width and your content will appear within the visual editor as it would appear to a user.

To choose a custom size to view your content:

  1. After you load a page in the visual editor, click on 2016-12-20_03-22-58 in the toolbar to display the drop-down menu. The currently selected size will be checked.
  2. Click the Custom Size button to launch the custom size dialog box.
    2016-12-20_03-25-09
  3. Enter a name and pixel-width for the custom view, then click Save.The view area will resize to the specified width and your content will appear within the visual editor as it would appear to a user. The custom size now appears in the drop-down menu.
    2016-12-20_03-26-37

To edit or delete a custom size from the drop-down menu:

  1. After you load a page in the visual editor, click on 2016-12-20_03-22-58 in the toolbar to display the drop-down menu. The currently selected size will be checked.
  2. Move your cursor over the custom size in the menu to display the edit and delete icons.
    2016-12-20_03-31-56
  3. Click on the Edit icon to change the name or the pixel-width for the custom size.
    -OR-
    Click on the Delete icon to remove the custom size from the menu.