Responsive design is hot. Everyone talks about it, many people want to implement it, but where to start? Especially in a complex landscape of a large organization, it is often difficult to go from the somewhat abstract term ‘responsive design’ to a solution for a scalable and especially meaningful implementation.

Small versus enterprise-level

One of the biggest struggles when implementing responsive design is to make the translation from the technique or concept to a functional business case. There has much been written about, and there are plenty of technical frameworks, templates and libraries for a quick start. But is this the best approach to implement responsive design in a meaningful way? For small-scale websites and applications this will certainly be the case, but implementing responsive design at enterprise level is less simple.

Optimize the customer experience

Responsive design is a subdomain of adaptive design and adaptive systems. It deals with the optimization of the customer experience based on the user’s context. Responsive design and adaptive systems are in my opinion not the holy grail of web design. It is more a modern design philosophy with which we, in a reactive and agile way, embrace the unpredictability of the future Internet landscape that is coming at us with a dizzying speed.

Context: more than screen size

With responsive design, at first we often think about changing the screen layout based on the screen width or screen context. But the context can be much more complex: a device or browser context may reveal more about the features or capabilities of a device or browser. For example, the geolocation, network speed, and orientation of the device.

If important information about our visitor or customer is available in our backoffice, we can even go a step further by adding this data and enrich the visitors or customer context. With this extra info, the customer experience again can be fine-tuned. The latter has a lot to do with personalization and is similar to segmentation and targeting techniques already widely used within the e-CRM domain.

The hurdles of new techniques

Each new technique or technology has a growth path similar to a steeplechase. Once an initial solution for the problem, and so the first hurdle is taken, we rush for the next hurdle, usually the first hurdle that we encounter. So with responsive design.

Where currently all attention goes, and where everyone has something to say about it, is the content issue. How do we get our CMS to present adaptive content? What is the best content strategy? How do we create content suitable for all platforms? Generally not trivial issues, but these are not goals on their own. They only are means to reach our ultimate goal. The wrong focus on implementing responsive design ensures that we all continue to run circles around the content issue.

The user and the business as stakeholders

But what is it all about? Ultimately, in a web relation there only are two real stakeholders. First, the user and the business or owner of a website as a second one. Both parties have importance in this relationship. The importance of the user can be expressed in a goal and a number of tasks required to achieve that goal. The marketing of a product or service is the importance of the business.

The PEC model

To comprehend the relationship between the stakeholders, I have created following PEC (Proposition Experience Context) diagram. To visualized this relationship, I have added the dimension ‘context’ : an important part of responsive design. The interface from the business to the user will result in a proposition to the customer. Product, tone of voice, visual design and branding is determining the relationship.

The PEC model from the medium perspective

The interface of the user towards business we know in the form of customer experience. The nature and form of the proposition have an effect on the experience of the user. These two interfaces can be brought together via a channel and a medium, in this situation our website. In case of a successful coherence of both interfaces, conversion is possible.

Adaptive system as a medium

When we use an adaptive system like a responisve website as a medium instead of a (static) website, our proposition and the user experience will come to depend on a context. At this point everything comes together: the user, the business and the context of our responsive website. By determine what type of context can add value, and by matching a proper proposition and a user experience, we have put a first step.

In case of a device context, we can determine how we optimize for different devices. If there is a known client context, then we can even adjust our proposition based on a scoring system such as customer value, or by the use of a customer journey methodology. By continuously placing  parts of our web environment within this framework, we are able to define in a thorough way how to handle issues.

The PEC model from a context perspective.

Business Perspective

If we start to look this framework from a business perspective, we can use a number of practical tools to determine the correct proposition. Customer value or another scoring system as NPS or CES and Customer Lifecycle Management could be used to set a first base. But especially the new ideas of service design provide the necessary tools to to look for unexpected opportunities in a cross-channel and multi-device environment. Also, by making use of the new context dimension.

The result could be a new service concept or a new site concept. According to the Dutch company DesignThinkers service design is about:

“The alignment and coupling of various stakeholders, services, partners, locations and touch points to an ecosystem where value is created.”

And let this exactly be the situation the PEC model describes.

The PEC model from a concept perspective

User Perspective

If we look at the model from a user perspective, there are a number of UX tools we can use to design an optimal experience. By defining customer journeys and personas, fast insight into how a user could be using our medium can be gathered. And with the usability methodologies, we ensure that the interface, which is a part of the experience, is of sufficient quality and so optimal usable.

But the user also must be triggered to actually make use of our medium in order to purchase a product or service. By applying modern neuromarketing and persuasive design , we can respond more on the psyche of the user. The context component gives us an additional mechanism to adapt the user interaction and presentation of content to suit the specific situation of the user.

The context-sensitive medium

To clarify the above theory I provide some examples. The unique difference between the traditional business-user relationship and the above-PEC model is the presence of a context layer. This is information about the situation of the user. It can be information about the device or browser that he uses, or information about a known customer, after logging in.

Characteristics of the device context can be: is this a tablet, a smartphone, a more ‘normal’ phone, game console or device that is integrated in the car? A practical example of customizing the service proposition to the context is that of a desktop chat functionality as a means of contacting. When someone uses a mobile device, then a chat function may be less useful. In that situation or that context, a ‘call me back button’ could be offered. For visitors using a TV it could be more convenient to offer a video chat, because these users could have no QWERTY keyboard.

Filter based on the context profile

Responsive design is not just a client side thing . It becomes a powerful whole when every system layer involves the contextual awareness and adaptive mechanisms. This means that also on the application layer and CMS-layer an implementation should be given to the adaptive system. Each layer can be used for filtering content based on the contextual profile. When these first steps  in constructing a using context profiles are made, a next move could be to investigate whether it is possible to enrich the context profiles with visitor or customer information that is already available in your back-office system.

When creating a responsive concept do not think of or design for pages, but start designing  components and assemblies of components. This will ease the translation to technology, and ensures that you remain agile in regard to future channels and devices.

A look into the future

With the advent of social intelligencebig data and the growing mobility of our customers we will increasingly be able to know about the context of our visitors. In addition to the device-related context and the client context that we have in our systems are, more and more will be clear about the actual or realtime context of a visitor.

This context actually changes a lot during the day. In the morning your visitor is an athlete during  his daily fitness while he is a businessman when reading the first news after rising. Then he suddenly is a cook who prepares breakfast. Then again a businessman, a friend, a coach and so on.  When we know this kind of realtime contextual information it is possible to create personalized and relevant propositions and approach the user within the right context. The domain of contextual marketing is all about giving this an interpretation.

Means to achieve your responsive goal

Despite all the attention for content and technique within the responsive design scene , these are only means to achieve our responsive goal. By focusing on the two main stakeholders, the customer and the business, it can become a lot clearer what the coherence is within the field  of responsive design. This makes it easier to make a meaningful implementation to responsive design.

Biggest challenge is on the business side

Break down responsive cases, think in components, use the PEC framework as a reference and remain agile to quickly respond to future developments. With the expansion of the contextual information in the future, we will increasingly be able to create personalized and relevant propositions. The biggest challenge and opportunity of responsive design are perhaps on the business side.

For a Dutch translation see my article on