|
|
|
|
|
- Overview
- Methods used
- Desktop First method
- Mobile First method
- Principle
- Before we start
- Tips and recommendations for creating a new site with pages in Responsive Web Design or for transforming the pages found in an existing site
Managing Responsive Web Design in your Web pages
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.
Websites can be viewed on a wide range of platforms: mobiles, tablets, PCs, etc.. The browser size changes on each device as well as the space used to display data. The "Responsive Web Design" method consists in creating a single page that automatically adapts according to the platform used. WEBDEV allows you to create pages by using the "Responsive Web Design" method and it allows you to optimize the page display on different platforms via several editor features. Check a WEBDEV example that supports Responsive Web Design by clicking the following link Site presenting WM Sport Assistant. Display this page and resize the browser to see the different resolutions. Methods used WEBDEV proposes 2 modes for creating and managing Responsive Web Design pages: - Desktop First mode: The page is defined in its widest version Desktop which serves as a reference, then the page is modified for the lower slices Tablet and Mobile.
- Mobile First mode: The page is defined in its smallest Mobile version, which serves as a reference, then the page is modified for the higher Tablet and Desktopslices.
Desktop First method Developers must create the interface of their Website in "Desktop" mode. Then, they can create the version in "Tablet" mode, and finally, in "Mobile" mode.
This method stems from the need to use the site on all the combinations of supports and screen resolutions. In terms of design, this means a website is intended to be used on desktop devices first. With lower display resolutions (page size), the content and features are moved, resized or hidden. Mobile First method First, the developer must create the interface of his Web site in "Mobile" mode. Then, he will create the version in "Tablet" mode and finally he will create the version in "Desktop" mode.
This method stems from the need to add functionalities to the site according to the combinations of supports and screen resolutions. In terms of design, this means a website is intended to be used on mobile devices first. When reducing the display resolutions (page size), the content and the features are either moved, or resized, or hidden. Principle In the WEBDEV editor, different resolutions are represented via slices. A slice represents a browser size for a specific device. WEBDEV includes 3 slices: - The Mobile slice, which corresponds to smartphones.
- The Tablet slice, which corresponds to tablets.
- The Desktop slice, which corresponds to devices such as PC, MAC, etc.
For more details, see Responsive Web Design: Slice management. Make sure that the Web site can operate even in Mobile version. Summary: - In Desktop first mode, you need to think "Desktop" before thinking "Tablet" and then "Mobile": any UI modification (creating the page, adding fields, organizing fields on the page, positioning links or buttons, etc.) must first be thought through in "Desktop" mode.
- In Mobile first mode, you have to think "Mobile" before thinking "Tablet" and then "Desktop": any UI modification (creating the page, adding fields, organizing fields on the page, positioning links or buttons, etc.) must first be thought through in "Mobile" mode.
Responsive Web Design documentation: Please feel free to consult the following documentation pages (recommended reading order): - Managing anchors.
- Managing slices.
- Creating a Responsive Web Design page.
- Test of Responsive Web Design pages.
- Managing a header bar.
- Applying the Responsive Web Design mode to an existing page.
- 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 Before implementing Responsive Web Design in a WEBDEV website, you must read the following recommendations: - General points
- Correct ALL UI errors, in all the slices. This step is FUNDAMENTAL. There may be UI errors in one slice and not the others. The text of the UI error indicates which slice contains 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 UI errors are displayed if this order is not kept. For more details, see Responsive Web Design: Specific UI errors. - Don't forget to check the pages in your browser while reducing or enlarging the browser width in order to simulate all the resolutions.
Note: Browsers also offer specific options for testing Responsive Web Design pages.. For more details, see Check the "Responsive Web Design" pages.
- 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.
- Modifications made to a field present in a slice are contextual to that 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. Please note: the field exists in all brackets..
The control that must not appear in a slice must be made invisible in the other slices. To make the control visible or invisible: - Select the control.
- Display the context menu (right-click) and select "Responsive Web Design . Visibility by slice" option..
- Don't hesitate to split an Edit control into 2 parts: a label and an input field.. 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.
- Remember to use the field hint text or alternative text (in the "Help" tab of the field description) to "save" space in the field label: this will make it easier to move to the lower brackets..
- 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 slice toggle points: When decreasing or increasing resolution, the page layout can be modified before the slice limit. 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. Don't hesitate to delete all the overrides on a slice to rebuild the page layout (for more details, see Deleting a slice).
- Slice ruler (yellow, green, blue sections): 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.
- Anchors (for more details, see Responsive Web Design: Managing anchors).
- Parameters of anchoring window:
- Width:
- Edit size: option to be used if the field is to retain its size.
- Fit to grid: option to use if the field is to shrink and proportionally follow the width of the page in the browser.
- Anchoring: Why center a field?
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|