Introduction

A variety of tools and options are available when it comes to designing a new page.
Before starting the process, a few core questions should be answered in order to select the proper tools, and set the right values.

Agenda

The core questions to answer, in order, are

• Does the site need to be designed?
• What resolutions will be covered by the page?
• Will a background image be used?
  • If so, will elements be positioned on top of the background?

Does the side need to be designed?

A page can execute a page function. Some of these functions require some time to complete, others terminate almost instantly.
For the latter group, a page does not need to be designed, as it will be visible for no more than a frame.
It is possible and advised to design all pages, in case a function is delayed for some reason, and to suppress unwanted visual effects.
However, when choosing which page to design first, those with a short-lived function should not be prioritized.

What resolutions will be covered by the page?

This is the most crucial base decision, and has two general answers:

• All devices that will display this page will have similar resolutions.
• Devices displaying this page will have a large variety of resolutions, especially differing resolution ratios.

For the first case, the page can be designed to suit those devices, as a single design will look proper on all devices that will display it.
For the other case, it should be considered designing multiple pages, one for each set of resolution ratios.

• For instance, if it is expected that smartphones with a ratio of ~17:9, and tablets with a ratio of ~5:3, each of these groups could receive their own individual page. A resolution check can then be used to only stay on the first page, e.g. 16:9 < device ratio < 18:9, and otherwise go to the secondary page.

Will a background image be used?

If the background of the page should be an image, two options present themselves:

• Choosing an image with a aspect ratio close to the one the target devices will have
• Choosing any image, and utilizing the border mode to select a section of the image close to the target devices' aspect ratio.

This ensures that the device's display will be filled. If the image's aspect ratio and the device's aspect ratio mismatch, a considerable black, unusable edge will appear on two sides of the screen.

Positioning elements

When it comes to positioning elements, there are two suggested options:

• Positioning them utilizing the canvas.
• Positioning them utilizing the display's resolution.

The first option ensures that an element is always positioned at the same position on the canvas. This is recommended for use in conjunction with a background image, and when elements should always be at the same position relative to said image.

• An example is a background graphic with a visible button. An actual functioning button could be positioning exactly on top of it, using the canvas' dimensions, and be rendered invisible, allowing for a "clickable background button".

The other option allows for fully utilizing the device's display. Elements are positioned relative to its width and height, ignoring the canvas entirely. This ensures that, for instance, a button that is positioned at the bottom of the screen will always be there, no matter the user's device.