Tuto WEBDEV 25

Part 8: Responsive Web Design 309 Resolution slices The cursor that was just used belongs to the resolution slices, second principle of WEBDEV Responsive. The resolution slices are used to materialize the resolutions of different devices. ▶ Let’s study the operating mode of these resolution slices. 1.  In the "WW_Responsive" project, open the PAGE_Adaptations page. 2.  Three slices appear above the page: • In blue, the Desktop slice, for displaying on a desktop screen, • In green, the Tablet slice corresponding to the display on tablets, • In yellow, the Mobile slice for the display on Smartphones. The resolution slices allow you to define the layouts that will be used for each type of device. Remark 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. Caution 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 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.