What is True Responsiveness?

Designed to intelligently move functionality based on available real estate, transforming the user experience.

What is True Responsiveness? Your employees and constituents expect to be able to do everything on their mobile device that they would on their desktop without compromising functionality: finding a contact, applying for a job, reviewing their pay stub, enrolling in a class, enrolling in benefits, or make a payment.

Read on to see examples of true responsiveness in action.

iPhone in portrait view vs. iPad

Let’s look at the weekly class schedule in Campus Solutions on two form factors: iPhone in portrait view vs. iPad.

In the header bar the “Week of” identification moves below on the mobile device because there isn’t enough real estate. On the iPad it extends across the page based on the same logic.

In the example above, the real estate allows for 2 columns of the class schedule on the iPhone while displaying 4 columns on tablet. Responsiveness design is not dependent on device type and instead flows intelligently based on available real estate.

Indicator dots appear when the entire week is not visible. The reason for this is because responsive design is not about making content smaller to fit on a page, but instead, to rearrange it and present it in a useful manner to the end user.

In both of these examples the action buttons are fixed to the bottom of the screen, and visible at all times, to minimize vertical scrolling.

As you’ll notice, new device size doesn’t matter because breakpoints move fluidly based on the content.

iPhone vs. Desktop

This is how the desktop view changes based upon available real estate on a desktop computer.

As the screen becomes larger, you are able to see more at one time so the action buttons are relocated to the bottom right hand side of the screen. Additionally, in the desktop view, the navigation is expanded

The “Week of” identification reflows based on real estate.

The hamburger menu is collapsed when there is lesser real estate, but ever present when there is more space.

The action buttons are fixed to the bottom of the screen to minimize vertical scrolling on smaller devices.

Indicator dots appear when the entire week is not visible. With larger views the entire week is visible and therefore the indicator dots and arrows are not present.

Bringing back the submenu navigation

True responsiveness is not stripping out functionality for smaller form factors.

For example, earlier versions of our Campus Solutions user experience eliminated the navigation tabs that are present throughout PeopleSoft Campus Solutions to save real estate.

Due to feedback from our customers, we reintroduced this functionality in a way that moved it out of the way but made it available when desired.