As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must design for the unexpected by peering through the lenses of content-first and situation-first approaches. In doing so, you’ll ensure your designs are ready both for the paradigms of the present and the twists of the future, come what may.
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.
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.
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.
The Only Constant is Change: A Q&A with Ethan Marcotte
A new edition of Responsive Web Design is here. To celebrate, A List Apart’s editor-in-chief, Sara Wachter-Boettcher, sat down with author Ethan Marcotte to talk about what’s new—and what’s next.
