Scalable UI

What is Scalable UI #

A scalable UI is a UI that can dynamically scale up or down to fit bigger or smaller screens. These are some of the characteristics of a UI that scales:

• It can retain a constant size despite the size of the screen
• It can increase or decrease its size based on the screen size
• The UI components are not distorted or malformed or malformed from the scaling
• It respects the current aspect ratio even if it’s different from the original; allows UI adjustments in order to fit the screen even if the aspect ratio is different

How is a scalable UI created #

The main points that are taken into consideration when making a scalable UI are:

• target(or reference) resolution
• scale factor

A user interface is scaled using a scale factor. The scale factor is a numeric value that determines how the size of the UI element will be affected. The scale can be constant - if the UI elements have to keep their size despite the screen resolution. Or it can be dynamic and change with the size of the screen. The scale factor is formed by using the reference resolution. The reference resolution is the screen size for which the UI was made. It can be a constant resolution to handle changes in the resolution of the view itself. Or it can be the current screen resolution if we want the UI to scale with the screen size. Comparing the current resolution to the reference resolution gives the scale factor.

For example, if a UI was developed for a resolution of 1920x1080 and the current screen size is 800x600, the scale factor can be created by:

    800/1920

which in summary gives us the following rule:

ScaleFactor = CurrentResolution.Width / ReferenceResolution.Width

Notice how in the example above only the x dimension of the screen is being used. This is the default behavior used in most UI creation solutions. The sides which are used to obtain the scale factor determine the end result of the scaling. We can compare:

• Only the width of the reference and current resolutions
• Only the height of the reference and current resolutions
• Both the width and the height of the reference and current resolutions and choose a scale factor that is between the two

Example #

A scalable UI can be created using CSS and HTML. We need to use rem units in order to enable the elements to scale up or down with screen size. Rem is a size unit used in CSS. It means the root element’s font size. We can specify the font-size of the HTML element:

index.html:

<div class="ui">
    <div class="minimap"></div>
    <div class="inventory"></div>
    <div class="start-game">Start Game</div>
</div>

style.css:

html {
    font-size: 10px;
}

body {
    height: 100vh;
    margin: 0px;
}

.ui {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.minimap {
    position: absolute;
    width: 20rem;
    height: 20rem;
    min-width: 100px;
    min-height: 100px;
    top: 0px;
    left: 0px;
    background-color: #c7c7c7;
    border-radius: 50rem;
}

.start-game {
    position: absolute;
    width: 20rem;
    height: 5rem;
    left: 0rem;
    bottom: 0rem;
    background-color: #c7c7c7;
    font-size: 3em;
    text-align: center;
}

.inventory {
    position: absolute;
    width: 24rem;
    height: 20rem;
    top: 10rem;
    left: 40rem;
    background-color: #c7c7c7;
}

button {
    width: 30rem;
}

This is the size of 1 rem. If we set the size of all UI elements using rem units we can easily resize them by changing the font size of the HTML element. If we create UI for an aspect ratio of 800/600 we can use a scale factor to update the root element’s size:

script.js:

const scale = document.querySelector('.scale');
const ui = document.querySelector('.ui');
const rootElement = document.getElementsByTagName('html')[0];

function resize() {
    const windowWidth = window.innerWidth;
    const scaleFactorX = windowWidth / 800;

    const fontSize = 10 * scaleFactorX;

    rootElement.style.fontSize = `${fontSize}px`;
}

resize();

window.addEventListener('resize', resize);

This is everything you need to create a scalable UI in Prysm.