- This lesson will teach you the following concepts
- My first page in Responsive Web Design mode
- Creating a page
- Fluidity and Responsive Web Design
- Resolution blades
- How to adapt the controls to the different blades?
Lesson 8.2. Responsive Web Design and WEBDEV
This lesson will teach you the following concepts
- Available WEBDEV tools.
- Positioning grid.
- Resolution blades.
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 to better understand the available tools.
- A simple example was prepared for you:
- Start WEBDEV 23 (if not already done). Close (if necessary) the current project in order to display the home window.
- Open the "WW_Responsive" project. To do so, in the home window, click "Tutorial" and select the project named "Responsive Web Design (Exercise)".
|If the home window is not displayed, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "Responsive Web Design (Exercise)".|
My first page in Responsive Web Design mode
Creating a page
- In WEBDEV, the method for creating a page in Responsive mode is identical to the method for creating the other pages:
- Create a new blank page.
- In the window for creating a new element, click "Page" then "Page".
Note: To display the window for creating a new element, click among the quick access buttons.
- The wizard for page creation starts.
- Click "Blank Page - Responsive Web Design" and validate the wizard.
|You also have the ability to use one of the Responsive page templates supplied with WEBDEV.|
Wa re now going to create a blank page to understand the principle of Responsive Web Design.
- WEBDEV displays a window allowing to choose the main width used for Responsive Web Design. In this example, we are going to create a page for the "Desktop" mode.
- Select ""Desktop First" edit" and validate.
- The backup window is displayed. Type the page title: "Responsive". The name ("PAGE_Responsive") is automatically proposed.
- The page is created in the editor. This page is displayed in "Desktop" mode.
|The new page is displayed in "Desktop first" mode. A menu option allows you to use the "Mobile first" mode if necessary. |
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" pane, in the "Usual controls" group, click "ABC".
- Then, click inside the page to create the control.
- Press the F7 key three times to display the border of controls.
The first principle of responsive is fluidity: when the browser is reduced, the page controls are reduced accordingly.
- To check this fluidity in the editor:
- Use the cursor found at the top of the page to reduce the browser size.
- The Static control that was just created is reduced accordingly.
The cursor that was just used belongs to the resolution blades, second principle of WEBDEV Responsive.
The resolution blades are used to materialize the resolutions of different devices.
- Let's study the operating mode of these resolution blades.
- In the "WW_Responsive" project, open the PAGE_Adaptations page.
- Three blades appear above the page:
- In blue, the Desktop blade, for the displays performed on a desktop,
- In green, the Tablet blade corresponding to the display on tablets,
- In yellow, the Mobile blade for the display on Smartphones.
The resolution blades allow you to define the layouts that will be used for each type of device.
|You have the ability to add custom resolution blades to manage the different devices more efficiently.|
To change resolution blade, you can use the cursor or click the resolution blade directly.
|Responsive WEB Design with WEBDEV is using the concept of "Desktop First" by default. In this mode, the controls are always created in the Desktop blade. Then, the interface must be adapted to smaller blades.|
The Desktop blade corresponds to the base of the page, without adaptation.
To perform adaptations in the other resolution blades: all you have to do is perform the modifications in the editor directly.
- Let's study 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.
- Run the page test ( among the quick access buttons).
- The page appears in test as it was in the editor in Desktop mode.
Note: This page is using a Map control. In GO and in deployment, a Google key must be used. 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 description window of project.
- Reduce the size of your browser to see the change of blade.
- Some page controls change position or disappear according to the resolution blade displayed.
For example, the advertising image is found in the Desktop blade but it becomes invisible in the smaller blades.
How to adapt the controls to the different blades?
Performing adaptations regarding the positioning and/or the size is child's play! The modifications are performed in the editor directly (like any other modification).
In fact, these adaptations are overloads.
|In order for the sizes to be respected when reducing the browser, we advise you to click the resolution blade to modify before any modification.|
The default size of the selected blade will be taken as reference and no error will occur at run time
Several properties can be overloaded for each resolution blade, they can be identified in the description window of controls via the
For example, for the Image control, a different image file can be used according to the resolution blade.
- To overload the size and position of controls, you must:
- Select the requested blade.
- Perform the modification in the editor.
- To see the list of overloads for a resolution blade.
- Select the requested resolution blade (for example, for the tablet blade, click inside the tablet blade).
- Display the popup menu of blade bar (right mouse click) and select "List of overloads".
- The list of overloads performed is displayed:
Note: This window allows you to delete the overloads in order to restore the default operating mode of control.
Special case: Control visibility
The visibility of control is defined in the "GUI" tab of the description window of control.
In Responsive mode, this option cannot be overloaded by blade.
- To define the visibility of a control by blade, you must:
- Select the control.
- Display the popup menu of control (right mouse click).
- Select "Responsive Web Design .. Visibility by blade".
- Keep checked the blades for which the control must remain visible.
Note: Only the visibility defined in the description window of control can be modified by programming. The visibility overloads performed by resolution blade cannot be modified by programming.
|To see the hidden controls (to modify their position if stacked for example), on the "Display" pane, in the "Help for edit" group, check "Hidden controls". |
Click [Add] to post a comment