The BankID Web-client is based on a responsive design, and will adapt to the space made available by the merchant application. The merchant must decide which size that will give the best user-experience for his application on various end-user devices, and govern the size of the BankID Web-client accordingly.

Note that when using frameMode=redirect (4.2) the Web-client's size will be predefined. This means that any size settings will have no effect on the Client size. There are multiple ways for a merchant application to control the size and responsiveness of the iframe in which the BankID Web-client resides.

It is recommended that the merchant provides the user with an experience adapted to the screen size of the device; either an embedded user-experience on larger screen-sizes, or a full-screen user-experience on small screens.

Size recommendations

Large screens (Desktop/Tablet)

On larger screen-sizes the client can be embedded with merchant context surrounding it. Initializing the client with a height and width of 100% (default values) will allow the merchant to control the size and responsiveness of the client by manipulating the size and behavior of the container the client resides in using CSS.

• The recommended size on a desktop / tablet is at least 396px (w) by 280px (h).
• If the user is signing a large document, the client should be granted more space to accommodate appropriate display of the document within the Web-client.

Small screens (Smartphone)

On smaller screens - below 6 inches – it is recommend that the BankID Web-client is granted all available viewport space when it is in use.

A phone works in both landscape and portrait orientations, and the end user often switches between orientations as he/she is browsing. The merchant should keep this in mind when implementing the BankID Web-client, and ensure no restrictions are imposed on the client preventing it from adapting to the current orientation.

The recommendation is to grant the BankID Web-client all available space when used on a small screen.

Summary

The following table summarizes the recommended and minimum sizes.

 ^* 200px for the BankID 2.0 sign client

Responsive behaviour

Responsive client

In order to provide the best possible user experience in all use cases, the client has been designed as a responsive web application, allowing it to adapt to the space made available to it by the merchant application. Depending on the available space the Web-client changes its appearance as follows:

Width

When the client width is 395px or less, the following measures are applied to maximize available horizontal space:

• ”Menu” label is removed from Menu button element.
• Merchant friendly name and User/Employee name elements are truncated if necessary.
• Input field and Next button scales from 350px down to available width.

Height

When the client height is 250px or less, we apply the following measures to maximise available vertical space:

• The height of the following elements are reduced from 40px to 35 px: header, input button, next-button, footer and menu tables in popovers.
• Borders on buttons in header and footer elements are removed, but are still visible in hover and active-states.

• Text size on header, title, certificate help text, and merchant friendly name and User/Employee name are reduced.*

 * Text size is even further reduced when the client height is 200px or less.  

Minimum size

While the BankID Web-client is responsive, and adapts to the space made available to it by the merchant application, there is a limit to how small it can be before visual elements become distorted. This limit is 320px by 150px (200px height for BankID 2.0 sign client).

If the available space is less then the minimum size limit, the Web-client will be cropped and the user experience will deteriorate (BankID 2.0 sign client will still try to adapt, but will become distorted).

Responsive / Adaptive merchant

In order to provide the best possible user experience in all use cases, the merchant too may wish to consider a responsive or an adaptive merchant application.

A responsive merchant application is defined (for the purposes of this document) as one that is built on a fluid grid, will change with the browser, and where content can break apart and realign if necessary.

An adaptive merchant application is defined (for the purposes of this document) as one that is not necessarily built on a fluid grid, targets specific screen resolutions, and / or targets specific devices / device types.