A List Apart


Topic: Responsive Design

The concept that launched a thousand site redesigns. For years, web designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Responsive design advocates that we shift our design thinking to make a virtue of these constraints. Using fluid grids, flexible images, and media queries to embrace the ebb and flow of the web.

  • Frameworks

    by Ethan Marcotte · Issue 434 ·

    As we’ve adopted responsive design—componentizing our interfaces, establishing breakpoints, and thinking content-out instead of canvas-in—we’ve learned that there’s more to it than just changing our techniques. We have to change the way we talk about (and act on) the principles of good responsive design. In this excerpt from Chapter 5 of his new book, Responsive Design: Patterns & Principles, Ethan Marcotte explores the philosophical and practical frameworks that can guide our responsive work.

  • Rolling Out Responsive

    by Karen McGrane · Issue 434 ·

    Every organization is different, with their own internal processes, stakeholder needs, and customer expectations—meaning that there's no one right way to approach a responsive redesign project. What’s right is what’s right for your company, as Karen McGrane explains in her new book, Going Responsive. This excerpt looks at the pros and cons to different responsive project approaches—from beta release to big reveal and everything in between—so you can figure out the best fit for your team.

  • Using Responsive Images (Now)

    by Chen Hui Jing · Issue 430 ·

    The rise of responsive web design sent designers and developers scrambling to figure out how best to deliver responsive images across a range of device widths. Thanks in large part to efforts by the Responsive Issues Community Group (RICG), we can now serve images of varying quality depending on the user’s viewport rather than on some convoluted server-side setup. Chen Hui Jing introduces us to the new image selection types and shows us how we can make them work for us.

  • Thinking Responsively: A Framework for Future Learning

    by Paul Robert Lloyd · Issue 427 ·

    Responsive web design changed everything about how we think and work on the web—and five years on, we’re still exploring the best ways to approach our practice. If we want a web that is truly universal, we must consider our users, our medium, and our teams in new, adaptable ways. Looking at where we’ve come from and where we’re going, Paul Robert Lloyd proposes a philosophical framework for our work on the responsive web.

  • Readable Wearables

    by Matt Griffin ·

    Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don't already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.

  • Live Font Interpolation on the Web

    by Andrew Johnson · Issue 412 ·

    We all want to design great typographic experiences—while serving users on a huge array of devices. But today’s type is inflexible and doesn’t scale. We can solve this problem by making webfonts more systemized and context-aware, and live web font interpolation—the modification of a font’s design in the browser—can help us get there. Andrew Johnson points the way.

  • Planning for Performance

    by Scott Jehl · Issue 409 ·

    We should build websites that are not merely responsive, but sustainable, globally accessible, and, well, responsible, as Scott Jehl suggests in his new book, Responsible Responsive Design. Our approaches to responsive websites need to consider ever-changing devices, limited networks, and unexpected contexts. In this excerpt from Chapter 3, Scott discusses page load times and the responsible delivery of code.

  • Responsive Images in Practice

    by Eric Portis · Issue 407 ·

    When we design responsively, our content elegantly and efficiently flows into any device. All of our content, that is, except images. For years, we’ve catered to users with the highest-resolution screens by sending giant images to everyone. No longer. Eric Portis takes us through the new picture element and other attributes to let us mark up multiple, alternate sources. Find out how to use responsive images now: send the best image for each context, cut down on page weight, and speed up performance.

  • Can Email Be Responsive?

    by Jason Rodriguez · Issue 395 ·

    Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile, with over 50 percent of email opens occurring on mobile devices. Still, email design is an outrageously outdated practice. (Remember coding before web standards became… standards?) But coding an email doesn’t need to be a lesson in frustration. While email designers still have to build layouts using tables and style them with HTML attributes and—gasp!—inline styles, a number of intrepid designers are taking modern techniques pioneered for the web and applying them to the archaic practice of email design. Jason Rodriguez shows how to apply the principles of responsive web design to the frustrating but essential realm of email design.

  • Look at the Big Picture

    by Lyza Danger Gardner ·

    It’s easy to see that automation can streamline image-optimization for all the varied contexts on the pan-device web. What’s harder to imagine is a future where foregrounding meaningful content in images can be handled by an algorithm. Art direction still requires human intervention, and that’s often a luxury in high-production environments.

  • Content-out Layout

    by Nathan Ford · Issue 392 ·

    Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. Designers can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen. Nathan Ford takes the next step toward more sophisticated, content-focused layouts on the web.

  • What We Mean When We Say “responsive”

    by Lyza Danger Gardner ·

    We keep using that word, “responsive,” but do we all mean the same thing by it? The debate continues, as it should, while the word in its web context works its way into our language. But by the time its meaning coalesces, will we even need it anymore?

  • Surveying the Big Screen

    by Mike Pick · Issue 386 ·

    We’ve been designing responsively for more than three years, now, and have the small-screen pattern libraries and portfolios to prove it. But what about larger screens? While we commonly use liquid design for smaller breakpoints, allowing our content to expand and contract as needed, few of us consider what happens beyond a maximum width of 960 pixels or so—which can leave a heap of unused pixels on a contemporary desktop display. Mike Pick explores how to use negative space, scale, density, and layout devices such as grids, modules, and columns to break through the 1024-pixel layout barrier.

  • Designing Offline-First Web Apps

    by Alex Feyerke · Issue 386 ·

    We assume our users are like us—with the latest devices, the most recent software, and the fastest connections. And while we may maintain a veritable zoo of older devices and browsers for testing, we spend most of our time building from the comfort of our modern, always-online desktop devices. But what happens when our users descend into the subway, board a plane, go to live in the country, or just happen to find themselves in the wrong corner of the room? The truth is, offline is a fact of life—but there are ways to design for it. Alex Feyerke tells all.

  • He Ain’t Snowfalling, He’s My Brother

    by David Sleight ·

    Not many newsrooms have the wherewithal to produce their own “Snow Fall,” and that, some say, dooms the NYT’s experiment to becoming a mere blip in the history of periodical web design. But it’s not all about per-article cost-effectiveness. The ambition that drives these efforts is exactly what the publishing business needs.

  • Client Relationships and the Multi-Device Web

    by Matt Griffin · Issue 379 ·

    When you step into the room with a client, you are a visitor from the future. You, web professional, spend your days immersed in the new paradigms of the multi-device web. Yet even for you, the constant change and adjustments that come with living on the internet can feel overwhelming. So how do you think your clients feel? It’s time to shed the vestigial mindsets we’ve inherited from the advertising world—the closed communications and drama of the “big reveal”—and build new systems based on honesty, inclusion, and genuine communication, says Matt Griffin. In this way, our clients will become true partners—rather than confused, anxious bystanders—as we learn to better navigate this strange, evolving digital universe together.

  • Summer Reading Issue

    by ALA Staff · Issue 378 ·

    Presenting the second annual ALA Summer Reading Issue—a deep pool of editor’s picks from the recent archives of A List Apart, sprinkled with some of our favorite outside links. This summer’s picks are arranged in clusters that echo the design process, and like all good summer reading, they travel light. (This issue is also available as a Readlist, suitable for reading on Kindle, iPhone, iPad, Readmill, or other ebook reader.) Dive in!

  • Designing for Breakpoints

    by Stephen Hay · Issue 376 ·

    Text, navigation, and tables, oh, my! What’s a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketch minor breakpoints? How should you think about content while sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.

  • Hack Your Maps

    by Young Hahn · Issue 373 ·

    Web maps have come a long way. A ubiquitous and critical component of many apps, they’ve also become one of the mobile space’s most successful transplants. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere. Yet nearly five years since Paul Smith’s landmark article, “Take Control of Your Maps,” web maps are still a blind spot for most web designers. It’s time to integrate maps into our designs in powerful, creative, progressively enhanced new ways. Young Hahn starts us on the journey to map mastery.

  • Font Hinting and the Future of Responsive Typography

    by Nick Sherman ·

    Font hinting has been the source of countless headaches for type designers and users. In the meantime, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. Rather than being seen as a tedious chore whose demise will be celebrated, hinting might actually provide the essentials for truly responsive design, and vastly expand the possibilities of digital typography for designers, publishers, and readers.