Web pages can be viewed on the following different sized screens: desktop, tablet, and mobile. A web page looks vastly different on the small screen of a phone than it does on an HD monitor.
If you had the time and the inclination, you could create separate pages for each type of display. 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 image 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:
- Collapse columns within sections
- Show and hide columns within grids
Every section has a responsive layout setting found in its properties panel. The dropdown list has three options:
- Don't Collapse
- Collapse for Tablet and Phone
- Collapse for Phone
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.
Hiding Grid Columns
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 Phonecheckboxes 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.
Simulating Responsive Design
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.
Note: Some pages require a refresh before displaying properly on the browser. Always refresh the screen if you switch between display modes.
Remember, as well, the best way to test your pages is on the device itself!
Device Toolbar on Chrome
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:
- Right-click on the screen and from the menu select Inspect.
- A panel will appear. Select the icon that looks like a phone and a tablet.
Responsive Design Mode on Firefox
Firefox has a mode where you can view the page as if it were on different devices. To turn on this mode:
- Select the properties icon menu (≡) in the upper right of Firefox.
- Select Web Developer to open up another menu.
- Select Responsive Design Mode (You will note there is a hotkey for it).
Responsive Design Best Practices
When designing screens, try to adhere to these best practices for a usable mobile experience.
- Column widths should be expressed in percentages.
- Buttons and fields should expand to the full width for a mobile view.
- Pad sections, not cells (embed sections within sections to get the proper spacing you are looking for).
- Common control at the top and bottom of the screen. If the screen requires a lot of scrolling, you should not make your user scroll to get to a button (e.g. Save button).
- Always test! Remember, the best way to test a screen is on the device itself.