Designing Unknown Content In 2 Dimensions

Posted: 23 Jan 2014 05:30 AM PST

Earlier in the week I was talking about relative measurements like root em (rem) and the different viewport measurements (vw, vh, vmin, vmax). It reminded me of some things I’ve been thinking about in regards to designing for unknown content and some of the differences in designing for print and the web.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

I’m not trying to lead you to a specific conclusion with this post. It’s mainly me thinking out loud, sharing some observations, and raising a few questions.

Designing Templates

I hope you agree that having the final content before you design is best. Unfortunately we don’t always have that luxury and we often have to design without specific content.

I don’t mean the times when the client hasn’t given you the exact content yet, but rather the times where the content doesn’t exist yet. Think anything beyond a brochure site where content creation will be ongoing.

An easy example is a blog. We can’t have all the content in advance because no one knows what that content will be. Sometime in July I’ll publish a post, though at this moment I have absolutely no idea how long that post will be, whether it will contain images, or code, or anything else. It’s unknown.

What we often design is less a page than a template meant to be home for a known type of content within certain constraints. Maybe the design can only accommodate some maximum columns of images.

Designing Fixed vs. Flexible

We design in a 2-dimensional plane. We have a vertical and horizontal direction. We don’t always know how much content will need to be presented or how big or small the viewport will be when it’s viewed. This leads to a challenge in allowing our templates to grow and contract, at least in one of the 2 directions.

Print doesn’t share this issue. The canvas is fixed in both directions. The content changes to fit the canvas. Magazines have strict word counts for articles because the article has to fit within a predetermined space.

We don’t have that luxury online. The content will change and our design has to change with it. Blog posts don’t have word counts. A post can be a single sentence or it might be 10,000 words.

We could design several templates, say a short, medium, and long template. We could design templates for different posts types. Most content management systems do this already.

If you remember last last summer I was exploring some of the coming css layout modules like regions and grids. With each you set both width and height for the techniques to be effective. In other words both modules will work best when the content is known or changes infrequently.

When content is unknown as it is much of the time, we can’t set dimensions in both directions. We need to allow for the flexibility of the unknown content.

Why We Fix Widths and let Heights Grow Dynamically

We can still fix one of the two dimensions as long as we allow the other to dynamically change size. By fix I don’t literally mean we have to use absolute measurements like 960px. I mean fixed in the sense that the size doesn’t overflow the visible viewport. We can still use relative measurements.

If we fix one dimension, we have to allow the other to grow and contract to any size it needs to be to house the content that eventually gets places inside.

It’s far more common to fix widths in this way and allow the height of the design to extend beyond the visible viewport. I think this is mainly because a mouse makes it easier to scroll vertically. Horizontal scrolling usually means clicking and dragging the scroll bar left and right, which isn’t the easiest thing to do.

CSS might be another reason in that width: 100% works much better than height: 100% much of the time. Perhaps the latter is one good reason for using vh. For both of these reasons vertical scrolling has become the convention.

Touch Input Changes Expectation and Capability

Touch devices change this. On touch devices it’s just as easy to scroll horizontally as it is vertically. The mechanism is in place for people to move the content any which way they want.

Over the years I’ve seen designers experiment with horizontally scrolling sites. They often look great, but at least when used with a mouse on a desktop or laptop they haven’t been as usable as their vertically scrolling counterparts.

The rise of touch enabled devices is changing this and perhaps changing our expectations of how a web page should scroll. I see more and more designers experimenting with scrolling in directions other than vertical, some probably just to be different, but more to accommodate touch devices.

For the most part you’d still have to ensure content fits within the height of the viewport, which again isn’t always easy without something like vh.

A New Type of Narrative

In theory you could leave both dimensions open and dynamic where touch devices are concerned, but it becomes more difficult to create a narrative flow, which typically moves in a single direction.

If you allow visitors to move wherever they want you have less control over the direction they move through your content. You could still guide their movement through your design, but some control would be gone. Then again haven’t we learned over the last few years that any control we think we have is really illusion.

Perhaps we have no real choice and before long we’ll have to accept a certain loss of designing a certain flow. Perhaps we’ll have to look for others ways to direct the flow or even seek a different kind of narrative.

In allowing visitors to move where they want, perhaps we should encourage more exploration and less guided tour. We might still serve as guide by fixing site navigation. Imagine a website where all the content is on a single page. Instead of taking you to a new page, menu items move the page around and position what you want inside the visible viewport.

It shouldn’t be too hard to imagine. Plenty of single page sites do this now and we’re already using off canvas patterns in responsive designs.

I’m not saying these are the best ideas. There are probably other ways to navigate around, but leaving everything open and moving the page itself around is certainly more possible. I’d say it’s probably a good time to rethink how we move around web pages and websites.

Closing Thoughts

I think it’s safe to say fewer people use a mouse today than a few years ago. I can’t remember the last time I used one, though it was probably a 10 or 12 years ago when I last held an office job and was working on a desktop.

Tablets, phones, and even laptops are bringing touch inputs to more people where our ability to scroll in any direction isn’t constrained by the input device.

At the same time, I think enough people still use a mouse and see vertical scrolling as the convention where this should still be the primary direction of scrolling in the near future.

Still, it’s probably a good time to start experimenting more and try leaving the horizontal as the open direction to grow with your content or even leaving both directions open to expand and contract as desired. It’s probably also a good time to rethink how we navigate around a web page or website.

Download a free sample from my book Design Fundamentals.

The post Designing Unknown Content In 2 Dimensions appeared first on Vanseo Design.