Applying Responsive Web Design to Business Applications

Most of the discussions about responsive and adaptive web design have been in relation to content based web sites but what about the humble web based business application? It may not be the most glamorous but surely it deserves a little RWD treatment too!

As mobile and tablet devices become more prevalent amongst business users, we need to ensure that our business and enterprise applications are ready for the transition from the desktop to the touch screen, from a fixed width layout to a responsive layout.

Refactoring an Existing Application

If you are working with an existing web application then the chances are that your design is targeting a desktop browser and you now want to facilitate smaller viewport sizes. When it comes to an approach for refactoring your application you have some choices, choosing the right approach for your situation will depend on several factors.

Mobile First

Taking a mobile first approach with an existing application can be quite involved. You start by creating a new empty style sheet, then shrink your browser down to the size of a mobile device and start building up the CSS and media queries from there, tweaking the HTML, possibly adding some JavaScript and increasing the browser size as you go.

Taking the mobile first approach is great for new projects but it has it downsides on existing projects, it can take quite a lot of time and effort and you need to ensure that existing desktop users retain a similar user experience. Large corporations are quiet slow to upgrade their browsers to the latest version and users are often restricted from upgrading themselves so catering for older browsers is an unfortunate necessity.

Desktop First

An alternative approach is to keep the desktop layout as the default and add in media queries to tweak the layout for smaller and larger viewport sizes. This is a less intrusive approach and can result in the desired result for a fraction of the time and effort.

Case Study: Business Application Search Page

A common use case in web applications is where a user will search for data using a search page and if they want to view the detail of a particular record they click on it to open a separate details page. The search page is of particular interest here because it is a challenging layout for a responsive design.

A search page generally has two main sections, a filter bar and a results section. The filter bar comprises of a number of filters (usually text boxes and drop down lists) and a search button, the results section is usually a table of data with paging and sorting. The filters are often displayed in a two or three column layout at the top of the page or sometimes as a single column at the side of the page, the remainder of the page is allocated to the tabular results.

Design Decisions

Filter Bar

Refactoring the filter bar to a responsive design should be relatively easy, as the page size decreases the number of columns reduces until there is one column. A single column of filters will take up the majority of the real estate on a small screen so hiding the less important filters in a collapsible panel will recover some valuable space.

Tabular Results

The table of results is a bit more challenging as it is a large rectanglar area, this is not an issue on larger screens but it can be several times the area of a mobile phone screen. The data must be presented to the user in a usable way which is not an trivial task, but thankfully, several patterns have emerged to solve this problem and I have implemented a horizontal overflow pattern in this example by using the Responsive Table jQuery Plugin.

Widescreen Layout

The existing layout does not make the best use of a wide screen desktop monitor, the filter bar and table become too spread out. One solution is to put the filters into a single column at the side of the page, the remainder of the page can then display more rows of the table.

Proof of Concept

The objective of this proof of concept was to show that a responsive web design could be applied to a search page layout. If you open the demo on a desktop browser you will see the changes in layout by increasing and decreasing the size of the browser.

You can view the demo here: