Going Responsive

Last night I finished up Karen McGrane’s latest book, Going Responsive and if you know people, especially bosses or CEOs who aren’t sure if going all in with responsive web design is for them, this is the book to give them. Karen brings together her years of working with companies helping them go responsive, along with the podcast interviews, and research she’s done, to make the definitive argument on why responsive web design is the right choice.

The first chapter hits you over the head (in a good way) again and again with research and testimonies to show why going responsive is the best solution and then she goes on to outline how to approach the project, talk about performance, content, collaboration, and finally how to test and measure if your site is meeting the goals you set.

As someone who is already fully on board with the benefits of going responsive, Karen’s book is a good reminder of all the reasons why. It’s also fantastic to have a resource with all the research brought together succinctly in one place. I particularly enjoyed the chapter on performance, it’s early on in the book, as it should be in the process of a redesign. Everyone needs to be on board with thinking about performance early on, not just developers, and Karen points that out and gives a lot of helpful ways to think about it for those not in charge of the code base.

If you are in a situation where you are desperately trying to convince people that responsive is a good idea, this is the book to give people to read and think about. When you read about how going responsive has helped companies such as Vox, Capital One, Fidelity, and Marriott, how can you not see its benefit for your organization, no matter the size.

I read the epub version of the book in iBooks on my trusty iPad mini, I’ve got page numbers here, but that’s so dependent on font sizing, etc that I’m not sure it helps, so I’ve broken things down by chapter as well.

Foreword

Yet again, a complexity offers us a new opportunity: by making things for others, we get to learn how to better work with each other. (p 6)

Introduction

Going responsive requires everyone—everyone!—to approach the design and development process with a new perspective. (p 8)

Responsive design can’t be implemented by hardworking designers and developers without support and buy-in from the rest of the organization. (p 10)

Chapter 1

The sheer diversity of new devices—with their endless variety of operating systems, form factors, input mechanisms, and functionality—means that we must let go of device-specific design decisions and take a more holistic view. (p 21)

The amount of time we spend on desktop or laptop computers (roughly two and a half hours per day) has remained consistent, even as mobile use has skyrocketed (p 22)

In fact, the only thing we can reliably know is the size of the browser window. That’s it! (p 32)

Rather than basing our decision-making and design processes on fragile or inaccurate assumptions about device types, responsive design ensures that the site will work on every screen size. (p 33)

Companies waste a lot of time trying to imagine how what a smartphone user wants differs from what a desktop user wants. Responsive design makes that decision a snap—just serve the same website to everyone. (p 34)

Industry-wide trends are one thing, but what if your company is different? It might be—but it probably isn’t. When companies across every industry look at their data, they find that people look for the same information and complete the same tasks on every size of device. (p 38)

Rather than wasting time debating how the needs of mobile and desktop users were different, Microsoft decided it would be faster and easier to deliver the same experience to everyone using responsive design. (p 39)

Given that budgets are tight, valuable resources should be spent on editorial processes and infrastructure upgrades that provide more value than device-specific targeting. (p 40)

Responsive design provides a foundation that allows anyone—anywhere, on any device—to do research and complete transactions. (p 42)

Users want and need the same information on every device they own. Responsive design is the simplest way to deliver the best experience. (p 45)

By shifting to a responsive design, a single unified team can work together to build a single website that serves everyone equally. (p 48)

This triad of arguments—dealing with device diversity, supporting user behavior across devices, and implementing unified development processes—can be summed up as a larger philosophical perspective: there is only One Web. The essence of the web is its fluidity and flexibility, and responsive design extends that core concept across different screen sizes and device types. (p 49)

Google recognizes that a responsive site can make link sharing easier for users and improve load time over the alternatives. Responsive also makes Google’s job easier, because they only need to crawl and index a single website. (p 53)

News flash: users have always spent most of their time on desktop computers using apps. And yet, no one ever found that cause for alarm—or an indication that the web is dead. (p 60)

Chapter 2

Along with designing and building a responsive website, many companies are tackling a wider set of problems that get bundled into a redesign (p 100)

