The new Jyske Bank site on a smartphone Jyske Bank is the largest Danish bank headquartered outside Copenhagen. Sometimes they do things a little differently. When they recently re-launched their web presence they managed to introduce responsive web design; a new and useful web design standard.

One of the major benefits is that responsive web design moves the focus away from technology and onto making a more useful site for the users. In a nutshell, responsive web design adapts the content and design of the website to any device, regardless of whether it is a desktop computer, a laptop, a tablet or a smartphone.

This means Jyske Bank no longer needs to create a specific mobile-friendly website or any other different edition for other devices. Just one website and it adapts to everything. This fits well with the underlying motto that the Jyske Bank web team posted on the wall and used for this massive 2011 project:

Build the site you can manage!

I had a conversation with their user experience designer Claus Stadel Petersen and online strategist Gorm Ruge to learn more and take a look behind the scenes.

From idea to reality

The initial driver for the Jyske Bank website re-launch was the introduction of a new technical platform. As in other organisations, the communication team wanted to use this as an opportunity to update content and improve the interface.

This is how the Jyske Bank website looked before the relaunch

The old web design: How the Jyske Bank website used to look

At Jyske Bank, they also took a closer look at the growth in website traffic coming from mobile devices. Despite having no dedicated mobile website and a desktop site that did not work well on mobile devices, traffic coming from mobile devices was still growing rapidly. The Jyske Bank team considering developing dedicated mobile sites.

The downside to a bigger and better mobile site is additional maintenance and potential disappointment among customers, which would only get a watered down version of the desktop site. Jyske Bank decided this was not good enough and started looking for a better way.

When they heard about responsive web design in the spring of 2011, they immediately liked the idea. A decision was made to opt for this and the actual development work started right away.

After the summer holidays the initial pages using responsive web design went live starting with the home banking info pages, contact pages and search. More content areas were subsequently launched iteratively. The prominent frontpage came in early December and the missing pieces are being rolled out in the coming months.

According to the team at Jyske Bank, it is difficult to get an estimate on the additional upfront design and development costs that come with responsive web design. It might be up to 20% more expensive due to the additional time required for cascading style sheets and markup, but in their view it makes good sense in the longer term where time and money is saved by not having to crank out additional templates for each device.



The new Jyske Bank website uses responsive web design and looks nice on any device

The new Jyske Bank website uses responsive web design and looks nice on any device

The new Jyske Bank website uses responsive web design and looks nice on any device. Try to visit the site and resize the brower window to see how responsive web design works. Thanks to Marianne Kolodiy for the illustration

From “mobile-first” to “users-first”

During the redesign project, Jyske Bank did several rounds of usability testing. As a part of the testing, they asked the participants to solve top tasks such as currency exchange calculations and finding out when a local branch closes on Tuesdays.

The results from the testing were helpful in the process of further improving the new interface. Based on this, statistics on media consumption and own experiences all acted as a useful reminder to follow the “users-first mantra” and provided a better understanding of when customers use which device, eg. likely to be a desktop when in the office and a mobile device when sitting in the couch at home.

Building the responsive interface

The actual coding of the new responsive website, was done by in-house resources, with external CSS coding help from Aarhus-based design agency Designit.

Behind the new site are drawings based on 3-column wireframes. These were further developed into a 12 column design, eg. divided into 3 x 4 or 8 + 4 depending on the layout of the page. The entire screen for a desktop is assumed to be 970 pixels or more and Jyske Bank has then defined rules for what happens on small screens; typically moving right hand interface elements further down.

3 lessons learned about responsive web design

The first lesson learned is that there is a mental barrier; a “desktop mindset” that needs to be changed. This applies to everything, including input fields, which need to be able to fit on smaller screens. The take away is that you always need to remember that all interface elements need to work across devices.

Secondly, set aside plenty of time for testing; not only in different desktop browsers, but also on different devices. Jyske Bank ran into specific technology issues with Android-devices that got fixed shortly after launch.

Finally, remember that the concept of responsive web design is still new. For Jyske Bank specifically as an early adopter, this meant that they had to write more code as very few responsive design themes or open source packages existed that Jyske Bank could leverage.

Learn more

User experience expert Ethan Marcotte coined the term responsive design and started it all with his article and later expanded his thinking with a book. For more reading on the topic, see this article from Smashing Magazine: Responsive Web Design: What It Is and How To Use It

Boston Globe was one of the first organisations to embrace responsive web design in September 2011 and their case has been widely documented, including on webmonkey: The Boston Globe Embraces Responsive Design. Since then many other organisations have decided to go in this direction, including Red Bull starting with their Red Bull Music Academy.

Next step for your website