- In this lesson you will learn the following concepts
- My first page in Responsive Web Design mode
- Creating a page
- Fluidity and Responsive Web Design
- Resolution slices
- How to adapt the controls to the different slices?
Lesson 8.2. Responsive Web Design and WEBDEV
In this lesson you will learn the following concepts
- Available WEBDEV tools.
- Positioning grid.
- Resolution slices.
Estimated time: 30 mn
An example project will allow you to discover the methods that can be used in WEBDEV to create sites in Responsive Web Design mode. This allows you to perform the operations and better understand the available tools.
- We will use a simple example:
- Start WEBDEV 28.
- Go to the WEBDEV home page if necessary (Ctrl + <).
- On the home page, click "Tutorial", then in "Part 8 - Responsive Web Design", double-click "Responsive Web Design (Exercise)".
My first page in Responsive Web Design mode
Fluidity and Responsive Web Design
Let's see how the page behaves in the WEBDEV editor by creating a Static control.
- To create the Static control:
- On the "Creation" tab, in the "Usual controls" group, click .
- Then, click inside the page to create the control.
- Press F7 three times to display the control borders.
The main principle of the responsive mode is fluidity: when the browser is reduced, the page controls are also reduced.
- To check this fluidity in the editor:
- Use the double-headed arrow at the top-right side of the page to resize the browser.
- The Static control that was just created is also reduced.
The cursor that was just used belongs to the resolution slices, second principle of WEBDEV Responsive.
Resolution slices are used to materialize the resolutions of different devices.
- Let's see how these resolution slices work.
- In the "WW_Responsive" project, open the PAGE_Adaptations page.
- Three slices appear above the page:
- The blue color represents the Desktop slice,
- The green color represents the Tablet slice,
- The yellow color represents the Mobile slice.
These resolution slices allow you to define the layouts that will be used for each type of device.
|You can add custom resolution slices to manage the different devices more efficiently.|
To change resolution slice, you can use the cursor or click the resolution slice directly.
|Responsive WEB Design with WEBDEV uses the concept of "Desktop First" by default. In this mode, the controls are always created in the Desktop slice. Then, the interface must be adapted to smaller slices.|
The Desktop slice corresponds to the base of the page, without adaptation.
To perform adaptations in the other resolution slices: all you have to do is perform the modifications in the editor directly.
- Let's analyze the PAGE_Adaptations page.
- This page contains different controls:
- a title at the top,
- a Map control to indicate the restaurant location,
- a Static control containing the restaurant address,
- an Image control on the right to display an advertising banner,
- a Looper control at the bottom to display the opinions.
- Test the page (click in the quick access buttons).
- The page appears in test as it was in the editor in Desktop mode.
Remark: This page uses a Map control. In test as in deployment, it is necessary to use a Google key. Otherwise, an error occurs in the Map control. See the online help to get this key.
If you own a key, specify it in the "Project" tab of the project description window.
- Reduce the size of your browser to see the change of slice.
- Some page controls move or disappear according to the resolution slices displayed.
For example, the advertising image is shown in the Desktop slice but it becomes invisible in the smaller slices.
How to adapt the controls to the different slices?
Performing adaptations regarding the positioning and/or the size is very simple! The modifications are performed in the editor directly (like any other modification).
In fact, these adaptations are overrides.
|In order for the sizes to be respected when reducing the browser, we advise you to click the resolution slice to modify before any modification.|
The default size of the selected slice will be taken as reference and no error will occur at runtime.
It is possible to override several properties for each resolution slice. They can be identified in the control description window via the
For example, for the Image control, a different image file can be used according to the resolution slice.
- To override the size and position of the controls, you must:
- Select the desired slice.
- Perform the modification in the editor.
- To see the list of overrides for a resolution slice:
- Select the desired resolution slice (for example, for the tablet slice, click inside the tablet slice).
- Open the context menu of the slice bar (right click) and select "List of slice overrides".
- The list of overrides performed is displayed:
Remark: This window allows you to delete the overrides in order to restore the control's default behavior.
Special case: Control visibility
The visibility of a control is defined in the "UI" tab of the control description window.
In Responsive mode, this option cannot be overridden by slice.
- To define the visibility of a control by slice, you must:
- Select the control.
- Right-click the control to open its context menu.
- Select "Responsive Web Design .. Visibility by slice".
- Keep checked only the slices where the control must remain visible.
Remark: Only the visibility defined in the control description window can be modified through programming. The visibility overrides performed by resolution slice cannot be modified through programming.
|To see the hidden controls (for example, to move them if they overlap), go to the "Display" tab, "Show (all controls)" group and check "Hidden controls".|
Click [Add] to post a comment