Content first: from responsive design to a dynamic website

Writer: Paul Versteeg


The content-first design principle has been around since the invention of the web, but has really gained momentum with the advance of responsive design: to show relevant content, in the right place, at the right time.

Responsive design – using a layout that adapts to the device – has made websites more dynamic. Now, we implement the same approach to present and order content based on customer interests.

Content first | Mirabeau

With users browsing on mobile devices, it is essential to keep the adaptability to available screen resolutions in mind from the start of the design process. This means both designers and developers focus more and more on dynamic design. So far, this focus has mainly been on the technical side and how to display the design optimally on different devices.

However, it is just as important to consider what content is shown on a mobile device and in what order. This approach is called ‘content first’. The next step is to present content based on personalisation and relevance too – and not solely based on technical necessity.

Now that we have this opportunity, content can be organised to suit a visitor’s requirements and expectations. Information can be filtered and ordered so the content adapts to user preferences as well as the device. By considering variables such as relevance, location, time and personalisation during the design process, and combining these with dynamic interfaces, we can make websites that are more intuitive and useful.

Time Orange: Dynamic layout

Time Orange is a great example of a content-first approach to dynamic design. It is an internal ING portal that shows video reports by employees. The stories within the monthly magazine are displayed differently each time, making it possible for editors to push news that might have been glanced over first time around.

Content first dynamic design| Mirabeau
Time Orange: Dynamic layout

The big idea here is that the content is responsive from a user perspective, and not just a secondary result of the technical possibilities of a responsive website.

Users influence layout

The website WWJATB 360 by insurance provider Nationale Nederlanden is a collection of news and articles on social security, income and pension. The number of tweets, hits and views influenced how the stories were displayed. The size, shape and position of a panel depended on its popularity: a relevant article would become more and more visual over time. The interface was continually influenced by the behaviour of its users. The system analysed behaviours and adapted the layout of the page to show the most relevant content, based on editorial guidelines. The website is no longer live, but still considered a pioneering example of dynamic content design.

A living interface

We all know the shortcuts created in grass over time when more and more visitors decide they need a shorter route. These so-called ‘desire lines’ are a great example of people choosing their own path, literally and metaphorically. Behaviours can be difficult to predict or influence, so we try to keep our interfaces open and flexible: that way, we can adapt it dynamically to connect to user needs.

We can learn a lot from real life. Take a simple door: over time, the handle will become dull and the area around it will get scratched. If you know where to look, you can find the same traces in new media and work them to your advantage. Interactive elements that are used often or incorrectly, can be left to age. Or, elements that have been proven to be straightforward for users can be reduced in size. Progressive reduction is a great example of this principle.

Because usage, necessity and context are continuously changing, an interface should follow suit: it needs to be dynamic and evolve like any other living thing.

Breaking with web conventions

As soon as variables such as personalization, time and relevance are introduced to the design process, web conventions - such as having a logo in the left-hand corner – will disappear. A logo might be relevant to brand communication and advertising on a home page or landing page, but on more instrumental pages of the website, other content is more relevant; and a logo can be moved to the footer.

Curiously enough, the print world is a lot more dynamic-focused than its online equivalent. A newspaper or magazine cover is compiled based entirely on relevance and actuality of content, which is a very different approach from static websites with a carrousel and some changing content. We assume visitors are used to it, or even want it like that – and we ignore the issue. This is where designers can make a difference. Customers and end users are desperate for more relevant and dynamic interfaces.

Designer, choreographer, director

The advance of responsive web design has drastically changed the role of the designer. Deciding on an online identity and designing a visual language are still the most important part of the job. However, the focus is no longer on static images: a website is more than a pretty picture. The process now focuses on working with separate components and considering transitions and different scenarios. For interaction designers the user perspective offers an extra dimension. Users unknowingly influence the layout visibly over time, making the process all the more intriguing.

Dynamic design will be the deciding factor within responsive web design. By taking the user and the relevant content as a starting point, the familiar process changes and the designer will be as much a choreographer and director to define a new standard in relevant and intuitive web design.

Recommendations

Six tips and tricks for creating a dynamic, relevant website:

  1. Identify different visitor groups and formulate behavioural profiles. For example, set up a top task and target audience analysis and combine the results with data from web analytics tools such as Google Analytics.

  2. Consider user behaviour as a variable within design. Reassess which content is important to which target audience and what is the best way to present it. Personalised content offerings are straightforward when using Content Management Systems that have automation tools.

  3. Content presentation (layout) should be dependent on the user. The device used is just one of the characteristics of a user; others including click and navigation behaviour are just as important. Use responsive techniques to ensure a layout is dynamic and relevant.

  4. Let both designer and user determine the layout. The designer decides on frames, but ensures a layout is not fixed. Shape, colour and composition should change based on user behaviour.

  5. Do not design a set template or infrastructure to fill with content. Instead, design a system that is defined by the content and comes to life when the content is used. Content should define layout; not the other way around.

  6. Think transitionally. When a layout is dynamic, transitions between separate compositions need to be directed carefully. The design should not just shape compositions, but also consider the choreography between the various stages. A good transition is almost undetectable, but clearly supports the logic of the system. The designer is a choreographer and director, not merely a maker of pretty pictures.