Like any new methodology, there will be an initial cost associated with getting everyone up to speed—but over the long term, it won’t cost more or take more time. It will just be the way teams work. (p 101)

Doing a retrofit forced them to focus on the responsive aspects of the project without getting sidetracked by larger questions of redesigning the site, editing the content, or replatforming the CMS. For many websites, a retrofit also helps mitigate political concerns around changing or damaging the desktop experience, since it doesn’t change much. (p 106)

Trei Brundrett, Chief Product Officer at Vox Media, said, “A responsive design approach really wasn’t a design approach, it was an organizational approach to thinking and aligning everything else about how we worked and how we built things together.” (p 118)

Teams now must be encouraged—and incentivized—to build products that work across all devices. (p 120)

Many organizations privately report they had a tricky political situation to navigate, where responsive, app, and m-dot approaches stood as proxies for the professional future of leaders within the team. (p 120)

Collaboration and iteration—always a good idea—are at the very heart of a successful responsive redesign. (p 121)

…[T]he long-term success of responsive projects requires that your design and development teams all pull in the same direction. (p 121)

Teams report that going responsive makes them more collaborative, and the benefits of that last beyond this one initiative. (p 127)

Chapter 3

What happens after even a short delay? Users abandon the site outright, or they muddle onward, but conversion rates are low. (p 141)

But HTML, CSS, and scripts make up a small fraction of the total page weight. The real problem occurs when imperfectly implemented responsive design forces less-capable devices to download content that doesn’t get shown to the user. (p 152)

Rather than downloading and shrinking large images, optimize your image files or implement responsive images. Rather than downloading and hiding content, make sure less capable devices only download what they need. (p 154)

The biggest culprits behind bloated, heavy pages aren’t necessarily under your developers’ control. Performance suffers because stakeholders insist they must have everything but the kitchen sink on the website. Full-bleed images, giant carousels, web fonts, social widgets—each of these comes at a cost, and the user pays for it in download speed. (p 155)

Be honest: are you keeping everything on your website because you know it’s providing value? Or because you don’t want to have all the conversations you know you’d need to have with stakeholders to remove it? (p 157)

While developers have all sorts of techniques to optimize images, the first line of defense should be to ask yourself: do we need this image at all? Images are often merely decorative, advocated by designers or marketers who like the layout but haven’t considered the performance tradeoffs. (p 158)

Even though many third-party services promise fantastic conversion rate increases with “only one line of JavaScript!” the reality is that they slow your site down. If the increased conversion rate sounds too good to be true, it just might be. (p 168)

But the goal of setting a performance budget isn’t to mirror the exact performance metrics for the website—it’s to give stakeholders a way to focus on the aspects of performance that are within their control. (p 170)

Chapter 4

Remember, every website redesign must include at least one brainstorming exercise where you move some Post-it notes around on the wall. (p 190)

Chapter 5

Responsive is your best opportunity to fix the way people work together. You may never get a better chance to change your team dynamics. In fact, responsive will force you to work in new ways—whether you want to or not. (p 210)

Breakpoints are defined by the content—when line lengths get too long or whitespace becomes too big, designers decide to insert a breakpoint. (p 217)

Let the team use whatever tools and methods it needs to get to a functioning prototype. But stakeholders should be expected to provide feedback on the prototype, gently guided away from expecting static comps for every breakpoint. (p 223)

Some companies find that implementing a design system before going responsive means the responsive design process goes more quickly. (p 234)

Chapter 6

Responsive means adopting a new definition of support, one that aims to make sure the widest possible audience can use the website, without expecting every user will see the exact same thing. This new definition of support changes how teams think about testing, because rather than looking for pixel-perfect layouts on every platform and screen size, they’re focused on making sure users can complete their tasks—even if the presentation is different on different devices. (p 247)

Well-implemented responsive design should function on all devices…. (p 248)

Rather than wasting time on ensuring pixel-perfect layouts across devices—an activity that never resulted in much tangible business value—teams focus on building a site that works on every device. (p 250)

Basing your device lab on older devices gives a more accurate picture of real-world speed and battery life—and it means you can build your device lab inexpensively. (p 256)