Apart from Device Visibility, when editing elements that will be visible, for example, to a mobile portrait, scaling, and responsiveness are also two important concepts to take into consideration.
The approach about responsiveness is that one way to make a site “responsive” is to scale it down, namely, to show the exact same content in the exact same order across different devices, but just smaller. We have chosen another way to make schools responsive, where we do not simply scale things down, but we resize and reorder them to create an optimal experience for users on devices other than the Desktop/Laptop.
An example is this template:
Notice how there are four columns, one next to the other on Desktop, and how they are reordered on Phones:
Authoring mode in different devices
You can select different devices in authoring mode, and edit the attributes of the page's elements. For instance, in the example above, if you would like to make the image smaller on Tablet Landscape, you can select the tablet author view, click on the image, and select a smaller frame (this change does not apply to Desktop or other devices, but only to the Tablet Landscape):
Scaling
You can also control the scaling of the text elements of your entire school by using the Scale Size option. For example, for phones:
Inspect option
The options above, are set according to some popular resolutions used, however, the resolution of each device may vary. In case you want to deeper check the appearance for specific resolutions or most-used devices, you can do so by right-clicking and select the Inspect option. This will give you a better image of what users may see and instantly customize the page's scale.
Thusly, when making changes in an authoring device (e.g Mobile Screens), the authoring tool represents an example of how your Page will be viewed in common mobile screen size. If a user has for example a wider mobile screen size, the elements of your page will adjust accordingly to facilitate user readability.
Notes:
- The smallest screen size in active use is currently the iPhone 5, which comes in at 320 pixels wide. From there, most subsequent iPhone models toggle between 375 and 414 pixels wide, with increasing viewport sizes as you move into the Galaxy phones and tablets. However, if someone accesses your School on a mobile device (whether smartphone or tablet), they can flip the screen sideways for a wider horizontal width.
- It's recommended to avoid inserting negative margins to widgets, as they will not automatically scale between different device screens. For more information about Margins, you can check this article.