Apart from Device Visibility, scaling, and responsiveness are also two important concepts to consider when editing elements that will be visible, such as in a mobile portrait.
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 Columns and Lists section:
Notice how there are four columns, one next to the other on the 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):
If you have set an element's visibility to specific devices, for example, Phone Portrait, you will be able to see the specific element in the device stated (in our example Phone Portrait). However, if you wish to make changes, like adding Go to actions, or changing an element's image, ensure that the changes will be made on the Desktop/Laptop mode. Once the visibility is added these settings will persist for the device selected.
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:
This means that all text elements on your school when viewed on phone devices, will be 70% of the size they are on Desktop/Laptop devices.
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 check the appearance for specific resolutions or most-used devices more deeply, you can do so by right-clicking and selecting the Inspect option. This will give you a better image of what users may see and instantly customize the page's scale.
Thus, when making changes in an authoring device (e.g., Mobile Screens), the authoring tool represents an example of how your Page will be viewed on a 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.
- The smallest screen size in active use is currently the iPhone 5, which is 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 into widgets, as they will not automatically scale between different device screens. For more information about Margins, you can check this article.