A Responsive Web Design primer

Figure 1: A Responsive web design example of Nomensa.com showing desktop, smartphone and tablet.

In less than 2 years responsive web design (RWD) has become a digital design trend. Historically, as website designs became more aesthetically sophisticated, designers wanted to exert greater control over the presentation layer or what the user experienced. Liquid layouts began to be replaced for ‘fixed width’ design thinking and practice. In essence, liquid layouts were complex and more costly to design and develop. However, when they were done well they provided a superior user experience. If you think the number of devices that needs to be considered is mind-boggling in 2013, this is likely to be insignificant to the potential ways we will use information (and screens) in the future. The proliferation of devices and therefore screens that we will use and access can only increase.  This makes the whole RWD approach very practical and those who have embraced it are building a platform that will allow future devices to be included – this is future-friendly thinking.

A very different digital world

The online world is a different place since the arrival of Apple’s first iPhone on June 29th 2007. Whilst we are in the midst of a social computing revolution spurred on by smartphone and tablet usage, we are by no means finished. There is no roadmap. Where will the web end up in 2015, 2018 or 2023? This is a very exciting time for the web, and designers of web experiences.

The pocket metaphor

We no longer just sit at our desks to use a computer and browse the web. We use a computer on the go and browse the web on the go too. The computer has moved from the desk to our pockets.  Our computers travel wherever we travel. The smartphone has ushered in greater consideration for how we would eventually support different screen sizes.  Thus, the fixed-width ideology of ‘one-screen-size-fits-all’ has been maneuvered out of the way by RWD or intelligent-rule-based liquid layouts. Yet, it would be a fallacy to think we can design for all possible screen sizes.  The investment required both in terms of time and money would be too great. Too many new devices with varying screen sizes are coming onto the market all the time so we need to put a metaphorical stake in the ground and move away from thinking about the “number of screens or devices”. One common misconception is thinking in terms of ‘how many’ screen sizes. In reality we only care about the screen we are using, at the moment we are using it. Imagine all the different screens you use or come into contact with throughout your day. This number is only going to increase in the future. Don’t get sidetracked with the number but instead focus on the quality of the experience you want to provide across all screens – the total experience.

How big is the RWD trend?

Designing for the growing number of smart devices that people use to access the web is big business. At Nomensa we recently calculated that over 50% of our research and design projects since the start of 2013 have involved some form of considerations about RWD. We expect this to increase. As I stated previously, the web is a very different place in recent years.

So, what are some of the factors to consider in a responsive web design project?

Let’s start by examining a very typical RWD scenario: A client has an existing website and they have asked for it to be responsive. Their objective is to deliver a great user experience across multiple devices. A great responsive experience is more than its design (layout), interaction or content because it is the whole or total experience that matters. We judge and therefore experience a RWD solution holistically so designing holistically is a fundamental consideration. There are a number of fundamental questions that need to be considered in the RWD approach:

How much do we know about the behaviour of the intended audience and what they expect?

We need to understand the service or product we are designing. When it is used. Why it is used. What solution or benefit it provides. How it is different from other solutions. We need to build a unique perspective of the target audience so we can understand how to translate insight and knowledge into a unique experience. Start the process by understanding human behaviour.

Does your audience expect different features on different devices?

RWD focuses on delivering a single unifying solution. Therefore, the context of the above question may seem a little strange. Yet, how we use and think about our devices will vary.  We have to move away from the one-size-fits-all approach. We need to anticipate what content and functionality should be presented across the whole experience. By applying behavioural knowledge and insight we will be better prepared to anticipate and therefore shape what is expected as people switch between devices. People may expect similar experiences, or, they could expect very different ones – we just don’t know! Understand how to support ‘switching’. We know that people like to browse a lot more on their tablets when they are in front of the TV. We know people like quicker (in terms of performance) experiences when they are using their smartphones. We know people despise completing forms (especially on their phones).  We must validate what we know and design with that knowledge.

Does situation change usage (behaviour)?

Yes. Our behaviour is constantly adapting to the new devices we use and more importantly influencing how we use them. Time is also a critical factor for everyone regardless of task, device or situation. Understanding when a person’s time is being pinched will allow us to design tasks or more importantly, understand the amount of information that needs to be processed (during the task) more quickly. Great digital experiences should flex to support our cognitive load and therefore the information demands we have throughout our day.  We need to respect the limits of our memory and utilise the knowledge about how we process information.

How does your audience expect your service to perform?

They expect it to be fast. On a mobile people expect sites to load as fast or faster than on their desktops.  People are less tolerant of slow sites when using their mobiles. Performance is a critical factor that needs a lot of consideration. People tend to be pretty intolerant of sites that are slow to load and it is very likely they will abandon them and, even worse, avoid them completely in the future.  Speed (performance) is a major factor that needs to be factored into the process and tested.  The image sizes used in a web page can have a massive impact on the download time.  Essentially, we need to be very aware of the file sizes of a page, and its components and assets which form the content.

How will you measure success?

One factor that needs to be given a lot more consideration is that of measurement and more importantly what to measure e.g. the key performance metrics (KPI’s). Measurement and performance go hand in hand. You need to measure the factors that people expect and consider important. You firstly need to work them out. They may be very different for different services or types of experience. This is why completing user research to determine the content and functionality that needs to be included in the experience is essential.  We are measuring the value of the content and the functionality provided.  People will have expectations about how fast a site should load, its content and functionality. So discover and measure them.

How much will a RWD site cost?

Obviously, this is one of the key questions. This is a very difficult question to answer and will depend on a whole range of factors. It’s worth another article or two, however by focusing on the benefits you can get a sense of the value of a future-friendly holistic approach or a responsive solution. A responsive site is a must-have not a could-have: investment should reflect ambition.

The invisible benefits of RWD

I’ve touched on a number of factors that need consideration if your ambition is to design and deliver a RWD solution. However, there are lots of other benefits that will emerge but two important ones include, accessibility and adaptability (future-friendliness). If you have, or are planning a responsive site, you are preparing a solution that will adapt to different people’s needs regardless of device or situation. You are preparing for the cross-channel experience where the digital experience is blurred with the physical – they become indistinguishable. This is the future we are headed towards, and therefore where RWD will take us.  I would recommend sharpening up your information architecture (IA) pencils or hiring people that truly understand IA.  “Architecture is about organising” (Le Corbusier) and this can be applied to a product or a service.  I’ll cover the relationship between IA and RWD in a later article. When done right, a responsive site will be a more accessible site. Responsive sites tend to provide a better and more inclusive experience which makes them more accessible across a wider range of devices compared to their non-responsive counterparts. In a nutshell, you will be providing a more digitally agnostic solution and therefore reaching a wider marketshare.