Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

Device Authoring & Scaling

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 the Desktop, and how they are reordered on Phones:

We consider this approach to benefit the users greatly, as they do not need to zoom in and out of the site on their phone, as they would need to do if these columns were on the same row as they are on Desktop but instead are smaller (since one would be viewing the site on a phone).

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 Portait). However, if you wish to make changes, like adding Go to actions, or change 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 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.

Keep in mind that even though the templates are responsive, the view that users will finally get, it's also affected by their personal settings. For example, two users may have the same device, however, one of them could set the display view as standard or zoomed, while the text size can also be customized for the device. This would lead to two different views because of the users' settings.


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.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.