Responsive mode

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:

1. Click the  icon to display the mobile options.
2. From the dropdown list, select
   either
   Responsive mode
   or
   a predefined smartphone or tablet
   model. 
   
3. 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:

1. Ensure that the Responsive option is selected in the dropdown list menu.
2. Adjust the pixel height and width
   either by using the up and
   down arrows,
   
   or by using the resizing handles with your mouse.
3. 
4. 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:

1. Click on the dropdown list and select the model desired.
   The height and width are automatically updated.
   
   
2. If necessary, use the different zoom levels to display the full-page result irrespective of your screen's resolution.
   
   
3. Click on the  icon to switch to Landscape or Portrait mode.

The following models are available:

Apple	iPhone 5 / SE	329 x 568
	iPhone 6/7/8	375 x 667
	iPhone 6/7/8 Plus	414 x 736
	iPhone X	375 x 812
	iPhone XR/ XS Max/ 11/ 11 Pro Max	414 x 896
	iPhone 11 Pro	375 x 812
	iPad	1024 x 768
	iPad Pro	1024 x 1366

Samsung	Galaxy S7 / S8	360 x 640
	Galaxy S9	360 x 740
	Galaxy S10	360 x 760
	Galaxy Note 10 / S10+	412 x 869

Huawei	Huawei P9	360 x 640
	Huawei P20	360 x 748

 

Oneplus	Oneplus 7 / 7 Pro / 7T Pro	412 x 892
	Oneplus 7T	412 x 914

 

Xiaomi

Redmi Note 5

393 x 786

 

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.

 Target the test according to a tablet device as follows :

1. Create an A/B test.
2. In the editor, select the iPad model.
3. Apply your desired modifications.
4. Go to Step 3 of your test (Targeting).
5. Click Custom Audience and Add criteria.
   
6. In the browser category, select the Device criterion.
7. Click Add.
   
8. In the drop-down list, select the tablet item.
9. Click  Save.