Why web designers should embrace reactive design

A brand's website design speaks volumes. And yet many businesses are choosing to forego updating their websites, instead posting content directly to Facebook.

This trend has affected the very purpose of a website and has had ramifications for how designers themselves are designing for the web. In an age where content reigns supreme, how should designers cater for content that will be somewhat (or even completely) unknown?

Design evolution

Traditionally, in both freelance and agency web design, there has been at least some conception of what the content of the site will be. The evolution of viewing trends has forced designers to create responsively: no longer merely opening up Photoshop, setting the canvas sizes to 1024px, and 'painting' websites. Instead, designers have begun to think beyond the pixels on their monitors.

But dimensions, shapes, and boundaries are merely a small part of designing themes for the CMS world. In the wake of Facebook, an integral aspect of successful design has been to anticipate the content that will not be seen before design completion.

Content constraints

The first step for anyone designing for unknown content is to think about all potential content possibilities. A good starting point would be to consider both what happens when the user has no content, and what happens when the user has a lot. These are the kinds of questions that will stimulate a more organic, fluid content/layout configuration design process.

One common approach is to create templates that require clients to replace initial lorem ipsum content with their own. There are, however, two problems with this method; the client rarely has all the content to complete the template, and if the template does not respond accordingly, the design and layout is effectively broken.

More importantly, designers tend to follow trends in web design very quickly. Before you know it, every theme begins to look remarkably similar.

Reactive creativity

Users need templates that can change as their businesses grow. The best way to stay relevant to users without becoming generic is to build flexibility into every template.

Unfortunately, flexibility has its limits. The integrity of a design could be at risk if users are given more than basic control over changes to the template. Designers should provide some basic degree of flexibility (such as fonts and colour changes), but also maintain baseline design constraints to preserve the template's essence.

Designing for unknown content should thus create more design variety, not less, as it forces the theme to be fundamentally fluid and to change depending on the content placed within it. No one user's content is the same as the next, so the chance of one site looking the same as another is greatly reduced.

If designers start thinking seriously about reactive design, generic output should soon become a thing of the past. The essence of a theme's design should shine through on a user's site, giving the content a personality, thus dictating its overall feel and layout.

Flexible tools

Designers are always on the lookout for tools to help save time with responsive layout configurations so that they can concentrate on what they feel is important: design and project success. There are some great technologies that aid in giving extra flexibility options to themes.

Libraries such as LESS or SaaS can be utilised to swap in colour and font swatches. Additionally, changing the values associated with CSS variables can give a radically different look to a theme. This is a much better approach than including multiple different stylesheets (a common practice in theme creation). Also, Flexbox, a new CSS display attribute, is starting to take hold in distributed versions of common browsers.

Using these technologies gives the designer control over how a template responds to user input, ensuring the design looks considered, despite the content being unknown.

Endless possibility

As sites become more and more templated, presenting content in interesting and useful ways based on the content itself will become vital for designers. It comes down to thinking beyond the mere design of a template, instead considering different content possibilities, and then extensively testing each one.

Embracing reactive design will help to present content beautifully, as it is this unknown content which will ultimately dictate the look and feel of any design.

Words: Richard Healy

Richard Healy is founder of and vice president of design and technology at cloud-based online platform, Basekit.