Credit Union Experiments with Responsive Web Design

Have you ever felt frustrated at having to spread your fingers (or unpinch) and then swipe around your smartphone screen to read website content? Army Aviation Center Federal Credit Union believes it's found a way to reduce the navigation and squinting required to view content on its sites.

The method, called responsive design, centralizes the management of web and mobile content. Using software from Banno, the credit union is able to, at the time of log-in, determine the type of device, the screen size and the browser the user has, and automatically tailor content for that device.

If it works well, the credit union's members will be able to view content on different size screens with minimal navigation, and the credit union will have an easier time managing compliance, archiving, workflows and site updates because it will have a single electronic financial services channel.

"By using responsive design, you don't have to scroll back and forth to see all of the content, or zoom into the screen see what you're looking for," says Angela Norris, web master for Army Aviation, a Daleville, Ala.-based credit union with 105,000 members and $835 million in assets.

The credit union has 17 branches, with 12 in a concentrated area near Daleville. Its members include a mix of military personnel and civilians, and the credit union focuses on remote service given its small branch network. "We now have many people out there using the mobile channel for all sorts of activities. This was a way to make it easier for them to use mobile devices," Norris says.

Financial institutions have been grappling for the past several years with how to manage the content that's delivered to PCs, smartphones and tablets. Responsive design has been in development for the past two years, and is used by Facebook, which has provided digital design clues to financial institutions in the past. But responsive design as a design option is relatively new to financial services.

"Since we know the user is coming from Windows7 or Android, responsive design allows you to know if the default log-in for internet banking should take you into the mobile version of the site," says Wade Arnold, CEO of Banno (the former T8 Webware), the firm that redesigned the credit union's website and hosts the responsive design technology. "For example, if you are looking at interest rates, if you're using a smaller screen we may go with a smaller font or a different color, or the background image may be different."

Arnold says that by creating a single website, instead of a browser-based site for mobile devices and a site for PCs, a financial institution's overall web presence should be easier to manage.

"Change management is easier. What would happen [with separate sites] is an update would be made and nobody would double check both sites. So the rate would be wrong on one of the sites," he says.

Banno's version of responsive design leverages HTML4 CSS Media Queries. CSS, or "cascading style sheets," define how sections of code and text will be displayed visually on a screen.

The media queries check for the conditions, or the screen parameters and capabilities of the device that has been used to access the website. That "device information" informs which style sheets will be used to place documents or content on a screen. The different style sheets govern size, font, color and other design elements, including width and height. A chart or graph that's designed for the horizontal screen of a PC can be automatically changed to a smaller chart with less colors to make it more viewable on a smaller, vertical smartphone screen.

While responsive design can work on any website, it's generally easier to start from scratch, particularly if the existing web site has very large graphics or static content that's horizontally oriented.

Norris says the credit union opted to relaunch its website, which had last been redesigned about four years ago, to add the ability to update content in near real time and add more color to its visual elements. "It was the first time in a few years that we had redesigned out site and it had gotten stale," she says.

For reprint and licensing requests for this article, click here.
Bank technology
MORE FROM AMERICAN BANKER