Responsive Layout

Overview

Responsive applications display on a wide range of devices with different screen sizes.

Responsive UI applications typically follow the responsive layout pattern, where the elements in each view shift, flow, or change size or visibility to fit the available width. The view height is left unaltered, with a single vertical scrollbar used to access anything below or above the visible viewport.

Contrast the responsive layout approach with fixed layout, where all display blocks are always fully visible in the viewport, where they divide up the available width and height in the viewport.

View Focus

A view in the context of Responsive UI refers to the size of the screen on the device being targeted by the application.

Views in our applications fall into one of three categories:

• Universally-focused
  • These views are optimized for desktop, tablet, and mobile displays.
  • This typically involves resizing or hiding and showing elements at different screen sizes to maximize the user experience at that screen size.
• Larger-focused
  • These views are optimized for desktop and tablet displays.
  • These views might work on mobile displays too, although they will typically run into layout problems.
• Smaller-focused (a.k.a. “mobile first”)
  • These views are optimized for tablet and mobile displays.
  • These views typically work on larger desktop displays too, although they don’t take advantage of the additional screen width.

An application may focus a view on a specific end of the size spectrum for different reasons. Maybe the target audience always uses a specific type of device to access that view, making it not worthwhile for the application to focus effort on supporting a size that is rarely (if ever) used.

Some applications focus all of their views on one of the above view types. Other applications focus some of their views on one display size for one type of user and other views on another display size for another type of user.

Testing Responsiveness

The developer tools in modern browsers allow you to quickly emulate the width and height of various devices. This isn’t a substitute for actually testing your app on these devices, as each browser in each OS version can be subtly different, but it can be a quick and easy way to test the overall responsiveness of your app at different aspect ratios.

Development

To implement responsive layout, we use CSS classes that implement a 12-column layout grid.

You can also create your own responsive layouts using the capabilities in CSS Grid or CSS media queries.

Web component development

Bundling the responsive layout CSS

Bundle the rui-responsive-layout.css file in your application’s JavaScript bundle.

To do this in Angular, include node_modules/@jkhy/responsive-ui-wc/styles/rui-responsive-layout.css in the styles array in angular.json.

'styles': [
    ...
    'node_modules/@jkhy/responsive-ui-wc/styles/rui-responsive-layout.css',
    ...
],

Using the layout grid CSS

This file includes CSS classes that implement a 12-column layout grid:

• Your content is laid out in 1 or more layout rows, with 1 or more elements in each layout row.
• Each layout row is a div with the row CSS class assigned: <div class="row"></div>
• Each row contains 12 layout columns.
• Each element in a row can use 1 or more of the 12 layout columns.
• You’ll assign a column CSS class to each element in a row. This CSS class specifies how many of the 12 columns the element uses in that row for different screen width ranges.
• Each column CSS class takes effect for 1 of 4 different screen sizes:
  • xs: mobile size, 767 pixels or less wide
  • sm: tablet size, 768-991 pixels wide
  • md: desktop size, 992-1199 pixels wide
  • lg: large desktop size, 1200 pixels or wider
• Each column CSS class has 3 parts:
  • The prefix col-
  • One of xs, sm, md, or lg to specify the screen width affected by this class
  • A number between 1 and 12 to specify the number of layout columns used by this element at the specified screen width
  • Examples:
    • col-xs-12 specifies that the element takes all 12 of the layout columns at mobile size
    • col-sm-6 specifies that the element takes 6 of the 12 layout columns at tablet size
    • col-md-3 specifies that the element takes 3 of the 12 layout columns at desktop size
• You can assign multiple column CSS classes to an element, specifying how many layout columns the one element will use at different screen widths.
  • For example, if an element has the col-xs-12, col-sm-6, col-md-3 CSS classes all assigned:
    • It will take all 12 layout columns at mobile size (767 pixels or less wide)
    • It will take 6 of the 12 layout columns at tablet size (768-991 pixels wide)
    • It will take 3 of the 12 layout columns at desktop size or wider (>= 992px)

Angular wrapper development

We primarily use the Bootstrap framework to implement responsive layout for responsive web apps.

The Bootstrap grid (see http://getbootstrap.com/examples/grid/) allows you to lay out elements using up to 12 columns, with each element able to adopt a different width or layout based on the current screen size: extra-small, small, medium, large, and extra-large.

Beyond the Bootstrap grid, a responsive web app can use CSS media queries to change the layout or visibility of any element based on environmental context. These queries are typically based on the screen width, although other factors such as the device’s orientation can be factored into the query too. One example would be to display an element at a larger size when the screen width is larger, and at a smaller size when the screen width is smaller. Another example would be hiding non-essential elements when the screen size is small.