A List Apart

Menu

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.

  • Practical SVG

    ·

    “Sizing svg is more complicated than sizing an img,” writes Chris Coyier in this excerpt from his new A Book Apart title Practical SVG. But, he continues, it’s complicated in a good way—it gives us more control and opens up some interesting new possibilities. Read on.

  • Frameworks

    ·

    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

    ·

    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)

    ·

    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

    ·

    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

    ·

    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

    ·

    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

    ·

    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

    ·

    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?

    ·

    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

    ·

    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

    ·

    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”

    ·

    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?

  • Designing Offline-First Web Apps

    ·

    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.

  • Surveying the Big Screen

    ·

    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.

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

    ·

    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

    ·

    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

    ·

    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

    ·

    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

    ·

    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.