Devices management
In this video you will learn how to manage the appearence of your website on the three most common devices: Desktop, Tablet and Mobile. With the help of Auto Layout and Copy From Device utilities, you can save time when mananging the layout of each canvas on all devices.
Transcription
Evaluating Mobile and Tablet Devices
Our section is complete, but before proceeding, we need to evaluate how the components are appearing on mobile and tablet devices. The mobile version previews a 425 pixels display width, while the tablet version displays a 768 pixels display width. It's very important to take a look at these previews before publishing our website.
The tablet preview seems empty, but the canvas is actually there, with all its components still using the default properties. This happens because each configuration in Webround is unique to the device of choice. While increasing the canvas's height, we can clearly see that all components are pushed to the top left corner without any kind of organization. This is also happening in the mobile preview.
Adapting Layouts
We need to adapt the layouts, but we can leverage some tools to speed up the process. By right-clicking on the canvas properties, we can access the Apply Automatic Layout button, which will do a lot of dirty work for us. Since layouts are extremely flexible, it's hard to maintain a generic approach to perfectly align every component, but we can just reorganize the content in a few clicks now.
Remember that you can click and drag on an empty area to draw a selection area. All components in the area will be selected and you will be capable of moving them together. Now, let's go to the tablet preview and see another way of adjusting the layout in a quick way.
Replicating Layouts
Usually, tablet and mobile views are very similar, but in this case, I want to show you another Webround feature to speed up the canvas layout adaptation. Right-click on the canvas and use the Copy tool to replicate the same layout from one device to another. We're going to copy the desktop version of this canvas on the tablet version.
As you can see, the tablet layout became very similar to the desktop one. There are some slight issues with the heights of the components, but everything is fixable in a few clicks.
Adjusting Text Alignment
At last, I want to show you how to change the text alignment on the text. In this case, having less space, it's better to use centered texts for the little messages below the image. If we open the text toolbar, the text alignment will be applied to the entire text components only on the specific device.
By moving to the desktop version, we can easily see that the alignment is still set to the left, while the tablet alignment is set to center.