|
|
|
|
|
|
|
|
|
|
- Overview
- Error about display order and positioning
- Example
- Explanations
Responsive Web Design: Specific UI errors
 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.
WEBDEV features UI errors specific to the position of controls in the different slices: - Error about display order: The position of <Control name> changes the order in which controls are displayed defined in the reference slice (Desktop or Mobile according to the management mode of Desktop First or Mobile First). The display order of controls must be the same in all slices
- Overlap error on positioning blocks: The responsive positioning block that contains the <Control name> control in the Tablet slice as an overlap error.
If these errors are not processed, an unexpected behavior may occur at runtime. To fix this error, you can for example: - move the control in the recommended direction.
- modify the order of controls in the "Desktop" slice.
- modify the anchor of controls.
- use a cell to group the controls logically.
Error about display order and positioning Example In a Responsive Web Design page, the display order of controls must be kept between the different slices. For example, you cannot entirely modify the order of controls between the reference slice (Desktop or Mobile) and the Tablet slice. In some cases, WEBDEV display an error regarding the display order while the interface seems to be consistent. Indeed, the display order of controls depends on several parameters: positioning of controls in relation to the other ones, alignment, anchors, ... Let's study the following example (page created in Desktop First mode): - In Desktop slice, three images and three captions are displayed.
- In Mobile slice, the images of products are reduced and truncated by default. To fix this problem, you must display the controls with the same size as in the Desktop slice, and position an image with its caption on the line.
- In Desktop slice, the anchoring of controls (3 images and 3 captions) is modified to use the edit size in width.
- In Tablet slice, the last image and its caption are moved to "go the next line".
- UI errors occur. By double-clicking the overlap error, the overlap error view is automatically enabled. A pink block appears as well as blue and red borders in dotted lines. They materialize an invalid overlap area.
Explanations WEBDEV divides the different elements in the page into lines. In the "Desktop" slice, WEBDEV created: - a line for the images,
- a line for the captions.
In the smaller slice (Tablet or Mobile), WEBDEV performs the same division, a line for the images and a line for the captions. Since the line containing the images and the line containing the static controls have different heights, the two lines overlap.
In the editor, WEBDEV allows you to see where these lines overlap: - The blue border corresponds to the line containing the images.
- The red border corresponds to the line containing the captions.
To fix this type of overlap error, simply specify the text-level semantics. In our case, each Image control must be linked to its text: - to do so, you must create cells containing each "Image + Caption" couple. This operation must be performed in the Desktop slice.
- each cell must have "Fixed width" anchors.
Then, you can move the last cell below the other ones in the Tablet slice without having any UI errors. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|