Is Your Site Responsively-Challenged?

This year, the world wide web turns 25. It’s been a long, sometimes awkward journey to adulthood (a journey I recently summarized elsewhere). From simple beginnings (check out the first website ever published), the web has grown up to change the world. Recently we’ve seen the web transcend the computer and become ubiquitous.

That ubiquity presents a problem for people who write, design, and build content. There are so many devices, screens, and input methods that a one-size-fits-all approach is a poor experience and makes bad financial sense. It makes equally bad sense to try and build a custom site for every device – there are almost 12,000 Android devices alone.

Responsive design is a great approach to making content broadly accessible for the smallest investment. Lately there’s been a lot of discussion in the web community about what responsive design is. It’s a great question, but it misses the point. We’ve found that responsive process is more important than any design technique. Making a site responsive requires a different way of thinking.

In this post we’ll look at some reasons sites have trouble going responsive. Next week we’ll share how we’re changing our process here at Hanson to help our clients move forward on the multi-screen web.

To go responsive, give up old metaphors for new media

Let’s return to that first web site. It’s not much to look at, but it is, surprisingly, responsive. Before marketing, branding, usability, and interactivity, there was content. This site is responsive because it predates the limitations and assumptions that later generations of designers applied to the web.

The first web site didn’t have pages. The various screens of content are called “documents” or “nodes.” “Page” isn’t in the glossary either, except to differentiate the web from systems like HyperCard (“Card: An alternative term for a node in a system (e.g. HyperCard, Notecards) in which the node size is limited to a single page of a limited size.”).

It didn’t take long for “page” to become the preferred metaphor for designers, most of whom came from the world of print publications. Unfortunately, the thought that web content is a page with a fixed shape put web designers and developers into a box that we’re struggling to break out of 20 years later.

Below are some of the characteristics of responsively-challenged web sites.

Responsively-challenged sites emphasize layout over flow

Yesterday’s internet was mostly on computers. Such a monoculture encouraged us to think in terms of pages the size of a computer monitor. If everyone had the same display, then it followed that there was a safe minimum page size, and designers worked to cram as much as they could onto that screen. If a user couldn’t see everything, that was their problem.

Today’s smart phones and tablets have capable browsers, but relatively tiny screens. Everything designed for the old standard of 1024 x 768 pixels is dead unless it can be broken into smaller components.

Responsive design is all about priority and flow. The most important things float to the top and less important content follows.

Responsively-challenged sites are mouse- and keyboard-centric

Most non-computer internet devices have touch inputs, and anything designed around complex mouse and keyboard interactions will probably fail. Hover, drag-and-drop, and even extensive typing are all cumbersome or impossible on touch devices. Successful responsive experiences are the ones that have bridged the fundamental divide between traditional and touch inputs.

Experiences where users have to interact with multiple parts of the screen (for example, to drag items from one panel to another) are also difficult. Fingers are much less precise than mouse pointers, so click areas need to be larger and farther apart. This is worse on small screens, since some panels may be offscreen, or too small to use.

Some functionality just won’t work on a touch screen. In those cases it’s appropriate to provide an alternative or fallback. Many users have multiple devices, so today’s designers should assume that the one the user is currently holding is just part of the picture. Invite the user to try the experience on a different screen, but don’t be insulting.

Responsively-challenged sites are afraid to scroll

The page metaphor has led us to waste much time addressing inapplicable concepts, especially ”the fold.” Received wisdom says that links must be in the first screen to be useful. But studies suggest that in-context CTAs below the fold perform just as well or better than CTAs shoehorned into the first screen. Scrolling is a sign of engagement, so creating content that makes people want to scroll is a better idea than tricking them with conspicuous links.

The long-scrolling or “parallax” design style, as seen on Nest and Oakley, might be the first native design metaphor for the web. These sites tell a story while embracing the scroll, and incorporate motion and interactivity along the way. Static page layouts pale in comparison.

Responsively-challenged sites lack a content hierarchy

Scrolling is a good thing, but like any good thing, too much can be a problem. This is particularly true on small handheld devices. Because space is limited, most mobile designs stack the content into one long, scrolling column. This can work when the content is well-organized, but trying to navigate a poorly-organized mobile site with only one’s thumbs is an exercise in frustration.

A good content hierarchy is the answer. Sites with a good hierarchy move the most relevant information to the top (i.e. to the beginning of the markup), and move unrelated information to different pages. They provide a persistent menu with links to top-level content and section headings within the current view. More advanced sites only show the most important information by default, and load other content as the user requests it (by clicking a “View More” or “Expand” link).

Responsively-challenged sites follow outdated processes

No project has the budget to design every page at at every possible breakpoint. Historically, most web site design time is spent creating wireframes and page comps that reflect a desktop computer, and whatever time is left goes into a “phone” layout. When it’s time to make the site responsive, developers have to extrapolate how to handle all the devices and display sizes that fall between those two extremes. Faced with this dilemma, we can shy away from responsive, or we can finally admit that designing pages is a no-win situation.

To move forward, we have to discard the idea of web pages and instead create design systems. Tomorrow’s web will be designed and built from collections of content modules, each optimized to provide the best experience for each type of viewing device.

In my follow-up post next week, I’ll unveil our new process for creating design systems starting from the content and working out.