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.
Topic: Responsive Design
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?
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.
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.
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.
