Best practices for content responsiveness in visualization fields for PWA

As a developer, you may want to embed data which is displayed in the form of visuals such as graphs, images, or maps, in the progressive web application (PWA) that you are creating. To display such visuals, you must define a data visualization field (DVF) within the application. You can define a DVF on Mid Tier or you can add a data visualization field to a form in Developer Studio.

When you create a data visualization field for PWA, you must make sure that the content is responsive to screens of various devices or screens of various widths. The progressive framework in Mid Tier ensures responsiveness of the content that encapsulates the data visualization field. The following best practices help you ensure responsiveness of the content you embed through a data visualization module.

After you preform the following checks with your DVF content, you can perform the procedures in Deploying-a-custom-data-visualization-module.

Set the viewport to match screen width

Make sure that the pages are optimized for a variety of devices by including the viewport parameter in the <head> tag. Set the value of the viewport tag to width=device-width. For example:

This instructs the browser to match the screen width of the device.

Set scale settings to ensure viewport accessibility

Set the value for the initial-scale attribute.

Do not set the minimum-scale, maximum-scale, and user-scalable attributes on viewport as they disable the users' ability to zoom the viewport view and cause accessibility issues.

Set image width to avoid scroll bar

If an image is larger than the viewport view, the image may appear with a scrollbar. To avoid this, set images to have a maximum width of 100%. This will cause the image to resize to fit the available space in the viewport when the available space is smaller than the image. However, because of the maximum width criteria, the image does not stretch larger than its natural size when additional space is available in the viewport. It is generally safe to add the following to your stylesheet so that you will never have a problem with images causing a scrollbar.(% style="color: rgb(0,0,0);" %)

img {
max-width: 100%;
display: block;
}

Create flexible grids with CSS Grid Layout

CSS grid layout allows for the straightforward creation of flexible grids. If we consider the earlier floated example, rather than creating our columns with percentages, we could use grid layout and the fr unit, which represents a portion of the available space in the container.

.container {
display: grid;
grid-template-columns: 1fr 3fr;
}

Here is an example code for creating a layout:

<div class="container-fluid">
<h2>Three Equal Columns</h2>
<p>You can also use numbers to control the column width. Just make sure that the sum always adds up to 12:</p>
<div class="row text-white" >
   <div class="col-3 bg-dark">one</div>
   <div class="col-3 bg-dark ml-1">two</div>
   <div class="col-3 bg-dark ml-1">three</div>
</div>
<div class="row pt-2 text-white">
   <div class="col-3 bg-dark ms-1">four</div>
   <div class="col-3 bg-dark ml-1">five</div>
   <div class="col-3 bg-dark ml-1">six</div>
</div>
<div class="row pt-2 text-white">
   <div class="col-3 bg-dark">seven</div>
</div>
</div>

Using the example code, the following layout can be created:

Ensure flexbox layout settings

We recommend this layout for a set of items of different sizes that need to fit comfortably in a row or rows, with smaller items taking less space and larger ones getting more space.

.items {
display: flex;
justify-content: space-between;
}

The following example code can be used to create a layout:

<div class="container mt-3">
<h2>Inline Flex</h2>
<p>To create an inline flexbox container, use the d-inline-flex class:</p>
<div class="d-lg-flex text-white text-center">
   <div class="bg-dark rounded p-2">Item 1</div>
   <div class="bg-dark rounded p-2">Item 2</div>
   <div class="bg-dark rounded flex-grow-1 p-2">Item 3 is a longer item</div>
   <div class="bg-dark rounded p-2">Item 4</div>
   <div class="bg-dark rounded p-2">Item 5</div>
</div>
</div>

The following layout can be creating using the example code for a flexbox layout.

Use CSS media queries for responsiveness

Media queries change the layout of a page depending on the orientation of the browser. To make extensive changes to your layout to support a certain screen size, you can use media queries.

width (min-width, max-width)
height (min-height, max-height)

Leverage web development frameworks

You can design and customize responsive pages with web development frameworks such as Bootstrap.

Learn more about responsive design

Basics of responsive web design
The bootstrap grid system