Blog

How Jyske Bank pulled off responsive web design

Share

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

Janus Boye

Janus Boye
CEO and Head of Research

As founder and managing director at J. Boye, Janus has grown the business from an office at home in 2003 to an international operation today with members in Europe and North America.

Janus is a frequent speaker at industry events and chairs the renowned J. Boye Conferences held since 2005 in Denmark and since 2009 in Philadelphia, US. Among the organisations that have recently called upon Janus' expertise are  local government agencies, the UN in New York and companies such as Brother, Carlsberg and Red Bull.

jb@jboye.com

3 Responses to “How Jyske Bank pulled off responsive web design”

  1. Thanks for a nice short article about response webdesign in a real world scenario.

    A few comments though. I won’t neccesarily consider responsive web design a standard. It’s not something that is defined by W3C but rather a new paradigm.

    It would also be interesting to hear how they’re dealing with serving images for devices like smartphones and tablets. Especially smartphones since I don’t asume they serve the same image files for smartphones as they do for the desktop?

    /Jan

  2. Robert says:

    Adaptive Images/Videos are the way to go. If you want to be successful with that paradigm you need to adapt your images/videos to connection quality and screen size.
    It’s no solution to deliver a 1600×900 500 KB image to an iPhone via an EDGE connection and let the client do the scaling. So we need to prepare for and find server-side and last-mile solutions to be able to get wide adoption for responsiveness.

  3. [...] site can still be made responsive. Jyske Bank realized that a great deal of its customers were using the company’s old site on a mobile device, despite not having it optimized for smaller mobile screens. Clearly their new approach is much [...]

Leave a Reply

Most popular posts from our blog
August 12, 2009 by Janus Boye
Selecting the right CMS is not an easy task with; there is in excess of 1,000 vendors in the very dynamic CMS…
February 16, 2010 by Janus Boye
All modern CMS vendors claim to be capable of delivering content to mobile devices. Some even offer additional modules to make the…
March 21, 2011 by Janus Boye
You may be impressed by some of the features during a CMS product presentation, but in reality many of the features that…
Recent comments
April 8, 2014 by Bertrand
I would include the Apache Sling website in this list ( http://sling.apache.org/ ) as it's what powers AEM. Understanding the…
April 8, 2014 by Scott Liewehr
Great resource, Janus. And thanks for the mention.
March 15, 2014 by John
Their site may not even be a CMS but more of a custom built web application. Also, how do you…