Designing a Website for Variable Content using Extremes

Designing for the web is a challenging process. It’s not like brand or print design, where you are building something that will live on exactly as you have designed. A web design is a blueprint. It is a set of rules that together become a system.

Developers convert these rules into code and the system into a website. Content editors then use the system to create pages from content.

Flexibility is a Crucial Element in Design & Development

When designing a website, content editors can tell you how they think they are going to use it. But they can’t possibly know. Something is going to change.

The best way to account for this is to design with components — elements that be shared across different pages. The more composable the site is, the easier it can be to make adjustments when editors want to see something different on screen.

And the more that developers can transfer the power of composability to the editors, the less they have to be involved in a project over time.

Screen Size Adds Another Layer of Variability

I’ve often seen print/brand designers get frustrated when what appears on a website doesn’t exactly match one instance of a design. The challenge is that even if the content is exactly as you’ve designed (it won’t be), the screen size will change. It can be very difficult to grasp the variability required to serve many devices.

Using Extremes to Help Build the System

The rules in a composable system can seem boundless. Where do you draw the line in design? You can’t possibly account for every scenario. This is where extremes come in.

As a developer working with a designer, I often suggest they design the extremes. Those extremes are to solve content and device size. This can help provide very clear rules to developers without needing a new design to dictate every unforeseen question that arises.

Designing for Device Size Extremes

This is something you likely already do. It’s somewhat standard. Designing for device size extremes means considering the smallest and largest screens you expect to support (i.e. mobile and desktop).

The challenge is that designers want to show clients the best possible scenario. They want to wow the client before development begins. That’s absolutely fine, but it also leaves a lot of questions unanswered.

Users are bringing browsers that are thousands of pixels wide. What should the website look like on these huge screens? And how does that translate to using a small phone?

The ideal scenario here often adds a third design, as it doesn’t cover an extreme. But the extremes are necessary to ensure developers are properly implementing your vision.

Designing for Content Extremes

Content extremes are a less obvious, but equally beneficial practice. Like device sizes, designers are often presenting the ideal case.

But that’s not a realistic picture of how content is always going to be presented. Sometimes the client (or the editor) is going to want a button in one case, but not another. Or one paragraph in some specific component on some specific page, but three paragraphs on another.

To help create that system early on, consider the boundaries for all content. For each component, what is the least amount of content that can exist? And what is the most? This forces you to think about:

• Which elements are required and which ones can be moved in and out.
• Limiting content length on some elements.
• Stylistic decisions that should be delegated to editors.

These questions so often come up later in the project that adds a lot of time when you want to be wrapping things up. Answering these questions earlier can be extremely beneficial to your project.

Try it out. Add extremes to your next web design and see if it makes the process of working with a developer smoother. See if it helps you work out your full vision more clearly. You may even find yourself adjusting the ideal state as a result of exploring one of the two extremes.