Responsive for content and not just devices

It's time to think fluid content

Responsive for content and not just devices

Responsive web development has become common place and that's a good thing, developers are taking notice of not just device size but feature support as well. However, I still find myself fixing the same bugs again and again because people haven't started building responsively for content.

We've broken the habit of "pixel perfect" and are comfortable building fluid layouts so let's start thinking about fluid content.

Fluid content

A typical process for developing a website begins with a design, it's beautifully crafted and rich in content. Take this example from Cahootify:

A section of the Cahootify listing page
A section of the Cahootify listing page.

The designer has done a fantastic job providing us with a best case scenario and many developers will just go ahead and build what they see. But what happens when the name is longer, there are multiple categories or the tags on the left wrap onto multiple lines?

Testing a longer name

Extending the length of the name to see what happens
Extending the length of the name to see what happens.

So by lengthening the name we can see the category has gone behind our call to action, let's fix that.

Testing a second category

Adding a second category
Adding a second category.

Now we have two categories they both drop to a new line, it would be better if only the second category wrapped, let's fix that and move on.

The golden rule of lists

Given any standard list containing text, if each item is prefixed with an icon then there are 4 possible outcomes. I can guarantee within 10 minutes of looking you can find a website representing each state.

The golden rule of lists and fluid content
The golden rule of lists and fluid content.
  1. The fake state, it looks good with simple content but it won't be long until it breaks.
  2. The broken state, no CSS has been prepared for multiline content.
  3. The line-height state, line-height is being used to space the list items resulting is spacious multiline items.
  4. The fluid state, it has been built responsive for content and looks beautiful.

Start thinking responsively, for content

Thinking about fluid content is much easier than building a responsive website but it is up to you, no one is going to request this in a briefing. Think about the future, "It's changed since the design" is not an excuse and certainly not the right attitude. Good web developers should be trying to cover every angle to stop the bugs from being raised. What happens when someone is browsing your website with a translator and suddenly the words are twice as long?

I believe the web would be a better place if just a few more people cared about the "what ifs" and didn't just take designs at face value. As you work on your next responsive website ask yourself, what happens when the content changes?