|
|
|
|
|
|
|
|
|
|
- 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 page editing mode initially called "Responsive Web Design: page layout by slice" becomes "Slices (Historical Responsive for compatibility)".. "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 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.
- Display the page description window: open the context menu (right-click) and select the "Description" option.
- On the "General" tab, select "Slices (legacy Responsive mode)".
- Validate.
Note: The template or page is the default in Desktop Firstmode. The editor is transformed: a new banner specific to the "Responsive Web Design" editing mode appears. Three blades are defined by default: - Desktop (in blue).
- Table (in green).
- Mobile (in yellow).
Remember: a slice represents a browser size for a specific device.
By default, the "Office" slice (blue slice) is selected.. The presentation is correct. Managing a navigation bar To manage a Navigation Bar control: - Do not change the slice: the "office" slice must be selected (if necessary, click on the slice header)..
- Insert a Navigation Bar control: under the "Creation" pane, in the "Navigation" group, click on "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.
Note: In the "Desktop" area, the "Hamburger" button is not visible.. 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. On the other hand, we are going to change its orientation in the "Tablet" and "Mobile" slices: we are going to switch the menu to vertical in these slices.. To modify the menu orientation in the "Tablet" slice: - Switch to the "Tablet" section: click on the "Tablet" header.
- Click in the middle section of navigation bar. This section is hatched.
- Click again in the hatched area: the drop-down menu appears. 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 switch to the "Mobile" slice: you can see that the menu is identical to that 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: in fact, the menu can be accessed via the hamburger (button appearing on the right-hand side 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 text: if the text overflows, feel free to change the font size in the field style. If this is not enough, enlarge the Static Text control. If necessary, move the captions one below another.
- For images: change their anchoring parameters 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: Follow the same steps 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. You can check this in the page description: in the context menu (right-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 RepeatString 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: - First select the slice: in our case, select the "Desktop" slice.
- Right-click the control to open the context menu and select "Description".
- On the "Details" tab, under "Display mode settings", select "Number of columns per slice".
- Enter the number of columns: 2 (2 columns for the office range) and validate.
- RepeatString for the "Tablet" slice: choose 2 columns for the "Tablet" slice too.
- RepeatString for the "Mobile" slice: choose 1 column for the "Mobile" slice only.
Tip: to avoid repeating these operations, you can set the number of columns for all slices in a 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).
Step 1: Upgrade the page with the template (so that the page switches to Responsive Web Design mode): under the "Page" pane, in the "Description" group, pull down "Templates" and select the "List of templates used" option.. 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" section, the fields are not wide enough: it would be better to reorganize the page in height.
Let's go to the "Mobile" slice and move the controls in order to get the following result:
To obtain this result: the page is made up of 2 control Template controls. They are already overridden. Simply: - move these control templates.
- change the height and width of the control templates.
- reorganize the controls inside the control templates.
Tip: The label of each field is not integrated into the Edit control, making it easy to 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. Step 1: Upgrade the page with the template (so that the page switches to Responsive Web Design mode): under the "Page" pane, in the "Description" group, pull down "Templates" and select the "List of templates used" option.. 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 best as possible in each slice.. The page will naturally stretch in height when executed in the browser: there will be a vertical scrollbar to list the content of the rich text area.. Tip: Don't forget to change the internal margin of the Rich Text Area control so as not to truncate or overlap the fields below it..
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 populated programmatically. Step 1: Upgrade the page with the template (so that the page switches to Responsive Web Design mode): under the "Page" pane, in the "Description" group, pull down "Templates" and select the "List of templates used" option.. 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 need: - 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.
Conseil: Generally speaking, - avoid working with fixed sizes or the display may be truncated in the smaller slices.
- use WEBDEV controls rather than the HTML control.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|