|
|
|
|
|
- Overview
- Transforming a page template
- Transforming the template page
- Managing a navigation bar
- Layout of Tablet and Mobile slices
- Transforming a page template inheriting from a page template
- Transforming a page with a Looper control
- Transforming the page
- Checking the page layout for each slice
- Test in the browser
- Transforming a page with edit controls
- Transforming a page with a Rich Text Area
- Transforming a page with a programmed HTML control
Applying the Responsive Web Design mode to an existing page
Warning
In version 28, the "Responsive Web Design: layout by slice" mode becomes "Slices (legacy Responsive mode)". "Responsive (zoning and layouts)" is now the recommended mode for any new project. For more details, see New edit mode for mobile-friendly websites. This page is adapted to the new options of version 28.
This help page explains how to apply the Responsive Web Design mode to an existing WEBDEV page. The operations are based on the "WW_Precilia_sport" example that is provided with WEBDEV. This page explains how to: Remarks: - 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:
Transforming a page template The steps for transforming the "PAGETPL_Main" page template found in the WW_Precilia_sport example are as follows: Transforming the template page To use the "Responsive Web Design" mode on the page template: - Open the project if necessary.
- Display the "PAGETPL_Main" template in the editor.
- Open the page description window: right-click to open the context menu and select "Description".
- In the "General" tab, select "Slices (legacy Responsive mode)".
- Validate.
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. Three slices are defined by default: - Desktop (in blue).
- Table (in green).
- Mobile (in yellow).
Reminder: a slice represents a browser size for a specific device.
The "Desktop" slice (blue slice) is selected by default. The presentation is correct. This page contains a context menu: we are going to transform it in order to include it in a Navigation Bar control. Managing a navigation bar To manage a Navigation Bar control: - Don not change slice: the "desktop" slice must be selected (click the slice header if necessary).
- Insert a Navigation Bar control: on the "Creation" tab, in the "Navigation" group, click "Nav. Bar". Then, click in the middle of the page. The control appears in the editor. 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 context menu is already found in this area by default. In our example, delete this menu. It will be replaced with the existing menu. - on the right, an additional section that can contain additional links or controls.
- 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.
- Move the page menu into the middle section of Navigation Bar control.
- Reduce (if necessary) the middle section of Navigation Bar control.
- Move the controls regarding the basket into the right section of navigation bar.
- Re-position the Navigation Bar control onto the black bar. You get the following interface:
In our example, the menu is horizontal by default. Its orientation can be modified. The menu orientation can be different in each slice. For example: - a horizontal menu in the "Desktop" slice.
- a vertical menu (accessible from the hamburger) in the "Tablet" and "Mobile" slice.
In our example, we will keep a horizontal menu in the "Desktop" slice. But we are going to modify its orientation in the "Tablet" and "Mobile" slices: the menu will be oriented vertically in these slices. To modify the menu orientation in the "Tablet" slice: - Go to the "Tablet" slice: click the "Tablet" header.
- Click in the middle section of navigation bar. This section is hatched.
- Click the hatched section again: the drop-down menu is displayed. It is automatically displayed in vertical mode.
- Press the "Esc" key to exit from the edit of middle section (if necessary, click the menu beforehand to select it).
- 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 We are now going to analyze the following slices (Tablet and Mobile). To do so, you can: - 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).
Your page and the controls found inside it will move and evolve while the browser is resized. - 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.
When moving from the Desktop slice to the Mobile slice, you will notice that the representation of the page in the Tablet or Mobile slice is altered. - 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.
Therefore, we are going to make corrections in the Desktop, Tablet and Mobile slices. For example, if you select the Mobile slice: The following operations can be performed to fix these problems: - For the text: if the text overflows, change the size of the character font in the control style. If this is not enough, enlarge the Static control. If necessary, move the captions one below another.
- For the images: change their anchors, so that they are not distorted.
To do so, right-click the image to open the context menu and select "Anchor". In the window that appears, select "Fixed width" and "Fixed height". Therefore, the image will keep its initial proportions regardless of the active slice.
After modification, the Mobile slice becomes: Repeat this operation for the basket image at the top right and for the logo image at the top left. The template page is ended. Transforming a page template inheriting from a page template We are now going to create the second page template of the project, the "PAGETPL_Content" template. This template inherits from the "PAGETPL_Main" template. Therefore, all you have to do is update this template in relation to the previous template. - Display the "PAGETPL_Content" template in the editor.
- On the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used".
- Then, click the update button on the right (double blue arrow).
The same operation can be performed for the "PAGETPL_BASKET" template. Transforming a page with a Looper control We are going to work on the "store" page found in the WW_Precilia_sport example. Transforming the page To use the "Responsive Web Design" mode on the page: - Display the "store" page in the editor.
- On the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used".
- 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 context 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 The next step is to check the representation of the page in each slice. In this example, the display is correct for the "Desktop" and "Tablet" slices. However, the controls are a little reduced for the "Mobile" slice. This page contains a Looper control defined on 2 columns. The width on 2 columns is correct in the "Desktop" or "Tablet" slice. However, fewer columns should be displayed in the "Mobile" slice. WEBDEV allows you to configure the number of columns in a Looper control for each slice. Remark: In this example, we are working on a Looper control. For a Table control, you can also hide or display different columns for each slice. To modify the number of columns in the Looper control for a slice: - Select the slice: in our case, select the "Desktop" slice.
- Right-click the control to open the context menu and select "Description".
- In the "Details" tab, under "Display mode settings", select "Number of columns per slice".
- Enter the number of columns: 2 (2 columns for the desktop slice) and validate.
- Repeat these operations for the "Tablet" slice: choose 2 columns for the "Tablet" slice.
- Repeat these operations for the "Mobile" slice: choose 1 column for the "Mobile" 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.
Tips - In each slice, feel free to enlarge the Looper control column horizontally to effectively use the space in the page.
- 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 The test of the final result can be run in a browser: - Execution in Desktop mode:
- Execution in Tablet mode:
- Execution in Mobile mode:
The Looper control adapts according to the slice. Transforming a page with edit controls We are now going to handle the "Precilia_identification" page. This page is: - 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" tab, in the "Description" group, expand "Templates" and select "List of templates used". Second step: Check how the page behaves according to the selected slice. - In the "Desktop" and "Tablet" slices, the page is displayed properly.
- In the "Mobile" slice, the controls are not large enough: it would be better to reorganize the page vertically.
Let's go to the "Mobile" slice and move the controls in order to get the following result:
To obtain this result: the page includes 2 control templates. They are already overridden. All you have to do is: - move these control templates.
- change the height and width of the control templates.
- reorganize the controls inside the control templates.
Tip: The caption of each control is not included in the edit control: this allows you to easily position these two elements separately. Transforming a page with a Rich Text Area We are now going to transform the "spa" page. This page contains a Rich Text Area control. First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used". Click the update button on the right (double blue arrow) and validate. Second step: Align and modify the width of the Rich Text Area control as well as possible in each slice. The page will "stretch" vertically at runtime: a vertical scrollbar will be used to list the content of the Rich Text Area. Tip: Don't forget to modify the inside margin of the Rich Text Area control in order not to truncate or cover the controls below.
Transforming a page with a programmed HTML control The "contact" page displays the contact coordinates as well as a Google map displayed in an HTML control filled by programming. First step: Update the page from the template (in order for the page to switch to Responsive Web Design mode): on the "Page" tab, in the "Description" group, expand "Templates" and select "List of templates used". Click the update button on the right (double blue arrow) and validate. Second step: Page test: - Execution in "Desktop" mode:
- Execution in "Tablet" mode:
- Execution in "Mobile" mode:
The map is truncated in the Mobile and Tablet slices. Therefore, the width of the HTML control must be checked in each slice. The HTML control overflows the page in the "Tablet" and "Mobile" slices. You must: - resize it.
- modify the HTML code of the control because the map drawn has a fixed size (width set to 604, height set to 300): Replace both the width and height values (604 and 300, respectively) with 100% to keep the same proportion for the content of the HTML control.
Tip: In most cases, - avoid working with fixed sizes or the display may be truncated in the smaller slices.
- use WEBDEV controls rather than the HTML control.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|