Priority Guides: A Content-First Alternative to Wireframes

The sirens’ song of wireframe visuals has been the thorn in the side of many a design project. With potential to undermine user-centricity, reduce team engagement, and limit creativity when it’s most needed, wireframes can bite the unwary. In this article, Heleen van Nues and Lennart Overkamp discuss an alternative that’s far more in tune with today’s content-first, responsive design ethos, whether used as a direct replacement or to help tame wireframes’ wilder side early in a project’s life.

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.

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.

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.

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.