Web pages can be viewed on any number of platforms, from the desktop, the tablet, and mobile.
As you can imagine, a web page looks vastly different on the small screen of a phone than it does on HD monitor. Thus, the screen should be created to fit the display it is viewed on. If you had the time and the inclination, you could create separate pages for each type of display the page can be viewed on.
Or you could create the screen to change its appearance depending on the display it's being viewed on.
This technique is called Responsive Design.
As you can see in the animated gif above, there is only one screen being viewed. However, depending on the size of the display, it will expand, hide, and show elements that befit the display.
Method screens are responsive automatically, however, there are some elements that need to be enabled manually to improve the experience.
To help with making a screen responsive, you can
Every section has a responsive layout setting found in its properties panel.
The dropdown list has three options:
When a section collapses, it is referring to the columns within the section. If a section only has one column (the default), then setting the responsive layout will have no effect.
The way a section collapses is by converting its columns into rows. If you have two columns and one row, then it will collapse to one column, two rows.
In the below diagram, we have a non-collapsed section with two rows and two columns.
When collapsed, notice how the columns collapse into rows. Also note the placement of each cell:
By using collapsible sections, you can improve readability by ensuring there are not too many columns fitting into a small display. They will automatically collapse into rows.
When viewed on a phone, a grid with many columns will be unreadable. To circumvent this, the visibility of a column can be dependent on whether the grid is viewed on mobile or desktop.
In the below example, the RecordID column is selected, and note the On Desktop and On Phone checkboxes are checked beside the Hide setting. This means this column is not shown when viewed on desktop or on the phone.
Remember, not every column is needed when viewed on a phone. Make sure when creating your grids you go through each column and hide ones so they do not appear on mobile.
It is hard to visualize what a page will look like on different devices. Fortunately, most browsers have the ability to go into a Responsive Design Mode to test the different sizes.
Remember, as well, the best way to test your pages is on the device itself!
Chrome has a device toolbar that allows you to switch between common display sizes (as exemplified in the animated image above). To get to turn on this toolbar:
Firefox has a mode where you can view the page as if it were on different devices. To turn on this mode:
When designing screens, try to adhere to these best practices for a usable mobile experience.