Methods used

• Desktop First mode: The page is defined in its largest version (Desktop) that is used as reference, then the page is modified for the smaller slices (Tablet and Mobile).
• Versions 22 and later
  Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the larger slices (Tablet and Desktop).
  New in version 22
  Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the larger slices (Tablet and Desktop).
  Mobile First mode: The page is defined in its smallest version (Mobile) that is used as reference, then the page is modified for the larger slices (Tablet and Desktop).

Method of Desktop first

Principle

• The Mobile blade corresponding to smartphone devices.
• The Tablet blade corresponding to tablet devices.
• The slice OOK corresponding to devices of type PC, MAC, etc.
  

• In Desktop First mode, you must think "Desktop" before thinking "Tablet" then "Mobile": any UI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be made in "Desktop" mode.
• Versions 22 and later
  In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any UI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be made in "Mobile" mode.
  New in version 22
  In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any UI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be made in "Mobile" mode.
  In Mobile First mode, you must think "Mobile" before thinking "Tablet" then "Desktop": any UI modification (page creation, addition of controls, organization of controls in the page, position of links or buttons, ...) must be made in "Mobile" mode.

1. Managing anchors.
2. Managing slices.
3. Creating a Responsive Web Design page.
4. Test of Responsive Web Design pages.
5. Managing a header bar.
6. Applying the Responsive Web Design mode to an existing page.
7. Tips.

Tips and recommendations for creating a new site with pages in Responsive Web Design or for transforming the pages found in an existing site

• General points
  • Correct ALL UI errors, in all the slices. This step is FUNDAMENTAL. There may be UI errors in one slice only. The UI error description indicates the slice that has the error.
  • Depending on the mode (Desktop First or Mobile First), the layout must be defined in the "Desktop" or "Mobile" slice. Then, it must be defined for the smaller or larger slices (respectively "Tablet" and "Mobile" or "Desktop").
  • Transform the page templates for Responsive Web Design before transforming the site pages.
  • When creating a new page, it may be useful to group the controls by logical blocks (by using a cell) in order to easily handle them in the slices.
  • Keep the same tab order in all the slices.
    Specific GUI errors are displayed if this order is not kept. See Responsive Web Design: Specific UI errors for more details.
  • Don't forget to check the pages in your browser while reducing or enlarging the browser width in order to simulate all the resolutions.
    Remark: The browsers also propose specific options for running the test of Responsive Web Design pages. See Check the "Responsive Web Design" pages for more details.
• Controls
  • Depending on the mode (Desktop First or Mobile First), never add controls in the smaller or larger slices. For example, in Desktop First mode, add the controls in the "Desktop" slice then make the necessary changes in the smaller slices.
  • The changes made to a control in a slice are contextual to this slice: this is the override mechanism.
  • To display or enter the same information, do not hesitate to use different types of controls in each slice. For example, in Desktop First mode, you can use a radio button in the "Desktop" and "Tablet" slice, and a combo box in the "Mobile" slice. Caution: the control exists in all slices.
    The control that must not appear in a slice must be made invisible in the other slices. To make the control visible or invisible:
    1. Select the control.
    2. Display the popup menu (right mouse click) and select "Responsive Web Design .. Visibility by slice".
       
  • Don't hesitate to divide an edit control into 2 sections: caption and input area. This allows you to easily handle the elements when switching to "Mobile" slice (case of Desktop First). For example, a caption on the left and an input area on the right become a caption above and an input area below.
  • Don't forget to use the indication text of the control or the alternative text (in the "Help" tab of the control description) to "save" space: switching to the smaller slices will be easier.
  • We advise you to resize a control in a slice rather than modifying its horizontal anchor. Indeed, the anchor is defined for all the slices but the width can be overridden for each slice.
  • Avoid the stackable controls. Stay on the grid to benefit from the Responsive features.
• Slices
  • Define the toggle points of slices: When reducing or increasing the resolution, the page layout can be modified before the limit of the slice. In this case, simply modify the slice break point in order to always get the desired interface.
    In Desktop First mode:
    
    
    For example, the toggle point of the slices corresponds to the toggle from 4 to 3 then 2 elements per line when switching from "Desktop" mode to "Tablet" mode. To avoid going through the intermediate step (3 elements on the same line), the size of the "Tablet" slice must be modified in order to go from 4 to 2. Once the size of the "Tablet" slice is modified, its interface must be modified (if not already done) in order to display 2 elements side by side in "Tablet" mode. Therefore, when reducing resolution, the interface directly goes from 4 to 2 elements.
  • Check overrides in each slice. Do not hesitate to remove all overloads on a slice to start the layout again (for more details, see Deleting a slice).
  • Slice ruler (yellow, green and blue section): You can create a new slice or resize an existing one. A slice is required:
    • to adapt to a device. The "Tablet" slice (840 pixels) and the "Mobile" slice (480 pixels) are created by default (Google Material Design specifications).
    • to adapt its content (to be done by the developer) according to the site to create.
• Anchoring (see Responsive Web Design: Managing anchors for more details).
  • Parameters of anchoring window:
    • Width:
      • Size in edit: option to use if the control must keep its size.
      • Adapt to the grid: option to use if the control must be reduced and if it must proportionally follow the page width in the browser.
  • Anchor: Why center a control?
    Responsive Web Design keeps the proportions, therefore a control that is centered will remain centered. There is no need to anchor it. The centered anchor exists but it is intended to the fixed-width controls and the entire width must be reserved.