Responsive Design: what is it and why is it important to Oracle® PeopleSoft customers?

In our conversations with Oracle^_® PeopleSoft customers about modernizing and mobilizing their PeopleSoft pages and customizations, we always introduce the concept of Responsive Design.

What is Responsive design? According to Wikipedia:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

There are a number of significant benefits from leveraging responsive design techniques in a mobile strategy for PeopleSoft pages and customizations:

• Instead of different solutions/code lines for each device and form factor, there is only a single Responsive Design solution/code line to build and maintain
• A Responsive Design solution is more adaptable to the ever-changing device landscape. For example, in addition to smartphones and tablets, phablets are gaining market adoption at a rapid rate. Proper Responsive Design architecture will automatically adapt to these new device types.

When applying Responsive Design techniques to legacy PeopleSoft transactions, there are a number of hurdles to overcome:

• Many PeopleSoft pages contain hundreds of data elements that must be incorporated into Responsive Design
• Stripping down PS pages is generally not an acceptable practice because each element has a specific purpose
• PS pages have a structure that must be retained in any Responsive Design application
• When generating HTML, PeopleTools incorporates hard-coded length and width attributes that defeat efforts to allow the browser to respond to device sizes

PeopleSoft Timesheet

To illustrate these challenges, let’s take a look at the PeopleSoft Timesheet where there is a complex structure with lots of data elements, hard coded widths and a grid that is wider than a standard desktop view.

Standard Desktop View

With GreyHeller’s Responsive Design technology, we make this transaction responsive out-of-the-box.

Responsive Design view on an iPhone

Note how the data reflows and that grid information is vertical and summarized, yet all data entry fields are easily accessible.

Responsive Design view on an iPad

Note page elements are displayed side-by-side, and the grid responds to display in a tabular versus vertical format.