There are a myriad of discussions and educational pieces out there on the topic of responsive web design. Yet, there is still a fair amount of confusion and debate among marketers around its benefits and business case. In financial services, however, the business case has become much clearer.
Last week, a study published by eMarketer revealed that nearly 59% of 18-to-34-year-old mobile phone users in the country will access their bank, credit union, credit card or brokerage account via their phones at least monthly this year. But, by the end of this year, eMarketer predicts, 74.2% of US adult millennial internet users will bank digitally via any device, So, developing first class digital experiences across all devices in financial services is no longer a luxury, it’s an imperative.
While the concept of responsive design-providing digital experiences that deliver the best capabilities and experience for any given screen size-is not new, how you elect to approach it can make all of the difference to the end result.
So we sat down with our leading expert on the subject, CTO Sean Brown, to get his perspective on the technique and why he says the time to act is now. This is the first in a two-part series on responsive design.
Q: What's the main point you want people to know about responsive design?
A: Simply that marketers can't afford to ignore mobile experiences anymore. Any marketer paying attention to web analytics today knows that desktop use is declining, while mobile use (both phone and tablet) is increasing.
What this means to a brand is that their mobile experience needs to be world class. They also need to deliver a world class desktop experience, and tablet experience, and whatever the next thing will be. Gone are the days where mobile could be treated as an afterthought-we are past that paradigm shift.
Q: What is responsive design, in a nutshell?
A: Responsive design is a set of techniques that allow you to build a digital experience with one set of code that will respond to the screen or display real estate available-so whether a user experiences your website from her phone-or she's hooked up a laptop to a 65" television screen-the website will respond and display the best combination of content and functionality for that screen.
Q: So, it detects a device?
A: No-it's not device detection. Instead the code responds to the size of the display that is available. It doesn't care if it's an iPhone 6 or a Samsung with Android running on it-or a Kindle fire or an iPad. It's device-agnostic, but it will detect screen resolution and display in some variation based on pre-determined content breakpoints.
Q: What's a breakpoint?
A: In general, a breakpoint is a mutually agreed upon screen width where we'll change the experience of the content-and an opportunity to ask what the best use cases are for users. For example, a display at 1024 pixels wide (a very common tablet width) might be one breakpoint-and anything bigger than that is designed for desktop. Then, landscape vs. portrait might be another breakpoint (e.g. tablets might be horizontal, phones vertical). So how are users experiencing your site at these sizes? How is the navigation used? How is the content or functionality prioritized? How much content is displayed? We take a look at common real estate sizes, evaluate the data and analytics alongside our user discovery, and then we boil them into supersets.
Q: What about backend systems? How does it work in industries with widespread use of legacy systems, like financial services?
A: Responsive design is primarily concerned with the presentation layer (i.e what your user actually sees on your site), so it can be implemented and integrated with just about any "backend" system, like a content management system, commerce platform, and, yes, online banking. For instance, we recently helped a $30 billion financial services company completely transform their online banking experience from one that looked and worked like every other bank, to a world-class, intuitive experience on screens of all sizes.
When we work with clients on a responsive redesign, we take into account the gamut of experiences their customer might have -from tablet usage while watching TV to mobile phone usage while standing in line at the grocery-to help prioritize the content, presentation, functionality, and device capabilities to make the best possible user experience in each instance-all before we apply the visual design.
In part two, we'll talk about why responsive is finally taking hold, which barriers have come down, which are still misunderstood, and when to build an app.