• Available WEBDEV tools.
• Positioning grid.
• Resolution slices.
• Overrides.

	Estimated time: 30 mn

• A simple example was prepared for you:
  1. Start WEBDEV 24 (if not already done).
  2. Display the WEBDEV home page if necessary (Ctrl + <).
  3. Open the "WW_Responsive" project. To do so, in the home page, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".

Creating a page

Fluidity and Responsive Web Design

Resolution slices

The cursor that was just used belongs to the resolution slices, second principle of WEBDEV Responsive.

The resolution slices are used to materialize the resolutions of different devices.

• Let's study the operating mode of these resolution slices.
  1. In the "WW_Responsive" project, open the PAGE_Adaptations page.
  2. Three slices appear above the page:
     
  • In blue, the Desktop slice, for displaying on a desktop screen,
  • In green, the Tablet slice corresponding to the display on tablets,
  • In yellow, the Mobile slice for the display on Smartphones.

The resolution slices allow you to define the layouts that will be used for each type of device.

	Note	You can add custom resolution slices to manage the different devices more efficiently. To change resolution slice, you can use the cursor or click the resolution slice directly.

	Caution	Responsive WEB Design with WEBDEV is using the concept of "Desktop First" by default. In this mode, the controls are always created in the Desktop slice. Then, the interface must be adapted to smaller slices.

The Desktop slice corresponds to the base of the page, without adaptation.

To perform adaptations in the other resolution slices: all you have to do is perform the modifications in the editor directly.

• Let's study the PAGE_Adaptations page.
  

• This page contains different controls:
  • a title at the top,
  • a Map control to indicate the restaurant location,
  • a Static control containing the restaurant address,
  • an Image control on the right to display an advertising banner,
  • a Looper control at the bottom to display the opinions.

• Run the page test ( among the quick access buttons).
  • The page appears in test as it was in the editor in Desktop mode.
    Note: This page is using a Map control. In GO and in deployment, a Google key must be used. Otherwise, an error occurs in the Map control. See the online help to get this key.
    If you own a key, specify it in the "Project" tab of the description window of project.
  • Reduce the size of your browser to see the change of slice.

• Some page controls move or disappear according to the resolution slices displayed.
  For example, the advertising image is shown in the Desktop slice but it becomes invisible in the smaller slices.
  

How to adapt the controls to the different slices?

Performing adaptations regarding the positioning and/or the size is child's play! The modifications are performed in the editor directly (like any other modification). In fact, these adaptations are overrides.

	Caution	In order for the sizes to be respected when reducing the browser, we advise you to click the resolution slice to modify before any modification. The default size of the selected slice will be taken as reference and no error will occur at runtime.

It is possible to override several properties for each resolution slice. They can be identified in the control description window via the picto.

For example, for the Image control, a different image file can be used according to the resolution slice.

• To override the size and position of controls, you must:
  1. Select the requested slice.
  2. Perform the modification in the editor.

• To see the list of overrides for a resolution slice:
  1. Select the requested resolution slice (for example, for the tablet slice, click inside the tablet slice).
  2. Display the popup menu of the slice bar (right click) and select "List of slice overrides".
  3. The list of overrides performed is displayed:
     
     Note: This window allows you to delete the overrides in order to restore the control's default operating mode.

Special case: Control visibility

The visibility of control is defined in the "GUI" tab of the description window of control.

In Responsive mode, this option cannot be overridden by slice.

• To define the visibility of a control by slice, you must:
  1. Select the control.
  2. Display the popup menu of control (right mouse click).
  3. Select "Responsive Web Design .. Visibility by slice".
     
  4. Keep checked only the slices where the control must remain visible.

Note: Only the visibility defined in the description window of control can be modified by programming. The visibility overrides performed by resolution slice cannot be modified by programming.

	Note	To see the hidden controls (to modify their position if stacked for example), on the "Display" pane, in the "Help for edit" group, check "Hidden controls".