See the visual result of your tests on different screen sizes

The AB Tasty editor allows you to view a web page as it is displayed in the browser of a desktop, tablet or smartphone. It also lets you make modifications and then view your changes with different screen sizes and resolutions directly in the editor.

To take advantage of the latest version of the editor, be sure to use version 2.1.1 of the framework at least.

Select a mobile version

The first time you launch the AB Tasty editor, your site's Desktop version will be displayed by default. Any changes you would like to make can be done on this version. You can then view these changes on a smartphone or tablet screen size or adjust the screen size at your convenience using Responsive mode.

You can make changes in the mobile version that will be propagated to the Desktop version and vice versa, provided that the modified elements are mutual to both versions of the web page.

In some cases, some modified elements of the web page will exclusively be visible on a Desktop version or Mobile version.

To access the editor's different mobile options, follow these steps:

Click the icon to display the mobile options.

From the dropdown list, select either Responsive mode or a predefined smartphone or tablet model.

See the visual result of your changes.

Mobile version options

Depending on the mode selected, the options available may vary as shown in the following table:

Responsive options

Manually adjust the screen pixel height and width

Show the visual display in Portrait or Landscape mode

Predefined model options

Display the smartphone or tablet model pixel height and width

Zoom in or out to 33%, 50%, 75% or 100%

Show the visual display in Portrait or Landscape mode

Responsive mode

This option enables you to adapt your site to different screen sizes as follows:

Ensure that the Responsive option is selected in the dropdown list menu.

Adjust the pixel height and width either by using the up and down arrows, or by using the resizing handles with your mouse.

If necessary, click on the icon to switch between Landscape and Portrait mode.

Smartphone or tablet models

You can select a smartphone or tablet model from a predefined list.

To do so, follow these steps:

Click on the dropdown list and select the model desired. The height and width are automatically updated.

If necessary, use the different zoom levels to display the full-page result irrespective of your screen's resolution.

Click on the icon to switch to Landscape or Portrait mode.

The following models are available:

Apple

iPad (excluding Retina)

768 x 1024

iPad Retina

768 x 1024

iPad Mini

768 x 1024

iPhone 3gs

320 x 480

iPhone 4 (4s)

320 x 480

iPhone 5 (5c, 5s)

320 x 568

iPhone 6/7 (6s/7s)

375 x 667

iPhone 6+/7+ (6+s/7+s)

414 x 736

Samsung

Galaxy Nexus

1280 x 800

Galaxy S / S2

320 x 533

Galaxy S3 / S4

360 x 640

Galaxy S5

360 x 640

Galaxy S6 / S7

360 x 640

Galaxy S8

360 x 740

Galaxy Tab

800 x 1280

Galaxy Tab 7.7 / 10.1

800 x 1280

Galaxy Note 1

400 x 640

Galaxy Note 2 / 3

360 x 640

Galaxy Note 4 / 5

480 x 853

Galaxy Note 10.1

480 x 853

Saving the visual result

The last settings selected are automatically saved and available when the editor is next opened.

Target a test according to a device

In case you would like your changes to be visible only for visitors who view a web page on a smartphone or tablet, it will be necessary to add a targeting criterion to your test.

In the following example, changes are made in the visual display for an iPad and should be visible to tablet users only.