My anxiety doesn’t come from thinking about the future, but from wanting to control it.
Hugh Prather, Notes to Myself: My Struggle to Become a Person
There’s a tree I want to show you.
This tree’s located in Pando, which you’ll find in Utah’s Fishlake National Forest in the western United States (FIG 1.1). (It’s a mile or two south of Fish Lake, if you know the area.) And as you walk through Pando, searching for our tree, you’ll pass hundreds of stunningly beautiful aspens, their white bark smooth to the touch, their tops covered in puffs of gold in the autumn, or a deep, rich green in the warmer months. As lovely as these trees are, it’ll probably take you only an hour or two of wandering to wonder where this "special" tree is, and how it could possibly be more special than the thousands of other trees in Pando.
Here’s the thing, though: I’ve misled you, if only a little. Pando’s not a forest: it’s a tree. More specifically, it’s a single quaking aspen.
You see, pando is the Latin word for "I spread." More scientifically, it’s known as a clonal colony: the "trees" around us are really just stems, each sprouting up out of one massive underground root system they all share. All told, Pando weighs some six million kilograms, and covers more than one hundred acres. Its age is a topic of some debate — the National Park Service suggests Pando’s been around for over 80,000 years (http://bkaprt.com/rdpp/01-02/), while some scientists put its age closer to one million years (http://bkaprt.com/rdpp/01-03/) — but there’s no question that Pando is one of the largest, heaviest, and oldest known organisms on Earth.
...this is, I promise, a book about responsive design.
I love this story not just because of its details, but because in recent years, we’ve started to see web design’s forest for its trees. With the explosion of mobile computing, we realized that our desktop-centric view of the web was entirely too narrow. Our smaller screens reminded us that the web is the first truly fluid design medium: one that can be digested on nearly infinite combinations of browsers, display resolutions, input types, and device classes. Responsive design — fluid grids, flexible images, and media queries working in concert — can shape the web’s flexibility in useful, beautiful ways.
Some time ago, Paravel’s Trent Walton described his process of coming around to responsive design: how he’d transitioned from eyeing flexible layouts with skepticism to designing some of the loveliest responsive sites on the web. In his essay, he relates that transition beautifully (http://bkaprt.com/rdpp/01-04/):
I traded the control I had in Photoshop for a new kind of control — using flexible grids, flexible images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message.
You’ll probably notice that Trent says "a new kind of control," not "less control," which I love. He suggests that the flexibility inherent in responsive design — or heck, the flexibility at the heart of the web — doesn’t mean you have to sacrifice control, aesthetics, or narrative. And the last few years have proven that point handily: from nonprofits to publishers and corporations to governments, the web has seen an explosion of stunning responsive sites, accessible to people no matter how small (or large) their screens might be (FIG 1.2–1.5).
As responsive design proliferates, Trent’s idea of "networks of content" is more relevant than ever. In fact, the idea of a "page," that wonderful word we borrowed from print, is increasingly irrelevant to our work. I’d argue that we’re no longer building pages at all — instead, we need to think of our responsive designs as a network of small layout systems (FIG 1.6). Little pockets of design that can, as Trent says, "be rearranged at any screen size to best convey a message."
Here’s a quick example: open Google’s Year in Search 2014 (http://bkaprt.com/rdpp/01-14/) in a resizable browser (FIG 1.7). Change the size of the window, making the responsive design wide, then small, and then back again. As you resize your browser, you’ll notice that the entire design reshapes itself, its fluid, grid-based layout working with media queries to respond to the changing shape of its viewport. It’s a well-built piece of responsive design, to say the least.
After you resize things a few times, you’ll notice not everything changes at once: the design of lead stories remains relatively unchanged, while secondary stories switch between one- and two-column layouts (FIG 1.8–9). And the navigation at the top of the screen undergoes a number of changes, each independent of the content below it (FIG 1.10). In other words, the individual components of the design change, not just the overall layout. This is true of most responsive layouts: our interfaces are composed of small layout systems, each with its own rules for how it should change, shift, and grow according to the needs of the content inside it. While these small layout systems are lightly bound to the elements around them, each of them often adapts independently of the rest of the design.
If you’ve read Responsive Web Design, this may feel like a bit of a departure. After all, my last book focused on building a page, not the individual components within it (http://bkaprt.com/rdpp/01-15/). Over a few short chapters, it showed how to translate pixel-based designs into fluid, grid-based layouts; how to resize images within those flexible layouts; and finally, how to use media queries to shape those sprawling, fluid designs into finished responsive layouts.
But in many ways, the modules within our responsive pages are more challenging than the layouts themselves. Designing a responsive grid is wonderful, but how do we ensure our images are as recognizable on the smallest screens as they are on the widest ones? How can we possibly fit dense, complex navigation menus into fluid layouts? Can we incorporate advertising into our responsive grids without sobbing heavily?
While flexible grids and media queries can answer some of these questions, they’re only part of the solution. That’s why this book takes a closer look at the challenges of these small layout systems, of the modules and elements contained within the page. In each of the chapters that follow , we’ll examine an especially challenging component — beginning with navigation, exploring images and video, and finally, advertising. We’ll study common (and uncommon) design approaches for each of these modules, and discuss strategies for incorporating those elements into your own responsive designs. As we do, we’ll have a better understanding not just of the challenges that await us when designing more modularly, but of the rewards as well.
In many ways, modular design affords us — and our projects — some very tangible benefits. In describing how they rebuilt Capital One’s layout in four weeks, developer Scott Childs argued that a focus on components, not pages, was key (http://bkaprt.com/rdpp/01-16/):
Even though it’s this massive number of pages, when you look at 2,500 pages over 4,000 page configurations, everything boils down to a couple things really. How many different components do we have total? It’s around twenty components.
This component-driven focus on design has grown out of a need for modularity in our work — especially as the scope and complexity of the work increases. Joe Stewart, design partner on Virgin America’s responsive redesign, suggested that the benefits weren’t just about modularity (http://bkaprt.com/rdpp/01-17/):
We made a system of Legos. We designed different box types, different module types that could work at different sizes. They could work for a tablet or a desktop or a phone and then within there, the content can change. There’s a couple of good things about that:
- Anything that you do will automatically be responsive. Because if it fits in one of these modules, it will be responsive because the module system itself is naturally responsive.
- The second good thing is Virgin America can now go make whatever pages they want based on these Legos. They can mix and match what’s going to work for them so they can have two big ones, three small ones, and four or whatever it is. They forever will have this set of tools that is naturally responsive to build out their site.
This talk of building interfaces out of smaller building blocks has, in recent years, been accompanied by a renewed interest in creating pattern libraries or style guides. I use the terms interchangeably, but whichever one you prefer, the meaning is the same: they’re inventories of all the "blocks" used to build more complex interfaces. Those reusable components — whether they be colors, typefaces, form elements, or grid layouts — are frequently referred to as design patterns, a nod to their reusable, modular nature. Starbucks was one of the first large organizations to publish a public pattern library for its responsive site, with other companies following suit in the years that followed (FIG 1.11).
While this more modular, systems-driven approach to our designs may feel like a shift, especially when compared to our old, page-focused layout models, other industries have been doing it for years. As MailChimp designer Federico Holgado noted (http://bkaprt.com/rdpp/01-23/), fields as diverse as architecture, automotive manufacturing, and shipbuilding long ago shifted their focus to becoming assemblers of finished components: of building larger, more complex machines out of smaller, more specialized parts (FIG 1.12). So while it may feel like a change to those of us working on the web, it’s also incredibly useful: we can build complex, responsive interfaces in a content-focused, device-agnostic way, readying our designs for an ever-increasing number of browsing contexts.
And frankly, we need to. Because in all honesty, it’s been a weird few years for the web.
Okay, sure, I could’ve said that at any point in the web’s short history. After all, the only constant about our odd little medium is just how quickly everything changes. But speaking for myself, it feels like the last few years have been especially, well, nuts when it comes to device proliferation. A few highlights:
-
Mobile is booming, with an estimated 7.4 billion devices on the planet (http://bkaprt.com/rdpp/01-24/). It’s quickly become the dominant way for people to access the web — and for large parts of the world, in both developed and developing countries, mobile is the only way to access the web.
While the popularity of handheld devices shows no signs of slowing down, "mobile" has not, as many predicted, brought about the end of the desktop. Analytics and research firm comScore found that mobile growth "is not coming at the expense of desktop computer usage. [Much of that growth] has been activity...incremental to what’s happening on existing platforms" (http://bkaprt.com/rdpp/01-25/).
-
It’s not just mobile that’s defied our expectations. Since the launch of the iPad in 2010, we’ve seen the tablet market explode, with hardware vendors scrambling to capitalize on the massive popularity of Apple’s tablet. At 2011’s Consumer Electronics Show alone, there were over eighty new tablet PCs introduced (http://bkaprt.com/rdpp/01-26/).
More recently, there are signs that the tablet market’s starting to soften, with everyone from mobile analysts (http://bkaprt.com/rdpp/01-27/) to Best Buy’s CEO (http://bkaprt.com/rdpp/01-28/) suggesting that tablet sales are starting to flatten, if not declining outright.
-
2014 was the year Glass, Google’s face-mounted sneezeguard of a wearable computer, tried and failed to gain momentum (http://bkaprt.com/rdpp/01-29/). Even still, there’s considerable interest in predicting the next big post-desktop development, from internet-connected smart TVs to, more recently, smart watches.
Now personally, I’m skeptical of smart watches as a browsing environment. I’m sure that nobody’s going to want to interact with long documents on such tiny screens, and that these little devices are probably going to be more useful as notification hubs, connecting other nearby devices more effectively. But whenever I find myself cycling through those objections, I catch myself — because I used to say the same thing about phones. In fact, I was convinced nobody’d ever want to browse the web on a tiny mobile screen. And we already know how that turned out. In fact, many sites are already using wrist-based browsers to great effect (FIG 1.13).
In other words, it seems that whenever we start to figure the web out — even a little bit — the landscape shifts.
Although maybe it doesn’t so much shift as explode. Almost each month, hardware and software vendors introduce new interaction models for us to support in our designs (FIG 1.14). New devices and browsing contexts continue to appear faster than we can hope to keep up (FIG 1.15). And the network we use to browse the web, publish our work, and connect with our audiences is more widely accessed today than at any other point in the web’s short history. But with sub-3G connections comprising the overwhelming majority of mobile data subscriptions, that network is also far slower, more volatile, and less reliable than we might like to think (FIG 1.16). How can responsive design possibly keep up with all of this? More to the point: as responsive designers, how do we?
In this book, we’re going to try and answer those questions. While each of the next few chapters focuses on a specific challenge to responsive designers — navigation, images and video, and advertising — we won’t just be dissecting layout techniques and code snippets. (Though there will be plenty of that, I promise.) As we look at patterns, we’ll discuss why they work, their strengths, their weaknesses, and how you might refine them. In the final chapter, we’ll review what we’ve learned and see how we might stitch it together to build more flexible, lightweight layouts — and maybe become more flexible designers, too. If we do our job right, we’ll step out of the trees with a clearer view of where we’ve been and where we’re going next.
Let’s get started.