• Transform the page templates of the site.
  • A template containing a drop-down menu.
  • A template based on the previous template.
• Transform standard pages (based on the previous templates):
  • A page containing a Looper control.
  • A page containing edit controls.
  • A page containing a Rich Text Area control.
  • A page containing a programmed HTML control.

• These operations are performed on the WW_Precilia_sport example. The general method presented here can be directly applied to your own pages (with an interpretation depending on the page content).
• To optimize the management of Responsive Web Design mode, don't forget to check:
  • the advice and recommendations.
  • the tips.

• Transforming the template page.
• Managing a navigation bar.
• Implementing the "Tablet" and "Mobile" slices.

Transforming the template page

1. Open the project if necessary.
2. Display the "PAGETPL_Main" template in the editor.
   
3. Open the page description window: display the popup menu (right mouse click) and select "Description".
4. In the "General" tab, select "Responsive Web Design edit...".
   
5. Validate.

Versions 22 and later
Remark: The template or the page is in Desktop First mode by default.

New in version 22
Remark: The template or the page is in Desktop First mode by default.

Remark: The template or the page is in Desktop First mode by default.

The editor changes: a new bar specific to the "Responsive Web Design" edit mode appears.

Par Default, 3 tranches are defined:

• Desktop (in blue).
• Table (in green).
• Mobile (in yellow).

Reminder: a slice represents a browser size for a specific device.

By default, the slice "Desktop" (blue slice) is selected.. The presentation is correct.

Managing a navigation bar

1. Don not change slice: the "desktop" slice must be selected (click the slice header if necessary).
2. Insert a Navigation Bar control: on the "Creation" pane, in the "Navigation" group, click "Navigation bar". Then, click in the middle of the page. The control appears in creation mode. This control includes 3 sections:
   • on the left, a section representing the "Hamburger" menu.
     Remark: The "Hamburger" button is not visible in the "Desktop" slice. It appears in the smaller slices only.
   • in the middle, the section containing the standard drop-down menu.
     A popup menu is already found in this area by default. In our example, delete this menu. It will be replaced by the existing menu.
   • on the right, an additional section that can contain additional links or controls.
3. Reduce the width of the left section that contains the hamburger:
   • Hover the red square found on the right of the section. The mouse cursor turns into a double arrow.
   • Click the red square.
   • Keep the left mouse button down and press the Shift key.
   • Reduce the section.
4. Move the page menu into the middle section of Navigation Bar control.
5. Reduce (if necessary) the middle section of Navigation Bar control.
6. Move the controls regarding the basket into the right section of navigation bar.
7. Re-position the Navigation Bar control onto the black bar. You get the following interface:
   

• an horizontal menu in the "Desktop" slice.
• a vertical menu (accessible from the hamburger) in the "Tablet" and "Mobile" slice.

1. Go to the "Tablet" slice: click the "Tablet" header.
2. Click in the middle section of navigation bar. This section is hatched.
   
3. Click the hatched section again: the drop-down menu is displayed. It is automatically displayed in vertical mode.
   
4. Press the "Esc" key to exit from the edit of middle section (if necessary, click the menu beforehand to select it).
5. Then, go to the "Mobile" slice: you will notice that the menu is identical to the one of the "Tablet" slice. Indeed, the operations performed in the larger slices are automatically applied to the smaller ones.

Layout of Tablet and Mobile slices

• click the color headers that represent each slice.
• use the "double arrow" symbol in the tooltip and move to the left (handle of edit browser).

• If a control is not aligned properly or if it overflows a slice, you can modify its width, height, as well as X and Y positions in this slice.
• Press the Shift key while moving the control with the mouse in order to disable the snap-on grid.

• The menu at the top is not visible anymore. This is quite normal: indeed, the menu is accessible by using the hamburger (button that appears in the right section of the navigation bar).
• The bottom of the page requires some adjustments. We must move and re-align the controls in each slice. Indeed, when moving from the Tablet slice to the Mobile slice, some controls are truncated and images are less visible.

For example, if you select the Mobile slice:

• For the text: if the text overflows, change the size of the character font in the control style. If this operation is not sufficient, increase the size of the Static control. If necessary, move the captions one below another.
• For the images: change their anchoring parameters so that they are not distorted.
  To do so, display the popup menu of the image (right mouse click) and select "Anchoring". In the window that is displayed, select "Use the edit size" for the width and height of the image. Thus, the Image will keep its original proportions regardless of the active slice.
  

After modification, the Mobile slice becomes:

Transforming a page template inheriting from a page template

1. Display the "PAGETPL_Content" template in the editor.
2. On the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
   
3. Then, click the update button on the right (double blue arrow).

Transforming the page

1. Display the "store" page in the editor.
2. On the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".
3. Refresh the page from the template.

The page is automatically switched to Responsive Web Design mode as it inherits from a page template in Responsive Web Design mode. This can be checked in the page description: in the popup menu (right mouse click), select "Description".

The option ""Responsive Web Design" edit" cannot be modified. To change this option, you must:

• modify the associated page template.
• dissociate the template or delete the page template.

Checking the page layout for each slice

1. Select the slice: in our case, select the "Desktop" slice.
2. Display the popup menu of the control (right mouse click) and select "Description".
3. In the "General" tab, in the "Display mode" area, select "Number of columns per slice".
   
4. Enter the number of columns: 2 (2 columns for the desktop slice) and validate.

Versions 22 and later
Tip: to avoid repeating these operations, you can configure the number of columns for all the slices in one single operation:

• Click the icon symbolizing the Responsive Web Design:
  
• In the window that appears, specify the different values for each slice.

New in version 22
Tip: to avoid repeating these operations, you can configure the number of columns for all the slices in one single operation:

• Click the icon symbolizing the Responsive Web Design:
  
• In the window that appears, specify the different values for each slice.

Tip: to avoid repeating these operations, you can configure the number of columns for all the slices in one single operation:

• Click the icon symbolizing the Responsive Web Design:
  
• In the window that appears, specify the different values for each slice.

• In each slice, do not hesitate to resize the width of the looper column in order to use the horizontal space of the page as well as possible.
• Don't forget to move or re-align the controls inside the Looper control if the column was resized.

In the "Desktop" (or "Tablet") slice, you get:

In the "Mobile" slice, you get:

Test in the browser

• Execution in Desktop mode:
  
• Execution in Tablet mode:
  
• Execution in Mobile mode:
  

• based on the "pagetpl_basket" template.
• made of 2 vertical sections (2 control templates side by side).

First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" pane, in the "Description" group, expand "Templates" and select "List of templates used".

• In the "Desktop" and "Tablet" slices, the page is displayed properly.
• In the "Mobile" slice, the controls are not large enough: it would be interesting to reorganize the page in height.

• move these control templates.
• change the height and width of the control templates.
• reorganize the controls inside the control templates.

• Execution in "Desktop" mode:
  
• Execution in "Tablet" mode:
  
• Execution in "Mobile" mode:
  

• resize it.
• modify the HTML code of control because the map drawn has a fixed size (width set to 604, height set to 300):
  
  The values 604 and 300 (respectively width and height) must be replaced by 100% and 100% in order to keep the same proportion for the content of the HTML control.

• avoid working with fixed sizes or the display may be truncated in the smaller slices.
• use the WEBDEV controls rather than using the HTML control.