March 7, 2012
The nice folks at A List Apart published a piece from me last week called Future-Ready Content, which I wrote amid the fervor over future-friendly thinking and responsive web design last year—a fervor I both joined in and felt terrified of. Because no matter how exciting this flexible, unfixed future seemed, for months I couldn’t shake this little voice inside my head—the voice that said our content wasn’t ready.
But it can be, if we put in some work.
So today, I wanted to expand on the discussion around responsive design specifically, demonstrating why we need a foundation of content types, micro structures, and business rules if we want to keep priority, relationships, and meaning intact.
Paravel’s Trent Walton blogged about this concept last summer, and I’ve been thinking about it since. In the post, Walton questions whether the typical approach to narrowing screen sizes—simply plopping anything that’s in a sidebar column below the main content—makes sense:
“What happens if the first column is really tall? Is the content in column 2 less important than all of the content in 1? It probably is for something like a full-length article, but I can’t help but think that in some cases, this method throws off the hierarchy.”
What happens, indeed? Let’s take a look at Starbucks’ sparkly new responsive site to see how it pans out.
If you haven’t seen it yet, the homepage works pretty well. As the screen narrows, large rotating images shrink; thumbnails for additional features turn into simple dots; new product tiles stay above less-important information like blog posts:
But let’s say our user is interested in the Clover—a super-fancy coffee machine Starbucks bought out a few years back. She’ll find a thorough page about the Clover pretty easily under the Coffee section, and on larger screen sizes, the visual priority’s pretty clear: there’s an overview, a module to find a store with a Clover, and then deeper content about the machine and why it brews such a phenomenal cup of coffee.
But look again at the smartphone-sized version, and all you’ll see is the image, headline, and 400 words of marketing copy: about the machine, the process, and even a long passage about the quality of Starbucks’ beans. Only then—far, far down the page—do you get a link to actually find out where you can get a cup of Clover coffee:
The same thing happens when you look at Starbucks’ bean descriptions. Being a sucker for carefully sourced coffees, I flock immediately to the Starbucks Reserve section and select the Organic Ethiopia Sidamo. On the desktop, I see an image, quick facts about the product, and a call to action to buy front and center. Meyer lemon notes? Cooperatively produced? Sold. But not so on the smartphone-sized display—there, my buy button is all but lost.
So why is the Clover-equipped store finder so separated from the content at the top of the page? Why does my button to buy beans get split so far from the product information?
Why can’t Starbucks choreograph its content better? Because it seems to be missing two things:
- Useful content types: Without content types defined by what the page is supposed to communicate and accomplish, all content is treated the same, whether the page is intended to inform, help you make a purchase, or help you find a location. The right-hand column simply swings down to the bottom, regardless of what’s in it. If you instead assigned a few content types based on the elements within the content and what it was supposed to accomplish, you could apply different rules to how each type of content shifts.
- Micro structure: Throughout Starbucks’ site, main content is written in one big copy area, rather than with chunks of content. The sidebar is one big chunks as well. If the site used more structure within each type of content—structure that’s logical, creating units of information that have distinct meaning: a teaser, a pull quote, a lede paragraph—you could systematically break the long blurb into parts and insert an element in the middle (what Walton calls “interdigitation”), like so:
Don’t keeping those quick facts and a link to buy near the top better keep the content flow (not to mention Starbucks’ goals of selling coffee) better intact?
See, now I can get the basics on the Clover with a lede paragraph, and then immediately find a location—or keep reading for a detailed look at the machine (and a bunch of marketing fluff…but that’s for another post).
This isn’t about calling Starbucks out (except maybe for making the Clover unavailable to indie coffee roasters). In fact, the company’s ahead of many simply by attempting to give good content to all their users. There’s no crime here. There’s just an opportunity to do better—if you focus on your content’s messages, priorities, and meaning first.
From a design perspective, all this trouble over hierarchy and relationships might be easier if you design mobile versions of responsive sites first, using the general “mobile first” principles Luke Wroblewski recommends. After all, if the right meaning and message stay intact on the small screen, when you’re likely working with a single column, then the odds of the content making sense as you scale to larger widths seem pretty good.
This approach feels foreign to many web folks. We’ve spent a long time thinking of the desktop view as “the web” and anything else as “the other”: something different, exotic, or just plain less important. But it’s just this kind of shift in thinking that we need.
Whether designing mobile first is the best (or only) way of breaking free of the desktop mentality, I can’t say. But I do believe that however you tackle the problem, you need to be thinking more about relationships and priorities than about locations and sizes.
Robots make poor editors. The relationships and meaning within our content make for fleeting, flickering little snowflakes, each granule packed with endless nuance yet easily mistaken as identical. But when a responsive design scales beyond the most basic of sites—beyond personal portfolios and simple blogs to thousands of pages, dozens of authors, and multiple types of information—we won’t be able to make manual decisions about each and every piece of content.
The best we’ll be able to do is rely on rules—rules grounded in clear content types, enabled by structure, and shaped by thoughtful human beings. Rules that respect our content and the readers we want to use it, learn from it, or enjoy it.
As Mark Boulton wrote the other day, we need to know enough about our content to know its structure:
You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. An important distinction.
If you can define content types based on what they include at a semantic level—what their meaningful elements are and how they make the content tick, not just how much space they require—then you can create the databases that will support their structure (and therefore all content of that type). You can create sound rules to guide how they bend and reshape in responsive designs. You can let your content go, without fearing where it will end up.
But you’ve got to start with some structure.