|
|
|
|
|
|
|
|
|
|
- Overview
- When to create a new slice?
- How to manage the reduction or the enlargement of slices?
- How to optimize the visible space in a slice?
- Why overriding the position and size of controls causes an overlap in the browser?
Responsive Web Design: Tips
 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.
The Responsive Web Design was used in your pages but you still encounter some lock points. This page presents several layout tips. In any case: - Check all UI errors: they specify the field and slice in question.
- Start from the default slice:
- Start from the "Desktop" slice in "Desktop First" mode and reduce the browser in the editor (using the handle) to check the consistency of modifications.
- Start from the "Mobile" slice in "Mobile First" mode and enlarge the browser in the editor (using the handle) to check the consistency of modifications.
When to create a new slice? You can create a slice: - To manage a specific device.
- To manage a specific display. in the following example (page in "Desktop First" mode), an intermediate display is requested:
How to manage the reduction or the enlargement of slices? By default, the controls are using the anchoring in width "Adapted to the grid". Therefore, the controls are proportionally reduced or enlarged according to the mode (Desktop First or Mobile First) . For example in "Desktop First": To limit the reduction of controls, all you have to do is define the minimum size: - "Min size" option in the "UI" tab of the description window of control.
- "Min size" option in the window for managing the control anchors.
To avoid reducing the controls, the anchoring in width "Use the edit size" must be applied to the controls. Note: If a UI error occurs, or if the field content is not visually usable, move the field and resize it.. How to optimize the visible space in a slice? The page layout is kept by default. The content of the page is adapted to the slice. To optimize the visible space, you can reduce the page margins (inside margins) in a slice and apply the horizontal anchoring "Use the edit size" to the controls. For example in Desktop First mode: Why overriding the position and size of controls causes an overlap in the browser? The position of a field is overridden in the "Mobile" and/or "Tablet" slice: in the browser, this position and size override causes fields to be superimposed. What is the problem? Overriding the position in the "Mobile" and/or "Tablet" slice changes the order of controls defined in the "Desktop" slice (which is used as reference slice in "Desktop First" mode). In "Responsive Web Design" mode, the controls are organized in relation to the other ones. This order depends on the position (from top to bottom then from left to right) and on the anchor. It must be exactly the same in all slices. Indeed, the "Responsive Web Design" technology uses a single HTML stream for all the slices, while repositioning the controls by CSS. The order of controls in the reference slice defines the order of controls in the HTML stream. Example: In the following example, the page contains a cell grouping together another cell and an image: The order of controls in the "Desktop" slice (the reference slice) is: - the CELL_1 cell that groups the second CELL_2 cell and the image,
- the CELL_2 cell,
- the image.
In the "Mobile" slice, field size and position are overridden: the image is placed before the CELL_2 cell.. The order of controls in the "Mobile" slice is different from the order of controls in the "Desktop" slice: In execution, as the order of the fields in the "Office" slice is not respected in the "Mobile" slice, there is an overlay: the image will overflow onto the CELL_2 cell and it will not be able to "push" it: To avoid any unexpected overlap in the browser, make sure that the order of controls in the "Mobile" and"Tablet" slices is the same as the order of controls in the "Desktop" slice (reference slice). In our example, to get the expected result, you have the ability to use two Image controls: - The first Image control will be placed before the CELL_2 control in the Desktop slice (therefore, it will be first in the order of controls in the reference slice). It will be visible in the "Mobile" slice only.
- The second Image control will be visible in the "Desktop" slice only.
To facilitate the positioning of fields in the "Mobile" and/or "Tablet" slice, from version 21 Update 3 onwards, a UI compilation error is systematically generated by the page editor if the order of fields between the different slices is not respected. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|